프로그래머스 데브코스 71일차 with. TS 웹 풀스택

📚요약

지난주 방학.

 

📖새로운 프로젝트(BookStore-FE)

📄React 프로젝트 생성

react 프로젝트 생성을 도와주는 도구가 있습니다. 크게 CRA라고 불리는 Create React App과 Vite가 있습니다. 둘의 특징을 살펴보겠습니다.

 

📑Create React App	📑Vite
webpack node.js express server source build process.env.KEY HMR	ESBuild Golang koa server module build import.meta.env.KEY HMR
CRA로 시작하기 $ npx create-react-app {project name} --template typescript	Vite로 시작하기 $ npm create vite@latest {project name} -- --template react-ts

 

📄폴더 구조

• pages : 라우트에 대응하는 페이지 컴포넌트(컨테이너)
• components : 공통 컴포넌트 및 페이지 내부 컴포넌트
• utils : 유틸리티
• hooks : 리액트 훅
• model : 모델(타입)
• api : api 연동 관련 fetcher 등

📄npm scripts

CRA를 사용하면 기본 4가지 명령어를 사용할 수 있습니다.

• start : 프로젝트 실행
• build : 프로젝트 빌드
• test : 프로젝트 테스트
• eject : 숨겨진 모든 명령어 추출. 필요한 경우를 빼고 사용할 일이 거의 없다.

📑custom script

필요한 경우 원하는 기능을 수행할 수 있는 스크립트를 직접 만들어서 사용할 수 있습니다. 예를 들어, tsc를 활용해 타입을 확인하는 스크립트를 만들고 싶으면,  "typecheck" : "tsc --noEmit --skipLibCheck" 다음과 같이 작성하고 사용하면 됩니다.

 

다음 시간에 계속...

 

출처 & 참고

문윤기 강사님의 강의