React 시작하기

gjeon·2021년 8월 15일

React

목록 보기

2/9

설치

1. homebrew 설치

mac 에서 개발환경 세팅을 할 때 사용하는 패키지 관리 프로그램.
https://brew.sh/index_ko
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

2. node.js 설치

react 내장 도구들이 node.js 기반이기에 설치는 필수라고 한다.
brew install node
설치가 완료되면 성공적으로 설치가 되었는지 확인해보자.

node -v
npm -v

정상적으로 설치가 되었다면 버전이 뜰것이다.
npm? npm 은 node.js 로 만들어진 모듈을 관리하는 툴이라고 한다. node.js 를 설치하면 내장되어 있다.

3. npx or yarn 설치 (선택사항)

npx

npx 는 새로운 패키지 관리 모듈이 아니다. 자바스크립트 패키지 관리 모듈인 npm 의 5.2.0 버전부터 새로 추가된 도구이다. npm을 좀 더 편하게 사용하기 위해서 npm 에서 제공해주는 하나의 도구이다.
npm install npx -g

yarn

npx 로도 가능한데 yarn 으로 설치하는 선택사항도 존재한다.

//yarn 설치
$ sudo apt-get update && sudo apt-get install yarn
//만약 설치가 안된다면 npm을 통해 설치
$ npm install -g yarn
// path설정
$ echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.zshrc
//설치 버전 확인
$ yarn --version
1.13.0
// self update 
$ yarn self-update

yarn 의 장점.
- 패키지 설치시 작업을 병렬로 하여 속도가 빠름
- 보안성 높음
- 참고 : yarn이란?

4. react 프로젝트 생성

프로젝트 폴더를 생성하려는 경로에서 아래의 명령어와 프로젝트 이름을 넣어서 프로젝트를 생성한다.

npx

npx create-react-app [프로젝트 이름]

yarn

yarn global add create-react-app
react 개발을 위한 도구를 설치한다.
create-react-app [프로젝트 이름]

실행

해당 프로젝트 폴더에 들어가서 아래 명령어를 입력하면 실행된다.

npm

npm start

yarn

yarn start
리액트 그림의 페이지가 뜬다면 정상적으로 실행이 된것이다.

추가

react 는 UI 라이브러리로 Angular 와 같이 프로젝트 전체를 모듈 방식으로 개발할수도 있지만

특정 페이지 내에 react 를 끼워넣어서도 개발이 가능

CDN 을 통해서 사용하는 것이라 하는데 CDN 은

콘텐츠 전송 네트워크(Content delivery network 또는 content distribution network (CDN))는 콘텐츠를 효율적으로 전달하기 위해 여러 노드를 가진 네트워크에 데이터를 저장하여 제공하는 시스템을 말한다. 인터넷 서비스 제공자(ISP)에 직접 연결되어 데이터를 전송
출처 : 위키백과

방법은

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>