[Vue.js_#01] 일단 서버를 띄우자

이제 시작입니다.

 

새로운 걸 배운다는 건, 참 재밌는 일이에요. 

저는 평생 공부만 하면서 살 수 있다면 참 좋을텐데, 라는 마인드를 가진 사람이라 그런지 뭔가 새로운 지식을 머리속에 넣는게 그렇게 재밌더라구요. 막, 지식의 석탑이 머릿속에 차곡차곡 쌓여가는 그 느낌? 남들보다 내가 한 치라도 더 알아간다는 도취감이랄까? 뭐 대충 그런 걸 좋아합니다.

 

…는 또 샛길로 빠지려고 하는 기미가 보이니 본론으로 돌아와보도록 하겠습니다.

 

일단 인트로를 열어보자면,

[Vue.js_#00] 원래 시험공부는 방청소부터 하는 거랬다 에서도 말했지만 2017년부터 Vue.js를 기반으로 한 프로젝트를 하다보니 종종 현장지원의 형태로 개발자분들을 대상으로 교육을 하기도 했습니다. 마음 같아선 3일 정도 일정을 잡고 천천히, 라이브 코딩을 해가면서 여기선 왜 이렇게 쓰고 이걸 응용하려면 어떻게 해야하는지, SPA의 구조에서 가상 DOM의 역할과 매커니즘…등등 찬찬히 설명드리고 이해시켜드리고 싶지만, 현실은 전혀 1도 그렇지가 않거든요.

 

보통 Vue.js교육 요청을 받아서 3일 이야기를 꺼내면 난색을 표하십니다.

 

그러면 대다수는 8시간으로 교육 일정이 잡힙니다. 최단시간 교육은 3시간 30분이었던 적도 있었죠. 와우, 책 한 권도 뚝딱거리며 나오는 Vue.js에 대해서 3시간 30분만에 JSP 및 서버사이드 렌더링에 익숙하신 분들을 대상으로 모든 걸 전수해드려야합니다. 아하하하하.

 

그럴때면 결국 아웃사이더처럼 상처를 치료해줄 사람어디없나 가만히 놔두다간 끊임없이 덧나 사랑도 사람도 너무나도 겁나 혼자인게 무서워 난 잊혀질까 두려워 하다가 끝나는 겁니다.

 

그렇게 내가 랩을 한 건지 설명을 한 건지 모를 교육이 끝나면, 나는 교육을 했지만 한 게 아니고 받은 분들도 받았지만 받은게 아닌 상태가 되어버리죠. 후에 열이면 열, 백이면 백. 메신져가 옵니다.

(시간낭비, 돈낭비, 인력낭비...)

 

‘프로님 질문이 있는데요…’

 

그런 쳇바퀴를 몇번이나 돌고 돌았던 점 또한 이렇게 포스팅을 하게 된 계기이기도 합니다.

좀 더 쉽게, 기반지식이 1도 없는 분들도 Vue.js에 대해 이해할 수 있게, 진입장벽을 최대한 낮추는 방식으로 설명을 할 수 없을까, 싶었던거죠.

(절대 프로님 질문있어요, 라는 메신져가 귀찮아서가 아니에여, 에헷^^)

---

그럼, 진짜 시작해봅시다.

0. 명령어 4개로 끝

사실 여러분이 이번 편에서 할 건 커맨드 창에서 아래 명령어 4개를 실행하는 게 전부입니다.

 

git clone http://github.com/onedayz/vue_starter.git

cd vue_starter

npm install

npm run serve

 

그리고 위 명령어가 모두 정상적으로 실행되었다면, http://localhost:9090 에 접속하면 아래와 같은 화면을 마주하시게 될 겁니다(혹시 git clone이 안 되시는 분들은 스크롤을 굴려 맨 밑에 잠시 다녀와주세요. 프로젝트를 압축해서 올려두었습니다.)

 

간단하죠. 이게 끝이에요.

그냥 딱 4줄로, 여러분은 Vue.js + node.js 기반의 서버를 띄우신 겁니다.

이제 코드를 살짝살짝 바꿔가면서 프론트엔드를 개발하시면 되는거에요.

컴포넌트도 추가하고, 스크립트도 넣고, 백엔드랑 REST API 통신도 하고 말예요.

 

참, 쉽다 그쵸??

 

자, 쉬운 건 했으니, 이제 썰을 좀 풀어봅시다.

그래서 내가 방금 실행한 4개 명령어가 뭘 하는 건지에 대해서 말이에요.

---

1. git clone

Git 은 형상관리를 위해 쓰이는 오픈소스입니다.

항간에는 토발즈 아저씨가 SVN 쓰다가 빡쳐서 만들었다고 하던데…역시 빡침은 많은 개발자들에게 영감을 주는 거 같아요,그쵸?

 

Git에 대해서는 차후에 각잡고 포스팅을 해야 할 만큼, 문장 몇개로 정의되는 대상이 아니긴 합니다. 그리고 아마 본 포스팅을 보실만큼 기술 스택에 대한 호기심이 왕성한 개발자라면 대부분 ‘형상관리’의 개념을 알고 계실거라고 생각합니다. 그런 의미에서 Git도 어느 정도 다루실 줄 아실거라고 생각해요.

 

그래서 여기선 굳이 길게길게 설명하지 않을게요.

 

하지만! 또 누군가에겐 필요할 수 있으니 쉽게 설명하자면,

일반적인 프로젝트는 다수의 개발자가 함께합니다. 그렇기에 당연히 A 개발자와 B 개발자가 각각 작업한 코드도 한 프로젝트에 반영이 되야 할 거고, 이때 ‘하나’로 관리되는 프로젝트를 ‘형상’이라고 지칭합니다. 그리고 그런 형상을 ‘관리’ 할 수 있게 도와주는 도구가 Git입니다. 

 

형상관리를 위해 Git 은 여러 개념(명령어)를 제공하는데요.

그중에 하나가 clone 이에요. clone은, 의미그대로 ‘복사’를 의미합니다.

여러분이 방금 실행하신 'git clone http://github.com/onedayz/vue_starter.git' 명령어는 Github이라는 곳에서, 여러분의 로컬로 형상(레파지토리)를 복사하신 거에요.

 

좀 더 정확히는 제가 만들어놓은 원격지의 레파지토리에서 말이죠.

 

그 외에도 Git에 대해선 브랜치 전략이나 pull, rebase, fetch와 같은 명령어등등 알아야 할 게 많습니다만, 일단 넘어갈게요. 이건 Vue.js 포스팅이니까요.

---

2. npm install

자, 그래서 이제 로컬에 vue_starter 라는 디렉토리가 생겼을거고, 여러분은 제가 지시했던 2번째 명령어 npm install을 실행하셨을 겁니다.

 

npm install 명령어를 실행하시면 콘솔창에 뭔가 쫙쫙쫙 많이 설치되는 느낌의 출력창을 보셨을 거에요. install 이라는 어원에서 알 수 있듯이, 본 명령어를 무언가를 설치하는 명령어입니다.

 

그렇다면 그 설치하는 게 무엇이냐?

바로 npm 라이브러리들을 설치하는 겁니다.

 

우리는 모두 어른이니까, 어린애들이 흙장난 하다가 아무거나 막 집어먹듯이 마구잡이로 랜덤하게 설치할 순 없잖아요?

 

자, 프로젝트 루트 디렉토리에 있는 package.json 파일을 한 번 열어보도록 할게요. json형태로 정의된 여러값들이 보일 겁니다. 그 중에 dependencies/devDependencies 항목이 있습니다. 감이 딱! 오시죠? npm install은 그 항목에 명시된 라이브러리들을 설치하는 작업입니다.

Vue Cli3 기본에 제가 추가한 몇개 라이브러리가 정의되어있습니다.

설치가 되는 라이브러리들에는 당연하게도 Vue.js도 포함이 되어있습니다.

(dependencies 2번째 줄)

 

네, Vue.js도 결국은 뭔가 새롭게 짜잔!해서 나타난 아이가 아니구요, 그저 Javascript로 만들어진 라이브러리일 뿐입니다. 

 

우리가 흔히 백엔드를 구성할 때 활용하는 스프링 프레임워크를 생각해보세요. 

스프링 프레임워크도 뜯어보면 결국 JAVA로 만들어진 라이브러리일 뿐입니다.

그것과 크게 다르지 않아요.

 

이제 여기까지 하셨다면 프론트엔드 개발에 필요한 라이브러리 설치까지 끝났습니다.

 

⌘ dependendencies 와 devDependencies 의 차이를 물으시는 분들이 많습니다.

  둘의 차이는 런타임에 계속 필요한 라이브러리는 dependencies에 정의되어야하고, 개발 및 빌드/컴파일시만 필요한 거라면 devDependencies에 있으면 됩니다. 그래서 빌드할 때만 쓰이는 babel이나 cli-service와 같은 라이브러리는 devDependencies에 있고 서버가 기동되는 중인 런타임에 필요한 vue나 vue-router같은 라이브러리는 dependencies에 정의되어 있는 겁니다.)

 

---

3. npm run serve

npm run serve는 hot reload 기능을 내포한 node.js 서버를 기동하는 명령어입니다.

딱 이 한 줄만 기억을 하셔도 됩니다. 웹팩 설정이나 vue-cli-service와 같은 추가적인 개념은 지금 단계에선 굳이 모르셔도 됩니다.

 

…사실 길게길게 vue-cli-service 부터, webpack 2.x -> 4.x 로 바뀌면서 변한 것들, 설정등등을 몇 문단에 걸쳐서 적었는데…읽다보니 ‘아, 이거 읽다가 더 헷갈리겠는데?’라는 생각이 들어거 그냥 다 지웠습니다.

 

쉽게 보고 쉽게 익히는 게 기조이니만큼, 지금은 그냥 딱 이 정도만 알아두세요.

 

이번 편은 이쯤에서 마치려고 합니다.

운동도 시작전엔 스트레칭을 해야하듯이, 적당히 머리를 풀어주신 거라고 생각해주세요.

 

사실 다음편부터 좀 개념적인 부분으로 진행 될 예정이기 때문에 Vue.js나 SPA를 처음 접하시는 분이라면 혼돈의 카오스를 맞이하실 수도 있기에...일단 뭐라도 띄워놓으면 마음이 편하시지 않을까 싶어서 1편을 이렇게 적었습니다.

 

그럼 안녕, 다음편에서 봐요 :)

---

-1. 부록

1. git clone을 잘 모르신다면, 아래 zip파일을 받아서 압축을 해제하시고 npm install을 실행해주세요.

vue_starter-dev.zip

0.14MB

2. npm install 진행중에 에러가 발생한다면, npm config list 명령어를 통해 npm 설정을 확인해주세요. 보통 proxy나 ssl 같은 설정을 추가해주셔야 하는 경우가 많습니다. 아래 명령어를 참고해주세요.

 

npm config list 로 설정을 확인한 후,

npm config set proxy http://host:port
npm config set https-proxy https://host:port
npm config set strict-ssl false
npm config set registry http://registry.npmjs.org