freewheelin 과제
npm i
: npm 패키지 설치npm start
: 프로젝트 실행- 브라우저로
http://localhost:3000
에 접근
npm start
: 프로젝트 실행npm run build
: 프로젝트 빌드npm run lint
: eslint 검사npm run jest
: jest로 테스트 코드 실행npm test
: eslint 검사와 테스트 코드를 실행
redux-observable을 통해 React + Redux + RxJS를 활용한 넷플릭스의 설계를 참고했습니다.
└── src
└── app
├── actions
├── assets
├── components
├── configs
├── epics
├── lib
├── models
├── reducers
├── screens
├── selectors
├── services
└── themes
- actions
- 리덕스 액션을 정의해 놓은 디렉토리
- assets
- 정적인 파일들을 모아놓는 디렉토리
- components
- 리액트 컴포넌트를 모아놓은 디렉토리
- configs
- 보안상 민감하게 관리해야하는 환경변수들을 모아놓은 디렉토리
- epics
- redux-observable의 에픽을 정의해 놓은 디렉토리
- lib
- 모듈로 분리할 수 있는 부분들을 라이브러리로 정리한 디렉토리
- models
- DTO에 사용되는 데이터 모델들을 정의해 놓은 디렉토리
- 지금은 interface로 정의되어 있지만, instance를 직접 만들고 수정할 필요가 있을 경우 class로 만들 수도 있다.
- reducers
- 리덕스 리듀서를 정의해 놓은 디렉토리
- screens
- 라우팅에 따라 보여지는 화면 리액트 컴포넌트들을 정의한 디렉토리
- selectors
- store 에서 데이터를 가져오는 selector 를 정의한 디렉토리
- react-redux 라이브러리의 useSelector 훅을 사용하기 위한 selector 함수들을 모아놓은 디렉토리이다.
- services
- MVC 패턴의 service들을 모아놓은 디렉토리
- themes
- 사용한 디자인 시스템에 의존적인 theme들을 모아놓은 디렉토리
- 여러 theme 을 정의해두면, dark mode 처럼 환경에 적절한 theme을 제공할 수 있다.
- 모든 주석에는 TODO와 같은 토큰을 반드시 붙인다.
- TODOs를 스캔하기 쉽도록, fixme 모듈에 나와있는 토큰을 적극적으로 활용한다.
- 컴포넌트는 tsx 확장자를 사용하고, 나머지는 전부 ts 확장자를 사용한다.
- camelCase를 기본으로 하되, 컴포넌트와 CTO 모델은 PascalCase를 사용한다.
- boolean과 관련된 변수에는 prefix로 is~, has~와 같은 prefix를 붙인다.