vue+flask 시작. webpack.

일단 나는 웹 프론트, 백엔드 개발이 아예 처음이다. 우리 팀은 웹 서비스 관련된 팀이 아니기에 일반적으로 개발자로 취직하면 하는 자바 스프링이라던지 그런걸 안만졌다. 그래도 나중을 위해서 기초적인 프론트, 백정도는 혼자서 이렇게저렇게 만들어야 한다고 생각해서 공부중이다.(큰거 말고 작은거..) 

처음으로 뷰 공부를 해보려고 팀에서 다른분이 만들어놓은 python flask + vue가 구현되어있는 소스를 뜯었다. 나처럼 웹에 대해 아무것도 모르는 사람이 그냥 만들어져 있는 소스를 뜯어보려고 하면 파일 구조부터가 이상하다. 가볍게 vue에 관해서 튜토리얼과 책 한권을 읽고, 소스를 뜯어보려고 했지만 파일 구조부터가 이해가 안간다.

아래는 https://github.com/vuejs-templates/webpack 를 clone받아서, npm install한후 캡쳐다. 딱 내가 보는 프로젝트와 구조가 같아서 가져왔다.

이게 뭘까. https://kr.vuejs.org/v2/guide/ 요런거나 읽으면서 뷰 문법만 공부하고 왔는데 파일 구조부터 이해하기 힘들다. 처음엔 아무것도몰라서 그냥 시니어분들이 잘 짜놓은 구조? 인줄알았다. 하지만 그게 아니었다. webpack이란거다.(이거 파악하는데만 몇일 걸림......)

https://blog.naver.com/fifty_bridge/221296420125

대충 알겠다. 위의 블로그 글에서 가장 날 잘 이해시켜 준게

'간단하게 정리하자면 웹팩을 사용하는 이유는 웹 프로젝트를 만들고 구성을 하게 되면 시간이 갈수록구현하는 것이 늘어나면 늘어날수록 각종 .js .css .less .sss .png .jade 등 웹 프로젝트에 포함되는 모든 파일들이 증식하게 됩니다. 이렇게 증식되는 파일들을 웹팩이라는 모듈 번들러를 사용해서

간단하게 관리 할 수 있는 형태로 변환해서 사용할 수 있기 때문입니다.'

[출처] Webpack (웹팩) 이란?|작성자 fifty_bridg

'

라는 글이었다.(그대로 인용했는데 문제있을시 삭제하겠습니다.) 그리고

https://blog.naver.com/woong17/221303289879 블로그에서 대충 webpack에 대해 어떻게 알아가야 할지 대충 알았다. 

웹펙 프로젝트 구조에 관한 글이다 : https://vuejs-templates.github.io/webpack/structure.html

진짜 위의 구조 글과 구글링을 해가며, 어찌어찌 읽으면서 알아낸건 구조와 conf였고, npm run dev로 webpack을 실행시키면 위의 webpack.dev.conf.js에서 /에 있는 index.html과 js, css등을 잘 조합해서 이것을 메모리에 올려서 실행해서 서버가 뜬다는 거다.(테스트용으로.) 그리고 npm run build로 빌드를 하면, c언어가 컴파일하듯이 이것들을 조합해서 dist폴더 안에 압축된 소스파일을 준다. 

처음에 npm run build할 경우 대충 루트에 있는 index.html안에 어떻게 뷰가 들어가는지 궁금했었는데, webpack.dev.conf.js안에 HtmlWebpackPlugin인스턴스를 만들때 index.html을 파일로 사용하며, inject:true에서 삽입해준단다.

production일 경우에 이 npm run build의 결과값을 사용하면 된다. 처음에 npm run build했는데 npm run dev했을때처럼 서버가 자동으로 안떠서 뭔가 잘못 생성한줄알았었다.