타입스크립트로 프로젝트 환경을 구성해보자 !

프로젝트에 앞서 우리 팀은 타입스크립트로 프로젝트를 만들기로 했다. 

타입스크립트에 대해 잘 알지 못해 걱정이 앞서지만 차근차근 공부하며 진행해볼것이다 ! 

타입스크립트를 사용하기 위해 몇가지 기본 설정이 필요하다 지금부터 차근차근 내가 이해할 수 있도록 정리해놓을 것이다 ! 

 

1. 먼저 프로젝트 폴더를 생성하고 vscode 에서 실행 

2. 새로운 프로젝트를 초기화 

npm init -y

init 은 초기화한다는 것을 알겠는데 -y 옵션은 뭐지 ?   => 기본값을 설정 후 package.json 파일이 생성 

npm init -y 명령은 npm 프로젝트를 초기화하는 명령입니다. -y 플래그는 초기화 도중 나오는 모든 프롬프트에 자동으로 기본값을 선택하도록 합니다.
일반적으로 npm init 명령을 실행하면 프로젝트에 대한 여러 정보를 입력하라는 프롬프트가 나타납니다. 프로젝트 이름, 버전, 설명, 질문자 등과 같은 정보를 입력해야합니다. 그러나 -y 플래그를 사용하면 이러한 프롬프트를 건너뛰고 모든 값을 기본값으로 설정할 수 있습니다.
npm init -y를 사용하면 기본적인 package.json 파일이 생성되고, 프로젝트에 필요한 패키지를 설치하기 위해 사용되는 node_modules 디렉토리도 생성됩니다. 이렇게 초기화된 프로젝트에서는 npm을 통해 다른 패키지를 설치하고 관리할 수 있습니다.

node_modules 디렉토리는 안보이는데 ?  => npm install 을 해줘야 생성됨 ! 

 

3. 타입스크립트 설치 

npm install typescript --save-dev

--save-dev 옵션은 뭐지 ? => 타입스크립트 패키지를 devDependencies 로 설치한다는 것 ! 

typescript 패키지를 개발 의존성으로 설치하는 것을 의미합니다
일반적으로 프로젝트에는 두 가지 종류의 종속성이 있습니다
:dependencies (의존성): 프로덕션 환경에서 필요한 패키지들입니다. 예를 들어, 실행 시에 필요한 라이브러리나 프레임워크입니다.
devDependencies (개발 의존성): 개발 시에만 필요한 패키지들입니다. 예를 들어, 테스트 도구, 빌드 도구, 타입 검사 도구 등이 여기에 해당됩니다.
--save-dev (또는 -D) 플래그를 사용하면 typescript 패키지가 devDependencies로 설치되며, package.json 파일의 devDependencies 항목에 해당 패키지 정보가 추가됩니다.

이렇게 설치된 개발 의존성은 개발 시에 필요한 타입스크립트 컴파일러와 관련 도구를 제공하므로, 프로덕션 환경에서는 필요하지 않습니다. 개발 의존성은 프로젝트를 개발하는 동안에만 사용되며, 배포할 때는 불필요한 것들을 분리하여 번들 크기를 줄이는 데 도움이 됩니다.

 

4. 프로젝트 루트 디렉토리에 tsconfig.json 파일을 생성

tsconfig.json 파일의 용도는 ? => TypeScript 컴파일러의 설정 파일 이 파일을 사용하여 TypeScript 프로젝트의 컴파일 동작과 옵션을 구성 ! 

 

그럼 각각의 옵션들의 용도는 ?

"compilerOptions": 컴파일러 옵션을 구성하는 객체입니다. 이 객체 내에 다양한 옵션을 설정할 수 있습니다.

"target": 컴파일된 JavaScript 코드가 지원할 ECMAScript 버전을 지정합니다. "es6"로 설정되어 있으므로 ES6(ECMAScript 2015) 문법을 사용할 수 있습니다.

"module": 모듈 시스템을 설정합니다. "commonjs"로 설정되어 있으므로 CommonJS 모듈 시스템을 사용합니다. 이는 Node.js에서 사용되는 기본 모듈 시스템입니다. 만약 브라우저에서 사용할 경우에는 "es6" 또는 "esnext"를 선택할 수 있습니다.

"sourceMap": 소스 맵(Source Map)을 생성할지 여부를 설정합니다. true로 설정되어 있으므로 TypeScript 파일과 컴파일된 JavaScript 파일 간의 매핑 정보를 포함하는 소스 맵 파일을 생성합니다. 소스 맵은 디버깅 시 원본 TypeScript 코드를 찾기 쉽게 해주는 도구입니다.

"outDir": 컴파일된 JavaScript 파일의 출력 디렉토리를 설정합니다. "./dist"로 설정되어 있으므로 컴파일된 파일은 dist 디렉토리에 생성됩니다."include": 컴파일에 포함할 파일 또는 디렉토리의 목록을 설정합니다. "src/**/*"는 src 디렉토리 및 하위 디렉토리에 있는 모든 파일을 컴파일에 포함한다는 의미입니다. TypeScript 컴파일러는 이 목록을 기반으로 컴파일할 파일을 결정합니다.

위의 tsconfig.json 파일은 ES6를 대상으로 CommonJS 모듈 시스템을 사용하며 소스 맵을 생성하고, 컴파일된 파일은 dist 디렉토리에 저장됩니다. 또한, src 디렉토리 내의 모든 파일이 컴파일에 포함됩니다.

 

5. src 폴더 생성 후 디렉터리 내부에 ts 파일 생성 

 

 

---

++ 

TypeScript ESLint와 Prettier 설정하기

 

1.  ESLint 설치 

 

2. vscode 에디터(cmd + shift + p ) 에  사용자 설정하기 

{
  // ... 
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "eslint.workingDirectories": [
      {"mode": "auto"}
  ],
  "eslint.validate": [
      "javascript",
      "typescript"
  ],
}

 

3. Prettier 설치 및 확장프로그램 설치 

프리셋과 확장프로그램 설치 

npm i -D @babel/core @babel/preset-env @babel/preset-typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint prettier eslint-plugin-prettier

 

4. 프로젝트 폴더 밑에 .eslintrc.js 파일 생성 

.eslintrc.js 파일을 어디에 위치시켜야 하는가 ?

ESLint는 설정 파일을 찾기 위해 현재 작업 디렉토리에서 시작하여 상위 디렉토리로 올라가면서 검색합니다. 가장 가까운 위치에서 찾은 설정 파일이 적용됩니다. 따라서 프로젝트의 루트 디렉토리에 있는
.eslintrc.js파일이 가장 일반적이고 일관된 설정을 적용하는 방법입니다.

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
    jest: true,
  },
  extends: [
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['prettier', '@typescript-eslint'],
  rules: {
    'prettier/prettier': [
      'error',
      {
        singleQuote: true,
        tabWidth: 2,
        printWidth: 80,
        bracketSpacing: true,
        arrowParens: 'avoid',
      },
    ],
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    'prefer-const': 'off',
  },
  parserOptions: {
    parser: '@typescript-eslint/parser',
  },
};

prettier와 typescript-eslint에 대한 설정이 되어 있으며, 리액트를 위한 설정도 일부 첨가되어 있습니다. rules 내에 작성이 되어 있는 내용들은 옵션입니다. 따라서 전부 작성할 필요 없이 개발자의 취향에 따라 작성해도 되고, 작성하지 않아도 상관없습니다.

 

++

ESLint 란 ?
ESLint는 코딩 컨벤션에 위배되는 코드나 안티 패턴을 자동 검출하는 도구

Prettier 란 ?
개발자가 작성한 코드를 정해진 코딩 스타일을 따르도록 변환해주는 도구

풀어설명하자면 
ESLint는 코드의 오류와 스타일 문제를 검사하고 개발자가 정의한 규칙을 기반으로 경고를 제공
Prettier는 코드를 일관된 스타일로 자동 포매팅하여 가독성을 향상시킴 

둘은 보완적으로 사용되어 코드 품질과 스타일을 향상시키는 데 도움을 줌