D'story

오늘 한 일

• 어제 올린 PR이 통과(?)되고 나서 부족한 부분을 보완하는 후속 작업을 했다. url 파라미터가 변경되는 대로 바로 반영되지 않는 건 로그인 페이지뿐만 아니라 다른 페이지도 마찬가지여서 어제와 마찬가지의 방식으로 수정했다.
• 프로젝트 디렉토리 내 components 폴더에 index.ts를 생성해서 아직은 많지 않은 컴포넌트들을 배럴링 했다.
• 아무튼 첫 번째 항목을 완료해서 마음 놓고 있었더니, 거기서 건든 것 외의 다른 url 파라미터가 바뀌면 그것 또한 전혀 반영되지 않는 문제가 제보되어 급히 수정했다.
• 로그아웃을 하면 로컬스토리지에 이메일과 같은 유저 정보가 포함된 데이터들이 그대로 남아 있게 되어서, 유저 정보가 담긴 데이터는 삭제하도록 했다.
• 이메일과 전화번호의 유효성을 검사하는 정규표현식을 거듭 수정하고, 회원가입할 때 뿐만 아니라 로그인을 할 때에도 적용하도록 했다.
• 그리고 오늘도 약간의 뷰 공부를 했다.
• 승진님이 프론트엔드 환경변수 설정과 관련해서 말씀하시는 걸 들으려고 시작한 허들에서, 끝은 약간 삼천포로 빠졌지만 1시간 20분간 너무 재밌고 유익한 시간을 보냈다. 정말 여쭤보고 싶었던, 근데 언제가 좋은 타이밍인지 모르겠던 '게임회사에서도 깃을 쓰나요' 질문에 대한 대답부터 시작해서 온갖 피가 되고 살이 되는 말씀을 해주셨다. 역시 짱짱시니어님

오늘 배운 것

• Vue Router에서 path 대신 name을 사용하면, 나중에 path가 변경되더라도 일일이 찾아다니며 다 바꿀 필요 없이, router 디렉토리의 index 파일에서의 path 한 번만 바꿔주면 된다.

this.$router.push('/about') // 변경 전
this.$router.push({name: 'about'}) // 변경 후

• name과 함께 params를 넘기고, router의 index 파일 안에서 해당 route에 props: true 옵션을 주면, 그 컴포넌트 안에서 params를 그대로 props로 받아서 쓸 수 있다.

오늘 한 일

• 어제는 리액트로 로그인, 회원가입 페이지를 만들었고, 아직 사용할 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에 /#/이 추가된다. 이로써 누군가의 오랜 고민 해결! 아싸 맛있는 거 먹어야지