본문 바로가기
Web Development/React

React / part.1 CRA

by Krystal K 2023. 4. 21.

CRA(Create-React_App)란?

리액트 프로젝트를 시작하는데 필요한 개발 환경을 구축해주는 도구(toolchain)이다.

 

1. CRA를 이용한 프로젝트 구축

  1. 터미널에서 프로젝트를 시작하고자 하는 폴더에 진입한다.
  2. cd [ 프로젝트를 구축할 폴더명]
  3. 프로젝트를 설치한다.이때 프로젝트명은 대문자 혹은 소문자로 작성한다(~!()^*)등의 일부 특수문자는 에러 발생
  4. npx create-react-app [프로젝트명]
  5. 프로젝트 폴더 진입
  6. cd [프로젝트명]
  7. 로컬 서버에 띄우기
  8. npm start
  9. http://localhost:3000 이라는 로컬 서버주소를 확인

 

2. CRA 초기 폴더 및 파일 구성

node_modules, .gitignore, package.json 상관관계 이해하기

 

node_modules

용량이 크기 때문에 github에 올리지않는다

⇒  gitignore에 추가추가로 패키지를 설치할 경우 실제 코드는 node_modules 폴더 하위에 생성

npm으로 다운받은 패키지들의 소스 코드가 존재하는 폴더

 

.gitignore

깃허브에 안되는 파일들을 관리

.gitignore 파일에 추가된 폴더와 파일은 Git에서 추적하지 않는다.

 

package.json

CRA 기본 패키지 외에 추가로 설치된 라이브러리 혹은 패키지의 종류, 버전 등의 정보가 기록되는 파일

모든 프로젝트마다 package.json파일이 존재한다.

dependencies npm을 통해 설치된 모든 패키지 리스트와 버전 확인이 가능


잘못된 정보가 있다면 댓글로 피드백주세요. 확인 후 수정하겠습니다^-^

더 정확한 정보 혹은 더 효율적인 방식이 있을 경우 댓글로 의견을 공유해주세요!

728x90

'Web Development > React' 카테고리의 다른 글

React/ part.2 Routing과 Router  (0) 2023.04.23
React/ part.2 component  (1) 2023.04.22
React/ part.2 JSX  (0) 2023.04.21
React/ Part.1 Node.j & npm  (0) 2023.04.21
React / intro : 리액트란?  (0) 2023.04.21