[웹챗] 리액트 컴포넌트 구조 및 소켓 서버 초기 설정

프론트엔드

지난번 프론트 엔드의 경우 app.tsx 즉 애플리케이션 라우트까지 진행을 마쳤다. 이번 작업의 경우 기본적인 DOM 레이아웃과 컴포넌트 구조를 잡는 선까지 작업을 진행했으며, 당연히 간단한 테스트 코드를 먼저 작성하는 방식(TDD)으로 진행했다.
(TDD를 따로 정리해서 포스팅해야 할 필요성이 있긴 한 거 같다. 정의 내리기 힘들다.)

커밋 내역

스타일의 경우 채팅창 소켓 통신에 대해서 어느 정도 구현을 마친 후 기획에 따라서 구현하기로 정했기에 비교적 간단한 작업이었다. 작업에는 총 8 커밋이 소요되었다.
먼저 지난번의 임시로 구현해놓은 '/' 라우트 부분을 pages/main.tsx로 분리했고 main에 기획한 레이아웃인 header, main, footer 구조를 만든 후 해당 부분을 따로 components/layout.tsx 컴포넌트로 분리했다.

main 페이지 컴포넌트

header에는 간단한 로고만 넣고 footer에는 라이선스에 관한 부분 정도만 표시할 생각이고 추후에 추가할 다크 모드나, 기타 설정의 경우 main부분의 사이드 메뉴로 넣을 예정이라서 현재 레이아웃 구조 자체는 크게 변하지 않을 예정이다.

layout 컴포넌트

추가로 채팅의 경우 추후에 따로 모듈화를 해야 하기에 따로 chat 폴더에 webchat.tsx로 컴포넌트 구조를 잡았다. 작업 과정에서 해당 컴포넌트를 main 페이지에 바인딩하는 과정에서 layout 컴포넌트의 children 타입을 reactChild로 잡았더니 여러 컴포넌트를 따로 wrap 해줘야 하는 타입 추론 오류가 발생하길래 늘 쓰던 ReactNode 타입으로 변경해준 게 유일한 이슈였다.

벡엔드

벡엔드의 경우 nestjs 공식문서를 한국어로 번역해둔 문서를 한번 훑어본 후 공식문서에서 안내하는 nest-cli를 통해서 기본 세팅을 진행했다. (번역된 문서의 경우 공식문서의 내용에서 빠트린 부분이 일부 있으니 영문 문서를 보길 추천한다.) 셋팅 자체는 별다른 내용이 없었고 구조에 대해서 공부를 해야 할 필요성을 조금 느끼긴 했다. 기존 개발 방식과 조금 많이 다르긴 하더라 소켓 게이트웨이에 관한 내용 역시 자세히 설명되어 있긴 했으나 공식문서 만으로는 조금 부족함을 느껴서 추가적인 자료를 서칭 해서 간단한 소켓 게이트웨이까지 만들어 둔 게 끝이다. 사실 별 내용이 없을 수밖에 없다. 아직 프론트쪽 메시지 이벤트 로직을 구현 안했기에 벡엔드에서 할 수 있는게 없으니까 그래도 개인적으로 흥미가 생겨서 조금 공부를 해볼 예정이다. 아키텍쳐 구조가 잘 짜여져 있어서 공부하면 얻는 점이 꽤 있을거 같다.

프론트 Repo
https://github.com/yoonjonglyu/webChat

GitHub - yoonjonglyu/webChat: 간단한 채팅 웹

벡엔드 Repo
https://github.com/yoonjonglyu/webChat-server

GitHub - yoonjonglyu/webChat-server: webchat, socket.io, nest.js, 채팅서버

https://docs.nestjs.kr/

네스트JS 한국어 매뉴얼 사이트