[웹챗] 프론트 ENTRY 구성 및 벡엔드 repo 생성

프로젝트 Repo
https://github.com/yoonjonglyu/webChat

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

기본적인 환경 설정은 끝났고 react와 recoil를 통한 번들링 entry와 앱의 시작점이 될 app entry를 만들어줘야 한다. 크게 거창하게 할 것은 없고 보편적으로 나누는 방법대로 index.tsx와 app.tsx로 나누어서 세팅했다.

index.tsx 코드

import React from 'react';
import ReactDOM from 'react-dom';
import { RecoilRoot } from 'recoil';

import App from './app';

function render(App: React.FC) {
    ReactDOM.render(
        <RecoilRoot>
            <App />
        </RecoilRoot>,
        document.querySelector('#app')
    );
}

render(App);

app.tsx이 사실상 웹앱 entry에 해당하므로 jest를 통한 간단한 test코드를 먼저 작성하고 그를 기반으로 하는 코드를 작성했다. 조금 고민한 점이 있다면 스토리북을 세팅해서 진행할지 말지를 조금 고민했는데 이번 프로젝트를 진행하면서 아직은 미숙한 TDD를 조금 더 집중해서 숙련하고 싶다는 생각이 들어서 스토리북은 프로젝트 막바지까지 신경을 쓰지 않기로 결정했다.

스토리북까지 신경 쓰면서 TDD를 하기에는 핵심이 너무 분산되는 느낌이 있어서 이번 프로젝트에서는 TDD 자체에 조금 더 신경을 써보기로 결정함.

app.tsx

커밋은 3 커밋으로 나누어서 진행했다. index.tsx를 먼저 작성한 게 1 커밋 app.test.tsx 와 app.tsx를 작성하는 게 1 커밋 또 app.tsx와 index.tsx를 바인딩하는데 1 커밋을 했다.

커밋 단위는 항상 고민하고 있는 부분

기본적인 리액트 세팅까지 완료했으니 본격적인 개발을 위해서 git의 branch를 나눌 필요를 느껴서 간단히 devlop 브런치를 생성해서 형상관리를 진행하기로 생각해서 결정했다. 기능 단위의 형상 관리의 경우 추후 필요에 따라서 적용할 거 같다.

 

추가로 벡엔드의 경우 고민하던 부분인 기술 스택의 경우 nest 프레임워크를 통한 socket.io 서버와 rest api서버를 간단하게 공부하면서 만들어 보기로 결정했다. 자료 수집을 통해서 알아본 결과 nest 프레임워크를 통한 소켓 서버와 api서버를 만드는 게 크게 어렵지 않다는 점이나 한국에서 메이저 한 스프링 프레임워크와 유사성이 많다는 점으로 인해서 지금 단계에서 deno보다 nest를 경험해보는 게 웹 개발 환경에 대한 이해도를 올리기 더 좋을 것이라는 판단하에 결정했다.

 

웹챗 벡엔드 repo - https://github.com/yoonjonglyu/webChat-server

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

 

이다음은 간단한 프론트 UI를 잡는 부분과 기본적인 벡엔드 서버 세팅을 진행한 후 그 내용을 포스팅해볼 생각이다.