들어가기 전에
이번 수업에서 create-react-app을 설치하고 create-react-app을 이용해서 우리가 개발할 수 있는 개발환경을 완성할 수 있습니다.
자신의 OS환경과 적절한 버전을 선택하여 수업에 참여해주세요.
학습목표
npm을 이용하여 create-react-app을 설치할 수 있습니다.
npm과 npx의 차이를 이해할 수 있습니다.
핵심단어
- npm
- npx
- create-react-app
강의듣기
들어가기 전에
이번 수업에서 create-react-app을 설치하고 create-react-app을 이용해서 우리가 개발할 수 있는 개발환경을 완성할 수 있습니다.
자신의 OS환경과 적절한 버전을 선택하여 수업에 참여해주세요.
학습목표
npm을 이용하여 create-react-app을 설치할 수 있습니다.
npm과 npx의 차이를 이해할 수 있습니다.
핵심단어
강의듣기
NPM 설치
이번 시간에는 npm을 설치하도록 하겠습니다.
npm은 nodejs로 만들어진 프로그램을 쉽게 설치해주는 일종의 앱 스토어라고 설명했습니다.
그렇기 때문에 npm을 설치할 때에는 Node.js 라는 프로그램을 컴퓨터에 설치하시면 됩니다.
Node.js 다운로드 시 두가지 종류의 버전이 있는데요.
"LTS" 라고 되어있는 것은 안정화된 버전, "current" 라고 되어 있는 것은 가장 최신 버전입니다.
버전의 종류, 운영체제의 종류에 구애없이 다운로드 후 설치를 진행하세요.
1. Window에서 Node.js 설치 확인
window + r을 누르시면 실행이라고 되어 있는 프로그램이 나오고, 여기에 "cmd"를 입력합니다.
"cmd" 는 command 의 약자로 컴퓨터를 명령어를 이용하여 제어하는 프로그램입니다.
npm이 잘 설치되었는지 확인하기 위해서 "np -v" 라는 명령어를 입력했을 때 숫자가 나온다면
성공적으로 Node.js와 npm을 설치한 상태입니다.
2. Mac에서 Node. js 설치 확인
spotlight를 킨 후 "terminal"이라고 입력하면 프로그램이 실행됩니다.
이 프로그램에서 마찬가지로 "npm -v" 라고 입력했을 때 숫자가 나오면 성공적으로 잘 설치하신 겁니다.
create-react-app 설치
npm을 이용해서 "create-react-app"이라는 프로그램을 설치할 준비가 되었습니다.
이 프로그램을 설치하는 방법은 공식적으로 권장하는 방법과 우리 수업에서 사용하려는 방법이 있습니다.
우리 수업에서는 npm을 이용해서 바로 create react app을 설치합니다.
npm install -g create-react-app
이 명령어는 npm에게 create-react-app 설치(install)을 시키는 것입니다.
"global"의 약자로 -g 옵션을 통해 컴퓨터 어디에서든 실행할 수 있게 됩니다.
설치되는 과정에서 권환이 없다면 에러가 발생할 수 있습니다.
이 때 명령어 앞에다 "sudo"를 붙여서 실행해주시면 됩니다.
이 명령이 실행되면서 비밀번호를 물어볼 수 있어요. 비밀번호를 입력하고 진행하시면 됩니다.
이렇게 설치가 완료되었습니다. 잘 설치되었는지 확인하기 위해서 "create-react-app -V" 명령을 입력하시면
우리가 설치한 프로그램의 버전을 확인할 수 있습니다. 숫자가 나오면 성공적으로 설치가 된 것입니다.
NPM vs NPX
공식메뉴얼에서는 "npx" 라는 도구를 이용해서 설치하라고 되어있습니다.
"npx create-react-app" 명령어를 통해 설치를 진행할 수도 있습니다.
"npm" 과 "npx" 의 차이는 npm이 프로그램을 설치하는 프로그램이라면
npx는 프로그램을 임시로 설치해서 딱 한번만 실행시키고 지우는 프로그램이라고 생각하시면 됩니다.
npx의 장점은 "컴퓨터의 공간을 낭비하지 않는다." , "실행할 때마다 다운로드를 새로 받기 때문에 항상 최신상태이다." 라는 것입니다.
생각해보기
여러분의 "node.js"와 "create-react-app" 의 버전을 확인해보세요.
참고자료
https://nodejs.org
https://opentutorials.org