2부: TypeScript 설치 및 개발 설정

안녕! 저는 마커스입니다.
이것은 내 Front End 시리즈의 두 번째 기사입니다.
각 기사는 목적 자체에 따라 5분 안에 읽을 수 있도록 작성됩니다. 가능하면 이해를 돕기 위해 동영상을 만들어 보겠습니다.

목차:

2부: TypeScript 설치 및 개발 설정

오늘은 TypeScript 설치 및 개발 프로젝트 설정에 대해 안내해 드리겠습니다.

현재 프로젝트 구조는 다음과 같습니다.



코딩하자!

1. Typescript 설치 및 타이핑

npm i typescript @types/react @types/react-dom -D

index.jsx를 index.tsx로 이름을 바꿉니다.



이제 프로젝트를 실행할 수 있습니다

npm run start

그러나 TypeScript 프로젝트를 구성하려면 tsconfig.json 파일을 만들어야 합니다.

2.tsconfig.json 생성

./node_modules/.bin/tsc --init

우리tsconfig.json는 다음과 같아야 합니다.



지금은 우리 프로젝트가 좋아 보이고 완벽하게 실행됩니다. 그러나 열리면index.tsx 여기에 중복 가져오기 줄이 표시됩니다.



제거하면 어떻게 됩니까?



이런!

3. 바벨 구성

npm i @snowpack/plugin-babel @babel/preset-typescript @babel/preset-react -D

우리는 설치가 필요합니다@babel/preset-typescript 및 @babel/preset-react 위의 문제를 해결하려면@snowpack/plugin-babel를 설치하여 snowpack에 통합합니다.

그런 다음 루트 폴더에 babel.config.json 파일을 생성해야 합니다.




왈라!

읽어 주셔서 감사합니다. 다음 기사에서 만나요
파트 3: SASS/SCSS 설치 및 CSS 모듈 설정