D'story

오늘은

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

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

특이사항

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

오늘 한 일

• 어제 가뜩이나 늦게 잤는데 오늘은 아침 일찍부터 어느 집 공사 소음 때문에 잠을 설쳤다. 소음의 진원지가 하필 일하는 방 바로 옆인 건지 유난히 더 크게 들렸다. 스크럼 때도 드릴 소리가 들어가고 나니, 문득 오늘 페어 작업에 방해가 될 것 같아 결국 집 근처 카페로 자리를 옮겼다. 근데 카페 음악 소리도 너무 커서 결국 페어는 물 건너 갔다...
• 페어 대신 각자 파트를 나눠서 작업하기로 했다. 공교롭게도(?) 나는 또 다이얼로그 작업을 하게 되었는데 vms에 이미 들어가 있는 UI를 만져서 고치는 것은 새로 만드는 것과는 차원이 다르게 복잡했다. 그 와중에 식사하러, 식사 후 다시 일하러 계속 자리를 옮기게 되니 진득이 집중하기가 힘들었다. 차라리 늦게라도 출근을 할 걸 그랬다. 다행히 4시 반쯤 공사가 끝난다고 해서 집에 돌아오긴 했는데 지금 생각해 보니 괜히 또 중간에 움직였나 싶다.
• 집에 온 직후 오늘 작업한 부분을 공유했는데 내 쪽에서는 한 게 별로 없어서 내일은 오늘 못 다 한 작업부터 시작하기로 했다.

오늘 배운 것

• 어제 대강 살펴봤던 타입 추론과 타입 단언을 한번 더 찾아보았다. "컴파일러는 타입 추론을 통해 명시적인 타입 표기 없이도 타입 정보를 이해할 수 있다." "타입 단언을 통해 컴파일러에게 특정 타입 정보의 사용을 강제할 수 있다." 그러니까 value as Type 또는 <Type>value 형태로 쓰는 타입 단언은, value: type의 형태로 쓰는 단순한 타입 표기와는 완전히 다른 개념인 것이다. 

오늘 한 일

• 스크럼 끝나고 나서 한참을 기억 저편에 묻어두었던 깃훅에 대한 카드를 케이님이 다시 상기시켜 주셨다. 나 너무 부지런하지 못하다..😢  기억을 다시 되돌리기 위해 빠르게 빠르게 husky와 git hook pre-commit 문서를 펼쳐 놓고 스크립트를 짜 보려고 하며 오전 시간을 보냈다.
• 그리고 오후에는 스프린트 미팅 - 승규님과의 페어 작업을 앞두고 사전 허들 - 셀러그로스 retrospective까지 해서 정신이 없었다ㅋㅋ.. 하루 웬종일 머릿속에 정보가 쏟아져 들어오는 느낌이었다. 물론 그거 다 흡수했다고는 안 했음
• 스프린트 미팅에서는 SSO와 다른 서비스들과의 관계를 시각적으로 보여달라는 소연님의 말에 승진님이 관계도를 그리기 시작하셨고... 미팅은 1시간을 채웠다...
• 카드가 나왔고 작업 estimation도 정했으니 승규님과는 내일부터 페어 프로그래밍을 진행하기로 했다. 일단 하기로 한 거고, 혹시 또  이런 프론트 작업에 페어 방식이 맞지 않는다면 작업 방식을 아예 바꿀 수도 있다. 드라이버는 페어 프로그래밍에 익숙한 승규님부터 시작하지만 나는 어떤 식으로 작업을 하는 건지 전혀 모르는 상태라 걱정 반 기대 반인 상태다.
• retrospective는 처음 참여해 봤는데 너무 재미있었다. 나는 거의 한 마디도 안 하고 참관만 했지만 재미있었다. 혹시 그래서 더 재미있었을까..!? 다음 번에는 나도 조금 더 주도적으로 참여할 수 있길.

오늘 배운 것

• 어제 썼듯이, 어제까지 작업한 모달, 그 모달에 이메일을 입력하면 비밀번호 초기화 페이지 링크 받는 것까지 확인해서 pr을 올렸다. 사실 작업 내용 자체는 별 게 없긴 했는데, 생각지도 못했던 부분에서 리뷰를 받았다. 타입스크립트 변수에 대한 타입 선언과 타입 추론 때문이었는데, 어차피 ""와 같이 값의 타입이 string이라는 걸 추론할 수 있는 변수인데 굳이 타입 선언이 들어갈 필요가 없다는 내용이었다. 타입스크립트니까 타입을 명시해줘야겠다고만 생각했을 뿐, 추론은 생각해 본 적이 없었다. 아래 링크에서 타입 추론 부분만 읽어 보았다. 머리에 들어올 것 같을 때 나머지도 마저 읽어봐야겠다.

오늘 한 일

• SSO 쪽에서는 특별히 당장 배정된 작업은 아직 없다. 대신 약 3개월 가량의 작업 시간 여유가 생겼다고 한다. 시간이 자꾸 늘어나는 것 같은 건 기분 탓일까!?
• 하지만 그렇게 되면서 토코톡 로그인, 회원가입 페이지 UI 변경을 진행하게 되었다. 승규님과 함께 피그마 디자인을 보면서, 솔직히 얼마나 걸릴지 모르겠지만 일단 1주일 정도 작업 기간으로 잡고 시작하기로 했다. 예전에 승규님이 한 번 언급했던 것처럼, 이번에 드디어 카드가 할당되고 나면 페어로 작업하기로 했는데 페어 프로그래밍이 어떤 식으로 이루어지는지 전혀 모르는 나로서는 걱정이 앞선다. 대략적인 흐름 정도만 대강 공유하고 일단 카드를 기다리기로...
• 그동안 나는 지난 번까지 틀만 겨우 작업한 모달에 추가 작업을 했다. 모달에 이메일 주소를 입력하면 그 주소를 백엔드에 보내고, 보낸 후에는 확인 모달을 띄웠다. 그리고 해당 이메일 주소로 비밀번호 초기화를 안내하는 링크가 담긴 메일이 오는 것까지 확인했다. 하지만 아직 링크 타고 넘어간 페이지에는 아무것도 없다. 디자인도 나온 건 없는 듯...?
• 그리고 다행히도, 저번 주에 나의 무지함으로 인해 8일이나 늦게 시작된 QA는 다른 추가적인 문제 없이 넘어간 듯하다.

오늘 배운 것

• git add는 보통 git add . 로 변경 파일 전체를 스테이지에 올리지 않고 골라서 진행하더라도 어쨌든 파일 단위로 처리를 하는 명령어이다. 만약 파일 안에서도 라인별로 따로 스테이지에 올리고 싶다면 git add -p를 이용하면 된다. 그러면 터미널에 변경 사항이 찍히고, Stage this hunk? 하면서 어떻게 처리할 건지 묻는다. [y: 스테이지에 올린다 / n: 올리지 않는다 / q: 이 hunk 포함 나머지를 올리지 않고 끝낸다 / s: 이 hunk도 한 번 더 나눈다] 다른 명령어들은 아래 링크 참고!

오늘 배운 것

• 마크다운 문법으로 기록할 게 좀 생겨서 사용법을 찾아보았다. 정리가 잘 되어 있어서 참고하기 좋았다.

• vscode에서 .md 파일을 작성하려니까 깃헙에서 바로 건드리는 것과는 다르게 미리보기가 되지 않아서 매우 불편했다. 내가 적은 게 잘 나오는지 꼭 확인해야겠어..! 그래서 vscode extension으로 Markdown Preview Enhanced를 설치했다. 다른 기능은 아직 특별히 필요성을 못 느껴서 잘 모르겠고, 일단 미리보기 기능은 cmd + k + v 버튼을 누르면 미리보기 창이 열리면서 작성하는 즉시 확인이 가능하다.

오늘 배운 것

• (아래 링크에 대한 TL;DR) 보통 조건문을 여기저기 쓴다고 해서 나쁜 건 아니지만, guard clause를 사용하면 불필요한 코드 분기를 피할 수 있고, 결과적으로 코드를 좀 더 간결하고 가독성을 좋게 할 수 있다.

• guard clause란? early return을 통한 예외처리를 하는 코드 스타일.

오늘 한 일

• 지난밤, 그렇게 해결된 줄 알았던 문제는 Irfan님에게서 해당 기능이 qa 서버에서는 잘 확인되는데 dev 서버에서 확인이 되지 않는다는, 양쪽에서 배포된 기능이 서로 일치하지 않는다는 연락이 오면서 내 마음 속에서 다시 불거졌었다. 다행히 아침 스크럼 때 다른 분들께 여쭤본 결과 그건 강력 새로고침이나 캐시 비우기 정도로 해결될 듯했다. 일단 카드에 댓글을 다시 남겨 놨는데 그러고 보니 아직 답이 없으시다.
• 어제 올린 pr 리뷰 받은 데 대한 마무리 작업을 마저 했다. 주로 리팩토링이었다. 근데 문제는, 자꾸 들여다 보니 눈에 띄는 게 많아져서 커밋이 잔뜩 늘어났다ㅋㅋ..pr에 커밋 범벅..
• 새로운 카드로 작업을 시작하려다 그 카드에 걸린 연계된 작업이 여러 개가 될 수도 있겠다는 생각이 들었다. 그래서 처음으로 하위 작업에 대해 내가 직접 카드를 만들어 보았다. 그리고 이제 마음 편하게 해볼까 했는데 회원가입 페이지도 손을 좀 봐야 수월하게 시작할 수 있겠다는 사실을 깨달음. 음.. 그러면.. 어디부터 손을 대야 하지..
• 공차 마시고 세일즈채널 데모 구경하면서 잠깐 쉬었다가 승진님이 몇 번 말씀하셨던 빌드 에러 나는 걸 다시 보기로 했다. 못 찾겠다고 외쳐대는 모듈 하나를 설치해주고 나니 더 이상 같은 에러는 뜨지 않았는데, 다른 이유로 또 빌드 에러가 났다. 이미지 빌드를 수행하는 Dockerfile에 빌드 명령어가 npm run build로 되어 있길래 vite build로 바꿔야 하나 했던 찰나 package.json에 해당 명령어가 vite build로 설정되어 있음을 확인했다. 그럼 뭐지? 에러 왜 나지?
• 무례를 무릅쓰고 금요일인데...! 퇴근 10분 전인데...! 승진님 소환해서 여쭤본 결과 그냥 Dockerfile에 명시한, 컨테이너 안으로 복사할 파일 목록에 vite.config.ts까지 포함하니 더 이상 에러가 나지 않고 빌드가 잘 됐다. 그런데 그때 승진님이 발견하신 루트 디렉토리에 나와 있는 index.html...! 이게 뭘까, public 디렉토리 안에 있어야 할 것 같은데 왜 나와 있죠, 웅성웅성

오늘 배운 것

• 응, 근데 거기 있는 게 맞아. 몰랐지만 찾아보니 vite를 프로젝트에 적용하면 기본적으로 index.html이 public이 아닌 루트 디렉토리에 생긴다고 한다. public에는 없어도 되고, 스캐폴딩에 애초에 public에는 index.html이 들어가지 않는다. 난생 처음 보는 index.html의 소재에 조금 당황했다. 😅

오늘 한 일

• 본격적으로 다시 패스워드 리셋 페이지(라고 쓰고 모달을 띄운다) 작업에 착수했다. 사실 모달 자체는 다 만들어 놨었는데 이걸 띄우고 닫는 컨트롤을 스토어에서 관리했으면 하는 데서부터 Vue 3, Vuex, Pinia 공부가 시작되었던 것이었다... 대하소설급
• 하는 김에 아주 큰 기능을 건드린 건 아니었지만 그러니까 리팩토링이지! 내가 보기 편한 형태로 리팩토링을 좀 하고, 다시 보면서 과거의 내가 왜 이런 식으로 코드를 넣었을까 싶은 부분은 다듬었다.
• 피그마에 따르면 현재 모달은 로그인 페이지에서만 띄운다. 물론, 이것도 아직 SSO 기준으로 그루핑된 내용은 아니고 그냥 내가 디자인 정해진 게 없어서 다른 피그마 페이지에서 이거겠거니 하고 가져다 쓰는 거긴 한데, 아무튼 지금은 그렇다. 하지만 나중에는 회원가입 페이지에서도 모달을 띄울 수도 있고, 어쩌면 또 다른 페이지에서 띄울 수도 있는 노릇이다. 그래서 모달 컴포넌트를 아예 별도로 독립시켜서 로그인 페이지 바깥에 뜨게 만들었다.
• 그리고 이 모달 컴포넌트와 이걸 띄우는 함수는 스토어에서 관리하게 했다. 아직 고칠 부분이 많이 보이는 아쉬운 상태에서 일단 pr을 날리고 리뷰를 받았다. 창현님께는 특별히 리뷰 재촉 드림ㅋㅋㅋ
• 리뷰 받은 내용만 좀 더 반영하면 되겠다, 싶을 때쯤 지라 카드를 보러 들어갔는데 며칠 전에 이미 해결했다고 생각했던 이슈가 아직 남아 있는 것을 보았다. 그래서 카드를 처음 만든 Irfan님에게 댓글로 여쭤봤더니 여전히 해당 기능이 작동하지 않는다고 동영상까지(!) 첨부해서 보여주셨다. 어어 그럴 리가 없는데요...
• 사건의 전말: 승진님께 Argo CD로 deploy 리스타트 하는 법을 배웠지만 나라는 사람은 그 방법만 알았을 뿐 메인에 새로운 기능을 머지한 후 리스타트 할 생각은 전혀 하지 않고 있었던 것이었다ㅋㅋ후... 내가 생각해도 나는 바보다. 그 탓에 QA 팀에서는 코드에 기능이 추가된 후 8일간이나 이걸 확인하지 못하고 있었던 것이었던......

오늘 배운 것

• 모달을 띄울 때 뒷 배경을 dimmed 하게 만드는데 모달이 켜진 상태에서 그 배경을 클릭했을 때에도 모달이 꺼지도록 해야 한다. 하지만 일반적인 @click을 적용하면 모달 자체를 눌렀을 때에도 배경이 눌린 것마냥 꺼져 버린다. 이럴 때에는 @click.self를 적용하면 자식 컴포넌트가 아닌, 해당하는 컴포넌트 자체를 클릭했을 때에만 핸들러가 동작한다.