넷플릭스 클론 - 2

프로젝트의 초기 셋팅을 해주었다.

 

 

React + TypeScript

우선 CRA를 통해 리액트 프로젝트로 만들어주었는데, CRA에 Typescript옵션을 주어서 Typescipt + React 프로젝트로 생성을 해주었다.

 

그리고 tsconfig를 기존의 BillyZip 프로젝트에서 사용하였던 옵션을 참고하여 내 입맛에 맞게 바꾸어 주었다.

 

tsconfig.json

 

Prettier + ESLint

그 다음 해준 것은 prettier 설정이다. prettierrc 설정파일을 통해 내가 자주 사용하는 옵션으로 설정을 해주었다.

 

.prettierrc

그리고 그 다음은 ESLint 설정인데 평소 즐겨사용하는 airbnb 스타일로 설정해줄 것이다. 그리고 typescript와 prettier도 같이 사용하기 때문에 관련 설정도 해주었다.

 

ESLint 설정을 위해 받은 모듈들은 다음과 같다. (ESLint 자체는 vscode extension으로 사용중이다)

 

Typescript 관련

@typescript-eslint/parser

@typescript-eslint/eslint-plugin

 

eslint로 typescript 구문을 체크할 수 있도록 해준다.

 

 

react aiabnb 스타일 관련

eslint-config-airbnb

eslint-plugin-import

eslint-plugin-jsx-a11y

eslint-plugin-react

 

eslint로 react와 aiabnb 스타일 구문을 체크할 수 있도록 해준다.

 

prettier 관련

eslint-config-prettier

eslint-plugin-prettier

 

eslint와 pretter가 서로 충돌하지 않도록 해준다.

+ prettier로 typescript도 설정할 수 있도록 해준다.

 

 

 

 

 

 

 

 

rule은 파일 확장자 관련 rule과 import 관련된 구문을 넣어주어서 import시 편하게 할 수 있도록 해주었다.

 

document 등 브라우저의 객체를 인식할 수 있도록 env와 globals을 설정해 주었다.

 

그리고 .eslintignore도 만들어주어, node modules와 build 폴더는 제외하도록 설정해주었다.

 

 

dotenv

나중에 파이어베이스나 외부 api key 등을 환경변수로  사용하기 위해서 dotenv를 설치해고 .env 파일을 만들어주었다.

 

.env

firebase

이번에 firebase를 통해 백엔드를 해결해보려고 firebase 설정을 해주었는데 아직 firebase의 functions 같은 기능을 잘 몰라서 우선은 hosting과 database 기능만 설정해주었다.

 

firebase로 hosting시, build 폴더를 정적 호스팅하도록 설정하였다. firebase 관련 해서는 아직 모르는 부분이 많아서 좀 더 프로젝트를 진행하면서 알아볼 예정이다.

 

 

package.json scripts

start에 tsc로 우선 컴파일하고 이후에 react로 실행시킬 수 있게 하였다.

build의 경우도 tsc로 컴파일 이후에 build될 수 있도록 하였다.

watch로 코드 작성 시에 tsc -w로 수정사항이 있을 때 ts로 바로바로 감지 할 수 있도록 하였다.

deploy의 경우, build의 파일들로 호스팅 되기 때문에 build 스트립트 실행 이후에 나온 파일들로 deploy될 수 있도록 설정하였다.

 

SCSS

이번에 css의 경우에는 SCSS를 통해 만들어볼 생각이기 때문에 node-sass를 설치해주고, scss파일을 import해서 사용하도록 하였다.

 

 

 

gitattribues 및 gitignore

깃헙에 langage 표시를 해주기 위해서 gitattributes를 추가해주었고, gitignore에 firebase 관련 설정 파일 및 .env 등 ignore가 필요한 파일들을 추가시켜주었다.

 

 

 

그외에 SPA의 형태로 만들기 위해 react-router dom을 설치해주었고,  mobx를 도입하기 위해서 mobx, mobx-react를 설치해 주었다.

 

 

 

 

이렇게 일단은 대충 필요한 셋팅은 끝난것 같다.