전개발
article thumbnail
react-router-dom v6 설정하기
React 2023. 7. 24. 23:21

react-router-dom v6 설정하기 설치 → 명령어 실행 react-router-dom : v6.14.2 @types/react-router-dom : v5.3.3 npm i react-router-dom @types/react-router-dom AppRouter.tsx 생성 및 코드 작성 프로젝트 src 폴더 내에 AppRouter.tsx 생성 import Navigation from 'components/layout/Navigation'; // 원하는 경로에 네비게이션 컴포넌트 만들어서 import import HomePage from 'pages/Home/HomePage'; // 원하는 경로에 페이지 컴포넌트 만들어서 import import React from 'react'; impor..

article thumbnail
프로젝트 생성 및 세팅 : React + TypeScript + ESLint(airbnb) + Prettier
Project 2023. 7. 24. 01:45

1. 프로젝트 생성 명령어 사용 npx create-react-app myapp --template=typescript tsconfig.json 수정 compilerOptions에 “baseUrl”: “./src” 추가 → 기본 절대 경로를 설정하는 구문 2. ESLint 1) vsc 익스텐션 - eslint 설치 2) package.json 수정 CRA로 기본 생성된 코드 제거 → lint 설정은 package.json에서 할게 아니라 .eslintrc.json에서 할 거라서! "eslintConfig": { // 삭제 "extends": [ // 삭제 "react-app", // 삭제 "react-app/jest" // 삭제 ] // 삭제 }, // 삭제 npm scrips에 스크립트 추가 ... "..