react18 [웹챗] 리액트 컴포넌트 구조 및 소켓 서버 초기 설정 프론트엔드 지난번 프론트 엔드의 경우 app.tsx 즉 애플리케이션 라우트까지 진행을 마쳤다. 이번 작업의 경우 기본적인 DOM 레이아웃과 컴포넌트 구조를 잡는 선까지 작업을 진행했으며, 당연히 간단한 테스트 코드를 먼저 작성하는 방식(TDD)으로 진행했다. (TDD를 따로 정리해서 포스팅해야 할 필요성이 있긴 한 거 같다. 정의 내리기 힘들다.) 스타일의 경우 채팅창 소켓 통신에 대해서 어느 정도 구현을 마친 후 기획에 따라서 구현하기로 정했기에 비교적 간단한 작업이었다. 작업에는 총 8 커밋이 소요되었다. 먼저 지난번의 임시로 구현해놓은 '/' 라우트 부분을 pages/main.tsx로 분리했고 main에 기획한 레이아웃인 header, main, footer 구조를 만든 후 해당 부분을 따로 com.. 2021. 11. 18. [웹챗] 프론트 ENTRY 구성 및 벡엔드 repo 생성 프로젝트 Repo https://github.com/yoonjonglyu/webChat GitHub - yoonjonglyu/webChat: 간단한 채팅 웹 간단한 채팅 웹. Contribute to yoonjonglyu/webChat development by creating an account on GitHub. github.com 기본적인 환경 설정은 끝났고 react와 recoil를 통한 번들링 entry와 앱의 시작점이 될 app entry를 만들어줘야 한다. 크게 거창하게 할 것은 없고 보편적으로 나누는 방법대로 index.tsx와 app.tsx로 나누어서 세팅했다. index.tsx 코드 import React from 'react'; import ReactDOM from 'react-dom.. 2021. 11. 17. 이전 1 2 3 4 5 다음
