Je개발 일지

async await 걸어주는 상황 명확하게 분석할 것 컨트롤러를 만지는 도중에 발생한 에러다. [ERR_HTTP_INVALID_STATUS_CODE]: Invalid status code: undefined 이런 에러가 발생했다. 우리는 현재 객체에다가 status code 를 넣어주고 그 객체의 값을 이용해서 response 를 보내주고 있는 상황이다. 그런데 이 resObject 가 생성되기도 전에 res 를 보내는 사태가 발생한 것이다 알고보니 이전에는 잘 들어가 있던 async await 구문이 사라져서 이런 에러가 발생한 것이었다. 왜 갑자기 사라졌는지를 추적해본 결과 cmd + z 를 너무 많이 돌린 탓에 발생한 문제였다. 적당히 되돌려.... 너무 많이 가지 말고

세상에? 오늘은 따로 에러가 발생하지 않았고 그냥 채팅 페이지의 디테일적인 부분만을 살리고 있었다. 에러가 안 나니까 뭐가 이상하다. 오히려 에러가 안 나는게 왜 안 나는지 궁금해졌다. 팀원분들에게 제발 에러 좀 발견해달라고 부탁드렸다. 뭔가 내가 에러를 못 찾고 있는 느낌이 강하게 들고 있다. 이정도면 병이라고 하던데...

밑의 에러가 해결한 후의 모습. 너무나 감격적이었다 같은 socket.id 로 다른 룸에서 전달되는 메시지를 안 받을 수 있다 내가 A 라는 유저라 하자. 이전에 발생했던 문제는 A 가 B와 채팅하는 방에서 C가 보내는 문자가 들어오는 것이었다. 이 문제를 해결하기 위해서 내가 썼던 방법은 socket 연결이 되는 방은 오직 A 가 현재 들어가 있는 채팅방으로 한정해놓는 것이다. 그러니까 다른 방으로 넘어가게 되면 이전 방과의 socket 연결을 끊어 버리고 새로 넘어가는 방만 socekt 연결을 한다. 이렇게 하니까 위에서 언급한 문제는 해결됐다. 하지만 이 에러 핸들링이 문제가 된 것은 내가 Advanced 로 기획했던 실시간으로 안 읽은 메시지 알림창을 띄울 때 발생했다. 실시간으로 채팅방에서 안 ..

로그아웃일 때만 해주지 않고 현재 페이지를 벗어날 때 소켓 연결을 끊기 소켓 아이디가 중복으로 계속 생성되는 문제를 방지하기 위해서 내가 했던 작업은 만약, 유저가 로그아웃을 누르게 될 경우 연결을 disconnect 옵션을 통해 끊어버리도록 코드를 작성했다. 하지만, 이렇게 하니 문제점이 하나가 더 있었다. 네비게이션 바를 이용해 채팅 페이지가 아닌 다른 페이지로 넘어갔다가 다시 들어오는 경우, 또 중복해서 소켓 아이디가 생성된다는 점이었다. 이를 해결하기 위한 방법으로 가장 먼저 생각했던 것은, 너무나도 무식한 방법이었다. 지금 우리 코드 상에서 NavBar 는 app.jsx 에 있는데 여기 app.jsx 에 있는 navBar 컴포넌트를 '/chat' 일 때는 나타나지 않게 하고 chattingpag..

한 채팅방에서 여러 메시지를 수신하는 건 Socket.io 연결을 끊지 않아서 이 문제였다. 이거였다. 나는 채팅 페이지에 입장하면 io.connect 를 진행했다. 그런데 문제는 로그아웃을 했을 때, 이 connect 가 끝나지 않는 문제였다. 로그아웃을 했음에도 이 id 가 여전히 남아 있다. 그렇기에 새롭게 로그인을 하고 채팅 페이지에 들어가면 저렇게 socket 아이디가 계속 누적돼서 생성되는 것이다. 만약, 유저가 위에서처럼 room 2번 방에 입장한다고 했을 때, 처음 채팅 페이지에 들어갔을 때의 소켓 아이디도 해당 방에 들어가 있고, 로그아웃을 하고 다시 로그인 한 다음에 입장을 하면 그 때 새롭게 만들어진 소켓 아이디로 입장을 하니 계속해서 누적되는 것이다. 이것을 해결해주기 위해 로그인이..

데이터베이스에 JSON 형태로 넣기 io.to 가 안됐던 이유 채팅방의 내용이 새롭게 갱신되지 못했던 이유 어제 해결은 했는데, redux 로 상태를 바꿔주니 바로 해결이 됐다.

괜히 크루님이 상태 관리 잘해야한다고 당부한 게 아니었다.

정책을 더 생성할 것 코드 스테이츠에서는 S3 GetObject 정책만을 사용했다. 구글링을 오래 해본 결과, GetObject 뿐만 아니라 Put, DeleteObject 와 관련된 정책도 생성할 수 있다는 사실을 발견했다. 처음 팀원 분께서 이 에러를 들고 오셨을 때 배포에 대해서 코드 스테이츠가 가르쳐준 것 이외에는 잘 알지 못해 해결할 수 있을까 싶었으나 구글링을 열심히 한 덕분에 에러를 해결할 수 있었다. 잊지 말자 코드 스테이츠에서는 가장 기본적인 것만을 가르쳤을 뿐, 이 다음으로 나아가는 건 나의 몫이다. 코드 스테이츠에서 당연하게 하라고 했던 것들에 의심을 품고 과연 원리 동작이 어떻게 되는지를 파헤쳐 보자.

- 오늘은 socket test 를 진행했다. - connect 를 사용해 socket 연결을 진행해봤다 - useRef 를 사용했다. - 한 가지 아쉬운 점이 있다면 서버쪽에서 index.js 에서 io 와 관련된 코드까지 작성하려고 했던 점이다 - 모듈화로 파일을 따로 만들어서 하고 싶은데 나중에 리팩토링을 하게 되면 파일을 따로 만들어야겠다. - 지금은 기능 구현을 빠르게 해내는 것에만 초점을 맞추고자 한다 - 일단 통신은 잘 되고, socket 도 잘 연결됐다. - transports 로 websocket 을 해주었다. - 기존의 방식은 polling 이다. 이렇게 할 경우 비효율적인 네트워크 요청이 오고 간다 - 그러나, IE 는 서비스를 종료했고 Websocket 이 모든 브라우저를 지원하게 ..

- 토이 프로젝트를 진행했다 - 노마드 코더의 강의는 바닐라 자바스크립트와 pug 를 이용했다. - 이걸 React 로 옮기는 작업을 했다. - React 에서는 따로 socket.io-client 모듈도 제공하고 있다 (유튜브 강의를 보면서 학습) - 유튜브에서 본 내용 그대로를 따라가려고 노력했으나 갑자기 이상한 곳에서 막히기도 했다 - connect 가 잘 되지 않았는데, useRef 를 사용해주니 다시 잘 연결됐다.