D'story

오늘 한 일

• 오늘은 내 기준 두 번째 sso 스크럼이 있었다. 매주 두 번뿐인 스크럼이라 내가 무슨 일장연설할 것도 아니고 단지 참석하는 것뿐인데도 왠지 잔뜩 긴장하게 된다. 온보딩 팀에서는 겨우겨우 눈 뜨자마자 기계적으로 미로 보드를 열곤 했는데, 심지어 스크럼 시작 시간도 11시여서 맨정신(...)으로 들어갈 수밖에 없게 되었다.
• sso와 이어 붙일 이러닝 사이트가 화제에 올랐는데, 양쪽이 어떤 식으로 돌아가는지 서로 정보가 하나도 없는 상황이어서 유저 베이스를 통합해야 할 때 sso 플로우를 그쪽에서 잘 이해할 수 있을지 모르겠다는 얘기가 나왔다. 플로우 관련한 얘기는 나올 때마다 시간 순삭하는 주제여서 오늘도 시간 가는 줄 몰랐더니 어느새 50분이 지나 있었다. 온보딩 6분 컷도 했던 시절이 있었는데...
• 내가 가지고 있는 지라 카드 중에 회원가입 페이지가 이러닝 사이트 때문에 가장 다급(이라고 표현하기는 약간 민망)했던 작업이었는데, 일단 기본 기능만 돌아가게 하고 자잘한 것들이나 스타일 부분은 천천히 신경써도 된다는 주문에 따라 뒤로 미뤄놨던 것들이 있었다. 예를 들면, 왜 또 얘가 나오나 싶지만 아무튼 다이얼로그 UI를 디자인대로 안 한 거라든지, 조금씩 바뀌어가는 디자인 변경안들을 못 본 체했던 거라든지.
• pr을 올리고 나서 승진님이 리뷰해 주시면서 우리도 vms처럼 prettier 설정이 되어 있으면 좋을 것 같다고 하셨다. 예전에 vms UI 만질 때 자꾸 내 로컬에서만 코드 포맷이 망가져서 스트레스 받곤 했었는데, 이번에도 sso 쪽을 내가 어설프게 만졌다가 대참사가 날까 싶어서 잠깐 주저했다. 그렇지만 어쨌든 내가 계속해서 작업해 나갈 프로젝트인 만큼 두려움을 이겨내기로.
• prettier 설정 자체는 사실 내가 선호하는 대로(single quote: true라든지, tab width: 2라든지...) 해도 괜찮을 것 같았지만 우리 모두는 vms 스타일에 익숙할 테니 vms를 참고해서 설정했다. 모르는 건 그때그때 구글링 해가며 적용해봤더니 생각보다 많은 공수가 들지는 않았다. 이랬는데 오류 신나게 터지면 어쩌지
• 막판에 다른 카드로 QA에서 코멘트가 달렸지만 prettier pr까지 마무리하고 나서 스벨트로 방향을 바꿨다. 오늘은 어제에 이어서 튜토리얼을 훑으며 이건 뷰나 리액트와는 확실히 다르다 싶은 것들만 따로 정리중. 그 두 가지에는 그래도 어느 정도 적응한 내가 또 새로운 방법으로 코드를 짜려면 그게 더 직관적이고 쉬운 방식이라 하더라도 한동안 허둥댈 게 분명하니까 다음에 한 번 더 읽고 싶은 링크, 나중에라도 참고하면 좋을 링크도 모아놓고 있다. 지금 적어놓고 있는 것들이 전혀 필요하지 않을 만큼 익숙해지고 싶다.

오늘까지 한 일

• 어제는 태초 퀘스트를 물어온 긱봇에게 '하려던 참인 일'을 3개나 적어서 냈다. 욕심...
• 1. sso 스크럼이 다시 생겼는데 매주 화요일과 수요일에만 하기로 해서 마침 휴가였던 화요일은 못 들어가고 어제 처음으로 참여했다. 온보딩 팀과 비교하면 멤버의 구성은 비슷한데 이번엔 스크럼 보드 없이 구글 밋에서 진행했다. 보드가 없으니까 서로 얼굴을 더 쳐다보게 되는 것만 같은...ㅋㅋㅋ
• 2. 두 번째로 적어낸 건 허스키였다.
• 3. 그리고 세 번째는 스벨트. 하지만 2, 3번 중 그 무엇도 해내지 못했다.
• 왜냐면 스크럼 직전에 QA 팀에서 몇 개의 카드를 어제 오전 중에 QA 서버에 배포해 줄 수 있냐고 연락이 왔기 때문이었다. 당연하게도 스크럼 때 그 얘기가 나왔다. 배포 자체는 언제든지 가능한 상황이었지만 연락을 받고 확인해 보니 당장 고쳐야 할 부분이 눈에 띄어서 수정 후에 배포를 하기로 했다. 그러다 승진님, 지완님과 허들로 이런저런 에러 관련 내용을 나누며 작업을 했다. 절반쯤 페어 프로그래밍 느낌. 근데 sso 프로세스 우리가 봐도 헷갈려ㅋㅋ.. "확실하진 않은데", "기억이 잘 안 나는데"는 거의 뭐 프리픽스였다.
• 백과 프론트 양쪽을 다 작업하신 지완님이 pr을 올리시면서 프론트쪽 리뷰를 부탁하셨는데 비록 오타 찾아내기와 같은 작은 리뷰였지만 뿌듯했다. 그리고 그 덕에 로딩스피너와 스낵바를 구현하신 코드를 구경할 수 있었다.
• 지완님과 승진님이 에러 해결 후 머지하신 코드를 받아서 내가 작업한 내용을 넣어서 pr을 올렸다.
• 그리고 당연히 QA 팀에서 확인 후 코멘트를 달아주었고, 그 내용을 반영하는 작업을 오늘 했다.
• 참 신기한 게, 똑같은 작업이라도 예전에 시도할 때는 어떻게 해결해야 할지 방법도 생각이 안 나고 결국엔 핵심이 아닌 주변부만 삽질하다 포기했는데, 시간이 조금 지나서 다시 시도하면 '도대체 내가 이걸 그때 왜 못했지?' 싶을 만큼 간단하게 한 번에 성공하는 때가 있다.
• 이메일을 입력해서 제출하면 비밀번호 재설정 링크가 발송되는데, 그때부터 60초 타이머가 작동하고 그 60초가 지나야 링크를 재발송할 수 있는 버튼이 활성화 된다. 그런데 이 버튼은 외관상으로는 버튼이 아니다. 타이머가 돌아가고 있을 때에는 일반적인 텍스트일 뿐이지만 타이머가 만료되면 텍스트 색상이 바뀌고 클릭이 가능해지면서 버튼처럼 동작한다.
• 이걸 처음에는 커스텀 컴포넌트로 만들어둔 버튼 컴포넌트를 사용해 보려고 했는데 정렬도 원하는 대로 되지 않고 크기나 간격도 조금씩 달라서 낑낑대다가 일단 보류했었다. 하지만 이번에는 QA에서 공식적으로 적발되어 버렸으므로 더 이상 물러날 곳이 없었다. 커스텀 컴포넌트를 만지다가 시간만 보냈던 기억이 고스란히 남아 있었기 때문에, 이번엔 커스텀 컴포넌트를 버리고 타이머가 0이 되었을 때 텍스트의 색상과 @click 함수를 바꿔주는 다소 단순한 방식으로 방향을 틀었더니 손쉽게 해결되었다. 웹 접근성과 관련해서 스크린 리더를 고려한다면 버튼으로서 동작하는 부분은 버튼 태그를 써야 하는 것 같지만...

오늘 배운 것

• sso 프론트엔드, 백엔드, 클라이언트 서버를 터미널에 탭 3개 켜 놓고 돌리다 보니 클릭해서 옮겨다니기도 귀찮아져서 찾아본 단축키.

오늘 한 일

• 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.