React 개발 환경 설정 

# create-react-app cli Tool node 통해 설치
npm install -g create-react-app

# 신규 react 프로젝트 생성 (typescript 사용)
// 4.0 버전 이후
npx create-react-app [프로젝트명] --template typescript
npx create-react-app test-app --template typescript
// 4.0 버전 이전
npx create-react-app test-app --typescript

# 해당 프로젝트 폴더 이동
cd [프로젝트 폴더 경로]
cd test-app

# build & 실행
npm run start // 개발
npm test      // 테스트
npm run build // 운영용 빌드

기본 프로젝트 폴더 구성

- package.json    : js 라이브러리 dependency 정의된 파일 (npm cli 명령어에서 사용)

-> 기본적으로 npm create react-app 명령어 사용시, react 프레임워크에 필요한 package.json 을 생성 후, npm install 명령어 실행

- node_modules/   : react 프레임워크에서 사용되느 js 라이브러리 모듈 모음

- public/index.html : 웹 화면의 가장 큰 틀에 해당, 기본적인 html, head, body 태그가 정의되어 있음

-> icon, logo 및 문자열과같은 meta 속성값 지정

-> 기본적으로 body 태그안에는 보통 root id를 가진 div 태그 하나만 존재

- src/index.tsx       : ReactDOM.render( <React.StrictMode><App/></React.StrictMode> , html selector) 함수를 통해 메인 App React 컴포넌트 렌더링 수행

 

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기