Building the app

  이제 app을 build 하기 위해서 모든 파일을 src 폴더에 옮겼다. 어떤 파일을 src에 들어가고 어떤 파일은 src 외부에 있는지 확인하기 위해서는 나의 github commit source code를 확인하라.

src/

package.json

package.json

  개발 과정에서 사용하는 명령어인 dev:server & dev:assets와 build 과정에서 사용하는 명령어인 build:assets와 build:server를 나눴다.

  build를 하는 명령어는 npm start다. npm start를 하게 되면 그전에 prestart가 실행된다. prestart가 실행이 되면 build 명령어가 실행된다. build 명령어가 실행이 되면 build:server, build:assets와 copyAll이 실행 된다.

  build가 실행 되기 전에 먼저 prebuild가 실행되어서 기존에 있던 build 폴더를 삭제한다. build:server는 back-end part 부분의 code들을 build한다. build:assets는 front-end part의 code를 build 한다. build:assets를 할 때 주의할 점은 gulpfile.babel.js에서 watchFiles 부분을 비활성화 해야 한다는 것이다. 그렇지 않다면 gulpfile이 계속 watch를 하기 때문에 그 이후의 코드인 npm run copyAll이 실행되지 못 한다. copyAll은 build:server가 build 폴더로 transcompile을 하지 못 한 code를 build folder 옮기는 작업을 한다.

  build 과정이 다 끝나면 build/init.js를 실행시켜서 server를 가동한다.

gulpfile.babel.js

.gitignore

.gitignore

  반드시 .gitignore에 build를 포함하자. 불필요하게 git에 올릴 필요가 없다.

app.js

  localhost:port에 접속하면 home을 찾을 수 없다고 error가 발생할 것이다. 그 이유는 모든 코드들이 src로 들어갔기 때문에 directoryf를 인식하지 못해서다. 이것을 해결하기 위해서는 다음 코드를 app.js에 추가해줘야 한다.

app.js

  그리고 app.js에 다음 코드도 꼭 추가해줘야 한다. Programming에서 polyfill은 웹 개발에서 기능을 지원하지 않는 브라우저 상의 기능을 구현하는 코드를 말한다. @babel/polyfill을 해줌으로써 babel로도 modern JS에서 normal JS로 변환되지 않는 코드들(const나 let은 normalJS의 var로 변환이 가능하다. 하지만 symbol이나 async await같은 코드는 normal JS에서 없는 코드다. 이것을 polyfill이라고 한다.)을 사용 가능하게끔 build를 한다.

import '@babel/polyfill'; // To fix ReferenceError: regeneratorRuntime is not defined

참고 자료

• 노마드 코더의 유튜브 클론 강의
• express.js - app.set

소스 코드

github.com/zpskek/wetube-v3/commit/dbb09aec0db3e9445e03eb4ff870eb5c0c45a0db