React 환경설정

React 환경 설정 하다가 토나올뻔했다.

 

우선 내가 이해한 개념부터

 

React  환경설정에 필요한 요소는 

1. node.js : 노드js는 javascript로 만든 버추얼 머신같은느낌? 하는일이 javascript프로그램 모듈 설치관리 실행 뭐 요정도 javascript가 브라우저에서 구동되는게 기본인데 이게 있으면 javascript를 윈도우 프로그램처럼 쓸수있다? 이런느낌이다.

               

2. webpack : 여러 어플리케이션들의 설정을 모아서 한번에 실행해주고 교통 정리를 해주는 역할

 

3. babel  : 확장이 가능한 스크립트 컴파일러 preset에 모듈을 추가해서 여러가지 언어를 한번에 컴파일 할 수 있다.(ex less react es6 이런거를 한번에 다 컴파일 해준다.)

 

 

React  환경설정 그러면 차례대로 진행해보자

 

1) node.js 설치 : https://nodejs.org/ko/ 요기 사이트가서 최신버전 받고 그냥 설치 누르면된다. 다음다음 누르면됨

 

자 이제부터는 node.js로 어플리케이션을 추가한다.

윈도우 cmd 창을 관리자권한으로 실행한다.

 

2) webpack 설치  

 

1] node프로젝트 생성 : 폴더를 하나 만들고 해당 폴더에서 npm init -y를 친다.

노드는 프로젝트 단위로 관리되는데 프로젝트 생성 이다.

node 프로젝트 생성

package.json은 프로젝트의 프로필이라고 보면된다.

 

2) 모듈 설치

 

npm install -D babel-preset-react react react-dom webpack webpack-cli @babel/core @babel/preset-env babel-loader @babel/preset-react @babel/plugin-proposal-class-properties

 

 

 

3) webpack 설정파일 만들기 

    웹팩이 js 파일을 만드는 폴더 경로및 바벨이 컴파일 할때 쓰는 모듈설정을 여기에 넣는다.

    webpack.config.js 파일을 만듭니다.

const webpack = require('webpack');
module.exports = {
    mode: 'development',
    watch:true,
    context: __dirname + '/src', // 모듈 파일 폴더
    entry: { // 엔트리 파일 목록
        post: './Post.jsx'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },

    output: {
        path: __dirname + '/../src/main/webapp/jsx/dist/', // 번들 파일 폴더
        filename: '[name].bundle.js' // 번들 파일 이름 규칙
    }
}

폴더는 npm init -y 한 폴더 기준으로 상대경로를 써주면 됩니다.

compile 시작은 npm init -y 한 폴더에서

webpack 실행파일은 /node_module/.bin 안에있는데 이건 윈도우 환경변수 설정에서 path에 [내노드프로젝트 루트]/node_module/.bin을 추가해서 하시기를 바랍니다.

 

4).babelrc  바벨 설정파일도 있어야합니다.

{
  "presets": [
    "@babel/env",
    "@babel/react"
  ],
  "plugins": [
    "@babel/plugin-proposal-class-properties"
  ]
}

5) 컴파일 실행

webpack --config ./webpack.config.js

그러면 context 에 정의된 폴더안의 entry 파일이 컴파일되서 output읭 dist 폴더로 생성됩니다.

그러면 완성된 js로 지지고 볶고 하면 되겠죠.

 

주의할점 : 설정에서 폴더 위치가 엄청 중요합니다.

context: __dirname + '/src', // 모듈 파일 폴더
    entry: { // 엔트리 파일 목록
        post: './Post.jsx'
    },

엔트리소스 폴더는 node 프로젝트 폴더 ( npm init -y한 폴더 )  안에 있어야됩니다.

아웃풋은 아무데나 있어도 됩니다.

엔트리 폴더 프로젝트 바깥쪽에다 만들었다가 삽질한거 생각하면 아오ㅠ_ㅠ

더이상 설정을 확인하기엔 제 능력의 한계를 훨씬 오버한 부분이라 여기까지

 

 

추가로 less sass 등등 webpack에 추가 할 수 있는데 그거까지 한번에 적으면 에러 존나게 나서 시작도 못하고 포기 하고싶어지기 때문에 여기까지만 했습니다. React  환경설정 끝