React 프로젝트 시작 시 고민 했던 것들

회사에서 백엔드, 프론트엔드 개발팀으로 분리되면서 spa 프론트개발자가 없어 본인은 백엔드 포지션이였지만 그나마 vue를 실무에서 사용한 경험이 있어 React 시니어가 채용전까지 프론트 개발팀을 셋업하고 리액트 관련된 프로젝트에 참여하고 어느정도 진행 해야하는 상황을 맞이 하였다. 리액트를 시행착오를 최소화 하기 위해 리액트 관련해서 여러가지 취사선택 해야하는 부분을 고민하였고 개발자 코딩스타일을 맞추는 작업도 고민하였다.

1. 리액트 앱 생성을 보일러플레이트 사용 여부

• 페이스북에서 제공하는 보일러플레이트 사용 'yarn creat-app name'

• webpack 개발 환경들을 일일이 구축

  보일러 CRA 사용으로 채택

2. 라우터

• HashRouter

• BrowserRouter

• 기타

  BrowserRouter 채택

3. 상태관리

• redux

• mobix

• ducks 패턴으로 파일 관리

  redux로 채택

4. 스타일링 방법

• 전통적인 scss 파일 따로 관리

• styled-components

  기본적으로 styled-components 사용하되 페이지 전역으로 사용하는 스타일은 scss 파일로 관리

5. 컴포넌트 디렉토리 구조

• 프레젠테이션 컴포넌트와 컨테이너 컴포넌트로 구분

  비지니스 로직을 염두고

6. typescript(필수)

• 타입힌트, 인터페이스 정의 정도로만 간단하게 도입

  타입스크립트 책 한권을 정독했는데 프로젝트 초반에는 아주 깊이있게 사용하는것 보다 타입힌트, 인터페이스 정의 정도로만 도입

7. 테스팅

• Jest

  BDD 레벨 정도로 간단하게 도입

8. 코딩스타일

• 에어비엔비 나 기타

• lint 적용 (git push 하기전에 검사필수)

  eslint 도입하고 에어비엔비 스타일로 코딩 스타일 획일 화

Appendix

디렉토리 구조

src/
    pages/       화면 진입 지점 
    containers/  비지니스 로직은 여기에서 다룬다.
    components/  재활용 가능한 컴포넌트를 둔다 
    lib/         api관련된 기능들을 둔다
    modules/     레덕스 관련된 파일들을 넣는다.
    models/      api응답 모델들을 정의한다.
    assets/      font, image, locales를 둔다.