[ typescript ] node_modules 폴더 생성, package.json, ESLint 플로그인 설치/사용 설정(2가지)

첫 번째 실습 프로젝트 소개, 환경 구성, 코드 분석

• package.json에 설정한 타입스트립트, 바벨 관련 내용을 설치한다.

  npm i 

• 위의 명령어를 입력하면 package.json에 정의한 설정들이 node_modules 폴더에 생성된다.

• npm i 명령어를 실행하고 node_modules가 보여지지 않는다면
  새로고침을 해보도록 한다.

VSCode 설정 (첫번째, 두번째를 모두 설정하기)

첫번째

• window : ctrl + ','

• format on save 검색

• 꺼져있는지 확인한다.

• 모두다 타입스크립트의 문법검사는 eslint를 사용할 것이기 때문에
  포맷팅 관련한 프리티어나 뷰티파이 같은 것들을 꺼주어야 한다.

• 그래서 체크가 풀려 있는지 확인한다.

두번째

• ESLint 플러그인이 설치된 상태에서

  ctrl + shift + p 

• 입력해서 명령어 실행창 표시

  open settings(json) 

• 명령어 실행 창에 입력 후 선택

{
  // ... <-- 기존 내용을 꼭 유지한 상태에서 아래 내용을 추가하고 이 주석은 제거할 것
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "eslint.workingDirectories": [
      {"mode": "auto"}
  ],
  "eslint.validate": [
      "javascript",
      "typescript"
  ],
}

• 기존의 코드와 연결되도록 기존 코드 끝에 ,를 입력한다.

• 위의 2가지 설정이 끝나고 다시 index.ts 파일을 확인하면
  타입스크립트가 아닌 자바스크립트 문법에 오류가 발생한 것을 확인할 수 있다.

package.json

• 프로젝트 정보와 의존성(dependencies)을 관리하는 문서이다.
• 이미 작성된 package.json 문서는 어느 곳에서도 동일한 개발 환경을 구축할 수 있게 해준다.
• JSON 포맷으로 작성해야 하며, 다음과 같은 옵션들이 추가될 수 있다.

name 

URL이나 Command Line의 일부로 사용될 소문자로 표기된 214자 이내의  
프로젝트(패키지) 이름으로, 간결하고 직관적인 이름으로 설정하되  
다른 모듈과 동일한 이름을 피한다.





version

SemVer(The semantic versioner for npm)로 분석 가능한 형태의 버전을 지정한다.





description

프로젝트(패키지)의 설명을 지정한다.  
(npm search 사용 시 도움이 된다.)





keywords

프로젝트(패키지)의 키워드를 배열로 지정한다.  
(npm search 사용 시 도움이 된다.)





homepage

프로젝트 홈페이지로 연결되는 URL을 지정한다.





bugs

패키지에 문제가 있을 때 보고될 이슈 트래커(추적시스템) 및 이메일 주소 등에 대한 URL을 지정한다.





scripts

패키지 라이프 사이클에서 여러 번 실행되는 스크립트 명령을 포함한다.




dependencies

패키지의 배포 시 포함될 의존성 모듈을 지정한다.