본문 바로가기
728x90
반응형

JavaScript25

[JS/오류해결] POST request status가 canceled일 때 문제 상황 회원가입 페이지에서 이메일과 비밀번호를 작성하고 회원가입 버튼을 클릭했을 때 크롬에서 response를 받지 못하는 문제점이 있었다. 이메일과 비밀번호는 input으로 작성되었고, 회원가입 버튼은 button으로 작성했다. 그리고 3개의 HTML 엘리먼트는 form으로 감싸주었다. response를 받지 못하는 이슈를 확인하기 위해, 개발자 도구의 network 탭을 확인해봤다. 여기서 status가 canceled인 것을 확인할 수 있었다. 참고로 postman에서는 통신이 잘 되는 것을 확인한 상태이다. 해결방법 이유는 form 태그 안에서 만든 회원가입 button 때문이였다. 안의 은 default 속성으로 submit 타입을 갖고 있다. 그래서 버튼을 누를 때마다 POST reques.. 2023. 4. 5.
[JS] 배열에 있는 값을 객체로 만드는 법(키:배열의 값, 값:해당 값의 개수) 배열에 있는 값을 객체로 만들고 싶었다. 키는 배열의 값으로, 키에 할당되는 값은 해당 값의 개수로 말이다. 예를 들어, [1, 3, 2, 5, 4, 5, 2, 3] 가 주어졌을 때, { '1': 1, '2': 2, '3': 2, '4': 1, '5': 2 } 이러한 객체로 만들고 싶었다. 가장 많이 사용하는 방법과 한 줄의 코드로 간편하게 작성하는 방법 2가지를 가져왔다. 방법1 let tangerine = [1, 3, 2, 5, 4, 5, 2, 3]; let obj = {}; for (let i = 0; i < tangerine.length; i++) { let el = tangerine[i]; if (obj.hasOwnProperty(el)) obj[el] += 1; else obj[el] = 1;.. 2023. 3. 28.
[eslint 오류] jsx-a11y/no-static-element-interactions 코드를 커밋하려고 하니깐 아래와 같은 오류를 만났다. jsx-a11y/no-static-element-interactions 당황 금지!!! error는 꺼주면 된다. warn으로 변경해주었다. // .eslintrc.js rules: { 'jsx-a11y/no-static-element-interactions': 'warn', } 해당 오류는 왜 나는 걸까? div한테 마우스 또는 키보드 이벤트 리스너가 있을 때 발생되는 문제이다. div를 쓰지 않고 코드를 구현하는 방법이나 위의 방법처럼 warn으로 error를 꺼주는 방법이 있을 것 같다. 코드 상황마다 다를텐데 나는 div를 사용해야 해서 eslint 파일을 수정했다. 참고자료 https://stackoverflow.com/questions/42.. 2023. 3. 17.
[JS] Promise에서 PromiseResult 데이터 꺼내는 법 아래와 같은 결과값에서 Promise의 PromiseResult 데이터만 가져오고 싶은데 그게 잘 되지 않았다. Promise 데이터를 추출하는데에는 2가지 방법이 있다. 1. then을 사용하는 방법 이 방법은 꼭 then 안에서만 사용이 가능하기 때문에 밖에서 사용할 수 없다. 거의 데이터를 밖으로 가져와 사용하기 때문에 2번 방법을 사용하면 된다. 2. await을 사용하는 방법 async render() { const response = await fetch('./src/data.json'); if (response.ok) { const fetchedData = await response.json(); } } await을 두 번(?) 사용해야 한다는 점을 기억하자! 참고자료 tistory 2023. 3. 8.
[JS] map을 사용했을 때 의도치 않은 쉼표(,)가 출력되는 경우 map을 사용할 때 아래 사진처럼 의도하지 않은 쉼표가 출력되는 것을 확인할 수 있다. 이를 해결하는 방법은 매우 간단하다. map 함수 뒤에 join("")을 해주면 된다. 근데 왜 의도하지 않은 쉼표가 출력되는 걸까? 그 이유는 map 함수는 문자열 형태로 값을 리턴할 때 기본적으로 쉼표로 묶어서 리턴하기 때문이다. 질문이나 잘못된 점은 댓글로 남겨주세요 :)💖 2023. 3. 7.
728x90
반응형

티스토리툴바