Node.js 및 npm 패키지가 설치되어 있지 않으시다면, Node.js 설치를 먼저 보고 오세요!!
[React]
React는 인스타그램에서 적용하고 있는 자바스크립트 라이브러리 중 하나이며, 사용자 인터페이스를 만들기 위한 것으로 주로 싱글 웹이나 모바일 어플리케이션에 사용됩니다.
[React 폴더 생성]
React 프로젝트를 생성할 폴더를 먼저 만들어줍니다.
그리고 cmd 창을 열어 생성된 폴더 위치에서 아래 명령어를 입력합니다.npm init -yinit은 npm을 통해 해당 폴더를 프로젝트 폴더로 초기화해주는 명령어입니다.
-y : default 옵션을 사용
위 명령어를 수행하면 아래와 같이 package.json 파일이 생성됩니다.
[index.html 생성]
프로젝트 root 폴더(React 프로젝트 폴더)에서 dist 폴더를 생성하고 그 안에 index.html 파일을 생성해줍니다.
index.html은 렌더링 할 컴포넌트가 들어가는 파일입니다.
index.html의 내용은 아래와 같이 만들어줍니다.<!DOCTYPE html> <html> <head> <title>React Project Setup</title> </head> <body> <div id="root"></div> <script src="/bundle.js"></script> </body> </html>아래와 같이 생성해주면 됩니다.
[Webpack4 설치]
Webpack 이라는 것은 하나의 어플리케이션을 실행하기 위해 필요한 각종 파일들의 의존성을 검사하고 최적화 해주는 모듈 번들러(의존성 그래프를 기반으로 묶어줌)입니다.
프로젝트 폴더에서 cmd창을 열어 아래 명령어를 실행합니다.npm install --save-dev webpack webpack-dev-server webpack-cli--save : Dependencies를 package.json 파일에 저장
-dev : 개발에만 사용하는 Dependencies
설치가 완료되면 package.json 파일의 내용이 아래와 같이 변경 됩니다.
Webpack dependencies가 추가되어 있습니다.
개발용 서버를 위해 json 파일의 scripts 부분에 아래 부분을 추가"start": "webpack-dev-server --config ./webpack.config.js --mode development",
루트폴더 내에 webpack.config.js 파일을 생성해 아래 내용을 입력해줍니다.module.exports = { entry: [ './src/index.js' ], output: { path: __dirname + '/dist', publicPath: '/', filename: 'bundle.js' }, devServer: { contentBase: './dist' } };entry : 번들링을 수행할 기점(/src/index.js에 임포트되는 파일들을 번들링)
filename : 번들링 된 파일 이름
path : 번들링 할 요소가 저장된 위치
/src/index.js 파일을 생성하고 아래와 같이 내용을 적어줍니다.console.log('Set up is continuing...');webpack4는 entrypoint와 output을 별도로 설정하지 않아도
entry point는 ./src/index.js, output은 ./dist/main.js로 간주합니다.그리고 서버를 실행하여 정상적으로 동작하는지 확인합니다.
서버 실행 명령어는npm run-script start아래와 같은 에러가 발생하면, js 파일들의 이름과 실제 webpack.config.js 파일 이름과 package.json 파일 내부에 적힌 이름이 동일한지 확인하여 수정해줍니다.
정상적으로 실행되면 아래와 같이 빌드가 성공하고 서버를 실행합니다.
서버 확인은 localhost:8080으로 접속하여 확인할 수 있습니다.
위와 같은 빈 화면이 뜨고, 크롬의 경우 F12를 눌러 개발자 도구를 들어간 후에 Console 탭을 눌러주면 index.js가 정상적으로 실행 된 것을 확인할 수 있습니다.
여기서 DevTools failed to load SourceMap: Could not load content for webpack:///node_modules/sockjs-client/dist/sockjs.js.map warning 에러의 경우 Dev tool 설정을 통해 해결할 수 있습니다.
아래 부분을 클릭합니다.
Settings -> Preferences -> Enable JavaScript source maps, Enable CSS source maps를 체크 해제 해줍니다.
webpack의 번들링이 제대로 동작하는지 확인하기 위해 package.json 파일의 scripts에 아래 내용을 추가해줍니다."dev": "webpack --mode development", "build": "webpack --mode production",development 모드에서는 압축(minify)을 지원하지 않으며 production 모드에서는 압축을 지원합니다.
그리고 다시 아래 명령을 통해 webpack을 실행하면,npm run-script build/dist 경로에 bundle.js 파일이 생성된 것을 확인할 수 있습니다.
