[Vue.js_#00] 원래 시험공부는 방청소부터 하는거랬다.

꽤나 오랜만이라는 표현조차 양심에 가책이 느껴질법한 텀의 기술포스팅입니다.

 

2018년엔 SAML을, 2019년엔 OAuth2를 썼었는데 2020년엔 Vue.js에 대한 포스팅을 하고 있네요. (SAML은 사내 개발자포탈에 올린 내용으로...본 블로그에 없습니다ㅠ)

 

어쩌다보니 1년에 겨우 하나의 주제정도만 포스팅을 하는 것 같습니다.

Github 트렌드만 살펴봐도 매주 포스팅을 해도 따라가기 벅찰만큼 많은, 그리고 좋은 기술들이 쏟아져나오고 있는 세상에서 게으름뱅이와 굼벵이처럼 느리게 살고 있는 거 같네요.

네, 제가 게을러 진 거 맞아요ㅠㅠ

 

뭐, 물론 어줍잖게 간보듯 이거 찍어보고 저거 찍어보는 겉핥기 형식으로 포스팅을 해봤자 의미도 깊이도 없긴하지만요.

그런 의미에서 봤을 때 이번에 하려는 Vue.js에 대한 포스팅은 걔중에선 숙련도가 제일 높다고 할 수 있겠네요.

 

2015년 Angular를 통해 프론트엔드 프레임워크라는 문턱에 입문을 하고, 어쩌다보니 2016년엔 React를 3달인가 4달, 깜짝거리듯 해봤던 저로서는 2017년에 혼자 좋아보여서 깨작대던 Vue.js가 언제부턴가 회사의 주력 프론트엔드 프레임워크가 되었고, 그때부터 지금까지 계속해서 Vue.js를 가지고 뭔가를 뚝딱거리고 있으니까요.

 

햇수로만 쳐도 4년째네요, 오래도 했다...

그런 의미에서 사실 작년말부터는 아, 이제 Vue.js 말고 다른 거 해보고 싶다, React도 다시 해봐야하는데, Svelte라고? 이건 또 뭐지? 라면서 눈 돌릴만한 다른 거리들이 없나 찾는 중이긴 합니다. 아, 그러고보니 2017년에 Vue.js랑 같이 눈독들여 봤던 Graph QL은 아직 손도 못 대봤네요.

(Graph QL은 진짜 해보고 싶은데...REST API 체계조차 명세대로 하지 못 하는 우리 회사의 환경상 한 20년은 지나고 이미 도입할 회사들은 다 도입한 이후에나 안전성이 입증됐다면서 도입할까 고려할 회사니까...뭐, 그 관점에서 보자면 Vue.js를 이만큼이나 도입해서 확산하려는 게 참 놀랍기도 하고...는 무슨, 진작 하잘대 안 하고, 아하하. 우리 회사 좋아요, 오래 다녀야지, 좋은 회사, 좋은 회사...)

 

Graph QL도 올해가 가기 전엔 꼭 해봐야겠습니다, 더 늦을 순 없지.

 

그런 의미에서 늘 해야지, 해야지 하고 마음만 먹은채 시간을 보냈던 Vue.js를 이제라도 포스팅하려 합니다.

 

야, 뭐 이미 늦을대로 늦은 시점인데 이제와서 뭐 굳이 포스팅하려고 해, 귀찮지도 않냐? 그냥 하지않고 그대로 넘겨, 의 마인드로 구렁이 담넘듯 넘길수도 있겠지만, 굳이 왜 이 시점이냐고 물으신다면…사실 Vue.js도 슬슬 다음 단계로 넘어갈 때가 되었거든요.

 

네, Vue도 이제 2에서 3으로 메이져급 변화를 줄 때가 되어서요.

실제로 이번에 포스팅을 위해서 보일러 플레이트 정도의 Vue.js 레파지토리를 하나 구성하는데...참 많이 바껴서 삽질을 무진장 했네요. Vue.js뿐만 아니라 흔히 함께 사용되는 vue-router도 대격변(심지어 이건 4.x 버전대로 올릴 예정으로 현재는 beta 버전이더군요), Nuxt는 또 무슨 개념이지, webpack이 4.x대로 치고 올라온 건 이미 알고 있었고...vue-cli-service? 뭐 여튼 등등등드르등등등!!

 

3년여란 시간동안 굉장히 많은 격변을 해버린 거 같더라구요. 그래서 더 늦으면 안 될 것 같단 생각에, 그리고 이왕 하는 거 새로운 버전들에 맞춰서 포스팅을 하고자 글을 쓰게 되었습니다.

(초보자 분들은 그게 대체 뭔 소리에요? 싶을 거 같다는 생각이 드는데…일단 그러려니 하고 넘어가주세요. 어차피 이 포스팅은 잡설을 주절대는 포스팅입니다. 그래서 포스팅 번호가 00번인거에요, 헤헷)

 

그리고 아실분들은 아시겠지만 Vue.js에 대한 좋은 사이트는 이미 많이 있습니다.

1번으로 꼽히는 게 Vue.js의 공식 사이트

2번으로 꼽히는 게 Do it! Vue.js 시리즈의 저자인 캡틴팡요님

3번으로 꼽히는 게 종합백과사전같은 Velopert가 있겠네요.

 

물론 그 외에도 많습니다만, 저한테 대표적으로 꼽으라면 저렇게 3개를 꼽을 거 같아요.

저 개인적으로도, 제 포스팅보다는 저분들의 포스팅을 보는게 기초를 다지기에도 학습을 하기에도 낫지 않을까 라고 생각합니다.

 

사실 굳이 제 기술 포스팅을 통해 Vue.js를 학습하실 필요는 없습니다.

이미 구글에서 간단히 검색만 해봐도 뛰어난 Vue.js 포스팅 사이트들이 많으니까요.

 

다만, 저의 기술 포스팅의 모토는 늘 이야기하듯 '10년 뒤에 모든 걸 잊은 내가 봐도 아, 이게 이거구나'라고 이해하고 깨달을 수 있어야 한다, 가 0번 조건입니다. 그렇기에 될 수 있는 한 쉽게 작성할 거고, 개념 하나하나, 단어 하나하나에 대해서도 이렇게까지? 라는 의문이 붙을 정도로 풀어서 설명을 하려 합니다. 

 

또한, 그러면서도 자질구레한 것들은 일정부분 스킵하려고 합니다.

단적인 예로, 다음 포스팅에서 여러분이 마주할 첫 번째 항목은 일단 Github의 제 레파지토리에서 클론을 받고 서버를 띄워서 화면을 보는 겁니다. 믓 사이트나 책에서 서두를 장식하는 그런 것들은 과감히 건너뜁니다. Vue.js가 뭔지, 프론트엔드 프레임워크가 어떤게 있고 어떤 게 좋은지 어떤 차이가 있는지, vue확장자 파일내의 구성이라던가 쓰는 문법 같은 건 우선 건너뜁니다. 일단 서버부터 올리고, 서버가 어떻게 올라가고 그게 어떤 매커니즘으로 동작을 하는지에 대해 설명 할 겁니다.

 

그렇잖아요, 일단 동작하는 뭐가 보고나서야 우리는 '오, 이게 되네? 그 다음은 뭐야?'라고 흥미를 느끼는 사람들이니까요.

백날 천날 말로 썰로 글로 설명한 들, 눈에 보이는 한 번이 더 명확히 이해하는 게 사람이니까요.

단적인 예로, 저도 아직 printf("Hello World\n"); 로 콘솔에 찍히던 그 하얀 글자들을 못 잊는 사람이라서요.

(교수님이 1시간도 넘게 설명한 앞 이론같은 건 1도 기억 안 남...)

 

그리고 우리는 역시 개발자잖아요?

개발자는 코드로 말하는 사람들이고

기반지식이 1도 없더라고 코드를 보면 아, 이게 그거구나, 하고 아는 사람들이니까요.

 

음...잡설이 좀 길었네요.

너무 오랜만에 기술 포스팅이라 좀 들떴나봐요.

그럼 이만하고, 이제 본격적으로 Vue.js를 비롯한 잡것들을 공부해보도록 하겠습니다.