React 시작하기

리액트를 사용하기위한 환경

현재 다니는 회사 특성상 맥을 이용한 작업 환경을 구축 하고있음으로 맥(리눅스) 에 기반하여 작성하였다.

 

페이스북에서 지원해주는 도구인 create-react-app 을 이용하지않고 리액트를 사용하고자 한다면 node, yarn 은 기본이고 Webpack, Babel 과 같은 도구들을 설치, 설정 해줘야 하는 번거로운 작업이 있지만 우리 페북느님들이 만들어놓은 create-react-app 을 이용하면 쉽게 생성 가능하다. 

혹은 인텔리제이(IntelliJ) - jetbrain 에서 판매하는 IDE를 사용한다면 초기에 번거롭게 설정하는 과정없이 프로젝트 생성이 가능하기에 학부생으로 대학교 이메일(~~ac.kr, .edu)을 가지고 있다면 학생용 라이선스를 받아 사용하길 권장한다. 

 

설치

1. Node.js :  Webpack 과 Babel이 node.js기반이기 때문에 기본적으로 설치되어야함

2. Yarn : npm이 node의 기본 패키지 매니저로 yarn, npm 둘다 같은 역할을 하지만 더나은 속도를 위해 yarn 을 자주 사용하곤함으로 yarn 을 설치한다. (npx는 사용해보지 않음으로 언급 ㄴㄴ)

3. IDE 혹은 코드 에디터 : 인텔리제이를 주로사용

4. git : 다른 선구자분들이 만들어놓은 좋은 소스코드를 보는 것만큼 빨리 코딩실력을 늘리는 것도 없음으로 git으로 그분들의 코드를 가져와 감사히 사용하자

 

Node.js 설치

https://nodejs.org/ko/ 의 홈페이지에 들어가서 다운을 받거나 nvm을 이용하여 설치를 진행하면된다. LTS버전으로 사용을 추천

 

//아래의 커맨드로 버전을 확인할 수 있다
node -v

yarn 설치

https://yarnpkg.com/en/docs/install 페이지에 들어가면 os에따라 설치 화면이 나옴으로 설치 하면된다.

//설치 후 아래 커맨드를 입력하면 버전을 확인 할 수 있다.
yarn -version

 

IntelliJ 설치

인텔리제이는 jetbrains 홈페이지에서 설치 할 수 있으며, 통합 라이선스가 있다면 JetBrains - Tools - LearnMore을 선택하여 툴박스 app을 설치하면 jetbrains 의 tool을 설치 관리 할 수 있다. 

create-react-app 설치

리액트 앱을 쉽게 만들기위해 create-react-app을 설치 해주자.

yarn global add create-react-app

맥과 리눅스에서는 아래의 커맨드를 입력해주어야함

# macOS:
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bash_profile
# Linux:
echo 'export PATH="$(yarn global bin):$PATH"' >> ~/.bashrc

 

프로젝트 만들기

프로젝트생성하고 싶은 위치에서 아래의 커맨드 입력 하면 끝

create-react-app <project_name> 

아래의 커맨드를 입력하면 기본 리액트 페이지가 로컬로 작동하게된다

cd <project_name>
npm start

 

빌드하여 배포하기

소스만으로 배포는 할 수 없으니 빌드를 해야한다

$ npm run build
$ cd build
$ ls
asset-manifest.json
favicon.ico
index.html
static 

build파일 안쪽에 배포할 파일들이 들어있다