React 기초 학습 2. node환경에서 해보자! 필요한 패키지 다운로드.(Zerocho님 강의 학습 의식의 흐름대로 노트 정리)

강의 유튜브 주소 :

https://www.youtube.com/watch?v=V3QsSrldHqI&list=PLcqDmjxt30RtqbStQqk-eYMK8N-1SYIFn

---

필요한 패키지 install 후에 webpack 설정해보기

프로젝트 폴더에서 npm 설정

// cmd
npm init

 

필요한 모듈을 받아준다.

react, react-dom, webpack, webpack-cli

@babel/core, @babel/preset-env, @babel/preset-react, @babel/plugin-proposal-properties, babel-loader

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

dev와 아닌것을 구분하여 다운로드 받자.

dev는 개발환경에서 사용할 모듈들이며 package.json의 devDependencies에 저장된다.

 

webpack 설정파일을 프로젝트 루트에 생성한다.

webpack.config.js

아래 내용을 입력한다.

const path = require('path'); 
// node의 내장모듈, 경로를 문자열로 만들어주는 모듈이라고한다.

module.exports = {  
	// name은 webpack.config.js 파일에 대한 이름
    name : 'gugudan', 
    
    // 개발상태라 development로 작성했지만, 배포시에는 production으로 변경해야한다.
    mode : 'development',
    
    // 소스맵 생성여부를 결정하는 옵션이라고 하는데, 추후에 한번봐야할것같다.
    // 참고 : https://webpack.js.org/configuration/devtool/  
    devtool : 'eval', 
    
    // 웹팩이 경로나 확장자를 처리할 수 있게 옵션 설정하는 부분   
    resolve : { 
	    // js나 jsx 확장자를 붙이지 않아도 자동으로 웹팩이 처리
        extensions : ['.js', '.jsx']    
    },  
    
    // 모듈의 진입점을 설정
    entry : { 
    	app : ['./app', './Gugudan']  
    },  
    
    // 진입점의 파일들을 output으로 만들때 설정
    module : {      
    
    	rules : [{      
        
        	// .js나 .jsx에 대한 파일들을 (정규표현식)
            test : /\.jsx/,       
            
            // 바벨로더로
            loader : 'babel-loader',       
            
            options : {        
            
              // 사용할 presets들 
              // preset-env는 옛날브라우저 지원하며 바벨과함께 사용되어야하는 플러그인들을 모아둔 모듈
              // typescript가 필요하면 @babel/preset-typescript 가 필요하듯
              // 플러그인들의 모음들이라서 수십개의 플러그인들이 합쳐져있다. 
              presets : [
              '@babel/preset-env', 
              '@babel/preset-react'
              ], 

              // 클래스의 프로퍼티를 사용할 수 있게 도와주는 바벨 플러그인으로 이게 없으면 state에서 오류가 났다. 
              plugins : ['@babel/plugin-proposal-class-properties'] 
            }    
        }]  
    },  
    
    // 추가적으로 플러그인을 사용할 경우
    // loaderOptionsPlugin 플러그인은loader에 모든 곳에 debug 옵션을 넣어주는 플러그인  
    plugins : [    
      new webpack.LoaderOptionsPlugin({        
      	debug: true    
      }),
    ], 
    
    // 출력
    output : {     
    
    	// 상단에서 선언한 path(경로)를 __dirnamae과 join하여 프로젝트 폴더(root)에 'dist'폴더를 생성       
        // dist 가 있으면 그 폴더 안에 파일을 만든다.
        path : path.join(__dirname, 'dist'), 
    
      // 출력되는 파일 이름
      filename : 'app.js'   
	}
};

 

위의 preset에 옵션을 넣을 수 있는데, 예제를 보자

// 옵션 사용 전
presets : ['@babel/preset-env', '@babel/preset-react']

// 옵션 추가
// 첫번째 값에 preset 모듈 이름
['@babel/preset-env', 
	
    // 그리고 옵션 값 추가 
    { 
    targets : {
    
    	// 브라우저 크로스브라우징할 범위를 선정하는 것인데
        // 예를들어 ['> 5% in KR'] 과 같이 쓰면 한국에서 5%이상의 브라우저 점유율을 가진 브라우저를 지원한다는 뜻
        // 이 옵션은 https://github.com/browserslist/browserslist 여기서 확인할 수 있다.
        browsers : ['last 2 chrome versions'], 
    }
}]