D'story

오늘 한 일

• 어제 썼듯이, 앞으로는 우리 팀(?)도 매일 스크럼도 하고 카드도 배정 받겠지만 지라 카드를 처음으로 만져볼 일이 먼저 생겼다. 당장 업무로 긴급히 처리해야 할 일은 아니지만 어쨌든 한 번쯤은 해결하고 넘어가야 할 비교적 중요도가 낮은 일들이 이렇게 배정되는 것 같았다. 카드에 적힌 내용이 간단해서 나로서는 해석이 조금 필요했다. 어제 쿠버네티스 문서를 보는 한편으로 이 카드의 필요성을 이해하기 위해서 토코톡 코드를 조금 들여다 봤었다. 그리고 오늘 내가 생각한 게 맞는지 남훈님께 여쭤봤다.
• 생각한 내용은 맞았지만 이걸 해결하기 위해서는 git hooks를 알아야 했다. git commit을 하는 시점에 판단해야 하는 것들이 있기 때문이었다.
• 남훈님이 git hooks를, 케이님이 husky를 알려주셨다. husky도, git hooks도 어떤 식으로 동작하는 건지 알기까지 많이 어렵지는 않았다. 처음에는 husky를 보면서 사용하는 방법을 익히다가 패키지 설치 없이 git 자체에 내장된 기능을 사용해보려고 git hooks 문서로 넘어갔다. 한참 잘 확인해보고 있는데 git hooks를 그대로 사용하기에는 .git 디렉토리 자체가 로컬에서만 유효하기 때문에 팀에서 버전 관리를 하는 경우에는 비슷한 역할을 하는 패키지를 설치하거나 template directory를 이용해야 한단다. 다시 원점!?
• 그러다가 pre-commit이라는 패키지를 찾기에 이르렀는데 이건 내가 뭔가 잘못 사용해서인지 제대로 작동하지 않았다. 재도전이 필요하다. 이럴 거면 그냥 husky로...?

오늘 배운 것

• husky

• git hooks

• pre-commit

오늘 한 일

• SSO와 온보딩 팀의 첫 연합 스크럼이 있었다. 애초에 SSO는 스크럼조차 없었지만 PO님이 배정된 김에 정규 일정이 생겨버렸다. 나로서는 첫 스크럼이었고, PO 소연님이 스크럼 보드를 안내해주시고 각자 자기소개를 하는 정도로 오늘 스크럼은 마무리되었다. 그거 잠깐 하는데도 심장이 벌렁거렸다ㅠㅠ
• kubernetes가 뭔지 모른다는 나의 문제를 보완해보고자 공식문서를 열었다. minikube로 로컬에서 돌려보려고 하는데 무슨 일인지 돌아가지를 않았다. 한국어로 구글링하면 나오는 블로그마다 들어가서 '이렇게 하면 되더라' 하는 방식으로 해봤는데도 나는 그렇게 되지 않았다. 이렇게도 해보고 저렇게도 해본 결과, kubectl도 설치했고, 아래대로 실행하면 제대로 됐다.

kubectl get services
# 이걸로 포트 넘버 확인하고,
kubectl get pods
# 이걸로 해당 pod 이름 확인하고,
kubectl port-forward [pod 이름] [포트포워딩할 임의 포트 넘버]:[처음에 확인한 포트 넘버]
# ex) kubectl port-forward some-pod-name 8080:80
# 이렇게 입력하고 나면 브라우저에서 localhost:8080으로 확인할 수 있다

• 처음에는 포트포워딩을 빼먹어서 안됐던 건가 싶기도 한데, 보면 다른 사람들은 굳이 포트포워딩 안 하고도 잘 되는 것 같...다. 확실하지가 않다ㅠㅠ흑흑 아무튼 간신히 minikube를 돌리는 데 성공했다.
• 노드로 생성한 프로젝트에서는 package.json 파일로 패키지 버전 관리를 하는데, 이 package.json에는 사용할 수 있는 패키지의 버전 범위가 적혀 있어서 사실상 개발자마다 다른 버전의 패키지가 설치될 수도 있다. 여기서 필요한 정확한 버전 넘버를 명시해주는 것이 package-lock.json이다.
• npm i(혹은 npm install) 명령어를 실행하면 package.json 안에 적힌 패키지가 설치되고, 그 패키지의 어떤 버전을 설치했는지를 package-lock.json에 명시해준다. 반면 npm ci를 실행하면 node_modules 디렉토리를 전부 삭제한 후 package.json이 아닌 package-lock.json 안에 적힌 버전의 패키지를 설치한다. 이때 package.json과 package-lock.json 안에 명시된 버전이 싱크가 맞지 않는 경우 오류를 일으킨다. 그러므로 깃에 올릴 때는 package-lock.json도 함께 올려야 팀 전체가 원활하게 버전 관리를 할 수가 있다.
• 그런데 나는 이번에 Vuetify를 새로 설치해놓고도, package-lock.json을 빼먹고 올리지 않았다. 그래서 승진님이 애를 먹으신 모양이었다...^_ㅠ휴 죄송합니다 이 얘기하려고 너무 멀리 왔다

오늘 배운 것

• hello...minikube...

• If dependencies in the package lock do not match those in package.json, npm ci will exit with an error, instead of updating the package lock.

오늘 한 일

• 어제 하던 dialog 띄우는 작업을 계속 했다. 어제 설치한 vuetify로 가져온 v-dialog는 또 어느 컴포넌트에서 어떻게 불러올지 모르니 slot을 넣고 원하는 템플릿으로 사용할 수 있게 변형해 보았다.
• dialog를 넣고 보니 원래 일률적인 사이즈로 사용하던 버튼의 크기가 좀 달라지게 되었다. 만들어 놓은 건 재활용해야 옳으니 width를 props로 넘길 수 있게 했다. 리액트로는 아무렇지 않게 했던 작업인데, 뷰에서 처음 하려니 자꾸 버벅댔다. 하여튼 뷰린이
• 로그인 페이지에서 위의 버튼을 누르면 아무 기능 없이 껍데기뿐인 dialog가 일단 열리게는 하고 pr을 날렸다. 근데 지금 생각해보니 채널에 안 올림ㅋㅋ
• 목요일마다 있는 테크세션 어쩔살롱은 오늘따라 유난히 재밌었다. 어쩔살롱에서 채팅창 안 켜면 손해..
• vuex 공부 본격 시작! 근데 오늘은 시작만
• 재밌는 일 잔뜩이었는데 기분이 별로다ㅠㅠ슬퍼

오늘 배운 것

• 버튼에 props 넘길 때 나 같은 뷰린이가 참고하면 좋을 링크

오늘 한 일

• 오늘 하루 일과 시작과 함께 어제 밤늦게 날린 PR에 리뷰가 달렸다. 어차피 통신하는 서버 url은 고정이고, 거기에 withCredentials 설정도 기본으로 넣어놓는 게 좋겠다는 말씀이었다. axios는 http 통신을 처음 접했을 때부터 알았지만 이렇게 다시 공식문서를 보게 되니 한편으로는 반갑고 또 한편으로는 새로웠다.
• 미로 챗에서 API 문서화 관련한 세훈님의 설명을 들었다. 나는 전후 상황은 잘 모르지만 단편적으로나마 들은 단어들 검색해서 찾아보기도 하고미로 보드에 있는 내용들을 살펴보기도 하고, 재밌는 시간이었다.
• 언제부터였는지는 모르겠지만 얼마 전에 알아챈 거였는데, 이상하게 vscode에 깔아놓은 GitLens extension을 통해서 에디터 내에서 커밋 데이터를 띄우면 author의 프로필 사진으로 왠지 모르게 소름 끼치는 로봇이 나왔다. 다른 사람 로봇은 좀 괜찮은데 유독 나는 더욱 더... 꿈에 나오면 그게 바로 악몽... 며칠 전에도 구글링 하다 하다 포기했었는데 오늘 갑자기 너무 꼴보기가 싫어서 다시 찾아봤다. 다행히 금방 찾았다! vscode Settings에 들어가서 GitLens: Default Gravatars Style을 robohash(default)가 아닌 걸로 바꾸면 일단 그놈의 로봇은 안 나온다ㅠㅠfreedom...
• 로봇을 처치하고 나니 또 욕심이 생겼다. 나는 왜 깃헙 프로필 사진이 안 나오지? 없는 것도 아닌데? 그래서 찾다가 무심코 눌러본 버튼이 곧 해결책이었다. GitLens 커밋 데이터가 나오는 창 하단의 Connect to Github(?한번 연결하고 나니 이 버튼이 다시 안 떠서 문구가 정확히 이건지는 모르겠다..) 버튼을 누르면 깃헙으로 연결되면서 정상적으로 모두의 프로필 사진을 볼 수 있다.
• 로그인 페이지에서 특정 버튼을 누르면 dialog를 띄워야 해서 결국 vuetify를 깔았다. vue add vuetify 명령어를 입력하면 vue create와 비슷하게 설치 옵션을 선택할 수 있는데, 거기서 무심코 default(recommended)를 선택한 나는 App.vue를 비롯한 여러 파일들이 제멋대로 엎어지는 것을 목격했다. 이 파일 저 파일 열심히 수정하다가 차라리 예전으로 되돌아가서 다른 방법을 찾아보라는 상현님의 말에 힌트를 얻어 git stash를 해두고 다시 설치를 시도했다. configure(advanced)를 선택하면 될 일이었다. 허무

오늘 배운 것

• 메인 브랜치 git pull은 브랜치 컬러가 초록색일 때 하자
• 잊어버릴 때쯤 한 번씩 보게 되는 axios 공식문서

오늘 한 일

• 구글 로그인 버튼이 잘 나온다면 버튼을 렌더링 할 때 나오는 에러는 일단 두기로 했다. 기분 좋게 올리려는데 깃 에러가 발목을 잡았다. 아니, pull 다 했는데 왜 또 pull 하래ㅠㅠ 결국 로컬 디렉토리 자체를 날려버리고 작업을 다시 했다. 어차피 내가 작성한 코드 몇 줄 없었어...ㅎ...기억 잘 나...
• PR 없이 그냥 올리기로 했었는데, 막상 처음부터 PR 올리는 법을 배워 놔서 그런지 PR 없이 머지하는 방법을 모르겠어서 그냥 하자니 걱정도 되고 다짜고짜 PR을 날렸다. 그랬더니 처음으로 케이님이 보는 것만으로도 심장 쿵쾅거리는 리뷰를 남겨주셨다. 어차피 한 컴포넌트 안에서만 사용할 파일인데 굳이 전역으로 등록해서 불러오고 있었다. 후다닥 고쳐서 다시 올렸다. 
• 3시에는 PT mix가 있었다. 비록 영어로 진행되었고 듣기만 하는 입장이었지만, 한 번도 들어본 적 없던 ROAS 같은 마케팅 용어들도 알게 되고 재미있었다.
• 온보딩 팀과의 싱크업이 있었다. 더 상세히 확정되어야 하겠지만, 양쪽에서 겹친다고 판단되는 작업들이 있어서 디자인 등을 공유하게 됐다. PO가 없었던 우리 팀 특성상 가이드 해주실 분이 있게 되면 좋을 것 같다.
• 구글 로그인 때문에라도 회원가입을 하는 신규 유저에 대해서는 이메일 확인하는 절차가 필요하다고 판단되어, 흐름 상 회원가입 페이지와 정보 이용 동의 페이지 사이에 인증 코드 입력 페이지를 넣게 되었다.

오늘 배운 것

• 로컬에서 작업할 때도 브랜치를 따로 따고, merge(pull?)는 최대한 자주 합시다.
• ROAS가 뭘까요?

오늘 배운 것

• 토코톡 뷰 프로젝트의 package.json에 sass-loader 같은 게 왜 들어가 있는지 알게 되었다. <template>, <script>, <style>에 lang attribute를 주려면 해당 loader의 설치가 선행되어야 한다. vue loader 공식문서에 들어가서 어떤 loader가 필요한지 확인한 후 설치해주면 된다.

• 컴포넌트를 main.js에 import하면 전역으로 사용할 수 있다.

// main.js

import Component from '@/components/Component.vue';

Vue.component('Component', Component);

• 전역으로 사용할 컴포넌트가 너무 많아서 일일이 import 하기 귀찮고 불편하면, 아래 링크를 참고하여 automatic registration을 실행하는 것도 가능하다.

• PascalCase, camelCase, snake_case에 이어 kebab-case라는 것도 있다...!?

오늘 한 일

• 어제 올린 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로 받아서 쓸 수 있다.

오늘 한 일

• 지난 금요일 퇴근 직후에 맞닥뜨린 문제가 있었다. 리액트에서나 뷰에서나, url 파라미터를 받아서 로컬스토리지에 저장한 다음 그걸 꺼내서 화면에 띄워야 한다. url 파라미터가 바뀌면 그 즉시 스토리지에 저장된 값이 바뀌고, 화면에도 바로 반영 되기를 바랐다. 예를 들면 사용자가 A 사이트를 통해 로그인을 시도했다가 곧바로 로그아웃을 하고 나갔는데 바로 다시 B 사이트를 통해 로그인을 시도했다면, 이 사용자가 어디서 유입된 건지에 대한 데이터가 화면에 다르게 보여져야 한다. 리액트에서는 별다른 고민 없이 작성한 코드로 바로 원하는 결과가 나왔는데, 뷰에서는 그게 되지 않았다.
• 이것저것 찾아보고 적용해봐도 보란 듯이 데이터는 따로 놀았고, 당장 너무 궁금하고 해결하고 싶었지만 금요일이니까 접어뒀었다. 그리고 월요일을 맞아 다시 꺼내보았다. 그런데 무심코 넣어 본 코드로 해결되었다!?
• 컴포넌트가 마운트 될 때마다 실행되게 하려고 url 파라미터를 로컬스토리지에 저장하는 코드를 mount() 안에 넣어뒀었는데, 그 바로 아래에 해당 데이터가 있으면 그 데이터를 this.key에 할당한다. 그리고 template에서는 key를 보여준다.

<template>
	...
    <span>{{ key }}</span>
</template>

<script>
	...
    data() {
        key: '',
    },
    mount() {
        // url 파라미터를 로컬스토리지에 저장한 후
        if (window.localStorage.key) {
            this.key = window.localStorage.key
        }
    }
   	...
</script>

• 그렇게 문제 하나를 해결한 후에 프로젝트 디렉터리에 있던 리액트 프로젝트를 통째로 뷰 파일들로 갈아치웠다. 커밋을 하려니 메시지에 적을 커밋 타입을 뭐라 해야 할지 모르겠어서 꽤 오래 고민을 했다. feat, fix, chore도 아니고, 그렇다고 modify, change도 아닌 것 같고. 결국 질문을 남겼고 동균님 말씀대로 refactor를 선택하기로 했다.
• 프로젝트 매니저로 yarn을 쓰던 리액트에서 npm을 쓰는 뷰로 바꾸면서 리드미 내용도 수정하고 안심하며 PR을 날렸는데, copy 파일들이 함께 올라가 버렸다. 첫 리뷰를 받은 후에야 실수를 알게 되었다. 대체 왜 안심했지
• 그리고 오늘은 뷰 공부를 조금 했다. 이제는 조금 익숙하게 쓰고 있던 vue cli 말고도 터미널에 vue ui 명령어를 입력하면 브라우저에서 ui를 통해 프로젝트를 관리할 수 있다는 것도 알게 되었다.
• 상현님한테서 얻은 소스 덕분에 마우스 커서에서 물방울이 생긴다. 그리고 블로그 테마 색상을 변경했다. 물론 난 파란 계열을 선호하지만 기존 색상도 괜찮다고 생각했는데 신랄하게 공격을 받아서 흑흑 조금 마음이 아프다.

오늘 배운 것

• 다양한 코드 스니펫을 제공하는 Emmet을 vue에서도 사용할 수 있다는 것도 처음 알았다. 리액트만 가능한 줄...