2024.07.10 프로그래머스 - React 동적 UI 개발 1

React 기반 동적 UI 개발 - 1

React 앱(프로젝트) 생성

React 프로젝트 생성 방식에는 2가지가 존재

• CRA

    npx create-react-app 프로젝트이름 --template typescript
  

  • webpack
  • node.js
  • express Server
  • source build
  • process.env.KEY : 환경변수
  • HMR

• Vite

    npm create vite@latest
  

  • ESBuild
  • Golang
  • koa server
  • import.meta.env.KEY : 환경변수
  • HMR

강의에서는 CRA 를 이용하여 프로젝트를 구축하여서 똑같이 프로젝트를 생성했다.

폴더 구조 변경

CRA 로 React 프로젝트를 만들면 기본으로 생성되는 폴더구조에서 필요없는 부분은 제거 및 수정하고

사용하기로 한다.

• 삭제
  • App.css
  • index.css
  • logo.svg
  • reportWebBitals.ts
• 추가 폴더
  • pages : 라우트 대응 페이지 컴포넌트(컨테이너)
  • components : 공통 컴포넌트, 각 페이지 (다수) 에서 사용되는 컴포넌트
  • utils : 유틸리티 (공용 기능)
  • hooks : React 훅
  • model :모델 (타입)
  • api : api 연동을 위한 fetcher 등

script 코드 추가 작성

package.json에서 유용한 script를 사용하기 위해 추가

tsc

• Typescript 컴파일을 위한 명령어

• “typecheck” 스크립트

    tsc --noEmit --skipLibCheck
  

  • noEmit : 출력을 비활성화
  • skipLibCheck : 외부 라이브러리 사용 타입 체크 스킵

소감문

강사님이 프론트엔드 현업 재직자셔서 앞선 강의들 보다도 더 기대가 된다.

CRA를 사용하는 기업도 아직 많을 것이기 때문에 그동안 vite를 사용했지만 CRA를 선택했다.

강의에서도 CRA를 사용하니까!

암튼 이 강의 커리큘럼에서도 더 레벨업 하기를 바란다.