코드스테이츠 38일차
오늘까지 첫번째 스프린트가 끝이났다.
내일부터 시작되는 스프린트는 좀더 어려운 내용들을 배우게 된다.
당장 내일부터는 객체 지향 프로그래밍에대해 블로깅을 하게 된다.
내일 TIL은 객체 지향 프로그래밍으로 하겠다.
새로 배운 것들
ESlint
자바스크립트 코드포멧터인 ESlint에 대해 배우게 되었다.
설치하기에 앞서 node가 깔려있어야 설치가 가능하다.
node를 설치하게되면 npm도 함께 설치되는데
이 npm을 이용해 설치하는 것이다.
node를 설치했다면 npm을 이용해 새로운 프로젝트를 생성해야되는데
아래의 명령어를 입력하면 새로운 프로젝트를 만들수 있다.
npm init -y뒤에 -y를 붙여주지 않으면 프로젝트에 대한 상세한 설정을 할 수 있다.
이렇게 프로젝트를 만들면 폴더 내에 package.json파일이 하나 생성된다.
그런다음 아래의 커맨드를 입력하면 ESlint를 설치할 수 있다.
npm i eslint --save-dev커맨드를 이용해 eslint를 설치하면
package-lock.json과 node_modules 폴더가 함께 생성되는 것을 알 수 있다.
해당 파일과 폴더의 역활은 다음과 같다.
package-lock.json: 다른사람이 npm install을 통해 패키지를 설치할 때 동일한 버전을 설치하도록 도와주는 파일로 동일한 환경을 제공하기 위해 존재하는 파일이다.
node_modules: node 명령어로 node_modules아래에 있는 외부 모듈들을 실행시키기 위해 만들어진 폴더이다.
이제 eslin를 설치했으니 설정을 위한 파일을 또 설치해야된다.
아래 명령어를 입력해 eslint를 설정하는 파일을 다운받을 수 있다.
npx eslint --init해당 명령어를 입력하면 아래와같은 질문들을 선택해야된다.
| 설명 | 다음을 선택한다 |
|---|---|
| How would you like to use ESLint? | To check syntax and find problems |
| What type of modules does your project use? | CommonJS |
| Which framework does your project use? | None of these |
| Does your project use TypeScript? | No |
| Where does your code run? | Node |
| What format do you want your config file to be in? | 아무거나 눌러도 상관 없다. |
이렇게 질문에 답변을하면 설정파일이 하나 생성된다.
이제 ESlint에서 검사할 규칙을 정해야 한다.
규칙은 정말 많아서 따로 문서를 봐야된다.
설치 가이드에서 제시하는 규칙은 아래의 두가지 규칙이다.
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}위 두가지 규칙을 새로 생성된 .eslintrc.js파일의
rules에 넣어주면 된다.
이외의 규칙은 Rules 여기서 확인할 수 있다.
규칙 중 error이라고 써있는 곳은 오류로 표시를 해주는데
그냥 무시하고 싶으면 off로 바꾸면 된다.
만약 VSCode 의 익스텐션 중 ESlint가 설치되어 있으면
이렇게 어느 부분이 문제가 있는지 볼 수 있다.
추가로 settings.json에서 아래 부분을 추가하면
settings.json은 VSCode의 설정에서 오른쪽 위 문서모양 아이콘을 누르면 열 수 있다.
"editor.formatOnSave": false,
"[javascript]": {
"editor.formatOnSave": true
},
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}저장 시 설정한 rules에 맞게 자동으로 수정한다
위 이미지의 경우 ;을 빠트렸는데 저장 시 자동으로 붙여준다.
코드 포멧터는 이것 말고도 prettier라는 것도 있는데
사용법은 다음에 알아봐야 겠다.
알아둬야할 것들
- git 명령어
- 객체 지향 프로그래밍
