[React.JS] 강좌 2편 작업환경 설정하기


liste

이번 강좌에서는 React 작업환경을 설정해보도록 하겠습니다. 저희는 NodeJS 환경에서 React를 사용 할 것이므로 NodeJS 및 npm이 설치되있어야 합니다. NodeJS 환경에서 React를 사용하는 방법은  대표적으로 webpack을 이용하는 방법이 있고, browserify를 이용하는 방법이 있는데요, 이 포스트에서는 webpack을 이용하도록 하겠습니다.

주의: Node.js를 설치 한 다음에, npm install -g npm 을 통하여 npm 버전을 최신버전으로 업데이트하세요. LTS 버전에서는 지금은 NPM을 2.15.9 을 사용하는데, 이는 모듈을 설치할때 nested 된 구조로 설치하기 때문에 React.js 프로젝트를 만들땐 정말, 정말, 오래걸립니다. (babel-preset-es2015 설치 할 때). 위 명령어로 최신버전인 3.10.6 을 사용하면 모듈설치가 훨씬 빨라집니다. (node_modules 의 용량차이가 어마어마합니다. babel-preset-es2015 의 경우 6.14MB, 구버전 NPM을 사용 했을땐, 144MB)

0. The EASY WAY

NPM을 통하여 설치를 하는게 번거롭고, 공부만 하는게 목적이라면 다음 JSfiddle을 사용하세요!

txsGw

브라우저에서 React.js 프로젝트를 작성 할 수 있습니다.
JavaScript 를 한 파일에 작성해야하고 아직 ES6의 Syntax 가 제대로 지원되지 않는 단점이 있지만, 공부 할 때는 매우 편하답니다.

 

 1. Global Package 설치

작업환경 설치를 위하여 몇가지 글로벌 패키지가 설치 되어야 합니다. 설치 할 패키지들은 다음과 같습니다:

  1. babel – 아직 ECMAScript6 를 지원하지 않는 환경에서 ECMAScript6 Syntax를 사용 할 수 있게 해줍니다.
  2. webpack – 모듈 번들러로서, Browserify 처럼 브라우저 위에서 import (require) 을 할 수 있게 해주고 자바스크립트 파일들을 하나로 합쳐줍니다.
  3. webpack-dev-server – wepback에서 지원하는 간단한 개발서버로서 별도의 서버를 구축하지 않고도 웹서버를 열 수 있으며 hot-loader를 통하여 코드가 수정될때마다 자동으로 리로드 되게 할 수 있습니다.
$ npm install -g babel webpack webpack-dev-server

2. 프로젝트 생성

react-tutorial 이라는 루트 폴더를 생성 후 npm init 명령어를 사용하여 Nodejs 프로젝트를 생성하세요.

$ mkdir react-tutorial && cd react-tutorial
$ npm init

3. Dependency 및 Plugin 설치

우리가 React 를 사용 할 것이므로, 설치해야줘야합니다. –save 옵션을 통하여 package.json 에 의존 패키지들을 추가 할 수있습니다.

$ npm install --save react react-dom

둘쨰로, babel 에서 사용 될 플러그인을 설치해야합니다. 해당 모듈들은 개발환경에서만 사용되므로 –save-dev 옵션을 설정해주세요.

$ npm install --save-dev babel-core babel-loader babel-preset-react babel-preset-es2015 webpack webpack-dev-server

webpack 과 webpack-dev-server 가 글로벌로 이미 설치가 되어있는데, 로컬 모듈로 설치된 이유는 webpack 의 livereload와 비슷한 기능인 –hot 옵션을 사용하기 위함 입니다. 사실 상, webpack 모듈을 글로벌 패키지로서 꼭 설치 할 필요는 없습니다. 이를 설치 한 이유는 커맨드라인에서 webpack-dev-server을 바로 실행하기 위함인데, 로컬에만 설치하고 나중에 webpack 을 실행할 때는 ./node_modules/bin/webpack-dev-server –hot 이런식으로 실행 할 수 있습니다.

현재 설치 된 의존 모듈은 다음과 같습니다. 버전 체크해주세요. babel 6.x 버전이 사용되었습니다..

  "dependencies": {
    "react": "^0.14.7",
    "react-dom": "^0.14.7"
  },
  "devDependencies": {
    "babel-core": "^6.7.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }

4. 디렉토리 구조 이해 및 파일 생성

react-tutorial
├── package.json         
├── public            # 서버 public path
│   └── index.html    # 메인 페이지
├── src               # React.js 프로젝트 루트
│   ├── components    # 컴포넌트 폴더
│   │   └── App.js    # App 컴포넌트
│   └── index.js      # Webpack Entry point
└── webpack.config.js # Webpack 설정파일

위 파일들은 강좌를 진행하면서 만들겠지만, 미리 생성하고 작성하는것을 선호하는 분들은 다음 영령어를 통하여 파일들을 생성하세요.

Webpack entry point 는, Webpack 모듈에서 가장 처음으로 읽어들일 파일입니다.

이 파일에서부터 시작해서, 해당 파일에서 import 한 다른 모듈들을 불러옵니다.

mkdir src src/components public && touch public/index.html src/components/App.js src/index.js webpack.config.js

5. 컴파일러, 서버 및 로더 설정

webpack 설정하기 [ webpack.config.js ]

ECMAScript6 를 컴파일해주고 개발서버를 열어주는 webpack의 설정파일 webpack config.js 을 수정하세요.

module.exports = {
    entry: './src/index.js',

    output: {
        path: __dirname + '/public/',
        filename: 'bundle.js'
    },

    devServer: {
        inline: true,
        port: 7777,
        contentBase: __dirname + '/public/'
    },

    module: {
            loaders: [
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/,
                    query: {
                        cacheDirectory: true,
                        presets: ['es2015', 'react']
                    }
                }
            ]
        }
};

webpack의 역할은, entry 부터 시작하여 필요한 모듈들을 다 불러온 후, 한 파일로 합쳐 bundle.js 에 저장합니다.

추가적으로는, 모듈을 통하여 ES6 문법으로 작성된 코드를 ES5 형태로 변환도 해줍니다.

 

개발 서버의 포트는 7777로 설정되었습니다.

개발 서버는 파일이 변동 될 때마다 다시 컴파일하고, 연결되어있는 브라우저를 새로고침해주는 기능을 가지고 있습니다.

package.json

npm start 명령어를 콘솔에서 입력 했을 때, webpack-dev-server 가 실행 될 수있게 package.json 의 “scripts” 블록을 수정하세요.

  "scripts": {
    "start": "webpack-dev-server --hot --host 0.0.0.0"
  },

만약에 localhost 가 아닌 외부 서버에서 dev-server 실행 시, –host 옵션을 추가하지 않으면 접근이 안됩니다.
localhost 인경우에는 생략하시면 됩니다.

6. HTML 및 js 수정

index.html

이 파일은 평범한 HTML 파일 입니다. div id = “app” 을 React 프로젝트의 root element 로 지정하고
index.js 스크립트를 로드해주세요. 이 파일은 webpack에서 bundle된 파일로서,
react 라이브러리 및 기타 자바스크립트 파일들이 하나로 합쳐진 파일입니다. 

<!DOCTYPE html>
<html>

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

   <body>
      <div id="root"></div>
      <script src="bundle.js"></script>
   </body>

</html>

src/components/App.js

우리가 만들 첫 React 컴포넌트입니다. * 파일 및 컴포넌트의 첫 문자를 대문자로 하는건 React의 naming convention 입니다.

import React from 'react';

class App extends React.Component {
    render(){

        return (
                <h1>Hello React Skeleton</h1>
        );
    }
}

export default App;

1번에서 사용된 import JavaScript ES6 에 새로 도입된 키워드로서, require('..') 의 역할을 합니다.

12번에서 사용된 export는 JavaScript ES6 에 새로 도입된 키워드로서, module.export = App 와 같습니다.

컴포넌트에 대한 설명은 다음 강좌에서 자세히 알아보도록 하겠습니다.

src/index.js

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

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

App 컴포넌트를 불러와서 root element에 렌더링하는 부분입니다.

 

7. webpack-dev-server 구동하기

$ npm start

지금까지 같은 모듈 버전에 오타가 없이 따라와줬다면 에러 없이 서버가 구동 될 것 입니다.

asdfaf

브라우저에서 링크를 띄운 상태에서 App.js 를 수정해보세요. 브라우저에서 수동으로 F5를 누르지 않아도 자동으로 새로고침됩니다.

 

마무리하며..

React를 공부하기위한 작업환경을 완료하였습니다.
이 강좌에서 사용된 파일들은 GitHub 에서 열람 할 수 있습니다.
다음 강좌에선 JSX에 대하여 알아보겠습니다.

liste

  • hanwool kim

    오타가 있는 것 같아 알려 드립니다

    touch src/App.js index.html webpack-config.js –> touch src/App.js index.html webpack.config.js

    좋은 강의 올려주셔서 감사합니다~~

    • 엇! 감사합니다!!
      강좌를 통틀어서 webpack-config.js 라고 작성했네요 ㅋㅋ

  • 안녕하세요.
    튜토리얼을 진행하다 결과가 좀 다르게 나오는 것 같아서요.
    결과는 아래 처럼 나오는데요, 제가 어떤 부분을 더 봐야 할지 잘 모르겠습니다 ;;;

    • devServer 부분에 contentBase: __dirname + ‘/public/’ 을 넣어주세요.

      최근에 제가 이 강좌의 디렉토리 구조를 수정했는데
      config 파일을 수정하는걸 까먹었네요. 죄송합니다 ㅎㅎ

    • output 부분도 수정되었으니 참고해주세요 😉

  • Yunseop Song

    4번 디렉토리 구조 보는데 src 가 두개라 헷갈리는 부분이 있네요

    상위 폴더는 react-tutorial로 바꿔주시면 덜 헷갈리거같아요

    • 아, 그러네요! 사실 폴더이름이 다른거였는데 제가 실수로 저렇게 작성한것같네요 🙂 수정하겠습니다.

      • Yunseop Song

        우와 댓글이 실시간이네요 XD 좋은글 잘 보겠습니다~

  • ethan

    잘보고 있습니다. 그런데 webpack 명령으로 bundle.js 를 빌드 한 후 npm start를 통해 실행해야지 되는것 같은데…?? 저만 이상한건가요 ㅋ

    • webpack-dev-server 를 사용하신다면, webpack 으로 먼저 빌드하실 필요가 없습니다 webpack-dev-server 가 실행될때 자동으로 빌드되서 메모리에 저장되고, 개발 서버에서 /bundle.js 에 요청을 주었을때 public 안에 있는 파일이 아닌 메모리에 있는 파일을 반환하구요.

      만약에 express 같은 다른 웹서버를 사용하신다면, webpack으로 먼저 빌드를 해주셔야하는게 맞습니다.

      • 유낙동

        저도 동일 증상이었습니다.
        npm start를 통해서 자동 build가 되지 않는 현상이였는데요, live reload도 안되었었구요,
        이유는 bundle.js와 index.html이 같은 디렉토리 안에 없으면 나타나는 현상이였네요. 구분짓기위해 js/bundle.js 로 경로를 따로 둔것이 문제였습니다.

  • Julio

    안녕하세요~ 자세한 설명 감사드립니다.
    올려주신 샘플을 그대로 돌려보고 있는데요, 아래와 같이 에러가 발생하고 있습니다. 무슨 문제일까요?

    • Julio

      누락된 코드가 있었습니다~^^; 잘 되네요~~

  • 신성훈

    요 강좌 2편에서 아래 명령어가 나오는데..
    $ mkdir react-tutorial && cd react-tutorial
    $ npm init

    이 부분 뒤에 나오는 명령어들은 전부 react-tutorial 디렉토리 안에서만
    실행해야 하는건가요? 3번 4번 7번이요..

    • 네 그렇습니다 프로젝트 디렉토리로 들어가셔서 실행하셔야해요.

  • Jein Song

    궁금한것이 꼭 이렇게 작업 환경을 설정해 놓고 해야하는건가요?
    jQuery처럼 그냥 html마다 로 포함시켜놓고 하는 것과 성능 차이가 있는건가요?
    아니면
    이렇게 환경 설정 하는 이유가 node js를 서버로 쓰는 환경에서 reactjs를 이용한 웹애플리케이션 구현을 하기위함인가요?
    그러니까 nodejs가 아닌 다른 백앤드 프레임워크를 쓰는 환경에선 그냥 이러한 환경설정 없이 로 웹페이지에 포함해도 차이가 없을까요?

  • echwnag

    강좌를 따라가면서 실행을 시켰는데 *.js 파일들이 에러가 납니다.

    App.js 는 hello
    =>Unclosed reqular expression

    index.js는 ReactDOM.render(, rootElement);
    =>Expected an identifier and instead saw ‘Expected’)’ and instead saw ‘App’/

    =>Expected and assignment or function call and instead saw an expression.

    와 같은 에러가 나면서 정상적으로 브라우저로 확인이 되지 않습니다.
    세팅을 추가로 해야 하는 사항이 있나요?

    • 1. webpack.config.js 파일이 제대로 설정이 되었는지 확인해보세요.
      2. babel-preset-react 가 설치되어있는지 확인해보세요.
      3. 그럼에도 불구 하고 안된다면 https://github.com/velopert/react-skeleton 이 프로젝트를 클론하여 진행해보시고, 기존에 만드셨던 프로젝트와 비교를 해보세요 🙂

      • goodman

        저도 똑같은 에러네요.. 맥북에서 돌린다고 이러는건 아니겠죠… ;; 클론 해봐도 증상은 같아요!!

        • 방금 검토해봤는데, 저는 그런 증상이 없네요,,

          혹시 node는 어떤 버전을 사용하시나요?

          터미널에서 webpack-dev-server 구동 후 로그를 복사해서 올려주시거나 스크린샷을 찍어서 올려주실수있을까요?

          • goodman

            https://uploads.disquscdn.com/images/2f2194a5ba3fab1acb09dc9c6913ab4f68f163314745f9ecb10dcc8384495c9a.png .. 감사하게도 바로 확인해 주시네요.. 죄송하네요.. 머리가 나빠 손발이 고생이라서요 ^^

          • goodman

            아 참고로 저는 유트브 강좌 따라 했습니다.

          • 오류를 해결해드리고싶은데
            뭐때문인지 파악이 안되네요. babel로더가 제대로 작동하지 않는것 같은데

            프로젝트를 클론해도 잘 안된다니..
            한번 node_modules 를 삭제하고 다시 npm install 후 npm start (유튜브의 프로젝트를 클론하셨다면 npm run dev-server) 를 해보시겠어요?

            그래도 안된다면 create-react-app으로 리액트 프로젝트를 시작해보시길 바랍니다.(조만간 블로그의 리액트강좌를 리뉴얼 할건데 그 강좌에선 create-react-app으로 시작을 할거에요. 관련 자료는 https://velopert.com/2037 에서 참고하실 수 있습니다.

          • goodman

            구글 써치를 해본봐로는 심텍스 에러가 webpackage.config.js에서 test: /.js$/ 요부분 수정들 하라고 답변이 많네요.. 해봤는데 안되요 ㅋㅋ. 우선 싹 삭제하고 다시 해볼께요. 감사드려요.

          • Scott Jun

            저도 맥에서 똑같은 증상이었는데 다음과 같이 해서 해결 됐습니다.
            프로젝트 디렉토리에 .babelrc 파일을 다음과 같이 만들었습니다.

            {
            “presets”: [“react”]
            }

            그리고 npm start하니까 에러 메세지가 없어졌고
            localhost:7777 하니까 정상적으로 rendering된 화면이 출력되었습니다.

  • Yoon Jae Park

    webpack에서 외부 라이브러리 쓰는게 궁금합니다. 이 예제 폴더 구조에서 src/lib/ 만들어서 외부 자바스크립트 라이브러리 js 파일을 넣어놨는데 public index.html 에서 찾지를 못합니다. public 폴더 하위로 넣어노면 또 읽고요. webpack 때문인거 같은데 어떤식으로 해야될까요? webpack 관련된 부분은 webpack 공홈 부분 자세히 읽어봐야 알까요?

    • 외부 라이브러리를 html 에서 불러오려면 public안에넣고 불러와야합니다.
      src폴더에 넣고싶으시다면, index.js에서 require(‘./lib/examples.js’); 이렇게하시면 되겠습니다. 아니면, webpack config에서 entry에 넣으세요

      • Yoon Jae Park

        감사합니다 많이 배워갑니다!

  • Jein Song

    이전에는 정상적으로 됬었는데요 갑자기 오늘부터..?
    package.json에 start부분을 제대로 수정해도 npm start 명령시 사진과 같은 에러가 발생하네요

    그래서 결국..
    webpack-dev-server –hot –host 0.0.0.0 명령어를 직접 쳐서 개발서버를 실행시키고 있습니다!
    혹시 라이브러리의 버전차 때문에 발생하는 현상일까요? 에러의 원인을 알고싶어서요.. 아시는분 도움좀 구하고싶습니다

    https://uploads.disquscdn.com/images/251adfa131bc620f78322c84d3d9c7ffecc61561a4879f89db8b303e710de5c0.jpg

  • uyjoongkim

    npm start 하면… 에러나네요 ㅜㅜ 라이브러리 버전도 예전과는 차이가 많이 나고.. 이부분이 막혀서 다음 진도를 못나가고 있습니다. 해결책을 주시면 감사하겠습니다.

    • 오후에살펴보겠습니다.

      혹시 오류내용을 덧글로 올려주실수있을까요?

      • uyjoongkim

        express 가 않깔려있어서 났었던 오류였네요. dependency 에 express 도 넣으면 저 같은 쌩 초보들도 오류없이 진행 가능할것 같습니다. 몇일을 헤맸네요 ㅜㅜ 감사합니다.

        • 흠.. 뭐 때문이였을까요?
          이 프로젝트가 express와 관계가 없어서..

          아마 다른 문제가 있지 않았을까 싶습니다.

  • jj

    cacheDirectory 이건 어떤 용도로 사용되는 건가요??
    그리고 build 하기전에 bundle.js 는 어떻게 만들어지고 동작하는건가요..?

    • cacheDirectory가 true로 설정되면, 코드가 수정되어 리컴파일될때, 기존에 수정되지않은 파일만 캐시에저장된걸 사용하고 수정된파일만 리컴파일하여 번들링합니다.

      여기서 bundle.js는 webpack 명령어를 입력하면 생성이되는데요, 릴리즈가 아닌 개발환경에서는 이 명령어를 입력 할 필요 없이 webpack-dev-server 명령어를 실행하면 bundle.js를 메모리에 저장해서 개발서버로 브라우저에서 접속하면 bundle.js를 요청시 메모리에있는걸 꺼내줍니다

  • l0gic

    감사합니다!

  • 위윤석

    https://uploads.disquscdn.com/images/4e70dbdebccd9a5d9e6723373aef7c943f16778a74d8107983e02ed235c091bc.png https://uploads.disquscdn.com/images/ac0107ca667bbf3ca02b0b334869c2e16d9de850799962cb001c2918d57ee541.png 강좌 읽으면서 쭈욱 해봤씁니다. 그런데 npm start 하고 chrome 에서 실행시켜보니 이렇게 나오네요.. 어떻게 해야할까요??

  • 김태기

    https://uploads.disquscdn.com/images/bc65bdc55de0e04649b7ffe3465bf3e77fce6f124c5d3ed1b6acecf7fe3ad19e.png git에서 클론으로 받은 프로젝트 폴더에서 그렇고 제가 생성한 프로젝트에서도 동일한 에러가 나내요 ㅠ
    혹시 도움을 구할수 있을까요?

  • Peter Cha

    너무나도 친절한 설명과 강의 감사드려요 🙂 제가 c9.io 환경에서 node.js로 만들어서 npm 설치하고 그렇게 쭉 따라와서 끝까지 했는데 npm start하고 나서, 아래 사진 처럼 뜨는데, preview로 :7777 포트 입력한 url로 하면 브라우저에서 접속확인이 안돼서 ㅠㅠ 어떻게 해야할까요 c9.io말구 그냥 local로 돌리는게 답이려나요… https://uploads.disquscdn.com/images/267b29409b17f5239b44799250e217af09c08bb0d0823c7cd9626a559499371b.png

    • cloud9 의 경우엔 아마 허용된 포트가 8080 인걸로 알고있어요! 8080으로 포트를 열고, 거기서 주어지는 도메인을 포트 생략하고 바로 접속하시면 될거에요!

      만약에, 엄청 저사양 PC 가 아니라면 로컬에서 하는것을 추천드립니다 🙂

      • Peter Cha

        네에 감사합니다아 🙂

    • yuni

      webpack.config.js파일에서 port를 7777에서 8081로 바꾸시구요. 실행하신후 결과는 클라우드9 주소:8081(예; xxxx.c9users.io:8081)에서 확인하심 될거예요.

  • Junho Park

    서버에 업로드하고 배포할 때는 어떻게 하는지요? 로컬에서는 가상서버에서 localhost로 접속하는데, 서버에서는 npm start 를 실행시켜두어야 하는건지요?

    • 서버에 배포를 할때는, webpack 명령어를 입력하시면 bundle 된 결과물을 파일로 생성합니다.

      그 파일을 index.html에서 불러오게 한다음에

      해당 파일들을 웹서버를 사용하여 정적(static) 파일로서 제공하면 됩니다.

      npm start 를 해서 실행되는 서버는 개발전용 서버입니다.

      • Junho Park

        npm start를 치면 “start”: “webpack-dev-server –hot –host 0.0.0.0”, 이런 스크립트가 실행되는데요,

        서버에서 스크립트를 따로 만들어서 실행해야하는건가요? 예를들어 서버에서 webpack 이라는 명령어는 치면 static html로 접근할 수 있는건가요? 백엔드쪽 지식이 없어서 헷갈리네요;

        로컬에서 bundle.js만 만들어놓고 index.html을 스태틱으로 실행하니 react-router 때문에 실행이 되지 않네요.

  • Seokeui Hong

    저는 이상하게 webpack-dev-server 구동 및 브라우저에 출력까지 정상적으로 되는데
    App.js 수정을 해도 브라우저에 변경사항 적용이 되지를 않네요
    콘솔 로그쪽에도 전혀 변화가 없구요
    (서버 중지 후 다시 기동하면 변경사항이 적용은 됩니다)
    혹시 이런 경우에는 어느 부분을 확인해보는게 좋을까요??

  • GT M

    기존환경이 아닌 다른 환경에서도 react연습을 하려면 이 과정들을 다 외워야 하나요 ..

    • 이 포스트에선 직접 구성하는 방법을 다뤘습니다. 이전에는 이런 과정을 통해 프로젝트를 준비했었는데 요즘은 보통 create-react-app 이란 도구를 사용해서 프로젝트를 생성합니다. 이전엔 그게 없었거덩요..

      • GT M

        그러면 현재에는 이런 방법은 예전 방법이고 그 도구로 만드는데, 그 도구 사용법은 따로 검색해서 해야하나요??

        • https://velopert.com/2037

          제가 잠깐 다룬적두 있구요, 사용법이 간단해서 금방할수있을거에요

          • GT M

            이 댓글과는 무관하지만 .. npm start로 서버는 실행됩니다만.. Hello react skeleton이 안뜨네요..

  • nifelee

    webpack.config.js 에서 loader를 babel로 그대로 따라하니 에러가 발생했네요.
    babel-loader 로 변경해줘야 정상적으로 실행됩니다.

  • DaeHo Kim

    좋은 강의 잘 보고 있습니다.
    webpack.config.js의 loader 부분이 babel에서 babel-loader 명시로 바뀐 것 같네요.
    확인해주시면 좋을 것 같습니다.

    • larck

      감사합니다 똑같이 따라했는데 왜 안되나 고민했네요 @velopert:disqus 님이 빨리 수정해주셨으면 좋겠어요

      • 시간나는대로 수정하겠습니다 8)
        요즘은 create-react-app을 통해서 프로젝트를 구성하는게 대부분이라, 해당 도구를 이용해서 프로젝트를 생성하는 글을 새로 준비중이에요.

  • 안녕하세요.
    react를 배워보고자 강의를 열심히 보고, 듣고 하고있습니다.

    다름이 아니라, 혹시 react를 IIS상에서 사용할 수 있는 방법이 궁금합니다.
    동영상 강의 초반에 말씀해 주신대로,
    형식으로 babel과 react, react-dom을 불러와서 사용하는 방법외에는 없는지 궁금합니다.
    감사합니다.

  • webpack 버전이 올라가서 그런지 webpack.config.js에 몇가지 문제가 있네요.
    개인 gist에 webpack 2.2.1 버전의 config로 포팅했으니 cannot get / 등의 문제 있으신 분은 한번 확인해보세요.
    https://gist.github.com/uyu423/63edd46650a501f825421391a778fde3

    • 임흥선

      ㅎㅇ

  • OC

    npm install -g babel webpack webpack-dev-server 설치 후 babel –version 으로 확인을 해봣더니 npm uninstall babel npm install –save-dev babel-cli 라고 떠서 다시 지우고 설치해도 똑같은데 왜 그런가요?

  • 그렇다면 npm install -g babel-cli 를 해보세요 🙂
    이 강좌가 좀 오래되어서.. 조만간 업데이트를 해야할것같습니다 ㅠㅠ

  • Gi Ung Pyo
  • dddog

    추천

  • Sukjae Lee

    안녕하세요. 이제 막 react에 입문하는 학생입니다. 튜토리얼을 따라하고 있는데요, 혹 초반에 “node_module”이라는 폴더가 프로젝트 내부에 생성되는게 맞나요…? ” 4. 디렉토리 구조 이해 및 파일 생성”에는 해당 폴더가 언급이 없어서요,,, 너무 기초적인 질문을 드려 죄송하네요

    • 조부관

      node_module 폴더는 npm모듈 파일이 저장되는 경로입니다.
      npm install –save 로 시작되는 명령어를 사용하게되면 그 경로에 node_module 이라는 폴더가 생성됩니다.

      • Sukjae Lee

        감사합니다 ^^

  • 정영호

    https://uploads.disquscdn.com/images/cec5abba5fb8ddf724ea177f85aaea5ce4c409d046e7dd98510889c6bbbaa057.png
    현재 사진과 같은 문제가 발생하여서 화면에 아무것도 출력이 되지 않는데 해결방법이 있을까요 ?ㅠㅠ

    • 정영호

      오타문제였습니다 해결했습니다 !

  • o0xvx0o5

    npm install –save react react-dom 이게 설치가 안되는 이유는 몰까요 ㅠㅠ….

    • 이게, 자료가 좀 오래돼서, create-react-app 을 검색해보시면 좋을 것 같습니다.