React tutorial 개발환경 꾸미기
내가 왜 이걸 쓰고 있는지는 잘 모르겠다. 여튼 React에 관해서 알아보실 분들은 다른 사이트에 많이 있으니 참고하시고, 빠르게 node.js 를 통해서 개발해 보도록 하자.
* Nodejs나 webpack 같은 기술 스택은 설명하지 않습니다. 왜냐하면, 저도 모르기 때문입니다.
일단 package.json 파일은 다음과 같다.
{
"name": "react-tutorials",
"version": "0.0.0",
"description": "",
"main": "webpack.config.js",
"dependencies": {
"babel-loader": "^6.2.0",
"babel-plugin-add-module-exports": "^0.1.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-plugin-transform-class-properties": "^6.3.13",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-es2015": "^6.3.13",
"babel-preset-react": "^6.3.13",
"babel-preset-stage-0": "^6.3.13",
"react": "^0.14.6",
"react-dom": "^0.14.6",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.1"
},
"devDependencies": {},
"scripts": {
"dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}음. 뭐 잠깐 살펴보자면, webpack을 기본적으로 사용할 예정이고, ES6를 사용할 예정이기 때문에 babel을 엄청 올려놨다.
그리고 react, react-dom을 올렸으며, 개발하기 편하라고, webpack-dev-server도 올렸다.
이 상태에서 node.js에 설치되어 있다면 package.json 파일이 있는 폴더에서 다음과 같은 명령어를 실행하자.
—인스톨
npm install
명령어가 실행되며 시간이 걸리게 된다. 뭐 잠깐 기다려 보면, 완료될 것이다. 완료가 된 이후에 webpack이 설치되어 있다. 따라서 wepback.config.js 를 만들어 주자.
var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');
module.exports = {
context: path.join(__dirname, "src"),
devtool: debug ? "inline-sourcemap" : null,
entry: "./js/client.js",
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0'],
plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
}
}
]
},
output: {
path: __dirname + "/src/",
filename: "client.min.js"
},
plugins: debug ? [] : [
new webpack.optimize.DedupePlugin(),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
],
};요렇게 만들면 되겠다. 이 파일을 잠깐 살펴보면 전체적인 폴더의 구조가 보일 것이다. 그리고 우리가 사용하는 플러그 인들도 확인할 수 있는데. 만약 초기 사용자라면 그냥 아… 모르겠다. 하면서 넘어가면 된다. 이것은 중요한게 아니다.
물론 어떤 분들은 개발환경을 구성하는게 중요하다고 말씀하시기도 하지만, 일단 하다가 환경이 구려서 바꾸면 되지 않겠는가? 이걸로 프로젝트를 진행할 사람은 없을 것이라 생각된다..(이…있으면 안되는디…)
전체적인 폴더의 구성은 다음과 같아질 것 같다.
여기서 md파일은 지금 문서를 작성하고 있는 파일이니… 크게 유념치 마시길.
이제 몇 가지 파일만 더 만들면 된다. html 파일 한개와 client.js파일을 만들면 되는데..
일단 index.html은 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>리엑트 빠르게 할작할작</title>
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cosmo/bootstrap.min.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div id="app"></div>
<script src="client.min.js"></script>
</body>
</html>
일단 중요하게 봐야 할 것이 body안에서 div 의 id를 app이라는 이름으로 지정하였고, 여기에 script 로 client.min.js가 올라온다. 그렇다면 우리는 client.min.js를 만들어야 할까???
그건아니다. client.min.js는 webpack이 자동으로 만들어 주는 녀석이라고 생각하면 된다. 우리는 일단 webpack 에서 지정한 entry를 만들어주어야 한다. 엔트리의 폴더는 src/js가 되며 client.js가 된다.
client.js는 다음과 같다.
import React from "react";
import ReactDOM from "react-dom";
class Layout extends React.Component{
render(){
return (
<h1> React 이까이꺼 그냥 ..</h1>
);
}
}
const app = document.getElementById('app');
ReactDOM.render(<Layout />,app);이렇게 만들어 준 후에… 그냥 열어보면 망한다..;;
이제 아까 npm install 이 끝난 이후 이 명령을 추가로 입력하자.
* webpack-dev-server 실행!(명령어)*
npm run dev
이렇게 넣어주고 잠깐 기다리면 막막 이상한 문자들이 뜬다.
그리고 나서 익스플로어 혹은 크롬을 가지고(크롬츗현) 주소창에 다음과 같이 입력해 보자
주소 입력
그리고 나서보면 다음과 같은 화면을 얻을 수 있다.
잠시 생각해보자. 우리 html 코드에는 아무것도 없다. 단지 client.min.js를 불러올 뿐이다. client.min.js는 client.js 밖에 없음으로 client.js를 생각해 보자.. client.js는 다음과 같은 녀석이었다.
import React from "react";
import ReactDOM from "react-dom";
class Layout extends React.Component{
render(){
return (
<h1> React 이까이꺼 그냥 ..</h1>
);
}
}
const app = document.getElementById('app');
ReactDOM.render(<Layout />,app);자 여기에서 주목해야할 부분은
<h1> React 이까이꺼 그냥 ..</h1> 여기다. 여기를 다른 글로 바꾸어 보면 주소창이 바뀌어 있을 것을 확인 할 수 있을 것이다. 오늘은 여기까지만.
import React from "react";
import ReactDOM from "react-dom";
class Layout extends React.Component{
render(){
return (
<h1>죄송합니다. 깔보지 않을께요.</h1>
);
}
}
const app = document.getElementById('app');
ReactDOM.render(<Layout />,app);
'SW교육 > React' 카테고리의 다른 글
| React CRA typescript Error (0) | 2020.11.22 |
|---|---|
| React 그냥 막하기 -2 (React tutorial) (0) | 2016.08.13 |