React | 2.npm 설치 및 사용법

npm 설치하기

Node.js.환경에서 React를 사용하려고 한다면 Node.js와 npm이 설치되어있어야한다.

npm은 node package manager의 약자이다. npm으로 여러가지 모듈을 설치하여 사용할 수 있음.

예전에는 npm을 별도로 설치해야 했지만 지금은 node.js를 설치하면 자동으로 설치된다고 한다.

 

https://nodejs.org/en/

 

에서 설치할 수 있는데,

이런 패키지들은 웬만하면 recommended 버전을 설치하는 것이 좋음.

 

 

 

 

 

npm 실행하기

Node.js 설치 후 cmd 창을 열어서

npm -v 명령어를 입력하면

현재 설치된 npm의 버전을 확인할 수 있다. 

 

 

 

npm install -g babel webpack webpack-dev-server 명령어를 입력해서 global 패키지를 설치한다.

 

 

mkdir react-tutorial && cd react-tutorial  --루트폴더 생성 및 경로이동
npm init -- Node.js 프로젝트 생성

 

 

 

 

 

Git Bash 사용하기

윈도우 cmd대신 git bash를 사용하는 것이 좋다고 해서 사용법을 좀 알아보았다.

프로그램은 여기서 다운로드 하면 된다.

https://gitforwindows.org/

Git for Windows

 

Git Bash는 윈도우에서 사용할 수 있는 쉘이다.

“Git bash”는 “Windows 용 자식 (Git for Windows)”에 포함 된 msys 쉘이며 Cygwin (이전 버전)의 슬림 다운 버전입니다.이 목적은 bash를 실행하기에 충분한 POSIX 계층을 제공하는 것입니다.

 

 

Git Bash의 명령어

이러한 명령어들이 자주 사용된다.

 

계정설정
git config --global user.email "email address"	git에 사용될 메일주소
git config --global user.name	git에 사용될 이름
프로젝트 시작
cd /c/folder (예: cd /d/Node 라면 D:\Node)	경로이동
git clone 깃허브 프로젝트주소	깃허브 프로젝트 복사해오기
git init	저장소 초기화
ls -al	폴더안의 디렉토리 확인
프로젝트 업로드
git add 파일명	commit할 파일 등록
git commit	commit
git commit -m"메모할내용"	메모와 함께 commit
git push origin branch이름	commit된 내용을 git으로 push
일반 명령어
git status	현재 git 정보확인
git log, git shortlog	git log 확인
git branch branch이름	새로운 branch 생성
git checkout branch이름	branch지정 후 이동
git checkout -b branch이름	branch생성 후 그 branch로 이동

 

 

 

 

React app 설치하기

아까 설치한 gitbash를 열어서 윈도우cmd 대신 사용한다.

명령어로 react app을 설치하고 사용할 수 있다.

 

 

1. react app 설치

npm install -g create-react-app

 

2. hello-react app 만들기

$ create-react-app hello-react

 

 

3. hello-react로 경로이동 후 실행

 cd hello-react
 npm start

hello react로 경로이동하고 npm start 하면 react app이 실행된다.

 

 

 

 

 

 

 

출처: https://velopert.com/814