04. 오랜만입니다(8일 만임). vue-router와 함께 돌아왔습니다.
8일 만에 작성하는 글입니다. 학교 퀴즈도 있었고(변명 맞음) 뭐 친구 이사 도와주는 것도 있었고(진짜 변명 맞음) 뭐 다 있었습니다. 공부를 게을리 할 수 밖에 없는 한 주가 아니었나 싶네요. 근데 뭐 어쩔 건데. 아 이새기 대충 사네ㅋ 하면서 웃어 넘기는 거 말고 니가 뭘 할 수 있는데ㅋㅋ
됐고, 이전에 만들던 부동산 매물 사이트는 얼추 정리가 되었습니다. 복습 없이 강의를 빠르게 한 번 쭉 듣고 2회차로 들을 때 코드를 따라 쳤는데 꽤 수완이 좋은 것 같습니다. 강의 호흡도 짧아서 금방 금방 지나가니,,, 그 이후엔 re:백지에서 시작하는 코딩 세계 컨셉으로 강의를 듣는 동안 만들었던 사이트를 강의 없이 혼자 만들어 보려고 했는데,,,
이게 여간 쉽지가 않더군요. 의존도가 높았다는 걸 체감할 수 있는 좋은 기회였습니다. 문법이나 어디에 뭘 어떻게 해야할 지는 알 것 같긴 한데 백지에 스케치부터 다시 하려니 막막하다는 생각이 크게 들었던 것 같습니다. 물론 결국 다 해내고야 마는 저였지만 말이죠~
이후엔 vue-router를 배울 겸 정말 간단한 블로그를 만들었는데요, 사실 블로그라고 하기도 뭐한 웹페이지의 묶음이랄까,, 그래도 좋은 걸 배웠으니 남겨보도록 하겠습니다.
Vue-router
이전에 있었던 부동산 매물 사이트의 url은 localhost:8080을 벗어나질 않습니다. 상품 상세 페이지를 눌러도 UI 상태에 변화를 주기만 하지 다른 페이지로 넘어가지 않았는데요, vue-router는 url 이동을 도와주는 문법이랄까요. 아 그 이전에 Bootstrap을 다운 받고 main.js에 추가하는 등 멋진 UI를 쓰기 위해 무엇인가를 배우긴 했는데 그건 굳이 적지 않도록 하겠습니다. Navbar를 추가하는 것 이외엔 따로 사용하지 않았고 아직 뭐가 뭐 이렇더라 할 만큼 아는 게 없어서,,,
이전에 부동산 매물 사이트에선 컴포넌트를 만들고 App.vue에 그 컴포넌트가 보여질 자리에 컴포넌트를 입력해서 화면에 띄웠었죠?
vue-router는 router.js라는 파일에 컴포넌트를 import 하고 컴포넌트를 노출시킬 url 경로를 정해주는 식으로 동작합니다. 말로 설명하려니 정말 이상하네요 뭐랄까 설명하려고 할 때 쓰는 용어가 맞는 건지도 모르겠고,,, 일단 그럼 코드를 보시죠
router.js라는 파일을 만들고 위에 X표시한 부분을 빼고 나머지를 적어줍니다. 이게 router를 사용하는 첫 번째 단계구요, 이후에는 미리 만들어 놓은 컴포넌트 파일들을 import 해줍니다.
그리고는 routes라는 변수 안에 Object 형식으로 path와 component를 입력하는데요, path에 url정보를 그리고 component에는 해당 url로 접속 시 보여 줄 컴포넌트 파일을 적어줍니다. path를 상대경로로 적는 것 같은데 사실 아직 상대경로, 절대경로를 제대로 익히지 않아서 하란 대로 한 건 다들 모른 척 하기로 합니다. 이후에는 App.vue 파일로 넘어가서 컴포넌트를 보여줄 위치를 정한 뒤에
<router-view>라는 태그를 달아줍니다. 컴포넌트를 사용할 때 props 문법과 동일한 방법으로 :contents가 쓰인 흔적이 있네요. 놀랍지 않게도 v-for, v-if 전부 사용이 가능합니다. 앞으로 localhost:8080/detail로 들어가면 저 router-view 태그는 <detailComponent/>가 되는 것이구요 localhost:8080/list로 들어가면 저 태그는 <listComponent/>가 된다고 생각하시면 됩니다.
그리고 빼먹었는데 router를 사용하기 위해선 main.js에
이런 것도 추가해두셔야 합니다. 아시겠죠~?? html의 a태그처럼 html 요소에 router 링크를 걸어줄 수도 있는데요, 말 그대로 <router-link>라는 태그를 사용하면 되고, 상세한 내용은 코드를 보면서,,
이런 식으로 to 속성을 줘서 이동하고자 하는 url을 입력해주면 됩니다. 이쯤 돼선 url 파라미터를 이용해 볼 텐데요, localhost:8080/detail/??? 이라는 url에서 ??? 부분을 읽어들이는 방법입니다. 우선 router.js에 있는 detailComponent의 경로에 변화를 줍니다.
이렇게 :id를 붙이구요 그 뒤엔 detailComponent.vue로 이동해서
$route.param.id로 url의 :id 부분을 읽어옵니다. 이러면 여튼 동작함. 저기 contents가 뭐야 그 assets 폴더에 Object를 담은 Array 형식 js파일로 돼있어서 거기서 읽어오고 뭐 그러는 건데 그런 거 안 궁금하시잖아요 그쵸~? 여튼 저렇게 하면 됨. 더 궁금해하지 않기 ㅇㅋ?
여기까지가 vue-router의 정말 정말 기본적인 문법이었고 이후에 뭐 nested route나 push 같은 걸 배웠는데(push는 이미지 첨부할 거임) 그건 저만 아는 걸로 하겠습니다. 귀찮아서 그런 거 진짜 진짜 아님 진짜 하려면 하는데 그냥 왠지 굳이 같은 느낌이라 안 하는 거임 진짜
git 서버를 활용해서 그 동안 만든 사이트들을 저만 localhost로 보는 게 아니라 여러분들과도 공유할 수 있지만은 그건 조금 뒤로 미뤄두겠습니다. 어차피 뭐 지금까지야 다 예제로 만든 거고 굳이 봐봤자 뭐 딱히 재밌지도 않고 하니까,,, 그리고 상당히 귀찮더라구요 여러 예제가 있는데 여러개 올리려면 또 막 뭘 어떻게 설정해야 하고 애초에 그 전에 build도 해야하고(물론 npm이 대신 해줌 내가 하는 건 그냥 타자 딱 몇 번 치는 거 말곤 없음).
이후엔 vueex? vuex?뭔진 모르겠는데 그걸로 뭐 또 인스타그램 비슷한 거 만든다고 하니까 함 해보겠습니다 제가. 뭐 어떻게든 하겠죠 뭐 여튼 200
