Typescript + Yarn으로 프로젝트 초기화

프로젝트 초기화 및 환경설정

공식적인 내생각

간단하게 토이 프로젝트를 하나 시작하면서 프로젝트 초기화를 했기 때문에 이를 기록 차원에서 적어본다

또 이상한데서 삽질을 했기 때문… (타입스크립트 플래그를 잘못 적어서 자바스크립트 버전으로 초기화됐다) 다음에는 안하길 빈다

1. 프로젝트 생성

create-react-app을 통한 프로젝트 생성

$> yarn create react-app jiychoi-standard-time --template typescript

레포지토리 이름이 파스칼케이스라 디렉토리 이름을 .으로 설정하니 프로젝트명 규칙에 위반되어 (대문자를 포함하면 안된다고 한다) 제대로 프로젝트 생성이 되지 않았다

별개의 프로젝트를 생성 후 디렉토리만 옮겨주었다

2. 타입스크립트, 린터 설치

typescript 설치

$> yarn add --dev typescript

타입스크립트를 사용할 것이므로 (타입스크립트에 익숙해지니 타입스크립트가 차라리 에러를 사전에 잡아줄 수 있어서 좀 낫다) 타입스크립트를 설치한다

앞으로 라이브러리를 설치할 때도 이름에 @types가 붙은 패키지가 있는지 알아봐야 한다 (타입스크립트 호환을 위함)

타입스크립트에서 패키지 Import 오류나면 @types 문제이다….. 에러문구를 잘 읽어보면 대개 나온다

eslint 설치

$> yarn add --dev eslint eslint-config-airbnb eslint-config-prettier eslint-config-react eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-testing-library eslint-webpack-plugin 
$> yarn add --dev @typescript-eslint/eslint-plugin @typescript-eslint/parser

린터는 개발단계에서만 필요하므로 —-dev 플래그를 이용하여 설치해준다

뭐가 잔뜩 있는데 대부분 eslint와 기타 라이브러리 (prettier, react, typescript 등) 과 호환시키기 위한 플러그인이거나, 룰을 추가하는 플러그인이다

설치가 완료되면 .eslintrc.json, .eslintignore (선택사항) 파일을 생성하고, 설정을 추가한다

prettier 설치

$> yarn add --dev prettier

코드를 이쁘게 포맷해주는 prettier을 설치한다

설치가 완료되면 .prettierrc.json, .prettierignore (선택사항) 파일을 생성하고, 설정을 추가한다

stylelint 설치

$> yarn add --dev stylelint stylelint-config-recess-order stylelint-config-standard-scss stylelint-declaration-strict-value

css 스타일들을 위한 린터인 stylelint를 설치한다

설치가 완료되면 .stylelintrc.json 파일을 생성하고, 설정을 추가한다

덤: vscode에서 린터 자동포맷

//settings.json
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.stylelint":true 
},

vscode ⇒ 설정 ⇒ 검색 ⇒ code actions 로 검색한 후, Editor: Code Actions On Save 항목에서 settings.json을 편집하여 위 내용을 추가하자

tsconfig.json 생성 및 설정 추가

{
    "compilerOptions": {
      "baseUrl": "src",
      "target": "es5",
      "lib": ["dom", "dom.iterable", "esnext"],
      "allowJs": true,
      "skipLibCheck": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "strict": true,
      "forceConsistentCasingInFileNames": true,
      "noFallthroughCasesInSwitch": true,
      "module": "esnext",
      "moduleResolution": "node",
      "resolveJsonModule": true,
      "isolatedModules": true,
      "noEmit": true,
      "jsx": "react-jsx"
    },
    "include": ["src"]
  }

baseurl을 지정하여 함수를 Import할 때 src 폴더를 기준으로 불러올 수 있다

그 외에도 타입스크립트를 컴파일할 때 옵션들을 추가할 수 있다

이 파일을 바보같이 tsconfig.json이 아니라 .tsconfig.json이라고 이름을 짓는 바람에… 설정이 하나도 안 먹혀서 당황했다

global.d.ts 추가

declare module '*.scss' {
  const content: { [className: string]: string };
  export = content;
}

타입스크립트 환경에서 scss 파일을 못 읽어들이는 경우가 있으므로, 타입 지정을 한다

재밌게 코딩하기

VSCode에서 작업한다면 린터 (ESLint, Stylelint, Prettier) 관련 확장을 설치하는 게 좋다

VSCode 상에서 에러나 경고를 보여주기도 하고 저장시 자동 포맷도 지원하기 때문