D'story

오늘 한 일

• 요즘 그냥 계속 이유가 있어서든 없어서든 늦게 자고 피곤한 와중에 오늘(어제라고 해야 하나 싶다가도 오늘이 맞지)도 새벽까지 css와 씨름을 했다. 원래 단일 input이었던 걸 4개로 쪼개놓은 거라 css가 제대로 동작해야 무리없이 다음 기능을 확인해 볼 수가 있는데, 4개로 쪼갠 v-text-field 안에 실제로 들어 있는 각 input의 너비가 v-text-field를 초과해서 말도 안 되게 넓게 나오는 상황이었다. 그래서 기껏해야 너비 60px짜리 v-text-field에 입력한 값은 input이 너무 넓어 화면에 나오지를 않았다ㅠㅠ 뭐가 잘못돼서 이렇게 된 건지 selector를 하나하나 타고 들어가서 고쳐보고 v-deep도 붙여보고... 지금 생각해 보니 selector를 일일이 만져보기까지 한 상황에서 v-deep이 안 먹는 건 사실 당연. 잠이 부족해 이성적 판단이 불가했다. ㅋㅋ
• 그러다 어느 순간 깨닫기를, input의 최소 너비가 생각보다 구체적으로 지정되어 있었다. min-width: 143px이던가. 아니, 세상에 어느 시스템이 140도 아니고 145도 아니고 143으로 디폴트 설정을 한단 말인가. 이건 분명 사람 손을 탄 것이렷다. 심지어 !important였다. 그럼 디렉토리 전체에다 대고 검색을 하면 되겠다 싶었다. 그리고 찾았다. 찾았는데...
• 다이얼로그를 sign-in, sign-up 전용으로 띄우기로 해서 일반적으로 내용 보여주고 버튼만 누르는 다이얼로그는 공통 컴포넌트를 활용하고, 휴대폰 번호 인증을 하는 다이얼로그는 다른 페이지에서도 사용 중인 것을 그대로 복붙해서 고쳐 쓰기로 했었다. 그대로 복붙. 복붙하면서 클래스명도 복붙한 거고, 하필 복사 대상이었던 원래의 컴포넌트의 css는 scoped가 아니었다. 복사해서 고치면서 scoped를 넣으면 뭐하나, 이미 scoped가 아닌 상태로 적용된 동일한 클래스명이 있었던 것을.
• 이 문제로 시간을 많이 끌어서 대부분의 작업이 오늘 낮으로 밀려버렸다. 그리고 오늘은 휴대폰 번호 인증을 내 번호로 너무 많이 해서(같은 번호가 인증 코드를 문자로 받았음에도 계속해서 틀린 코드를 넣으면 차단되고 있다는 사실을 새로이 알았다) 밴 당했다...😩  그래서 다른 휴대폰을 급히 빌려 시도하면서 sign-in에서는 어찌저찌 진행했는데, sign-up에서는 sign-up인 만큼 완전히 새로운 번호가 필요하다는 사실을 깨달았다. 머리 터진다 🤯
• 결론: 여러 모로 나는 바보다.

오늘 한 일

• 어제는 집에서 아침 7시에 출발해서 병원에 갔다가 2시까지 사무실로 출근하고 저녁에 회식을 하고 돌아왔더니 오늘은 고민의 여지도 없이 재택을 할 수밖에 없었다.
• UI 변경 작업이니만큼 처음에는 단순하게 기존 코드에서 UI만 바꿨었다. 하지만 창현님의 제안으로 시작해서 회의도 거치고 하면서 공통 컴포넌트를 만들고 사이드이펙트를 최소화하는 쪽으로 가다 보니 결국 다시 한 번 더 같은 내용의 작업을 진행하게 되었다. 몇 번 엎으면서 하다 보니 가끔씩 코드 속에서 허우적대는 것 같은 느낌을 받고 있다..ㅠㅠ그러다 보니 진척 속도도 느리고..
• 범용적으로 쓸 수 있는 부분만 적용해 만든 공통 다이얼로그 컴포넌트를 사용하니 전체적으로 코드의 흐름이 보다 직관적으로 바뀌고 있는 것 같다. 코드의 양 자체가 이미 방대한 상태에서 시작한 작업이었기 때문에 결국에는 또 다시 비슷한 상황을 맞이할 수도 있겠지만 말이다. 그래도 최대한 그런 일을 피해 보고자(늦추고자?) 기획한 방향이니 가급적 용도에 맞게 잘 사용해야겠다.

오늘 배운 것

• Vue에서는 nextTick이라는 함수를 제공하는데, 이 함수는 DOM이 업데이트 될 때까지 기다리기 때문에 업데이트 된 DOM을 인식하지 못하고 변경된 데이터를 즉각 반영하지 못할 때 사용할 수 있다.

오늘 한 일

• 아침에 또 공사 소음 때문에 일찍 깼다. 안 그래도 늦게 잤는데 기분도 나쁘고 아침부터 컨디션이 영 별로였다. 그래도 다행히 스크럼 때는 조용해져서 무사히 끝낼 수 있었다.
• 오늘은 드디어! 페어 프로그래밍이라는 것에 참여해 보았다. 감사하게도 창현님이 먼저 제안해 주셔서 조금은 걱정스러운 마음을 안고 시작했다. 저번에 승규님이 페어를 말씀하셨을 때에는 상황도 상황이긴 했지만 (그때도 공사 소음 때문에...) 어쨌든 작업을 다른 사람과 같이 한다는 게 약간 어색하게 느껴진 것도 있었다. 상대방이 내가 코딩하는 것을 다 보고 있는데 내가 너무 버벅거리지나 않을까 솔직히 두려웠다.
• 하지만 그건 기우였다. 물론 내가 실력이 부족한 건 맞으니 내가 드라이버였건, 내비게이터였건 효율이 아주 좋았다고 하기는 어렵겠지만 그래도 페어 작업하는 시간 자체가 즐거웠다. 창현님 덕분에 스토리북 사용법도 알게 되고, 처음 접해보는 개발 툴들도 구경하고, 작업하는 내내 서로 의견을 나누면서 진행하다 보니 오히려 집중도 잘 되는 것 같았다. 처음에는 일단 오전에만 2시간 하기로 했다가 오후에도 2시간을 했다.
• 페어가 끝난 직후에는 서비스 전체를 통틀어 다이얼로그의 흐름을 어떻게 기획할 건가에 대해 프론트엔드 담당자들의 회의가 있었다. 나는 거의 듣기만 했지만. 애초에 답이 정해져 있는 문제가 아니라 더 나은 방향을 찾고자 하는 거였어서 다른 분들이 각자 자유롭게 의견을 피력하시는 걸 듣고만 있어도 흥미로웠다.
• 그러고 나서는 멘토링이 있었다! 갓 입사해서 팀 스크럼 잠깐 참여했을 때 뵌 것과 어쩔살롱에서 말씀하시는 걸 본 것 외에는 정말로 처음 뵙는 지완님과 1시간 가량 이것저것 많은 얘기를 나눴다. 요즘 나의 태도(?방향?)와 관련하여 계속 고민하고 있었던 것도 말씀 드리니 해결책을 주셨고, 그 덕에 마음도 조금 편해졌다. 지완님 말씀처럼 '나만 힘든 게 아니라는 걸 알면 좀 나으니까'ㅋㅋ 일단 일주일에 한 번씩 뵙기로 했는데 다음 번 이 시간이 벌써부터 기다려진다 😊

오늘 배운 것

• 말로만 듣던 스토리북, 한 번도 써본 적은 없었는데 오늘 창현님 작업하실 때 구경 잠깐 했다고 한 번 써보기까지 했다. 스토리북 대시보드 같은 게 어디 링크에 있나 했었는데 그게 아니라 npm run storybook 명령어로 로컬호스트에서 돌리는 거였다.

• 어느 분이 vscode 테마도 핑크핑크하게 바꾸고 싶어하셔서 한 번 해볼까 하다가 테마를 만들었다. 애초에 가이드 문서도 있고 생각보다는 많이 까다롭지 않았다. 중간중간 마이크로소프트에서 인증 토큰을 생성한다든가 하는 잡다한 일들이 조금 끼어서 헷갈리기도 했지만... 괜찮았다. 나쁘지 않은 경험이었다. 마켓에 검색해서 나왔을 때의 그 기분이란

오늘까지 한 일

• 어제 드디어 딱 이번 베타 테스트 때 내놓을 만큼의 디자인 변경안이 나왔다. 소연님이 스코프를 많이 잘라 주셔서 사실상 로그인 페이지 딱 하나뿐이라 손이 아주 많이 가지는 않을 것 같았다. 틀만 잡고 세부사항은 차차 적용할 생각으로 일단 로그인 페이지 UI 변경 작업을 했다.
• 디자인이 복잡하지 않아서 컴포넌트를 어떻게 구성하면 되겠다, 하는 건 금방 보였는데 문제는, 새로 만드는 게 아니라 이미 있는 걸 바꾼다는 점 그 자체였다. 아무것도 없는 상태에서 아예 다시 만드는 거였다면 차라리 편했을 텐데 파일이 많지 않을지라도 기존에 뭐가 있는 상태에서 변경하거나 수정하는 건 다소 까다롭다. 아예 필요 없는 파일 하나 지웠다가 빌드가 안 되고 막... pr 올린 후 실제로 그랬음 주의
• 어제 저녁 7시 퇴근할 때까지 본가에 있다가 거기서 저녁까지 먹고 집에 올라왔다. 출근 생활 중이었다면 편도 2시간 여 걸리는 거리를 평일에 오갈 생각을 못했을 것이다. 재택이 좋은 이유! 그러나 집에 와서 운동하고 뭐 좀 하다가 정신 차려 보니 이미 3시였다. TIL 생략하고 그냥 잠
• 3시에 자기 전에 pr을 올렸었는데, 일단 리뷰어로 우리 팀 개발자 세 분을 다 넣었다. 팀 배정 후 첫 pr이었다. 차마 pr 날린 직후에 링크를 공유할 순 없어서 아침 스크럼 도중에 올렸다. 그리고 빌드 안되는 거 걸림
• pr merge 이후에 승진님이 argo CD로 dev 환경에 배포하는 방법을 알려주셨다. argo CD는 보기도 좋고 쓰기도 좋고 아무튼 너무 좋아 보인다. 문어(?) 너무 귀엽고..
• 세부사항이 조금씩 변경되더라도 어쨌든 UI 변경안이 나왔으므로 나에게도 첫 Jira 카드가 배정되었다. 나도 이제 브랜치명 카드 넘버로 딸 수 있다! 카드가 배정되니 뭔가 진짜 잘 해야 될 것 같고, 귀찮게 할 사람이 출근을 이틀이나 안 한 통에 잠깐 무료할 뻔도 했지만 카드도 어차피 아직 한 개밖에 없는 거 하루종일 이것만 잡고 있게 됐다...!?앗 깃훅 어떡해!?

오늘 배운 것

• 지금 사용하고 있는 건 Vue 2인데, 이건 올해 2.7 버전 출시 후 18개월 간의 LTS를 유지하고, 그 기간이 끝난 후에는 핵심적인 보안 관련을 제외하고는 모든 패치를 중단한다고 한다. 그렇다면 Vue 3로 넘어가는 것은 지금 당장이 아니더라도 어차피 불가피한 일인 것 같은데, Vue 3와 함께 사용할 수 있는 Vite(엄청 빨라서 그 이름도 vite, 불어 주의)라는 번들러 이름을 오늘 처음 주워듣게 되어서 뭔지 좀 찾아봤다.

오늘 한 일

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

오늘 배운 것

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

오늘 배운 것

• 토코톡 뷰 프로젝트의 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에서도 사용할 수 있다는 것도 처음 알았다. 리액트만 가능한 줄...