[REACT] 무작정 시작하기 (1) - 프로젝트 준비

웹 프로그래밍을 배울때만 해도 jQuery를 이용해서 동적 웹페이지를 만들었었는데, 이제는 Angular, Vue, React 등 다양한 프론트앤드 프레임워크들이 등장하면서 대세를 이루고 있는 추세이다. 이번 무장적 시장하기 시리즈에서는 이 중 React를 다루어보려고 한다.

React는 프로젝트를 구성할 때, 패키지들을 설치하다보면 간혹 버전의 호환성에서 문제가 발생하는 경우가 종종있다. React를 처음 입문하는 사람이라면 멘붕에 빠질 수 밖에 없을 것이다. 하지만 걱정하지 마시라 [ create-react-app ] 이라는 툴을 사용하면 쉽고 빠르게 React 프로젝트를 구성할 수 있다. 하지만, 이번 포스트에서는 이 툴을 사용하지않고 한땀한땀 프로젝트를 구성해나갈 계획이다.

https://ko.reactjs.org/docs/create-a-new-react-app.html

1. Node.js 다운로드

1-1. Node.js는 Javascript 런타임 툴로 Local에서 Javascript를 다룰 수 있도록 도와줌.

1-2. 최신버전: https://nodejs.org/ko/download/

- 최신버전이라면 아무버전이나 상관없음. 참고로 필자는 v12.9.1 버전을 기준으로 작성하였음.

- 설치방법은 [ 다음 ]만 열심히 눌러주면 됨.

1-3. Node.js의 패키지 관리 툴로 npm이 함께 설치됨.

- 취향에 따라 yarn을 사용하기도 하는데, npm으로 좀 익숙해지고 사용하는 것을 권장.

1-4. 설치가 완료되었다면 버전을 확인하여 보자.

2. 프로젝트 준비.

2-1. 폴더 생성.

1 mkdir blog cs

- 프로젝트를 진행할 폴더를 생성.

2-2. node 프로젝트 생성.

1 npm init - y cs

- [ npm init -y ]는 node 프로젝트를 설정하는 명령어이며, [ -y ] 옵션을 사용하면 별도의 입력없이 자동으로 생성해줌

- 명령어를 실행하면 [ package.json ] 파일이 생성됨.

2-3. 패키지 다운로드.

1 npm install react@16.8.6 react - dom@16.8.6 cs

- dependencies 다운로드.

- React의 필수 패키지.

1 2 3 npm install - - save - dev @babel / core@ 7. 4. 3 @babel / plugin - proposal - class - properties@ 7. 4. 0 @babel / preset - env@ 7. 4. 3 @babel / preset - react@ 7. 0. 0 npm install - - save - dev babel - loader@ 8. 0. 5 react - hot - loader@ 4. 8. 3 npm install - - save - dev webpack@ 4. 29. 6 webpack - cli@ 3. 3. 0 webpack - dev - server@ 3. 3. 1 Colored by Color Scripter cs

- devDependencies 다운로드, 개발 환경에서만 필요한 패키지들.

- babel은 Javascript 컴파일러이며, 최신 버전의 Javascript를 사용할 수 없는 환경을 위해 이전 버전의 Javascript로 컴파일 해줌.

- webpack은 번들러이며, 여러 파일로 나누어져있는 파일들을 묶어주는 역할을 하며, 가상서버, hot-loader 등 개발에 필요한 다양한 기능들을 제공함. ( webpack.config.js 라는 설정 파일이 필요함. )

2-4. webpack.config.js 작성.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 const path = require( 'path' ); module.exports = { name : 'blog' , // 번들링 모드, 배포시 production으로 변경. mode: 'development' , // node.js에서 webpack으로 번들링할 때 node옵션이 필요함. node: { fs: 'empty' }, // Source Mapping 스타일 // Source Mapping은 번들링된 파일을 원복시켜주는 기능인데, 개발 환경에 적합한 옵션들을 선택해서 사용. // https://webpack.js.org/configuration/devtool/ devtool: 'eval' , // 번들링할 파일의 확장자. resolve: { extensions: [ '.js' , '.jsx' ] }, // 번들링할 대상 지정. entry: [ './index.js' ], // 번들링된 결과물을 할 폴더 지정. output: { filename: 'app.js' , path: path. join (__dirname, 'dist' ), publicPath: '/dist' }, // 개발 서버 환경 설정. devServer: { host: 'localhost' , port: 4000 , historyApiFallback: true , hot: false , contentBase: path. join (__dirname, 'static' ) }, // 번들링에 사용할 모듈 설정. module: { rules: [ { test: / \.jsx?$ / , loader: 'babel-loader' , options: { presets: [ [ '@babel/preset-env' , // chrome 최신 2개의 버전에서 지원. { targets: { browsers: [ 'last 2 chrome versions' ]} } ], '@babel/preset-react' ], plugins: [ 'react-hot-loader/babel' , '@babel/plugin-proposal-class-properties' ] }, exclude: path. join (__dirname, 'node_modules' ) } ] } } Colored by Color Scripter cs

2-5. packcage.json 수정.

1 2 3 4 5 6 7 ... "scripts" : { "dev" : "webpack-dev-server --hot" }, ... Colored by Color Scripter cs

- 개발 서버를 실행하기위한 명령어를 추가.

- [ --hot ] 옵션은 파일을 수정할 때마다 서버를 재실행할 필요없이 자동으로 reload 시켜줌.

3. 실행 파일 작성.

3-1. 메인 HTML파일 작성, [ ./static/index.html ]

1 2 3 4 5 6 7 8 9 10 11 12 < ! DOCTYPE html > < html > < head > < meta charset = "UTF-8" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > My - React < / title > < / head > < body > < div id = "root" > < / div > < script src = "/dist/app.js" > < / script > < / body > < / html > Colored by Color Scripter cs

- 9 ln: React를 적용할 대상.

- 10 ln: 번들링된 React 파일( /dist/app.js )을 Load하여 React를 적용.

3-2. 메인 React 파일 작성, [ ./index.js ]

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 import React from 'react' ; import ReactDom from 'react-dom' ; import { hot } from 'react-hot-loader/root' import App from './components/App' function render( Component, hotModule = true ){ const root = document . getElementById ( 'root' ); Component = hotModule ? hot( Component ) : Component; ReactDom.render( < Component / > , root); } render( App, module.hot.active ); cs

- [ webpack.config.js ]에서 [ entry ]로 지정한 파일이며, 앞으로 이 파일을 번들링하여 [ /dist/app.js ]로 내보내게됨.

3-3. 첫번째 Component 작성. [ ./components/App.js ]

- React Component는 class와 함수형 Component 두가지의 작성 기법을 선택하여 사용할 수 있음.

1 2 3 4 5 6 7 8 9 10 11 12 13 import React, { Component } from 'react' ; class App extends Component { render(){ return ( < > Hello, World.. ! ! ! < / > ); } } export default App; cs

- Class를 이용한 React의 정통적인 Component 생성방법이며 라이프사이클API를 사용할 수 있음.

1 2 3 4 5 6 7 8 9 10 11 import React from 'react' ; const App = () = > { return ( < > Hello, World.. ! ! ! < / > ); } export default App; cs

- 함수형 Component 생성방법이며, Class와 더불어 정통적인 Component 생성 방법이었지만, React Hooks라는 기법으로 발전하여 사용되고 있음.

- 라이프사이클API를 사용할 수 없지만, 작성법이 간단함.

- 이 방법을 사용하여 프로젝트를 진행할 계획임.

4. 실행.

4-1. 2.5에서 작성한 [ scripts ]를 호출

1 npm run dev cs

- webpack-dev-server가 실행되면, 브라우저를 실행하고 [ localhost:4000 ]으로 접속.

- 정상적으로 접속되면 아래와 같이 [ Hello, World..!!! ]가 노출됨.

지금까지 React 프로젝트를 webpack을 이용하여 셋팅하여 보았다. [ create-react-app ]보다는 손이 많이 가지만, 프로젝트를 내맘대로 구성할 수 있고, 경량화 할 수 있어서 좋다. 다음 포스트에서는 Component를 추가하여 간단한 Counter를 만들어 보도록 하겠다.

from http://heodolf.tistory.com/17 by ccl(A) rewrite - 2020-03-06 13:20:38