개인적으로 가장 하기 싫으면서도 가장 중요한 것이라고 생각하는게 개발환경 설정이다. 모든 프로젝트의 근간이 되고 대충 어설프게 알고 세팅했다가는 나중에 출시할 시기가 되면 본전도 못찾는 그런 것. 처음 수행했던 프론트엔드 개발 환경 구축에서는 뭔가 좋아보이면 이것저것 다 집어 넣었었는데 (Yeoman, grunt, gulp, uglify, browserify 등) 왜 어떤 이유에서인지는 모르고 대략 필요하다고 싶은 것들을 그냥 다 집어 넣었던 것 같다.
물론 최소한의 이해만 한 상태로 말이다. 하지만 프로덕트 수준의 빌드가 나올 쯤에는 문제점 들이 조금씩 나왔다. 사전에 조금 더 시간을 두고 패키지들을 이해하는 시간을 가졌으면 좋았을텐데, 늘 언제나 그렇듯 업무의 속도는 학습보다 빠르다. 뭐 어찌되었던 이번에는 학습 시간이 넉넉할거라고 가정하고 대략적인 환경 구성을 해보았다.
- IDE : Visual Studio Code (.Net을 하다와서 이게 익숙하더라)
- 형상관리 : github
- 백엔드 : baas (아마도 GCP)
안타깝게도 익숙해 보이는 요소가 하나도 없다. 어차피 일을 하는게 아니니까 상관은 없겠지만.. 너무 생소한 것들을 다룰려다보니 뜬구름 잡는 일이 생길 것만 같다. 그래서 이런저런 것들을 살펴보다 webpack 이라는 모듈을 설치 했다. 웹사이트에 필요한 리소스를 번들링 (합쳐)주는 것이다.
webpack 을 소개하는 다른 분들의 블로그 글들을 살펴보았다. 빌드 명령어 같은 것이 있고 빌드를 하고나면 온전하게 혼자 동작하는 그 무언가의 코드가 된다. 처음 봤을 때 어떤 생각이 들었냐 하면, C#, Java 를 할때도 한 패키지내에 여러 형태들의 클래스들이 상호 연관하여 동작한다. 그러나 이를 빌드하고 나면, dll 파일이나 war 파일로 패키징이 된다. 딱 이런 정도의 느낌. 보통 웹에서 사용하는 랭귀지 들은 인터프리트(Interpreted) 언어다 보니 무슨 컴파일 하는 소리하고 있네 하는 생각이 들 수도 있겠다. 하지만 단순히 빌드의 행위는 컴파일만하는 것이 아니라 패키징도 포함이 되는 것이기 때문이다. 이런 이해가 어느정도 되고나니 늘 하던 빌드의 그것과 크게 다를바가 없었다. 과거의 프론트엔드 리소스들은 단순 복사 정도에 그쳤다면 이제는 프론트엔드를 위한 빌드라고 봐야겠다.
Vue 에 집중해야하는데 사이사이 잔잔한 용어들에서 이렇게 인터럽트가 걸린다. 먼저 처음 시도한거는 vue-cli 라는 것을 사용하여 개발 환경을 세팅하는 방법이 가장 단순해 보여서 시작해보았다. git과 npm 이 필요하여 실습전에 미리 설치 해두었다.
vue-cli 설치와 템플릿 살펴보기
npm install -g vue-cli
vue list
템플릿이 몇 개 없어서 참 맘에 든다. 선택장애 없이 webpack-simple 을 골랐다. quick prototyping 이 필요한 상황이니까 망설일 필요가 없다.
프로젝트 템플릿의 생성과 웹 사이트 실행
vue init webpack-simple dev-pets
생각 했던 것보다는 디테일하고 빠르게 무언가가 생성되었다. 위에 To get started와 같은 명령어를 순서대로 해보면 관련한 패키지들을 모두 설치한후에 뭔가 튜토리얼 정도는 완성한거 같은 느낌의 웹 사이트가 하나 뜬다.
이렇게 되면 기본적인 개발 환경 세팅은 대략 다 한셈이고.. 다음으로 넘어가보자!
