React - create react app을 활용한 개발환경 구축

create react app을 활용한 개발환경 구축

• 순서 : npm 설치 -> create react app 설치 -> create react app 사용

1. node js 설치

• npm은 node js로 만들어진 프로그램들을 쉽게 설치해 주는 일종의 앱스토어이므로 node js를 먼저 설치
• 설치 : https://nodejs.org/en/
• LTS : 안정화 된 것 / current : 가장 최신 버전

2. npm

• node js 설치 시 자동으로 같이 설치됨
• window에서 설치 확인
  1. window key + R (실행 창 열기)
  2. cmd 입력해서 cmd 열기(cmd : commend의 약자로 명령어라는 뜻, 컴퓨터를 명령어를 통해서 제어하는 프로그래밍으로 즉 말로 제어하는 방법이다)
  3. cmd에서 npm -v 입력 : 입력 후 해당 npm의 버전이 나온다면 node js와 npm을 성공적으로 설치했다는 것이다.
• mac에서 설치 확인
  1. spotlight(상단 돋보기 모양) 켜기
  2. terminal 입력
  3. terminal에서 npm -v로 설치 확인
• npm을 다루는 기본적인 방법 : https://opentutorials.org/module/4044

3. create react app 설치

• 설치 방법(cmd)
• npx을 이용하여 설치(공식적으로 권장하는 방법)
  • npm과 npx의 차이 : npm이 create-react-app 프로그램을 설치하는 프로그램이라면 npx는 create-react-app이라는 프로그램을 임시로 설치해서 딱 한번만 실행시키고 지우는 프로그램이라고 생각하면 된다.
  • npx 사용시 장점
    • 컴퓨터의 공간을 낭비하지 않는다.
    • 실행할 때마다 create-react-app 같은 프로그램들을 새로 다운로드 받기 때문에 항상 최신상태이다.
    • 최신상태의 toolchain들을 사용할 수 있게 하므로 공식문서에서 권장하는 방법
  • npx create-react-app
• npm을 이용하여 설치
  1. npm install -g create-react-app : npm을 이용하여 create-react-app을 해당 컴퓨터 어디에서나(-g : global) 실행할 수 있게 설치
  2. npm ERR! code EACCESS : 설치할 권한이 없다는 error로 sudo npm install -g create-react-app 을 이용하여 설치(비밀번호 물어보면 비밀번호 입력 후 설치)
• 설치 확인
  • create-react-app -V 입력 : 설치한 create react app 버전이 뜨면 성공적인 설치

4. 개발환경 구축

• 개발환경을 어느 directory에 세팅할 것인가 정해야 함
• create react app로 해당 directory를 react 개발환경으로 세팅하는 방법
  1. mac은 finder / window는 윈도우 탐색기를 이용하여 새로운 directory(폴더) 만들기 : 이때 폴더 명을 react로 하면 안된다. 왜냐하면 react는 특수한 문자이기 때문에 create react app이 거절하기 때문이다.
  2. 해당 directory 안으로 들어가서 거기서 명령을 실행해야 해당 directory가 create react app에 의해서 개발환경이 된다
     • mac의 경우 : terminal에 cd 을 입력한 다음(cd : change directory) 해당 directory를 drag해서 terminal 창으로 옮겨준다(자동으로 해당 directory의 경로가 뒤에 붙는다. -> create-react-app . 입력(. : 현재 directory를 의미)
     • window의 경우 : cmd에 cd를 입력한 다음 해당 directory를 drag해서 cmd 창으로 옮겨준다 -> create-react-app . 입력
     • 실행 후 해당 directory에 생긴 파일들은 create-react-app이 개발하는데 필요로 할만한 것들을 다 장만해서 만들어 놓은 것들이다.