[TypeScript] 프로젝트 환경 구성하기

KIM DA MI·2023년 5월 30일

typescript

TypeScript

목록 보기

1/3

🔵 TypeScript 프로젝트 환경 구성하기

1. 프로젝트 폴더를 생성

먼저 프로젝트 폴더를 생성한다.
```
mkdir (폴더명)
cd (폴더명)
```

2. `npm init -y` 명령어를 실행해 새로운 프로젝트를 초기화

프로젝트 폴더를 생성하고 난 뒤 프로젝트 폴더 안으로 이동하여, 터미널에서 npm init -y 명령어를 실행해 새로운 프로젝트를 초기화한다.
```
npm init -y
```

3. TypeScript를 설치

프로젝트 내부에서 npm을 사용할 준비가 되었으므로, 이제 TypeScript를 설치한다.
```
npm install typescript --save-dev
```

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

프로젝트 루트 디렉토리에 tsconfig.json 파일을 생성한다. 이어 밑의 내용을 붙여 넣는다.

//tsconfig.json
//compilerOptions 내의 속성은 자유롭게 커스텀 할 수 있다.
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "sourceMap": true,
    "outDir": "./dist"
  },
  "include": [
    "src/**/*"
  ]
}

5. `src` 폴더에 `index.ts` 파일을 만들어 TypeScript 코드를 작성

이제 src 폴더 밑에 TypeScript 언어로 된 파일을 작성할 수 있다.
src 폴더에 index.ts 파일을 만들어서 TypeScript 코드를 작성해보자.
```
const sum = (a: number, b: number) => {
  return a + b;
};
console.log(sum(10, 20));
```

🔵 TypeScript ESLint와 Prettier 설정하기

1. 확장 프로그램인 ESLint를 설치

VSCode 에디터를 사용할 것이므로, 확장 프로그램인 ESLint를 설치한다.

2. VSCode 에디터에 다음 설정을 적용

단축키 : ctrl + shift + p를 눌러 사용자 설정에 들어간다.

아래의 내용은 사용자 설정에 넣어야 하며, 기존에 설치한 확장 프로그램들이 있다면 안이 채워져 있을 수 있다. 채워져 있다면 그 밑에 바로 내용을 넣어주시면 된다.

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

3. format on save가 설정되어 있는지 확인

마지막으로 VSCode 에디터 설정 중 format on save가 설정되어 있는지 확인한다.
되어 있다면 설정을 해제한다. (저장 시 자동 줄 정렬 끄기)

단축키 : ctrl + ,

4. Prettier 확장 프로그램도 설치

이어서 Prettier 확장 프로그램도 설치한다.

5. 필요한 프리셋과 라이브러리를 설치

이어 몇 가지 필요한 프리셋과 라이브러리를 설치한다.

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

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

프로젝트 폴더 밑에 .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 내에 작성이 되어 있는 내용들은 옵션이므로 전부 작성할 필요 없이 개발자의 취향에 따라 작성해도 되고, 작성하지 않아도 상관없다.

❗ 오류 발생

이렇게 vscode에 위의 코드를 적고 두 가지의 난관을 겪었다. 먼저 코드 상태를 보자.

🤔 오류 1

코드를 적은 뒤 저장을 눌렀더니 작은 따옴표로 되어 있던 따옴표가 모두 큰 따옴표로 바뀌었다.
rlues 내에 singeQuote의 옵션을 true로 설정해놓았기 때문에 오류가 발생한 것이다.

💡 오류 1 해결

구글링을 통해 살펴보니 vscode의 사용자 설정을 바꿔주면 해결되는 문제였다.
1. 사용자 설정에 들어간다.
1. 여기서 나는 "editor.defaultFormatter"가 eslint가 아닌 prettier로 설정 되어 있었다.
1. 그래서 그 부분을 eslint로 변경해주어 오류를 해결했다. ("dbaeumer.vscode-eslint")
1. 이후 저장을 하면 큰 따옴표가 작은 따옴표로 바뀌며 오류가 해결되었다.

🤔 오류 2

두번째 문제는 바로 위의 이미지만 봐도 알 수 있듯 코드 줄의 끝 부분에 빨간 줄이 쳐지는 현상이었다.

💡 오류 2 해결

처음에는 콤마가 문제인 걸까 고민하다가 마찬가지로 구글링을 했다.

오류의 원인은 Prettier에서는 CRLF 대신 LF 사용을 권고하고 있었기 때문이다.
- OS별로 다른 줄바꿈 타입을 사용하는데,
  - Linux는 LF가 기본값
  - Windows에서는 CRLF가 기본값이다.

LF를 사용을 권고하는 이유는 협업 때문인데 CRLF와 LF의 바이트 코드가 달라 형상관리 툴에서 다른 코드로 인식하기 때문이라고 한다. 따라서 Commit을 할 때 줄바꿈 타입이 다르면 파일을 변경하지 않더라도 변경된 것으로 인식하기 때문에 LF로 통일하였다고 한다.