react js 개발환경 구축

불타는Study

01 개발환경구축 (with WebStorm)02 ..

01개발환경구축 (with WebStorm)

-JetBrain 의 WebStorm IDE 를 설치한다 .IDE = Integrated Development Environment 통합개발환경통합개발환경은 코딩을 위한 편집기 , 컴파일 , 링크 , 디버그 등 . 실행 모듈 및 개발에 필요한 기능을 통합적으로 합쳐서 만들어 놓은 것을 이야기 한다 .

참조 : http://tworab.tistory.com/50

01-Node JS 를 설치한다 .(Node JS 를 설치하면 , NPM 이 같이 설치가 되는데 , NPM 이 필요하다 !) https://nodejs.org/ko/

개발환경구축 (with WebStorm)

https://nodejs.org/ko/

01-Node JS 와 NPM 은 무엇일까 ?

개발환경구축 (with WebStorm)

Node.Js 는 무엇인가 ?웹 개발은 Front-end 와 Back-end 로 나뉜다 . 간단히 말하면 프론트앤드 (Front-End) 는 웹페이지 쪽의 사용자가 볼 수 있는 부분이고 (Veiw), 백앤드 (Back-End) 는 서버쪽을 차지하고 있다 . 원래 JavaScript 는 프론트앤드에서 사용이 주로 됐지만 , 2009 년 Node.js 라는 framework 의 등장으로 자바스크립트로 서버단 기술까지 제어할 수 있게 되었다 .Node.js( 노드 js) 는 JavaScript 엔진 V8 위에서 동작하는 이벤트 처리 I/O framework 이다 . 서버 환경을 포함한 프론트앤드 백앤드 모두를 JavaScript 라는 같은 언어로 관리할 수 있게 되었다 . 기존의 Front-end 개발자들도 다른 언어를 배울 필요 없이 쉽게 서버단 처리를 할 수 있게 만들어줬다 .Node.js 설치 ( 윈도우 기반 )1. 다운로드 사이트 방문https://nodejs.org/ko/

NPM 이란 ?Node Package Modules 의 약자다 . 즉 , Node.js 에서 사용가능한 모듈들을 패키지화시켜 모아놓은 것이다 .예를 들어서 Grunt 라는 툴을 설치하기 위해서는 npm 을 통해서 설치하고 관리 할 수 있다 .이 경우 위에 언급한 것처럼 Node.js 를 설치 후 Command 창에 npm 을 입력해보면 npm 명령어의 문법을 알려준다 .아래와 같이 보여지면 사용 가능한 것으로 보면 된다 .

Usage: npm <command>

where <command> is one of: access, adduser, bin, bugs, c, cache, completion, config, ddp, dedupe, deprecate, dist-tag, docs, edit, explore, get, help, help-search, i, init, install, install-test, it, link, list, ln, login, logout, ls, outdated, owner, pack, ping, prefix, prune, publish, rb, rebuild, repo, restart, root, run, run-script, s, se, search, set, shrinkwrap, star, stars, start, stop, t, tag, team, test, tst, un, uninstall, unpublish, unstar, up, update, v, version, view, whoami

npm <cmd> -h quick help on <cmd>npm -l display full usage info이하 생략 ..

https://nodejs.org/ko/


-JetBrain 의 WebStorm IDE 실행 후 , 프로젝트 생성 .File 메뉴 New Project 에서 , Empty Project 로 프로젝트를 생성 .( 나는 reactApp2 라는 경로명으로 생성함 .)좀 더 편하게 프로젝트를 구성하고 싶으면 , React Starter Kit 로 구성을 해도 됨 .( 하지만 , PPT 작성자가 사용을 안해봄 .)


-프로젝트 생성 후 , View 메뉴에 Tool Windows 에서 Thminal 을 뛰워주자 . 단축키 Alt + F12File 메뉴 New Project 에서 , Empty Project 로 프로젝트를 생성 .( 나는 reactApp2 라는 경로명으로 생성함 .)좀 더 편하게 프로젝트를 구성하고 싶으면 , React Starter Kit 로 구성을 해도 됨 .( 하지만 , PPT 작성자가 사용을 안해봄 .)


-Package.json 생성 및 NPM 의존성 모듈 관리 . = NPM 은 프로젝트에 대한 설정을 package.json 이라는 파일에 의존하고 있고 , 이 파일에 JSON 형식으로 작성해서 프로젝트에 대한 관리를 할 수 있다 .

-실행시킨 터미널에서 해당 커맨드를 입력 .1. npm init입력 후 , name 및 옵션 설정 .성공적으로 진행 되었다면 , package.json 파일 생성 .

C:\Users\devBae\WebstormProjects\reactApp2>npm initThis utility will walk you through creating a package.json file.It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fieldsand exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package andsave it as a dependency in the package.json file.

Press ^C at any time to quit.name: (reactApp2) reactAppSorry, name can no longer contain capital letters.name: (reactApp2) reactversion: (1.0.0)description:entry point: (index.js)test command:git repository:keywords:author:license: (ISC)About to write to C:\Users\devBae\WebstormProjects\reactApp2\package.j-son:

{ "name": "react", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC"}

Is this ok? (yes)


-Package.json 에 필요한 NPM 모듈들을 추가하자 !

-실행시킨 터미널에서 해당 커맨드를 입력 . -npm install 모듈명 --save 로 모듈 설치시 --save 라는 옵션을 붙혀주면 로컬에 모듈을 설치하면서 자동적으로 package.json 을 업데이트 해준다 .

Package.json 이 존재하는 Root 경로에서 입력해주면 된다 .

npm install -g babel --savenpm install -g babel-cli --savenpm install webpack --savenpm install webpack-dev-server --savenpm install react --savenpm install react-dom --savenpm install babel-core --savenpm install babel-loader --savenpm install babel-preset-react --savenpm install babel-preset-es2015 --save

설치해야 하는 모듈들이 상당히 많다 .React 를 사용하기 위해서는 , react, react-dom 을 설치를 해줘야 하며 ,이를 위해 , Webpack, Babel 을 설치를 해줘야 한다 .그리고 , react 설치 시 , 혹시 에러 나면서 인스톨이 안되면 , package.json 에서 app 이름 (name) 을 바꿔주자 . 나는 re-act 라고 해서 설치가 안되서 reactTest 로 변경했다 .


-몇가지 파일들을 생성해주자 .(Webpack 은 또 설정파일 생성해서 작성해야한다 -_-)

index.htmlApp.jsxmain.jswebpack.config.js

위 4 가지 파일들을 생성해 주자 . 다음 PPT 에서 해당 파일들의 내용을 그대로 채워주도록 하자 .


-Webpack.config.js

var config = { entry: './main.js',

output: { path:'./', filename: 'index.js', },

devServer: { inline: true, port: 8080 },

module: { loaders: [ { test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel',

query: { presets: ['es2015', 'react'] } } ] }}

module.exports = config;


-index.html

<!DOCTYPE html><html lang = "kr">

<head> <meta charset = "UTF-8"> <title>React App</title></head>

<body><div id = "app"></div><script src = "index.js"></script></body>

</html>

-App.jsx

import React from "react";

class App extends React.Component { render() { return ( <div> Hello World!!! </div> ); }}

export default App;


-main.js

import React from 'react';import ReactDOM from 'react-dom';import App from './App.jsx';

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

{ "name": "reactTest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "babel": "^6.5.2", "babel-cli": "^6.18.0", "babel-core": "^6.21.0", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "react": "^15.4.2", "react-dom": "^15.4.2", "webpack": "^1.14.0", "webpack-dev-server": "^1.16.2" }}

{ "name": "reactTest", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --hot" }, "author": "", "license": "ISC", "dependencies": { "babel": "^6.5.2", "babel-cli": "^6.18.0", "babel-core": "^6.21.0", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "react": "^15.4.2", "react-dom": "^15.4.2", "webpack": "^1.14.0", "webpack-dev-server": "^1.16.2" }}

package.json 을 열고 , “test” “echo” 부분을 삭제하자 .

대신 , 이걸 추가 ."start": "webpack-dev-server --hot" 이제 npm start 명령을 사용하여 서버를 시작할 수 있습니다 .

--hot 명령은 파일 내에서 무언가가 변경된 후 실시간 재로드를 추가하므로 코드를 변경할 때마다 브라우저를 새로 고칠 필요가 없습니다 .


-Running the Server드디어 셋팅이 마무리 되었다 . 이제 서버를 실행해서 , React 가 잘 실행이 되는지 확인을 해보자 !

npm start 명령어를 입력해서 서버를 실행시키자 .실행 후 , 브라우저를 통해서 localhost:8080 으로 접속을 해보자 !

Thanks. Have a good day.

react js 개발환경 구축

Internet