React - 프로젝트 생성 및 babel & webpack 설명

React 프로젝트를 만드는 방법은 여러가지 있지만

Node.js 기반으로 개발할때 유용하게 프로젝트를 생성 할때

[create-react-app] 이 있다.

webpack과 babel 등을 사용하여 개발하는 경우가 많은데

해당 도구를 설치하고 일일이 설정해야 되는게 정석이지만 

쉽게 리엑트 프로젝트를 만들수 있게 해주는 create-react-app 도구를 사용한다.

create-react-app

npm과 yarn으로 설치할 수 있는데 

패키지를 설치하는데 방법이 2가지 있는데

1. 지역적(local)으로 설치

2. 전역적(global)으로 설치

둘의 차이점은 

- 프로젝트 디렉터리에서만 사용할지

- 모든 디렉터리에서 사용할지 정하는것인데

create-react-app는 커맨드라인 도구라 모든 디렉터리에서

필요하므로 전역으로 설치해준다.

npm install -g create-react-app

이제 npm에 create-react-app 라는 리액트 프로젝트를 생성해주는 기능을 

추가하게 된것이다.

그렇다면 create-react-app을 사용해보자.

프로젝트 생성

create-react-app 프로젝트명

터미널에서 프로젝트를 생성 경로에서 

프로젝트를 생성하면 지정한 프로젝트명으로 디렉토리가 생성된후

node모듈과 public , scr , package.json 등 생성된걸 알 수있다.

package.json를 열어보면

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }

 

스크립트에 start 라는 key가 있는데

npm start

을 해주면 local 서버는 열리는데 기본 적으로 포트번호를 3000으로 열리게 된다.

웹 배포시 빌드를 하고 싶다면 

npm build를 하면 되는데

리엑트 프로젝트를 '빌드'한다는것은

여러 파일로 분리된 프로젝트를 한 파일로 합치는 것이다.

이 과정에서 ES6형태로 작성된 코드를 구버전 자바스크립트 엔진이 이해할수 있게 코드가 변환된다

local에서 web에서 ES5로 컴파일이 되는 이유는 babel이 역활을 해주고

webpack은 자바스크립트 모듈을 번들링 해준다 즉, 여러 모듈을 하나로 모아 만들어 준다.

webpack에 대해서 더 설명하자면

전처리(pre-processor) 기능 과 자바스크립트로 컴파일 되는 언어들(TypeScript , coffeScript ... )을 미리 사용 할수있게 해주는 도구이다.  

( 전처리 - 사용하기 편한 명령어를 추가하고 이를 다시 본 언어로 변환 해주는 것 )

코드 이해를 돕자면 

방금 만든 프로젝트에서 

App.js를 열어보면 

React

import React, {Component} from 'react';

이 부분 있을 것이다. 

import는 webpack의 전처리기능으로서 컴파일이 가능한데..

기존 ES5에서의 작업시 Node의 require와 같다.

Node

var React = require('react');
var Component = React.Component;

이렇게 된다는것인데 이 방식은 Node의 모듈화해서 사용하는 기능이다.

보통 웹 브라우저에서 html 파일안에 script src를 사용하여 여러 파일을 불로오곤 하는데

이런 특징을 웹 브라우저에서도 비슷하게 사용하는 방식은

번들링 도구를 사용하는것! 

- 번들(bundle) 묶는다는 뜻

즉, 파일을 묶듯이 연결하는것이다.

 

리액트에서 그 작업을 하는것이 webpack

webapck 말고도 번들링도구는 있지만 이는 편의성과 확장성면에서 다른 도구 보다

뛰어나다 (자세한것은 직접 찾아보길)

이런 번들링 도구를 사용하면 require(또는 import) 로 모듈을 불러왔을때 번들링 되면서 모둘을 파일 하나로 합쳐준다.   

SVG와 CSS 파일도 webpack으로 불러올 수 있는데

이렇게 파일을 불러오는 것은 webpack의 loader 가 담당한다.

loader의 종류는 많다

css-loader는 css파일을 불러올 수 있고

file-loader는 웹폰트나 미디어 파일을 불러 올 수 있다.

babel-loader는 js파일들을 

불러오면 ES6로 작성 된걸 ES5 문법으로 변환해준다.

이 부분은 수정이 더 필요한 부분이다 

create-react-app으로 프로젝트를 여러가지의 파일이 생성되는데

지금 여기서 설명하지 않아도 괜찮은 부분이라 원치않으면

스킵해도 된다.

설정방식으로는  

package.json에서 "main" 을 따로 지정하지않으면 기본적으로 index.js를 먼저 찾게 된다.

"dependencies"에 React를 사용 할 수 있게 

"react"

, "react-dom"

, "react-scripts"

가 잡혀져있는데 이것은 

React를 사용하것이기 때문에 "react"

React에서 render를 하기위한 "react-dom"

React에서 script기능들을 사용하기위한 "react-scripts"

를 의존 해준다.

  

그 후 index.js 를 보면

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

를 임포트 한것을 확인할 수 있는데

우리가 가장 집중해야 할 것은 

React , ReactDOM, APP 이부분이다. 

ReactDOM.render(<App />, document.getElementById('root'));

ReactDOM이 Document를 render 해줄 것 인데 어디에 할것인지 

JSX문법으로 APP을 지목 한것이다 

※ './App'은 './App.js' 와 같다 js는 생략해서 사용한다.

App.js의 랜더링을 도큐먼트의 id 중 'root'에 Dom을 랜더 한다는 것이다. 

자 여기서 다 이해가 가는데 serviceWorker 이건 무엇인가??

깊게 알아보면 기능이 참 많은 녀석일것 같은데 

serviceWorker는 프록시 역할을 하는것인데

웹서버가 아닌 serviceWorker서버는 네트워크간으로 연결을 할때 사용할 수 있고 

백그라운드 동기화나 푸시알림 같은것을 지정 할수있는데

표준화가 되어있지않아서 브라우져마다 되는것이 있고 안되는것이 있어서 권장하지 않는 것 같다.

serviceWorker.unregister(); //.register("./test.js");