Page 37 -

proxySetup: resolveApp('src/setupProxy.js'),
appNodeModules: resolveApp('node_modules'),
publicUrl: getPublicUrl(resolveApp('package.json')),
servedPath: getServedPath(resolveApp('package.json')),
ssrIndexJs: resolveApp('src/index.server.js'), // 서버 사이드 렌더링 엔트리
ssrBuild: resolveApp('dist') // 웹팩 처리 후 저장 경로
};

module.exports.moduleFileExtensions = moduleFileExtensions;

이 파일에 ssrIndexJs와 ssrBuild 정보를 추가했습니다. ssrIndexJs는 불러올 파일의 경로이고,
ssrBuild는 웹팩으로 처리한 뒤 결과물을 저장할 경로입니다.

다음으로 웹팩 환경 설정 파일을 작성합니다. config 디렉터리에 webpack.config.server.js 파

일을 생성해 주세요.

config/webpack.config.server.js
const paths = require('./paths');

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

}
};

웹팩 기본 설정을 작성했습니다. 빌드할 때 어떤 파일에서 시작해 파일들을 불러오는지, 또 어디
에 결과물을 저장할지를 정해 주었죠.

다음으로 로더를 설정합니다. 웹팩의 로더는 파일을 불러올 때 확장자에 맞게 필요한 처리를 해
줍니다. 예를 들어 자바스크립트는 babel을 사용하여 트랜스파일링을 해 주고, CSS는 모든 CSS
코드를 결합해 주고, 이미지 파일은 파일을 다른 경로에 따로 저장하고 그 파일에 대한 경로를 자

바스크립트에서 참조할 수 있게 해 줍니다.

547

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