웹팩과 바벨로 리액트 설정하기

https://dev.to/dtroyano86/setup-react-with-webpack-and-babel-4b

Setup React with Webpack and Babel

이 게시글에서 웹팩으로 기본적인 프로젝트 설정하기를 다뤘으니 여기서는 어떻게 당신의 리액트 프로젝트를 업그레이드 해서 웹팩과 바벨을 사용하는지에 촛점을 맞추려 한다.

 

혹시 잊어버렸다면, 웹팩은 불러오기와 내보내기 선언문들 및 종속 그래프를 사용하여 당신의 코드를 여러 파일들로 분류하는 것을 도와줄 것이다.

 

그리고 바벨은 어떤 브라우저든지, 얼마나 오래된 것인지에 상관 없이 확실하게 당신의 코드를 읽고 이해하도록 할 것이다!

 

빈 디렉토리로부터 다시 시작해서 npm init -y 를 실행하여 package.json 을 작동시키자. 그리고나서 우리의 데모 사이트가 작동하도록 몇 가지 패키지들을 설치하자.

 

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader
npm install --save-dev webpack webpack-cli webpack-dev-server
npm install --save react react-dom lodash

 

저 바벨 프리셋(preset, 선설정)들이 리액트 코드들을 분석해야 한다. 웹팩이 필요한데, 왜냐면 이 글이 그거에 대한 내용이기 때문이고 데브 서버는 그냥 라이브 서버가 웹팩과 통합하게 하는 것일 뿐이다. 리액트를 사용하게 할 리액트와 리액트-돔이 필요하고, 마지막으로 자바스크립트를 위한 유틸리티 함수들의 라이브러리인 로대시(lodash)를 가져오자.

코딩 시작하기 전에 파일 구조를 설정하자.

 

먼저 webpack.config.js 파일을 설정하여 jsx 코드를 컴파일 할 수 있게 하자.

 

module.exports = {
  entry: './src/index.jsx',
  output: {
    filename: 'app.js',
    path: __dirname + 'build',
    publicPath: '/'
  },
  devServer: {
    contentBase: './build'
  },
  devtool: 'eval-source-map',
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  }
}

 

이것이 꽤나 친숙하게 보일 것이다. 전에 했던 것과 똑같이 우리는 엔트리와 아웃풋을 정하고 있다. 하지만 우리는 데브서버 속성을 추가했는데, 그것은 데브 서버가 호스팅할 파일들을 찾는 곳이다.

 

우리는 또한 한 모듈 속성도 추가했다. 여기가 우리가 바벨을 설정하는 곳이다. 테스트는 그냥 어떤 파일이든지 저런 확장자를 가지고 있으면 컴파일되어야 한다는 것을 가리킨다. 그리고나서 어떻게 우리의 코드를 변형시킬지 결정하는데 에 사용하고 싶은 로더, 바벨-로더, 그리고 프리셋들을 구체적으로 명시한다.

 

프리셋들은 한 무더기의 바벨 플러그인들을 자동으로 불러들여 오는 기본적인 디폴트 환경들이다. 이 두 가지가 가장 기본적이고 확실히 임무를 수행할 것이지만 그 밖에도 알아 볼 많은 선택 사항들이 있다. 개별적인 프로그인들을 알아 보고 싶다면 바벨 문서들을 확인하면 되고, 각 프리셋이 무엇을 테이블로 가져오는지 구체적으로 읽고 싶다면 이 문서를 확인해 보라.

 

이제 index.html 파일을 이전과 똑같이 설정한다. 거기엔 "app.js" 소스가 있는 하나의 스크립트 태그와 "app" 아이디를 가진 div 하나만 있을 것이다.

 

우리는 플레이스홀더로 인터넷에서 몇 가지 포스팅만 가져다가 그 플레이스홀더 데이터에 해당하는 포스팅 무더기를 디스플레이하는 포스팅 목록 컴포넌트를 디스플레이하는 앱을 만들 것이다.

 

그럼 리액트 코드를 좀 쓰기 시작하자. 시작 지점인 index.js 부터 시작하겠다.

 

import ReactDOM from 'react-dom';
import React from 'react';
import App from './App.jsx';
ReactDOM.render(<App />, document.getElementById('app'));

 

리액트, 리액트돔, 그리고 앱 자체를 부러와서 돔에다 만들어냈다. 쉽죠!

이제 더 힘을 내서 App.js 를 보자.

 

import React, { Component } from 'react';
import PostList from './PostList.jsx';
class App extends Component {
  constructor() {
    super();
    this.state = {
      posts: [],
    };
  }
   componentDidMount () {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(res => {
        res.json()
          .then(posts => {
            this.setState({posts});
          });
      });
  }
  render () {
    return (
      <div>
        <PostList posts={this.state.posts} />
      </div>
    );
  }
}
export default App;

여기서 우리가 리액트와 컴포넌트 뿐만 아니라 다음 퍼즐 조각인 PostList 를 포스팅들과 함께 불러왔음을 볼 수 있다. 

 

componentDidMount 에서 가짜 데이터의 데이터베이스로부터 모든 포스팅들을 가져왔고, 그 역학에 대해선 걱정할 필요 없으니 이 부품들을 전부 연결하는 데에 집중하자.

 

그럼 다음엔 PostList.jsx 를 보자. 여기서 이게 어떻게 된 건지 보기 위해 로대시도 불러올 것인데, 그냥 쉽게 내장된 맵을 사용해도 된다.

 

로대시에서 불러오는 오브젝트만을 해체할 맵이 필요한 것이고 거기서 맴 함수만 빼서 저장할 것이므로 _.map 대신 map만 부르면 된다.

 

import React from 'react';
import { map } from 'lodash';
import Post from './Post.jsx';
const postList = ({posts}) => (
  <div>
    {map(posts, post => <Post key={post.id} post={post} />)}
  </div>
);
export default postList;

 

그 사슬을 따라 바닥으로 내려가자. Post.jsx 여기에는 리액트만 불러오기 하고 그 포스팅만 내보니기 하면 된다.

 

import React from 'react';
const post = ({post: {title, body}}) => {
  return (
    <div>
      <p>{title}</p>
      <p>{body}</p>
    </div >
  );
}
export default post;

 

좋아! 예시의 리액트 코드를 완성했다! 이제 우리의 데브 서버를 시작할 스크립트를 추가하여 파일들을 수정하면 로컬 호스팅 사이트에서 바로 업데이트를 받을 수 있다. 그러니 package.json 파일에 스크립트를 추가하라.

 

"start": "webpack-dev-server --config ./webpack.config.js"

 

이제 npm start 를 터미널에다 실행시키면 쉽게 디버그 할 수 있고, 바로 업데이트 되는 로컬 서버가 보여주는 당신의 새로운 앱을 갖게 될 것이다!

 

다시 한 번 말하지만 이것은 매우 간단한 앱이다. 하지만 이것이 불러오기와 내보내기 선언문들의 사용이 어떻게 확장되어 더 큰 애플리케이션이 될 수 있는지를 보는 데 도와주길 바란다. 그리고 컴파일러가 번들러와 어떻게 일하는지 배우는 것은 매우 유용한 지식이 될 것이다.