React 개발 환경 세팅 & React 개발 서버 실행 & Github 연동

React 개발 환경 준비

 

Node.js

Webpack 과 Babel 같은 도구들이 Node.js 를 기반으로 만들어졌다.
따라서 해당 도구들을 사용하기 위해서 Node.js 를 설치해야한다.
 
Webpack, Babel의 용도?

리액트 프로젝트를 만들면 컴포넌트를 여러가지 파일로 분리해서 저장하고, 이 컴포넌트는 JSX 라는 문법으로 작성하게 된다.
분리된 여러 개의 파일을 한 개로 결합하기 위해서 Webpack 이라는 도구가 필요하고,
JSX와 같은 새로운 자바스크립트 문법들을 사용하기 위해  Babel 이라는 도구가 필요하다.
 
 

Yarn

Yarn 은 조금 개선된 버전의 npm 이다.
npm 은 Node.js를 설치하면 딸려오는 패키지 매니저 도구이고,
프로젝트에서 사용되는 라이브러리를 설치하고 라이브러리 버전 관리를 하게 될 때 사용한다.
Yarn 을 사용하는 이유는 설치 속도도 빠르고 오프라인에서도 사용 가능하기 때문이다.
 
 
 

코드 에디터

VSCode, Atom, WebStorm 등 다양한 코드 에디터가 있다.
 
 

Git bash

윈도우의 경우, Git for Windows 를 설치하고 함께 설치되는 Git Bash 를 사용해야한다.
cmd 대신 활용할 터미널이다.
 
 
 

React 개발 서버 실행

: 터미널 또는 코드 에디터에서 명령어 작성하기
 
 
1. 디렉토리 생성 및 react 프로젝트 생성

npx create-react-app my-react-app

yarn을 설치하지 않았다면 npm start 명령어도 가능하다.
 
3. 링크 들어가서 제대로 열리는지 확인
 
Local: http://localhost:3000/
- 내 컴퓨터에서 열 수 있는 링크
On Your Network: 내 ip주소:3000/
- 같은 wifi를 사용할때 남이 볼 수 있는 링크
 
 
'my-react-app' 자리에는 원하는 디렉토리 이름을 작성해준다.
 
** create-react-app 이란 Facebook에서 만든 react 웹 개발용 boilerplate이다.
** npm으로 global하게 설치하지 않는 이유는 자주 사용하지 않는 무거운 패키지가 로컬에 남게된다.
또한, 새로운 버전이 나왔을 때 로컬에 존재하는 패키지를 다시 제거하고 설치해야한다.
하지만 npx를 사용하면 최신 버전의 패키지를 설치하여 실행하고, 실행한 이후에 그 패키지를 제거해준다.
 
2. 디렉토리로 들어간 후 react 개발 서버 실행

cd my-react-app
yarn start

Github 레포지토리 생성 후 React 앱 업로드

 

git init // 작업할 폴더에서 실행
git remote add origin 레포지토리주소
git add .
git commit - m "blabla"
git push origin master