2021-06-23 :: 프론트앤드 세팅하기

프론트앤드 세팅하는데 시간이 제법 소요가 된다.

setting 폴더에 기본적인 세팅이 다 되어있다.

lecture 폴더에 세팅을 적용하도록 하자.

strict 모드, 타입을 더욱 엄격하게 확인한다.

 

javascript 생태계가 점점 더 typescript로 옮겨가고 있다.

맥이 편한 이유는 bash terminal을 사용하기 때문이다. bash를 사용하면 오류가 발생할 확률이 높다.

 

react에서 프로젝트를 시작할 때 항상 npm init으로 시작을 해야한다.

=> package.json 생성

package.json 파일에서 name을 제외하고는 크게 중요하지 않다. name은 npm의 package이름과 중복되지 않도록 유의하도록 하자.

 

npm 패키지 설치는 명령어 npm i {packageName}으로 한다.

typescript를 사용하려면 typescript, @types/react, @types/react-dom을 설치하도록 하자

 

npm i 명령어를 처음 사용하면 package-lock.json과 node_modules가 생성된다.

node_modules는 무겁다. package.json만 있으면 npm i를 입력했을 때 node_modules가 자동으로 설치된다.

package-lock.json

 

package간의 dependencies 의존관계 때문에 실제 다운 패키지 수에 비해 package의 개수가 많아진다. 같은 package, 다른 버전을 사용할 수 있기 때문에 이에 대한 정보가 필요하고 package-lock.json에 기록되어 있다.

 

ESLint, Prettier

npm i -D eslint

코드 검사도구 안쓰고 있는 변수, 오타 등을 검출한다.

ESLint와 Prettier을 연동시켜 두면 편하다. 

npm i -D prettier eslint-plugin-prettier eslint-config-prettier

prettier는 코드 formatting과 연관이 있다. 단 prettier은 정렬 스타일 커스터마이징에 제한적이다.

프리티어는 개발자 간의 code foramt style 차이에 대한 중립적인 해결책이 된다.

 

확장자가 없고 .으로 시작하는 파일은 설정파일이라고 생각하면 된다. 리눅스 기반에는 숨김파일

설정파일들 요즘 대부분 .js 혹은 .json으로 저장해도 무관하다.

eslint에서 다음과 같이 설정하면

"extends": ["plugin:prettier/recommended", "react-app"]

prettier의 formatting에 결정권을 부여한다.

 

typescript 사용하는 사람은 반드시 tsconfig.json을 만든다. typescript도 역시 javascript로 변경된다.

{
  "compilerOptions": {
    "esModuleInterop": true, //원래 React에서 import할 때 *가 붙는데 안붙여도 됨
    "sourceMap": true,
    "lib": ["ES2020", "DOM"],
    "jsx": "react", //jsx를 여러군데 쓰지만 react에서 쓰겠다.
    "module": "esnext", //최신 모듈을 사용하겠다.import export
    "moduleResolution": "Node",
    "target": "es5", //es5로 변경하겠다.
    "strict": true,
    "resolveJsonModule": true,
    "baseUrl": ".",
    "paths": { //import할 때 경로 설정을 더욱 편하게 하겠다. 절대경로처럼
      "@hooks/*": ["hooks/*"],
      "@components/*": ["components/*"],
      "@layouts/*": ["layouts/*"],
      "@pages/*": ["pages/*"],
      "@utils/*": ["utils/*"],
      "@typings/*": ["typings/*"]
    }
  }
}

tsconfig.json 파일을 참고해서 typescript에서 javascript 파일로 변경되는 것이다.

typescript를 바벨이 이어받아서 js로 바꾸는 형식을 사용하겠다. ts => babel => js

그 이유는 img, css, html을 파일을 모두 js로 관리하기 위해서이다.

ts를 사용할 때 strict를 반드시 true를 사용하도록 하자.