리액트

프론트엔드가 백엔드와 실시간으로 통신할 때 소켓 통신을 사용한다. > 백엔드 : Node.js -> 주로 socket.io를 사용 백엔드 프레임워크 : 스프링 -> 주로 sockjs + stomp 사용 이번 포스팅에서 프론트엔드는 리액트, 백엔드는 node를 사용

redux의 단점 redux의 store는 매우 복잡하다. redux를 유용하게 사용하기 위해 매우 많은 패키지 설치가 필요하다. 리덕스는 매우 많은 보일러 플레이트 코드를 필요로 한다. > redux-toolkit(RTK)는 이러한 문제점을 개선시켰다. redu

프로젝트를 여러 명이서 진행하거나 가독성 좋은 코드를 위해 코딩 컨벤션을 지켜야한다.해당 포스팅에서는 vite로 react 프로젝트를 만들어서 다음과 같은 초기 세팅을 진행할 예정이다.eslintprettier절대 경로huskyvite 프로젝트를 생성한다.

프론트엔드 개발자로 프로젝트를 진행하면서 api가 만들어지지 않아 dummy 데이터를 만들거나 개발을 멈췄던 경험 한번씩 있을 것이다. 나 또한 그랬던 적이 있다. 상황 나는 게시글 목록을 api로 불러와서 화면에 게시글 목록을 그리는 페이지를 만들고 있었다.

프로젝트를 시작하기전 항상 상태 관리 도구를 무엇을 쓸까?를 고민한다. 최근 프로젝트에서는 전역으로 관리할 상태가 거의 없으므로 리액트에서 제공하는 **Context API**를 사용하기로 했다. 이 때 까지만해도 Context가 상태 관리 도구인줄 알았으나 Con

2023년 부스트캠프에서 방탈출 프로젝트를 진행할 때 단체 채팅방 기능을 넣기로 했다. 프로젝트는 부스트캠프 8기 Lock Festival 에서 확인할 수 있다. 처음 채팅 기능을 생각할 때 단순히 채팅만 주고받는 스펙은 간단하기 때문에 조금 더 심화적으로 생각할

채팅방에서 읽지 않은 인원 수 계산하기-1와 이어집니다. 앞의 게시글에서 각 채팅에 대해 읽지 않은 인원 수를 계산하는 아이디어를 떠올렸다. 이제 백엔드에서 어떻게 프론트에게 값을 넘겨주는지 확인하겠다.(백엔드 부분은 내가 작성한 로직이 아니라 간단히 설명하겠다.)