타입스크립트로 코드를 작성하면 오류사항이 즉각 보여 개발할 때 좀더 꼼꼼히 작업할 수 있는 이점이 있다.
확장자는 .tsx이며 Typescript로 React를 셋팅 하는 법을 기록하고자 한다.
셋팅 버전 참고
(참고 : react17 과 react-router-dom5 | react18과 react-router-dom6)
1. node.js와 npm 설치
2. 프로젝트 생성
npx create-react-app project-app-name --template typescript
3. 자주 사용하게 될 package설치 (타입스크립트가 인식하지 못하는 package는 따로 @types/ 를 붙여 설치
참고 깃헙(TypeScript에 유명한 npm package가 무엇인지 설명하는 저장소)
npm install --save @types/styled-components
(--save는 git init을 통해 프로젝트 시작시, package.json에 dependencies에 추가하기 위해 입력. 습관화하면 좋다.)
npm install --save recoil
npm install --save react-router-dom
npm install --save react-hook-form
npm install --save framer-motion
npm install --save dotenv
4. src/App.tsx, index.tsx, react-app-env.d.ts 남기고 나머지 삭제
5. App.tsx에 Reset.css 추가
https://meyerweb.com/eric/tools/css/reset/
CSS Tools: Reset CSS
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter
meyerweb.com
6. Components 폴더 생성후 Header.tsx 및 공통 부분 컴포넌트 생성
7. 생성한 컴포넌트는 퍼즐처럼 App.tsx 에서 최종 조립
8. gnb에서 페이지 이동을 위한 라우터 설정 (다음 편에서 계속............)
'DEVELOP' 카테고리의 다른 글
| [React.js] Typescript로 초기 셋팅3 - firebase로 db 붙이기(Realtime Database) (0) | 2023.06.20 |
|---|---|
| [React.js] Typescript로 초기 셋팅2 - Router 사용 하기 (0) | 2023.06.20 |
| [CSS] 부모가 display: flex; 일때 특정 내용물 한줄로 나타내기 (0) | 2023.04.06 |
| [Github] user.name, user.email 전역 변경 (0) | 2023.03.31 |
| [Github] 이미 push한 작성자 변경하기 (0) | 2023.03.10 |
