목록오늘의 오류 (7)

삐옹

Socket.io 트러블 슈팅 #1

상황 채팅 목록에서 팀원의 프로필을 클릭 시 채팅 방으로의 join과 leave 이벤트가 모두 이루어져야했다. 문제 클릭했을 때 join과 leave가 하나의 함수 안에서 함께 쓸 수 있는가? (어떻게 떠남과 들어옴을 같이하지..?) 함께 쓰일 수 있다면 어떤 제한을 걸어주어야 하는걸까? 해결 역시 스택오버플로우 너무너무 좋은 인사이트를 얻었다.! moveRoom 이라는 함수를 만들어서 이동 전의 방이름 from과 이동 후의 방이름 to을 인자로 받아서 leave이벤트와 join이벤트에 담아 보내주면 되는 것 이었다. 그런데! 맨 처음 입장을 하게되면 oldRoom 이라는건 당연히 없다 그 상태에서 분명 에러가 날 것이라며 혼자 쉐도우 복싱을 해댔는데, 결론은 없어도 아무 문제없었다. // 입장 + 퇴장..
오늘의 오류 2022. 7. 22. 07:28
useState에 의해 갱신 객체가 제대로 합쳐지지 않는 오류

무엇이 문제인가? 서버로부터 데이터 리스트를 받아와 성공 처리로 3가지 카테고리로 나누어 각각의 state에 갱신했다. 그러면 각각의 저장된 state값을 화면에 map을 돌려 뿌려주면 되는 상황. 문제가 발생한 이유는 무엇인가? useEffect에 의해 첫 마운트 후 데이터 리스트를 받아와 map안에 switch문을 돌려 미리 만들어놓은 각 카테고리 state 별로 갱신해주었다. 데이터 리스트에는 내가 생성한 23개의 데이터가 분명 쌓여있는데.. 새로 고침을 눌러도 분명 잘 남아있는데.. 각 카테고리 state에는 가장 최근에 추가한 데이터 단 한개만 들어온다. 그래서 화면에는 초라하게도 1개의 데이터만이 보인다. 시도해 본 것 데이터 생성 후 새로고침하면 데이터 갯수가 1개 추가되어 있는가? ✅ 데이..
오늘의 오류 2022. 7. 20. 04:16
useEffect + setState 무한 요청 제발 그만

어떤 문제점을 겪었는가? POST 요청으로 게시글을 추가하고, useEffect를 이용해 게시글 목록을 가져오는 GET 요청에서 무한 요청이 걸렸다. 좀더 두면 노트북이 터져버릴 것 같아 서둘러 브라우저를 닫아버렸다. 왜 이런 문제가 발생했는가? POST요청 const [allBoard, setAllBoard] = useState([]); ... // board 생성 const handleSubmit = (e) => { e.preventDefault(); axios({ method: "post", url: "http://54.180.29.68/api/post", data: data, headers: { Authorization: `Bearer ${getItemFromLs("myToken")}`, }, }..
오늘의 오류 2022. 7. 18. 22:00
네아(네이버아이디)로 로그인하는 과정 한눈에 보자

처음에 네아? 네아가 뭐지? 했는데 네이버아이디 줄임말??;; 별다줄.. 각설하고 구현 코드보단 소셜로그인이 어떻게 이루어지게 되는지에 관한 전체 그림을 이해하기 위한 목적으로 포스팅을 해보겠다. 한줄 정리 (클라) 로그인 -> 콜백url로 이동 -> 인가 코드 받기 (서버)-> 인가 코드 서버에 전달 -> 엑세스 토큰 요청 (네이버)-> 엑세스 토큰 반환 -> 서버로 엑세스 토큰 보내주기 (서버)-> 클라로 엑세스 토큰 보내주기 (클라)-> 엑세스 토큰 브라우저에 저장
오늘의 오류 2022. 7. 4. 01:50
[Error #3]버킷리스트 추가하기 버튼을 눌러도 빈 태그만 반환 될 때

증상 잘 작동하던 추가하기 버튼이, 버킷리스트의 이행여부를 체크할 수 있도록 Redux의 initialState에 completed 키값을 추가해준 뒤부터 버튼을 누르면빈 태그만 반환하기 시작 해결방법 click이벤트 발생한 태그 확인 click이벤트 함수 : useRef로 접근한 value값이 문제일까 싶어 콘솔을 찍어보았더니 current객체에 value가 잘 받아와진다. bucket.js(Redux파일) 내 createBucket 함수 : value값도 잘 넘어오고 action객체를 생성하는 코드에도 이상은 없다. 여기까지 문제가 없었다는건 분명 reducer에서 문제가 난거라고 확신했다. reducer 안에서 type이 create인 객체 [X] action 타입이 "bucket/CREATE"가 ..
오늘의 오류 2022. 5. 31. 16:05
[Error #2] 일주일 평점 남기기 undefined를 곁들인

상황 props로 넘겨준 요일들이 자식으로 하나씩 잘 넘어가 화면에 오늘부터 일주일 간의 요일이 뜨면 완성인데 왠걸 요일도 없는 평점, 버튼 UI 끝 자리를 차지하고 있다. props로 넘겨줄 데이터가 부모 컴포넌트에서 제대로 찍히는가?[o] props로 받은 데이터가 자식 컴포넌트에서 제대로 받았는가?[x] -> 갑분언? 갑자기 분위기 undefined란 뜻임. 해결 대체 저 undefined가 뭘까 고민을 해보았다. 개발자도구에 들어가 element를 살펴보니 감싸준 div의 밖에 있다고 나온다. 그렇다면 div 태그 아래에서 문제가 났음에 틀림없었다. div 태그 아래에 있는건 Route 2개 뿐이다. // 실패 return( 내 일주일은? {DayList.map((day, idx) => )} ) ..
오늘의 오류 2022. 5. 25. 00:04
[Error #1]'React Hook useEffect has missing dependencies' 에러

상황 1~5까지의 랜덤한 숫자를 출력한 뒤, false 5개로 이루어진 배열의 첫 인덱스 부터 랜덤한 숫자의 인덱스까지, 순차적으로 true로 바꾸는 로직을 useEffect에 넣으니 렌더링 후 state가 true인 요소에 조건부 스타일링이 잘 들어갔다. 그런데 찝찝한 경고문구가 하나뜬다. WARNING! useEffect에 dependency를 빠뜨렸습니다.😛 음.. 일단 전체 코드로 시작. 전체 코드 const Home = ({day}) => { const [filled, setFilled] = React.useState([false, false, false, false, false]); let history = useHistory(); const randomNum = Math.floor(Math...
오늘의 오류 2022. 5. 24. 22:04
이전 Prev 1 Next 다음