오늘 한 일

  • 최근까지 vms UI 작업을 하느라 뒷전으로 밀렸었던 sso UI 적용에 약간의 부채감을 안고 있었는데, 비록 그 과정에서 파생된 또 다른 부채들이 리스트로 남았지만 그래도 오늘은 조금 해소했다.
  • 회사에서 지급한 맥북을 지난주에 회사에 두고 퇴근했고 오늘은 집에서 개인 맥북으로 일을 했는데, 한 번도 golang으로 작성된 sso 서버를 안 돌려봤었는지 서버 구동하려니 에러가 터지기 시작했다. 이게 문제인가 저게 문제인가 이것저것 만져보다가 결국 go 설치부터 다시 시도. path 관련으로 고통 받았던 지난날의 기억이 갑자기 주마등처럼 스쳐 지나가면서 사실 좀 무서웠다. 나 오늘 왜 재택하기로 한 거지?
  • 하지만 반복된 에러가 면역력을 키워준 걸까. 구글링을 다시 한 건 똑같았지만 타고 들어갈 때마다 어쩐지 익숙한 링크들ㅋㅋ 이미 지난 삽질들을 통해 한 번씩은 봤던 내용들이어서 그랬나 보다. 몇 번 시도해 보니 생각보다 금방 해결되었다. 왠지 다음 번에는 더 잘 할 수 있을 거라는 자신감이 생겼다. 하지만 과연?
  • sso는 사실 어떤 걸 언제까지 해야 하는지는 확실하지 않지만 어쨌든 해야 하는데 안 되어 있는 건 맞고 지난주에 승진님과 확인했던 피그마의 디자인에 맞게 로그인 페이지를 고쳤다. 운명의 장난처럼 매우 공교롭게도 이번 작업 역시 주로 다이얼로그였다. 기본 포맷이 될 거라고 예상했던 디자인을 벗어난 다이얼로그는 css를 다시 손보고, 이메일을 보낸 후에 타이머를 작동시켜서 60초 카운트다운이 완료되면 재전송이 가능하도록 기능을 추가했다. vuetify 하나 빠졌다고 이렇게 수월할 수가...내가 잘 못 다루는 게 맞겠지만 없는 게 마음은 편-안
  • 오늘은 신나는 월요일이니 지완님과의 원온원이 있었다. 항상 이렇게 가볍고 시시콜콜한 얘기로 시작하는 게 좋다. 입도 트이는 기분, 이건 마치 준비운동. 컴퓨터 전공이 아닌 심지어 문과 출신 나로서는 하드웨어 쪽 지식이 전혀 없는 게 가끔 너무 장벽처럼 느껴져서 어떻게 공부를 하면 좋은지 여쭤봤더니 Rust, C, C++ 같은 low-level 언어를 공부하는 것을 추천해 주셨다. 하드웨어 자체에 대한 지식보다는 하드웨어와 소프트웨어가 어떻게 연결되는지, 소프트웨어가 하드웨어를 어떻게 이용하는지 그런 방식들을 이해하는 게 더 필요하고, low-level 언어를 공부하면 자연스럽게 그런 부분을 알 수 있을 거라고 하셨다. 공부할 거 원래 많았지만 더 늘었어!

오늘 배운 것

  • sso의 로그인 페이지 다이얼로그에 사용자가 이메일을 입력하고 제출했을 때 이메일 주소에 대한 유효성 검사를 하는데, 피그마에 따르면 검사 결과 에러 메시지를 띄운 후에는 전송 버튼을 비활성화 해야 한다. 이 전송 버튼은 사용자가 다시 이메일을 수정하면 활성화 되는데 이때 사용자의 입력 값을 watch로 보고자 했다. reactive object의 한 속성만 따로 watch에 넘길 수는 없고, getter function을 사용해야 한다.
 

Watchers | Vue.js

 

vuejs.org

  • 그런데 기존의 이메일과 새로운 이메일의 값을 비교해서 쓸 일이 전혀 없기 때문에 watchEffect를 써도 무방할 것 같은데 이건 내일 한 번 해봐야겠다.
 

[Vue.js] watch와 watchEffect의 차이

watch : 특정 데이터가 변경되었을 때 실행, 새로운 데이터와 이전의 데이터를 가져옴 (lazy)watchEffect : 의존성이 있는 데이터에 대해서 즉각적으로 실행 (immediately)특정 반응 속성을 보고 싶거나, old

velog.io

 

오늘 한 일

  • 간밤에 개발자의 탈을 쓴 QA 상현님이 갑자기 vms sign-up이 안 된다고 했다. 상황을 보니 진짜 안 된다. 처음에는 db 환경 문제인 줄 알았는데 나도 똑같은 상황을 만들어 돌려보니 안 됨. 응 db 아니야
  • 회원가입 페이지 자체는 내가 작업한 게 아니었지만, 회원가입 버튼을 누르면 뜨는 다이얼로그는 내가 작업한 거였다. 그리고 다이얼로그 UI와 다이얼로그를 오픈하는 방식 자체를 변경하면서, 페이지 컴포넌트가 가지고 있는 sign-up 관련 함수들을 건드린 것도 당근 나였다. 원인을 찾기도 전에 엄습하는 불안감
  • 원래 sign-up 관련 로직은 컴포넌트 내에서 단 하나의 함수 안에 전부 다 묶여서 들어가 있었다. 하지만 중간 어느 시점에 다이얼로그를 띄우고, 또 그 다이얼로그에서 입력하는 내용에 맞게 후속 조치가 이루어지는 등 적당한 처리가 필요했기 때문에 나는 그 함수를 여러 개로 쪼개 놓은 상황이었다.
  • 그런데 말입니다... vms에 회원가입을 할 때 휴대폰 번호를 넣으면 휴대폰으로 인증 코드가 발송되는데(이게 바로 내가 밴 당했던 그 절차), 이게 특정 조건 하에서 내부 직원이냐 아니냐를 판단할 수 있게끔 분기가 되어 있다. 하지만 바보 같은 나는 직원이 아닌 일반 유저를 가정하고서만 테스트를 진행했고 내부 직원인 경우는 생각을 안(?덜?) 했기 때문에, 직원인 경우에는 아무 코드도 넣어놓지 않아서 그 어떤 함수도 실행되지 않게끔 해 놓은 거였다. 응 db 아니고 너야 심지어 직원인 경우에 쓰려고 바로 아래 라인에 함수도 따로 만들어 놓은 상태였다...ㅠㅠ 함수를 만들었는데 왜 쓰지를 못하니
  • 이로써 긴급히 올린 pr에 추가된 코드는 단 한 줄뿐이었다. 코미디
  • 착잡한 마음으로 안도하며 잠든 후 일어난 아침에는 케이님과의 원온원이 있었고, 케이님이 사실은 이 글을 모두 읽고 계셨다는 엄청난 소식을 접했고, 주니어 각자에게 맞는 방식이 다 다를 수 있고 원한다면 sso 작업을 계속 하는 것도 괜찮다는 말씀을 들었다. 거기에 더해서 아직 잘은 모르지만 평소 관심 있었던 스벨트 공부+실습도 병행하기로 했다. 🥰
  • 원온원이 끝나자마자 승진님한테 허들을 신청했다. 처음에는 팀에서 sso를 어떻게 하기로 했는지를 조심스레 여쭤보며 시작했지만, 결과적으로는 '그럼 제가 할래요'가 되었다ㅋㅋㅋ
  • 결론: 신난다 신나 🥰

지금까지 한 일

  • 내 휴대폰 번호 밴 당해서 더 이상 인증 코드 수신을 할 수 없었던 문제는, 브라우저에서 아무 번호에나 문자를 보내 놓고 mysql db에서 verifications 테이블을 찾아서 내가 입력한 번호에 날아간 코드를 보고 다시 브라우저에 입력하는 방법으로 해결했다. 편법인가 아무튼 밴 당해도 작업을 계속 할 수 있어서 속이 다 시원했다.
  • 그리고 지난 금요일 타운홀 미팅에서 대격변이 일어났다. 팀 개편에 대한 공지가 있었고, 더욱 놀라운 것은 당장 그 효력이 월요일부터 발생한다는 것이었다. 줌 채팅창 웅성거림 잊지 못해 금요일이라 휴가 가신 분들도 많았는데 아무튼 다소 혼란했다. PO와 lead developer만 확정이고 나머지 인원 풀은 언제든지 변경될 수 있다는 게 골자였지만 사실상 변동이 있을 이유는 없는 것 같았다.
  • 그리고 나는 다시 새 세이브 슬롯으로 새 게임 시작하듯 태초마을로 돌아가게 되었다. 생각해 보니 태초마을에서 일찍 나왔었는데 역시 어느 정도 기간을 채워야만 하는 걸까.
  • 태초마을 이동을 앞두고 작업을 거의 완료(라고 말한 지가 너무 오래..)한 vms UI 변경 작업을 마무리하고, 어제 드디어 메인 브랜치에 머지했다. 또, sso에서는 명색이 패스워드 리셋 페이지인데 보니까 비밀번호 확인 입력란도 없어서 급히 추가해서 다시 올렸다. 무슨 일이 있어야만 박차가 가해지는 걸까.. 막판 스퍼트
  • 입사 후 처음으로, 실제로는 처음 뵙는 케이님과 원온원(대면식?ㅋㅋ)을 했다. 앞으로 태초마을에서는 지금 당장 어떤 업무를 처리하는 데 있어서는 다급히 필요하지 않을 수도 있겠지만 길게 보면 개발자로서는 당연히 알아야 하거나, 기존에 운영 중인 서비스들의 흐름을 파악할 수 있는 교육적인 업무 위주로 처리하게 될 예정이라고 말씀해 주셨다. 어떤 일을 하고 싶냐고 물어보셔서, 백엔드를 안 하지는 않겠지만 아직은 프론트엔드 쪽을 계속 해 보고 싶다고 말씀드렸다. 너무 일반적이었나..
  • 멘토이신 지완님과 두 번째 정기 원온원을 진행했다. 다음 일정이 갑자기 앞뒤로 시간이 늘어나 버려서 예정보다 짧게 마무리 해야 해서 조금 아쉬웠다. 원온원 때 나눌 얘기들을 문서로 대강 정리해놨었는데, 시간이 짧다 보니 신변잡기 같은 가벼운 주제들만 다뤘다. 하지만 여전히 신나 재밌어 짱이야 🤩
  • 태초마을 신규 이주민으로서 tva팀 레트로 워크샵을 참관했다. tva팀이 무슨 팀인지 다른 사람들이 확실하게 알 수 있어야 한다는 얘기도 나왔었는데, 그런 의미에서 나도 tva팀의 역할이 뭔지를 워크샵에서 내용을 듣고 나서야 파악할 수 있었다. 그간 마블의 tva가 뭔지 아니까 이런 일을 하는 팀이겠거니 어렴풋이 예상만 하고 있었을 뿐이었다. 비록 미로 보드의 방대한 로드맵을 보고는 헉 했지만, 그래도 입사하자마자 접할 수 있었다면 전체적인 그림을 파악할 때 훨씬 도움이 되지 않았을까 싶다. 승진님의 강력 추천 덕분에 워크샵 후에는 tva팀의 회식에도 꼈다.
  • 오늘은 어제에 이어 tva 워크샵을 참관했고, 그 이후에는 승진님과 어제까지 있었던 일들을 기반으로 해서 지금까지 sso에서 진행된 프론트엔드 쪽 상황과 앞으로 sso의 소속과 관련한 향방에 대해 얘기를 나눴다. 마음 같아서는 아직 하다 만 느낌이라 완성도가 높아질 때까지 sso 작업에 계속 참여하고 싶은데 갑자기 상황이 이렇게 된 점이 아쉬웠다. 기존 서비스와 달리 완전히 바닥에서부터 쌓아나가는 코드라 자유롭게 통제할 수 있다는 게 좋았는데 결국 이 마음을 접어야 하는 걸까ㅠㅠ

오늘 한 일

  • 요즘 그냥 계속 이유가 있어서든 없어서든 늦게 자고 피곤한 와중에 오늘(어제라고 해야 하나 싶다가도 오늘이 맞지)도 새벽까지 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을 인식하지 못하고 변경된 데이터를 즉각 반영하지 못할 때 사용할 수 있다.
 

Vue $nextTick 이란? | 사용법 및 간단 예제 (Understanding $nextTick in Vue.js)

Vue는 DOM 업데이트를 비동기(asynchronously)로 합니다. 데이터 변경이 발견 될 때마다 큐를 열고 같은 이벤트 루프(event loop)에서 발생하는 모든 데이터 변경을 버퍼에 담습니다. 같은 Watcher가 여러 번

webruden.tistory.com

 

API — Vue.js

Vue.js - 프로그레시브 자바스크립트 프레임워크

kr.vuejs.org

 

Global API: General | Vue.js

 

vuejs.org

오늘 한 일

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

오늘 배운 것

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

Vue 프로젝트에 Storybook 적용해보기

Vue 프로젝트에서 Storybook 간보기. Figma와 연동성 확인.

velog.io

 

Install Storybook

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular

storybook.js.org

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

Color Theme

A guide to creating Color Theme in Visual Studio Code

code.visualstudio.com

오늘은

  • 다이얼로그 작업은 아직도 끝나지 않았다. 깃 컨플릭인데 컨플릭만 해결한다고 사라지지 않는 어떤 문제가 생겨서 끙끙대다 어찌어찌 간신히 처리 완료한 줄 알았더니 아니었고...
  • 내가 푸시한 깃을 풀 받은 승규님이 화면 공유로 확인시켜 주시는데 '내가 작업한 게 안 올라감 + 무슨 이유에선지 로컬에만 남아 있음' 상태여서 적잖이 당황. 내가 손을 댄 파일이 애초에 몇 개 없었기 때문에 일단 전부 스테이지에서 내린 후 stash 해놓고 작업하던 로컬 브랜치 삭제하고 아까 푸시한 브랜치 다시 풀 받아서 git stash apply로 겨우 살렸다. 
  • 그러고 나니 뭐 많은 걸 한 게 아닌데도 그동안 차곡차곡 쌓여 왔던 온갖 생각이 한꺼번에 몰려왔다. 모르는 게 너무 많고, 아는 건 제대로 못 쓰고, 사실 저 바깥에 뭐가 있는지도 잘 모르고, 알려면 알 수 있고 보려면 볼 수 있는데 왜 항상 뭔가 부족한 상태에서 무작정 나아가려고만 하는 거지.
  • 구멍이 많은데 그걸 메우기보다 일단 구멍을 피해서 가기만 하는 게 과연 상책일까. 구멍을 메우는 행동 자체가 당장에는 시간을 많이 쓸 것 같아도 어쩌면 결과적으로는 목적지까지 나를 빠르게 안내할 지도 모를 일이고, 설령 그 순간이 당장 지금이 아닐지라도 이게 쌓이고 쌓이면 나중에 구멍이 하나라도 적은 길을 가게 될 수도 있다.
  • 앞으로 아무리 열심히 나아가려 한들 그 속도에 향상이 없다면, 반대의 경우에 비해서는 제자리걸음을 하고 있는 거나 마찬가지 아닌가.

오늘은

  • 아랫집 인테리어 공사가 아직 끝나지 않았나 보다. 그 소음에 소스라치게 놀라며 강제로 기상해서 하루를 시작했다. 어제도 소음 때문에 카페로 나가면서 분명히 봤던 공사 안내문에 소음 심한 날은 어제가 마지막이라고 적혀 있었으니, 오늘은 이러다 말겠지 생각했다. 그런데 10시가 넘어서 스크럼이 시작됐는데도 소음은 잦아들 줄을 몰랐다. 스크럼도 제대로 못하고 이렇게 된 거 안내문에 나와 있는 업체에 전화라도 해볼까 해서 나가봤더니 그새 오늘 날짜를 펜으로 적어놨다.

너무해... 😞

  • 도저히 안되겠다 싶어서 뒤늦게나마 출근을 하기로 했다. 도착하니 거의 점심시간이었지만 아무튼 회사는 조용했다. 2월 둘째 주에 4일 출근한 게 다였고, 오늘이 5번째 출근이었다. 기념비적이다. 오랜만에 출근한 회사에는 여전히 사람은 별로 없었지만, 그래도 다른 분들과 같은 공간에서 근무한다는 것 자체가 알게 모르게 많은 힘이 된다. 그치만 오늘 일을 많이 못해서 내일은 출근을 못할 것 같다...ㅎㅎ

특이사항

  • 드디어 나도 멘토님이 생겼다! 이제 다른 사람 안 부럽다구 후후 첫 얘기는 다음주 월요일에 나눠 보기로 했다. 두근두근...

+ Recent posts