어,음…저번 포스팅때 이번편부터 본격적으로 Vue 파일들에 대해 파헤쳐보겠다고 했던 거 같은데, 생각해보니 라우터와 관련해서 못 다한 이야기가 있어서 이렇게 또 라우터를 주제로 작성하게 됐습니다. 그냥 나중에 좀 더 상세한 내용을 담는 포스팅에서 쓸까하다가, 그냥 나온김에 쓰자 싶어서요. (제 성격이 방학숙제조차도 미뤄놓으면 되게 찜찜해하는 타입이라 그렇습니다) 그래서 이번편은 #04_2편 입니다. 1. vue-router는 사실 2개야. 우선, Vue에서 라우터 기능을 사용하기 위해서 우리는 하나의 npm 패키지를 설치해줘야 합니다. 대략 vue-router 라는 이름을 가진 npm 패키지구요, Vue.js를 활용하신다면 필수적으로 사용할 수 밖에 없는 라이브러리입니다. 근데 여기서 중요한 점은 포스팅..
0. Intro 이전 편을 쓴 지 일주일이 넘었네요. 빠르게 되짚고 시작해보도록 하겠습니다. 왜냐면 지금 이미 새벽 4시거든요. 그리고 오늘은 화요일이라, 오늘도 출근을 해야하니까요! 우선 저번 포스팅에서 했던 마지막 단락을 되짚어 보겠습니다. index.html 이라는 하나의 정적 파일이 있고, 브라우저는 얘만 로딩합니다. 그래서 SPA(Single Page Application) 개념이 적용이 되는 거였구요. 그 index.html 파일에는 우리가 익히 아는 태그 하나와, build.js를 정의하는 코드로 이루어져 있었습니다(기타 메타태그는 그냥 무시할게여) 그리고 딱 하나 있는 태그가 가진 id ‘app’를, Vue Application 인스턴스(Vue 2.x버전의 경우 Vue 인스턴스)가 가리킴으..
0. 시작하기에 앞서 사실 저번 편에 이어서 이번 편도 좀 지루하지 않을까, 라는 생각이 듭니다. 대체 Vue.js 에 대해서 설명하는 포스팅이라고 해놓고 Vue.js를 실질적으로 활용하는 설명은 어디 있는거냐, 라는 생각이 드실수도 있어요, 충분히. 이래저래 필요한 개념들부터 짚고 넘어가려다보니 포스팅이 길어지고 있는데요, 하지만 그렇다고해서 ‘이 정도는 알아야 할 거 같은 것’들을 모른 척 당장 넘어갈 수는 없잖아요? 당장에 급하기에 활용법부터 필요하실 수도 있습니다만, 급히 먹는 밥은 체하기 마련이니까요. 최소한의 기본은 쌓고 인지한채로 개발을 해야하지 않겠습니까?ㅎㅎ 그러니 이번편도 당장 Vue.js를 ‘코드’로써 활용하고자하시는 분이라면 스킵하셔도 됩니다. 이번 포스팅은, 이전 글에서도 언급했던..
이번에 작성할 포스팅은 Vue3.0에 Fontawesome을 적용하는 방법이다. 사실, 아직 공식적으로 Fontawesome이 Vue 3.0을 지원하진 않는다… 그도 그럴것이 정식 릴리즈 된 지 아직 2주도 되지 않은 시점이니까. Font Awesome의 공식 홈페이지에서 제시하고 있는 vue-fontawesome 깃헙 레파지토리도 방문해 보신 분이라면 알아채겠지만 Vue 3에 대한 정식 지원이 되지 않고 있다. 좀 더 정확히는 아래처럼 우리 지원해. 그러니까 이 방법을 쓰면 될거야, 라고 안내는 하고 있지만 위에 버젓이 Using Vue 3.x라고 하고 npm install 명령어를 적어놨지만 실제 사용하면 아래와 같이 No matching version found for @fortawesome/vue..
0. 어때요, 서버는 잘 떴나요? npm run serve의 결과로 띄워진 http://localhost:8080 에 브라우저로 접속해서, 아래와 같은 화면을 띄웠다면 이제 절반은 끝낸 겁니다(시작이 절반이니까요?) 아, 시작하기에 앞서서 당부드리자면 오늘은 좀 지루한 이야기를 해야 할 거 같습니다. 그러니 좀 더 집중해서 글을 읽어주시면 좋을 거 같습니다. 저도 지루한 이야기는 별로 좋아하지 않습니다만, 지루하더라도 해야하는, 이야기는 해야하니까요ㅎㅎㅎ 아, 뭐 그렇다고해서 되~~~~게 어려운 개념을 설명하려는 건 아닙니다. 물론 듣는 이에따라서는 이게 대체 뭔 소리야? 라고 생각할 수도 있긴합니다. 그러니 차근차근 설명을 시작해보도록 하겠습니다. 1. SPA (Single Page Applicatio..
[Vue.js_#02]번쨰 글을 시작하기에 앞 서…타이밍이 기가 막힌 건지, 어쩐건지 2020년 09월 18일을 기준으로 Vue.js 3.0이 릴리즈 됐다. 첫 번째 이름은 아주아주 유명한 만화 ‘One Piece’ 공식 레파지토리 또한 오픈되었는데, 아직까진 공식 한글 번역 페이지가 존재하지 않는다 (현재 위 레파지토리의 이슈를 통해 번역에 대한 컨트리뷰션을 받는 중이다) 그리고 기가 막히게도 내가 얼마전에 쓰기 시작한 Vue.js 시리즈를 시작한 날이 9월 21일이다. …그렇다, Github 커밋 이력을 보시는 분들은 알 수 있겠지만 내가 Vue-cli 3를 통해 프로젝트를 만든 게 9월 8일. 그리고 어느정도 글을 쓰며 함께 진행해도 이상이 없을 법할 수준으로 기본 베이스 세팅을 마친게 9월 21일..
이제 시작입니다. 새로운 걸 배운다는 건, 참 재밌는 일이에요. 저는 평생 공부만 하면서 살 수 있다면 참 좋을텐데, 라는 마인드를 가진 사람이라 그런지 뭔가 새로운 지식을 머리속에 넣는게 그렇게 재밌더라구요. 막, 지식의 석탑이 머릿속에 차곡차곡 쌓여가는 그 느낌? 남들보다 내가 한 치라도 더 알아간다는 도취감이랄까? 뭐 대충 그런 걸 좋아합니다. …는 또 샛길로 빠지려고 하는 기미가 보이니 본론으로 돌아와보도록 하겠습니다. 일단 인트로를 열어보자면, [Vue.js_#00] 원래 시험공부는 방청소부터 하는 거랬다 에서도 말했지만 2017년부터 Vue.js를 기반으로 한 프로젝트를 하다보니 종종 현장지원의 형태로 개발자분들을 대상으로 교육을 하기도 했습니다. 마음 같아선 3일 정도 일정을 잡고 천천히, ..
꽤나 오랜만이라는 표현조차 양심에 가책이 느껴질법한 텀의 기술포스팅입니다. 2018년엔 SAML을, 2019년엔 OAuth2를 썼었는데 2020년엔 Vue.js에 대한 포스팅을 하고 있네요. (SAML은 사내 개발자포탈에 올린 내용으로...본 블로그에 없습니다ㅠ) 어쩌다보니 1년에 겨우 하나의 주제정도만 포스팅을 하는 것 같습니다. Github 트렌드만 살펴봐도 매주 포스팅을 해도 따라가기 벅찰만큼 많은, 그리고 좋은 기술들이 쏟아져나오고 있는 세상에서 게으름뱅이와 굼벵이처럼 느리게 살고 있는 거 같네요. 네, 제가 게을러 진 거 맞아요ㅠㅠ 뭐, 물론 어줍잖게 간보듯 이거 찍어보고 저거 찍어보는 겉핥기 형식으로 포스팅을 해봤자 의미도 깊이도 없긴하지만요. 그런 의미에서 봤을 때 이번에 하려는 Vue.js..