[TIL] CRA & TypeScript 초기 셋팅

이제 본격적으로 포트폴리오 웹 사이트를 만들어보기 위해 새로운 개인 프로젝트를 시작하는데 React에 타입스크립트를 더하여 구현해보려고 한다. 디자인부터 화면 기획 등 모두 직접 할 예정이며, 나에 대한 모든 것을 담을 수 있는 포트폴리오 사이트를 완성해보고자 한다.

그래서 오늘은 기본적으로 React CRA에 타입스크립트 초기 셋팅을 해봤다.

타입스크립트 CRA

가장 먼저 기존에 타입스크립트 없이 CRA 했던 방식 그대로 터미널에 입력하면 된다.

npx create-react-app my-app --template typescript

yarn을 사용한다면 아래와 같이 입력하면 된다.

yarn create react-app my-app --template typescript

CRA 완료 후

정상적으로 CRA가 끝났다면 아래에 타입스크립트 사용시 필요한 라이브러리를 설치해준다.

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

or

yarn add typescript @types/node @types/react @types/react-dom @types/jest

이렇게 필요한 것들을 설치한 후 VSCode를 열어보면 아래와 같이 tsconfig.json 파일이 자동으로 생성된다. 처음에 설치했을 때는 뭐때문인지 tsconfig.json 파일이 정상적으로 생성되지 않았고, 그래서 처음부터 차근차근 다시 시도하니 정상적으로 파일이 만들어졌다.

처음부터 CRA를 할 당시 typescript를 적용하여 설치했기 때문에 App.js도 App.tsx로 설치되었다. 기존에 js 또는 jsx 파일을 사용했다면 지금부터는 tsx 확장자를 사용할 예정이다.

ESLint 설정

타입스크립트를 사용하며 ESLint에 대한 설정도 해주었다. VSCode 확장프로그램 ESLint를 먼저 설치한 후, 터미널에 아래와 같은 명령어를 입력한다.

npm install -D eslint

명령어를 입력하면 여러가지 설정할 수 있는 옵션들이 나오는데 내 프로젝트에 맞는 답을 선택하면 되고 나는 타입스크립트를 사용할 것이기 때문에 아래 두가지 질문에는 yes라는 대답을 해주었다.

---

Does your project use TypeScript? y

The config that you've selected requires the following dependencies: @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest Would you like to install them now with npm? y

---

이렇게 설정을 해주고 나면 .eslintrc.js라는 파일이 자동으로 생성된다.

VSCode를 사용하며 유용하게 쓰는 확장프로그램으로 추천하기도 했었는데 확장프로그램 추천은 아래 글을 확인해보면 된다.

[프론트엔드] VS Code 확장프로그램 추천, 개발 시간 단축

초기설정 이후 회고

타입스크립트 적용을 위한 초기셋팅을 마쳤으니 npm start를 통해 브라우저에 띄워보았고, react-router-dom을 설치하여 메인페이지 셋팅까지 마무리했다. 초기 설정하는 것은 크게 어렵지 않았으나 타입스크립트에 대한 공부는 많이 부족하기에 포트폴리오 사이트를 만들며 타입스크립트가 어떻게 쓰이는지에 대해 파악해보려고 한다.

이사님께서 백엔드(노드)에는 타입스크립트가 꼭 필요하지만, 프론트엔드는 타입스크립트를 굳이 사용하지 않아도 된다고 말씀하셨기에 회사에서는 타입스크립트를 사용하지 않는다. 그렇지만 프론트엔드에서도 많이 쓴다는 것을 알기에 조금씩이라도 추가적으로 공부해보고자하여 개인 프로젝트에 적용해보려고한다.