동기
본격적으로 app.ts 에 선언된 타입들을 모듈 파일로 따로 관리하기 위해서 초기에 설정했던 프로젝트 환경들을 덧붙혀 재구성하고자 합니다.
프로젝트 환경 재설정
dependency와 devDependency
프로젝트를 초기에 구성할때는 Typescript 라이브러리를 설치하기 위해서
npm i typescript --save-dev위와 같은 npm 명령어로 설치 후, 아래와 같이 package.json 파일이 생성되면서 devDependency가 설정이 됐었습니다.
여기서 dependency와 devDependency의 차이점에 대해서 알아야 왜 이 라이브러리를 삭제해야 되는지 이해할 수 있습니다.
- dependency
: 애플리케이션에 직접적인 영향을 끼칠 수 있는 jQuery, React, Vue, Chart.js 등등과 같이 배포할때 포함되는 라이브러리들을 담음 - devDependency
: TS 개발을 위한 개발할때만 쓰고(ESLint, Prettier, Babel 등등..) 작업되는 라이브러리들을 담음
하지만 Typescript는 초기에 프로젝트 환경을 구성할때도, tsc라는 명령어로 TS -> JS로 컴파일이 되야 실제 정적 웹페이지에서 작동이 가능했습니다.
따라서 ESLint, Prettier, Babel과 같이 실제 TS개발에 있어 실제로 웹을 배포할때 문제없이 수행할 수 있게 초기에 setting하는 과정이 필요합니다.
순서
- 따라서
devDependencies들을 재구성 하기 위해서 기존에 설치했던 typescript 라이브러리를npm uninstall (라이브러리명)명령어를 통해 삭제합니다.
- 필요한 라이브러리들을 다시 재설치합니다. (babel,ESLint,Prettier 라이브러리를 포함해서 설치)
npm i -D typescript @babel/core @babel/preset-env @babel/preset-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-plugin-prettier - 2번에서 수행한 명령어에 대한 결과입니다.
다음 포스팅에선 ESLint 플러그인 설정과 관련하여 다룹니다.
