slack 클론코딩
- back에서 npm i 할 때 ERR남
npm 관련 에러시 제일 기본적인 방법은 node_modules랑 package-lock.json 지웠다가 설치하는 것
package-lock.json 지웠다가 설치하니까 잘 됨!
프론트엔드 세팅하기(without CRA)
npm i, package.json
- npm init
- npm init을 하면 package.json 파일이 자동으로 생성된다.
package.json? 앱의 사용 설명서라고 보면 된다.
이후 사용할 모듈들을 npm i 로 설치해주면 node modules 폴더와 package-lock.json 파일이 생성된다.
package.json과 package-lock.json의 차이는 무엇일까?
npm i 로 react와 react-dom, typescript와 types/react, types/react-dom을 설치해주었는데, nodemodules에는 5개보다 더 많은 모듈 파일이 생성된 걸 볼 수 있다. 이는 내가 설치한 모듈이 의존하고 있는 다른 모듈들도 같이 설치가 된 것을 의미한다.
예를들어 react를 사용할 때, react가 "loose-envify"라는 모듈을 사용한다면 이 loose-ebvify도 같이 설치되는 것이다.
package.json은 우리 앱이 의존하고 있는(사용하고 있는) 단순한 모듈의 의존관계만을 보여준다면 package-lock.json에는 그 모듈이 의존하고 있는 모든 모듈간의 의존관계를 다 보여준다.
package-lock.json이 더 자세하다고 보면 된다. git으로 버전관리를 할 때에는 무거운 node-modules나 package-lock.json은 제외하고 package.json만 업로드하면 된다.
eslint, prettier
- eslint란? 코드검사도구로 코드 작성 시 발생할 수 있는 여러 에러들을 확인해준다.
- prettier란? 코드를 자동 정렬해준다(띄어쓰기나 줄바꿈)
eslint와 prettier를 연결하게 되면, prettier에 어긋나는 것들도 eslist로 확인할 수 있는데, eslint-plugin-prettier, eslint-config-prettier를 같이 설치해주면 된다. (prettier에 어긋나는 코드를 작성할 경우 빨간줄이 생기게 된다.)
tsconfig.json
타입스크립트 설정해주는 파일
{
"compilerOptions": {
"esModuleInterop": true, // import React from 'react' 되게 만들어 줌
"sourceMap": true, // 에러코드를 찾아갈 수 있게 해줌
"lib": ["ES2020", "DOM"], // 사용하는 라이브러리-> 최신문법과 DOM
"jsx": "react", // react jsx를 사용하겠다.
"module": "esnext", // 최신 모듈을 사용하겠다.
"moduleResolution": "Node",
"target": "es5", // es5로 변환하겠다.
"strict": true, // type check를 엄격하게 하겠다.
"resolveJsonModule": true,
"baseUrl": ".",
"paths": { // 편하게 import 하는 것 절대경로로 import할 수 있음
"@hooks/*": ["hooks/*"],
"@components/*": ["components/*"],
"@layouts/*": ["layouts/*"],
"@pages/*": ["pages/*"],
"@utils/*": ["utils/*"],
"@typings/*": ["typings/*"]
}
}
}typescript를 javascript로 변환하는 방법에는 두가지가 있다.
ts가 바로 js로 변환하게 하는 것과 babel을 이용해서 ts->babel->js로 변환하는 방법이다.
sleact 클론코딩에서는 바벨을 이용하는데, 이용하는 이유는 바벨이 이미지, css, html파일을 모두 js로 바꿔줄 수 있는 컴파일러이기 때문이다.
babel과 webpack을 설정하는 방법은 뒤 강의노트에서 다시 작성하도록 하겠다.
