Page 41 -

이제 코드에서 node_modules 내부의 라이브러리를 불러올 수 있게 설정합니다.

config/webpack.config.server.js
const paths = require('./paths');
const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');

const cssRegex = /\.css$/;
const cssModuleRegex = /\.module\.css$/;
const sassRegex = /\.(scss|sass)$/;
const sassModuleRegex = /\.module\.(scss|sass)$/;

module.exports = {
mode: 'production', // 프로덕션 모드로 설정하여 최적화 옵션들을 활성화
entry: paths.ssrIndexJs, // 엔트리 경로
target: 'node', // node 환경에서 실행될 것이라는 점을 명시
output: {
path: paths.ssrBuild, // 빌드 경로
filename: 'server.js', // 파일 이름
chunkFilename: 'js/[name].chunk.js', // 청크 파일 이름
publicPath: paths.servedPath, // 정적 파일이 제공될 경로
},
module: {
rules: [ 20
{
oneOf: [
(...)
] 서버 사이드 렌더링
},
resolve: {
modules: ['node_modules']
}
};

이렇게 했을 때 react, react-dom/server 같은 라이브러리를 import 구문으로 불러오면 node_

modules에서 찾아 사용합니다. 라이브러리를 불러오면 빌드할 때 결과물 파일 안에 해당 라이브
러리 관련 코드가 함께 번들링됩니다.

브라우저에서 사용할 때는 결과물 파일에 리액트 라이브러리와 우리의 애플리케이션에 관한 코드
가 공존해야 하는데요. 서버에서는 굳이 결과물 파일 안에 리액트 라이브러리가 들어 있지 않아도
됩니다. node_modules를 통해 바로 불러와서 사용할 수 있기 때문이죠.

551

리액트를 다루는 기술_개정판(본문)최종출력용.indb 551 2019-08-20 오전 11:03:33