D'story

오늘 한 일

• 장장 3시간 여에 걸친 누군가의 라이브 코딩 쇼 구경... 근데 나는 뷰린이인 주제에 훈수를 두었다?!
• 그리고 자꾸만 늘어가는, 어제 날린 나의 pr에 대한 리뷰들을 실시간으로 확인했다. 근데 첫 번째 리뷰부터 잘 안 풀려..!?
• 어제는 잠을 푹 잤는데도 머리가 안 도는지 자꾸만 같은 코드를 지웠다 썼다 하면서 바보 같은 짓을 계속했다. 그리고 이건 누군가가 라이브로 보았지
• 그러다 너무 효율 안 나서 잠깐 파업하고 저녁 먹은 후 운동하고 다시 코딩을 시작했더니 너무 잘 되는데!? 운동이라 쓰고 마법이라 읽는다
• 당장 달아주신 리뷰들은 어찌저찌 해결한 것 같은데 작업하다 다른 문제들을 발견했다. 음... 이건 내일 스크럼 때 자수하고 나서 생각해 봐야겠다

오늘 배운 것

• 창현님이 리뷰에 참고하라고 달아주신 링크. vuex 공부할 때 분명 봤었는데 막상 내가 코드 짤 땐 생각도 안 나죠ㅠㅠ

오늘 한 일

• 어제는 리액트로 로그인, 회원가입 페이지를 만들었고, 아직 사용할 api가 준비되지 않은 틈을 타 오늘은 어제와 똑같은 페이지를 뷰로 구현하는 작업을 시작했다. 역시 손에 익은 리액트만큼은 속도가 나지 않았다. 그래도 하루종일 붙잡고 있으니 비밀번호 입력값에 대한 유효성 검사만 제외하면 웬만큼은 비슷해진 것 같다.
• 비슷하게 생긴 두 페이지를 라우팅하려니 Vue Router가 필요했다. 한 번도 뷰로는 라우팅을 해본 적이 없어서 공식문서를 찾아봤더니, 놀랍게도 cli로 vue add router 명령어만 입력해주면 router 디렉토리가 자동으로 생성되고, app.vue 파일도 라우터가 적용된 가장 기본적인 템플릿으로 덮어씌워진다. 명령어 하나로 다 해결되는 건 참 좋은데, app.vue 파일 덮어쓰기 때문에라도 앞으로는 라우터가 필요하면 프로젝트를 생성하자마자 바로 적용하는 것이 훨씬 나을 듯하다. 페이지 이동을 하려면 this.$router.push('이동하려는 url path') 코드를 사용하면 된다.
• 분명 튜토리얼 때 별 어려움 없이 사용했던 것으로 기억하는데도, eventBus를 다시 구현해보려니 순서가 조금 헷갈려서 내 나름대로 낑낑대며 완성해보고, 상현님께 컨펌을 받았다. eventBus에 이벤트를 넣고, 넣은 것을 감지해서 처리하는 절차 자체가 틀리지는 않았는데, 어차피 Vuex를 사용할 거라면 그때 생성되는 store가 eventBus와 같은 역할을 한다는 얘기를 들었다. 어? 그러면 Vuex를 지금 당장 적용해보겠다! 방금 기본 프로젝트에 Vue Router를 추가로 설치했듯이, Vuex도 그렇게 하면 되겠거니 하고 공식문서를 다시 찾아보려던 찰나, 상현님의 한 마디: "vue create면 알아서 다 되는데?" ...?!
• 처음부터 cli로 시작했으니 당연히 vue create로 프로젝트를 생성해왔던 건데, 나는 터미널에 vue create '프로젝트명'을 입력하고 나면 나오는 선택지들에서 아무 고민 없이 'Default'를 선택했었다. 거기서 'Default' 대신 'Manually select features'를 선택한다면, TypeScript, Router, Vuex, Linter 등을 자유롭게 조합해서 프로젝트를 생성할 수가 있었던 것이었다...!! 이왕 조합해서 시도해 보는 김에 TypeScript와 ESLint + Airbnb config까지 끼얹어 보았다. 분명 작업 속도는 훨씬 더 느려지겠지만ㅋㅋ

오늘 배운 것

• Vue Router는 명령어 딱 하나만으로도 라우터가 생성되고 공식문서가 워낙 깔끔하게 잘 되어 있어서 원하는 기능을 갖다 붙이기가 어렵지 않다.

• vue create의 마법과도 같은 기능은 공식문서에 이미 있었다.. 공식문서를 잘 읽자. 다시 한 번 다짐

• Vue Router를 vue add router로 따로 붙이든, vue create로 처음부터 붙이고 시작하든, 터미널에는 history mode를 적용할 거냐는 질문이 나온다. 적용 안 하면 hash mode가 되어 url에 /#/이 추가된다. 이로써 누군가의 오랜 고민 해결! 아싸 맛있는 거 먹어야지