CRA로 typescript 개발환경 설정하기

_jouz_ryul·2020년 1월 21일
0

REACT 공식문서를 보고 typescript에 맞는 CRA로 개발환경 설정해보기

1. CRA


참 편한 CRA. 이젠 typescript까지 자동으로 설정해준다.

npx create-react-app my-app --template typescript
간단하게 이 명령어 하나로 끝이난다.
manually setting up은 나중에 해보자.

2. ESLINT와 PRETTIER 설정

코드를 간편하게 작성하게 도와주는 eslint와 prettier설정을 typescript에 맞게 해보자


2.1 eslint

eslint linting 라이브러리 eslint,
eslint가 typescript를 lint 할 수 있도록 허용해주는 parser인 @typescript-eslint/parser
typescript에 구체화된 ESLINT rule들을 잔뜩 포함하는 플러그인인 @typescript-eslint/eslint-plugin

이 3가지를 package manager NPM을 통해서 설치할 것이다.

설치가 완료되면 configuration 파일인.eslintrc.js 을 프로젝트 디렉토리 최상단, 즉 root 디렉토리에 만들어준다.

일단

이렇게 설정해주고 react에서 타입스크립트를 사용하려면 eslint-plugin-react 의존성(?)을 설치해줘야한다.
npm i -D eslint-plugin-react로 설치해주고
.eslintrc.js 파일을 아래와 같이 다시 설정해준다.

참조한 블로그에 따르면

rules 부분에 Lint할 조건들을 적어주면 된다고 적혀있지만 prettier config를 통해서 바로 formatting으로 해주려고 한다.

2.2 prettier

프리티어는 ESLint와 함께 잘 작동하며 코드의 format을 자동으로 잡아주는 아주 좋은 extension이다.


prettier: The core prettier library
eslint-config-prettier: Disables ESLint rules that might conflict with prettier
eslint-plugin-prettier: Runs prettier as an ESLint rule

핵심 prettier 라이브러리인 prettier
prettier와 충돌을 일으키는 ESLint 규칙들을 비활성화 시키는 config인 eslint-config-prettier 그리고
ESLint 규칙에 따라 작동하게 해주는 플러그인인 eslint-plugin-prettier
이렇게 3가지를 아래의 명령어로 설치해준다.

그 후 eslint와 마찬가지로 .prettierrc.js파일을 프로젝트 디렉토리 최상단에 만들어주고
안의 내용을 아래와 같이 채워준다.

위의 내용은 그냥 하나의 예제일뿐 나중에 내가 원하는 조건으로 다시 바꿔줄 것이다.
.prettierrc.js파일 내용을 채워준 후 .eslintrc.js파일 내용을 다시 바꿔주는데
블로그에서는 아래의 코드로 "대체"하라고 했으나 나는 수정된 부분만 바꿔주고 곂치지 않은 내용들은 그대로 유지하였다.

extend에 내용이 추가된 것 jsx부분이 빠진것 setting부분이 빠진것 이유에 대해서는 설명이 안나와있고 검색해도 알기 어려웠다. 일단 유지해보고 테스트 해보았을 때는 문제가 없었기에 그대로 유지하기로 결정했다.

  • expend에 airbnb스타일을 너무나도 적용하고 싶어서 아에 airbnb+typescript+eslint+prettier를 적용하는 블로그를 보고 따라했으나 대 실패였다.
  • 그래서 여기서 airbnb config/plugin을 설치해서 expends에 추가하여 적용해보았으나 역시 대실패. 어느 하나의 format으로 prettier가 포멧팅해주지 못하였다. 그래서 airbnb스타일은 내가 신경써서 써 나가는걸로..... (이거 적용시키려고 밤을 꼬박 세워서 더욱 더 아쉬웠다.)

2.3 format 설정하기

이 부분은 prettier 공식문서를 보고 내 입맛대로 설정하였다.


.prettierrc.js파일의 원래 내용은

이렇게 설정 되어있었지만 나랑 안맞는다.

그래서

공식문서를 보고 조건들에 맞춰서 내가 원하는 설정으로 바꿨다.

3. VSCODE 환경설정

vscode 환경설정을 변경하여 파일을 저장할 때 마다 이쁘게 formatting해주었다.
vscode의 settings.json파일을 열어서 아래와 같이 설정해보자.


이미 존재하는 설정들은 대체하고 없는 것들은 추가해주었다.
이렇게 설정하고 나서 시도해보니 아주 잘 설정되고있었다.
또한 지금까지는

에서 from이 자꾸 밑줄이 처졌다.
그 부분들은
npm install --save@types/+ react/react-dom/react-router/react-router-dom 등
나중에 필요할 것 같은 것들도 다 install 해줬다.
이게 무슨 기능이고 무엇을 도와주는지는 잘 모르겠다.
하지만 typescript여서 그런거 같다(?)


ending

장정의 반나절의 삽질이 끝났다.
비공개로 작성한 블로그도 총 5개
CRA로 만들고 설정하고 도저히 답도 안나와서 삭제한 것들이 20개는 될 것이다.
그렇다고 이 블로그 내용이 최적화 즉 불필요한 설치없이 불필요한 config 세팅 없이 CRA+ESLint+prettier가 된 것은 아닌 것 같다.
정말정말 불필요한 것들 1도 없이 해보고 싶었지만 fail...
CRA로 만들었는데 필요한 것들만 넣고싶었다는 것도 뭔가 모순같지만
그래도 다음에는 CRA없이 manullay set up에 도전할 것이다!
끝-

profile
개발신생아

0개의 댓글