Dani's Dev TokTok

들어가며 리팩토링 하기 전의 채팅방 기능에는 누군가가 모임에 들어갔을 때, 즉 채팅방에 입장했을 때 입장했다는 메시지가 없었다.이런식으로 누군가가 들어왔음에도 어떤 사람이 입장했는 지에 대한 메시지가 없었다.사용자 경험을 개선하기 위해 입/퇴장 메시지를 표시하는 것으로 리팩토링을 했다. 리팩토링 과정 이 프로젝트에서는 특정 모임을 생성하면 그 모임에 대한 채팅방이 열리고,누군가가 모임을 가입했을 때 채팅방에 입장하는 구조였다. 그러므로 입/퇴장 메시지를 받기 위해서는 누군가가 모임을 가입/탈퇴 했다는 정보가 필요했다.즉, 사용자가 보내는 메시지가 아니라 일종의 시스템? 메시지를 받아 올 수 있도록 서버에서부터 코드를 고쳐야 했다.담당 백엔드 분과 대화해서 그렇게 할 수 있도록 서버 쪽 코드를 고쳤다. 고..

1. 문제 발생기존에 특정 채팅방에 접속했을 때, 소켓이 열리도록 한 로직을접속해있지 않은 채팅방의 메시지도 실시간으로 업데이트 하기 위해 웹소켓을 여는 로직을 커스텀 훅으로 만들어서채팅 목록 페이지에 접근했을 때 소켓이 열리도록 로직을 수정했다.그 과정에서 특정 채팅방(A) 를 나가서 다른 채팅방 (B)를 옮겨갔음에도 B 채팅방에 보낸 메시지가 A 채팅방에도 전달되는 버그가 있었다.2. 원인 추론위에서 언급했다시피 기존에 특정 채팅방에 접속해야 열리는 소켓을 커스텀 훅으로 만들어서 따로 파일을 만들었다. 아래는 변경하기 전 코드의 일부다.onConnect 내의 로직을 변경했다. 기존에는 특정 채팅방에 대한 구독만 했기 때문에 그냥 chatroomId을 redux 의 state에서 받아왔다.  cons..

이전에 했던 하이볼 레시피 공유 사이트는 node.js 서버와 템플릿 엔진은 ejs 를 사용했다. 실제로 프론트엔드에서 ejs를 쓰기보다는 리액트같은 라이브러리를 많이 사용하기 때문에그것에 맞춰서 리팩토링을 하고자 한다. 이것을 리액트로 할까 vue.js 로 할까 고민을 많이 했는데SEO 을 고려해서 SSR 을 가능하게 해주고, 요즘 많은 기업에서 요구하고 있는 Next.js 를 사용하기로 했다. 아직 Next.js 에 대해서 자세히 배우지는 않아서 일단 배운 다음에 천천히 적용시켜볼 예정이다!

1. 발표 후 받았던 피드백 이번에도 피가 되고 살이 되는 피드백을 받았다.2차 프로젝트를 하면서도 느꼈지만 내 눈에 부족한 부분은 다른 사람 눈에도 그렇게 보인다는 거였다.UI 디테일에서 아쉬움을 표하셨는데, 나도 똑같이 느낀 부분이라 마음이 좋지 않았다.그리고 내가 맡은 부분에서 찝찝함을 느꼈던 부분까지 콕 찝어 주셔서 다시 한 번 반성하게 되었다. 피드백을 받았던 것을 바탕으로 프론트 담당 팀원들과 조금 회의를 했다.전반적으로 디테일을 올리는 방향으로 리팩토링을 하자고 이야기를 했다. 그래도 다른 팀원분들이 응 나 플젝 끝~ 안녕~ 이런 마음이 아니라퀄리티를 끌어올리려고 하는 열정을 보이셔서 참 좋은 팀원들을 만났다 싶었다.  2. 파이널 프로젝트 소감이번에도 3주란 시간동안 프로젝트를 하게 되었는..

들어가며Zustand 는 독일어로 '상태(state)' 라는 뜻을 가진 라이브러리다. 아래의 특징을 가지고 있다.특정 라이브러리에 엮이지 않는다. (그래도 React와 함께 쓸 수 있는 API는 기본적으로 제공한다.)한 개의 중앙에 집중된 형식의 스토어 구조를 활용하면서, 상태를 정의하고 사용하는 방법이 단순하다.Context API를 사용할 때와 달리 상태 변경 시 불필요한 리랜더링을 일으키지 않도록 제어하기 쉽다.React에 직접적으로 의존하지 않기 때문에 자주 바뀌는 상태를 직접 제어할 수 있는 방법도 제공한다. (Transient Update라고 한다.)동작을 이해하기 위해 알아야 하는 코드 양이 아주 적다. 핵심 로직의 코드 줄 수가 약 42줄밖에 되지 않는다. (VanillaJS 기준)Redu..

오늘은 길지만 짧았던 6개월 간의 웹 개발자 부트캠프 과정을 마치는 날 입니다,얻은 것도 많지만 그만큼 아쉬움도 많았던 6개월 이었습니다.더 자세한 내용은 이따 집에 가서 써야겠습니당...

1. 문제 발생프로젝트를 배포하고 나서 채팅 테스트를 하는데 실시간 채팅에서서로 동시에 채팅을 하고 있음에도상대방 메시지 수신 시간과 나의 메시지 송신 시간이 일치하지 않은 현상이 있었다.(로컬에서는 생기지 않았던 문제!! ㅠㅠ)분명 RDS 에는 한국 기준 보낸 시간으로 잘 저장이 되는데 수신할때나, DB 에서 불러올 때는 시간이 이상하게 변해있었다. (나중에 알고보니 UTC 시간으로 변환되서 오던 것이었다.) 2. 원인 추론로컬에서는 저 현상이 없었어서 혹시나 rds 에 저장되어 있는 시간이 이상한걸까? 싶어서백엔드 담당분께 rds 에 시간이 어떻게 저장되어 있는지 여쭤봤다 그러나..한국 기준 시간으로 이쁘게 잘 저장되어 있었다.그래서 처음에는 내가 시간 로직을 이상하게 한걸까? 싶어서 로컬에서 엄청 ..

이전 프로젝트에서 리액트 쿼리를 쓰지 않고 무한 스크롤을 구현했는데리액트 쿼리를 쓰면 더 쉽게 구현할 수 있다고 한다.나중에 수정 예정 참고 영상https://youtu.be/3Gch9RBD7-g?si=UcKD09tyrpmBeGYz

들어가며웹 소켓을 공부하다보면 TCP 라는 단어를 많이 봤다.웹 소켓 뿐만 아니라 프로그래밍을 공부하는 사람들은 TCP/UDP 라는 단어를 본다TCP/UDP 가 뭔지 알아보자 TCP 와 UDP TCP 와 UDP 는 네트워크 계층의 전송 계층에서 사용하는 프로토콜이다.전송 계층은 신뢰성 있는 데이터를 전송하기 위한 계층으로, 데이터의 신뢰성을 보장하며, 포트 번호로 데이터를 적절한 응용 프로그램에 전달하는 역할을 한다.TCPTCP 는 패킷 사이의 순서를 보장하고 연결지향 프로토콜을 사용해서 연결을 하여신뢰성을 구축해서 수신 여부를 확인하며 '가상회선 패킷 교환 방식'을 사용한다.연결형 서비스를 지원하고 데이터의 신뢰성을 보장한다.TCP는 아래와 같은 특징이 있다.송신부와 수신부의 연결을 확인하는 연결형 서..

들어가며이번 프로젝트에서 실시간 채팅을 구현하기 위해 웹소켓을 썼지만 정확히 어떤 것이고 어떤 원리로 동작하는지에 대해 잘 안다고 할 수 없다.이왕 썼으니 원리에 대해서 잘 알아보려고 한다. 웹 소켓(Web Socket)이란?웹 소켓은 양방향 통신을 위한 프로토콜(약속) 이다.주로 웹 서버와 웹 브라우저가 실시간으로 메시지를 주고받을 때 사용한다. HTTP 통신은 클라이언트가 서버에 요청을 보내고, 서버가 응답하는 통신을 따른다.보통 작업에는 문제가 없지만, 채팅과 같이 실시간으로 데이터를 주고받는 것에서는 트래픽을 불필요하게 증가시키고,서버의 비용을 증가시키며 요청과 응답사이에 지연시간이 있어서 실시간 통신의 효율성을 저하시킬 수 있다. 이런 상황을 해결하기 위해 나온 것이 웹 소켓이다.웹 소켓은 HT..