17.2 Building the Frontend

=> webpack은 2가지 모드가 있음.
1. development 2. production. 이 때 production코드가 훨씬 작음. 그래서 assets(frontend)을 빌드하고 싶음.

assets(frontend)을 빌드

• 1. webpack.config.js

mode: "development", -> 삭제하기(build, development일 때 각자 설정해주기 위함.)
watch: true, -> 삭제하기 (이거는 mode가 development일 때만 작동해야함. package.json에서 -w로 개발자모드일 때만 watch:true 설정해주기)

• 2. package.json

//추가
"build:assets": "webpack",

//수정
"dev:assets": "webpack --mode=development"

//최종
"scripts": {
    "start": "node build/init.js",
    "build": "npm run build:server && npm run build:assets", //server, assets을 동시에 build해줌 -> 이렇게 build된 코드는 어느 브라우저에서도 이해 ㄱㄴ
    "build:server": "babel src -d build",
    "build:assets": "webpack --mode=production",//추가 -> build할 떄
    "dev:server": "nodemon",
    "dev:assets": "webpack --mode=development -w"//수정 -> development할 때/ -w: watch모드 true라는 뜻임.
  },

참고 : webpack/api/cli

npm run build:assets 하면 assets 폴더 내의 파일들의 코드가 production용 코드로 바뀔 것이고

npm run dev:server 하면 assets 폴더 내의 파일들의 코드가 development코드로 바뀔 것임.

상대적으로 build의 코드가 더 짧다.
이렇게 설정해주면 development이든 production이든 변경없이 같은 webpack파일을 사용할 수 있음. 두 모드의 차이점은 1.모드 2.watch 설정이라 이 두개만 package.json에서 작동할 때 따로 설정해두고, 다른 건 같이 사용하기.

->
문제: bulid:server할 때, src폴더를 변환했는데 이 때, 백엔드의 폴더만 변환해줘야 하는데 client폴더까지 변환해버림.(client코드는 webpack으로 변환해주기 때문에, babel로 하면 안됨.)

해결: 이걸 해결할 수 있음.이제 build:sever를 하면 build:sever는 build:assets을 보게 될 것임.
build:assets을 실행하고 build:server를 실행해준 뒤, npm start 하면 localhost:4000이 실행될 것임. npm run build만 해도 두개가 동시에 실행됨.

이 다음 수업에서는 Heroku의 내부에 이 서버를 둘 것임. 아마 에러가 발생할 ㅡ텐데 DB가 없는 서버로 이동했기 떄문일 것임.