개발환경

SPANKEEE·2022년 11월 7일

리액트-시작

목록 보기

2/30

NPM

npm은 nodejs로 만들어진 프로그램을 쉽게 설치해주는 일종의 앱 스토어라고 생각하면 된다.
npm을 설치할 때에는 Node.js라는 프로그램을 컴퓨터에 설치하면 된다.
여기서 Node.js 다운로드 시 두가지 종류가 있다.
LTS : 안정화된 버전,
current : 최신 버전
(본인은 LTS버전을 설치했다)

Node.js 설치 확인(Mac)

f4(spotlight)를 키고 "terminal"을 입력해 터미널을 열어준다.
그리고 명령어 "npm -v"를 입력해(따옴표 제외) 숫자를 확인할 수 있다.

create-react-app

npm을 이용해서 "create-react-app"이라는 프로그램을 설치할 준비가 됬다.
이 프로그램을 설치하는 방법은 공식적으로 권장하는 방법과 또다른 방법이 있다.

npm를 이용한 설치방법
npm install -g create-react-app

하지만 위와같이 권한 오류가 발생하면 아래와 같이 작성한다

sudo npm install -g create-react-app

설치가 완료된 후 아래 코드를 입력해 버전을 확인해 본다.

create-react-app -V

npx를 이용한 설치방법
npx create-react-app 앱이름 --template cra-template-pwa
출저 : 리액트 업데이트로 인해 serviceworker를 사용하고 싶으면 위 명령어를 입력해야된다.

공식메뉴얼에서는 "npx"라는 도구를 설치하라고 권장한다.

npm 과 npx의 차이점

npm : 프로그램을 설치하는 프로그램
npx : 프로그램을 딱 한번만 실행시키고 지우는 프로그램

npx의 장점은 컴퓨터의 공간을 낭비하지 않고, 실행할 때마다 다운로드를 새로 받기 때문에 항상 최신상태이다.

create-react-appㅡ을 이용해서 개발환경 구축하기

개발환경을 어느 경로(Directory)에 설치(setting)할 것인지 정의해야 된다.
이전에 설치한 "crate-react-app"에게 이 디렉토리를 React 개발환경으로 만들도록 부탁해보자.
그러기 위해서 finder(맥), 윈도우 탐색기(윈도우)를 이용해서 바탕화면에 프로젝트로 사용할 폴더를 만들어보자 (본인은 'react-app-recycle'로 만들었다)
(맥 기준으로 작성됨)

디렉토리가 create-react-app에 의해 개발환경이 되기 위해서
터미널을 통해 생성된 react-app-recycle이라는 디렉토리 안으로 들어가 명령을 실행해야 된다.
Change Directory의 약자인 "cd"명령을 통해 현재 디랙토리를 바꾸거나
해당 폴더의 아이콘을 터미널로 드래그 하여 react-app-recycle 디랙토리의 경로가 자동으로 생성된다.

해당 디렉토리가 이동됬다면 ~~create-react-app.명령을 실행한다.~~
-app뒤에 있는 점(.)은 현재 디렉토리란 뜻이다.
리액트 업테이트로 인해 서비스 워커가 사용이 불가능하므로 아래 코드를 입력한다.