모듈시스템과 webpack설정 // 20210412

1. 모듈시스템

1) 설명

• 컴포넌트를 모듈화함. 전체 코드 소스를 실행시키는게 아니고 각 코드 소스를 모듈화해서 필요한 코드만 불러와 실행
• 모듈화하면 코드 유지보수도 간편해지고 재사용성이 뛰어남.
• 코드 맨 위에서 React 호출 필요
• 코드 맨 아래에서 해당 컴포넌트 모듈화해서 export해야 다른데서 사용 가능.

// WordRelay.jsx
const React = require('react');// 사용할 리액트 호출
...
module.exports = wordRelay; // export로 모듈화

2) 모듈화의 문제점

• jsx파일이 많아도 html에서 jsx파일 src는 하나만 참조 가능
• 그렇기 때문에 webpack으로 jsx파일을 하나로 합치는 것

2. webpac설정

• 기본적으로 webpack.config.js에서 설정

const path = require('path'); // node path설정
module.export = {
  name : 'wordrelay-setting',
  mode : 'development',
  devtool : 'eval',
  resolve : {
    extensions : ['.js', '.jsx']
    },
  entry : {
    app : ['.client'],
  }
  output : {
    path : path.join(__dirname, 'dist'),
    filename : 'app.js'
    },
  };

2-1. 코드 설명

1) path : 경로설정. node 기능인데 output에서 표시할 app.js의 경로 설정
2) name : 합치는 모듈 명
3) mode : 모드 설명. development는 개발용. 서비스용은 'production'
4) devtool : 개발툴. eval은 그냥 빠르게 한다는 뜻.
5) resolve : extensions(확장자) 설정. entry파일의 확장자 설정
6) entry : 웹팩으로 합칠 파일들. 예시 코드에서 client.jsx와 wordRelay.jsx를 합치지만 client에서 wordRelay.jsx를 호출하기 때문에 하나만 씀
7) output : 합친 최종 결과물. path로 경로 설정. filename으로 이름 설정.