D'story

오늘 한 일

• 장장 3시간 여에 걸친 누군가의 라이브 코딩 쇼 구경... 근데 나는 뷰린이인 주제에 훈수를 두었다?!
• 그리고 자꾸만 늘어가는, 어제 날린 나의 pr에 대한 리뷰들을 실시간으로 확인했다. 근데 첫 번째 리뷰부터 잘 안 풀려..!?
• 어제는 잠을 푹 잤는데도 머리가 안 도는지 자꾸만 같은 코드를 지웠다 썼다 하면서 바보 같은 짓을 계속했다. 그리고 이건 누군가가 라이브로 보았지
• 그러다 너무 효율 안 나서 잠깐 파업하고 저녁 먹은 후 운동하고 다시 코딩을 시작했더니 너무 잘 되는데!? 운동이라 쓰고 마법이라 읽는다
• 당장 달아주신 리뷰들은 어찌저찌 해결한 것 같은데 작업하다 다른 문제들을 발견했다. 음... 이건 내일 스크럼 때 자수하고 나서 생각해 봐야겠다

오늘 배운 것

• 창현님이 리뷰에 참고하라고 달아주신 링크. vuex 공부할 때 분명 봤었는데 막상 내가 코드 짤 땐 생각도 안 나죠ㅠㅠ

오늘 한 일

• 어제 TIL도 안 썼으면서 너무 늦게 잤더니 피곤하다... 잠은 자면서 합시다ㅠㅠ
• 베타 테스트 준비 마무리 작업을 했다. 상황에 맞게 에러 메시지 띄우는 거나 인도네시아어 번역이 필요한 부분이나 아니면 모바일 화면에 대응하는 반응형 작업(페이지가 하나라 다행)이나 간단한 CSS 조정 등등 뭐 자잘한 것들이긴 했는데 이것저것 따지다 보니 생각보다 시간이 걸렸다.
• 테스트 하는 셈치고 빌드 한 번 해보려니까 빌드 해 놓은 URL로 접속이 안 됐다. 한참을 헤매다가 깨달았다. serve -s build 해놓고 도대체 왜 이게 안 되는지 고민하고 있었던 것이었다. serve -s dist 해야 하는데... 나 자신아 정신 차려
• pr 날리기 전 작업이 거의 막바지에 이를 때쯤 세로로 나란히 정렬한 두 div가 브라우저 화면 높이를 줄이면 겹쳐버린다는 것을 알아차렸다. 아래쪽 div는 position: relative를 준 상황이었다. 온갖 삽질 다 하며 시간을 보내다 아래 링크 덕에 양쪽 div 모두에 height: auto로 설정(이미 지정한 높이가 있으면 그건 min-height로 바꿔버렸다)하고 display: block을 주니 겹치지 않고 제 자리를 찾았다. CSS 진 빠져
• 그리고 pr을 올렸다. 물론 이게 끝이 아닐 거라는 걸 나도 안다

오늘 배운 것

• 구글링 할 때 검색어 선택만 잘 해도 원하는 결과는 금방 나오는 것 같다. 처음에는 display, relative, div, height, ... 로 검색해 봤는데, 지금 생각해 보니 핵심 키워드는 overlapping이었던 것 같다.

• 기본 vue.js favicon을 바꾸게 되어서 가지고 있던 svg 파일을 아래 링크에서 변환해서 사용했다.

오늘까지 한 일

• 어제 드디어 딱 이번 베타 테스트 때 내놓을 만큼의 디자인 변경안이 나왔다. 소연님이 스코프를 많이 잘라 주셔서 사실상 로그인 페이지 딱 하나뿐이라 손이 아주 많이 가지는 않을 것 같았다. 틀만 잡고 세부사항은 차차 적용할 생각으로 일단 로그인 페이지 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, 불어 주의)라는 번들러 이름을 오늘 처음 주워듣게 되어서 뭔지 좀 찾아봤다.

오늘 한 일

• 승진님과 함께 태초마을에서 migration 당했다. 나도 몰랐던 강제 이주! 본격적으로 온보딩 팀과 함께하게 되었다.
• 오늘은 어쩌다 보니 좀 일찍 일어나서 어제 승진님이 제안(?)하신 페이스북 소셜로그인 기능 붙이기를 시작했다. 처음에는 잘 되나 싶었는데 몇 번 렌더링 시키고 나니 http 환경에서는 버튼을 사용할 수 없다는 오류가 떴다. ???아니 어떡하라고
• 오늘 스크럼에서 이 오류 내용과 내가 생각한 해결책(devcert)를 말씀드리니 영봉님, 승규님이 로컬에서 https로 띄우는 방법을 각각 알려주셨다. caddy와 mkcert였는데 caddy는 리버스 프록시를 이용해 http를 https로 돌려주는 반면 mkcert는 로컬용 인증서를 발급해서 아예 https로 띄워버리는 방식이었다.
• 둘 다 사용해봐야지 하는 오만한 생각으로 우선 caddy부터 시도해봤으나 생각했던 것만큼 잘 되지 않아서 mkcert로 옮겨갔다. mkcert는 용례가 많아서 참고 자료도 많았다. 우리 sso 프로젝트 자체가 프론트, 서버, 클라이언트를 동시에 띄워놔야 로컬에서 개발이 가능한 상황이라 아무래도 mkcert 패키지 자체를 노드로 깔면 좋을 것 같았지만, 다들 brew로 설치를 하고 있었다. 여기서부터 쎄했지만 멍청하게도 굴하지 않았다.
• npm install mkcert 하고 나서 create-ca(certificate authority)와 create-cert 명령어로 인증서 발급을 완료한 후 https 해당 포트로 접속해봐도 err_cert_authority_invalid 오류가 났다. http는 접속 자체가 안되고.. 찾아보면 사람마다 해결 방식이 제각각인데 이때도 사람들은 이미 npm이 아니라 brew로 설치한 상황이었다. 결국 마음을 바꿔먹고 방향을 전환했다. brew install mkcert 하면 애초에 mkcert -install 명령어를 통해서 ca를 설정할 수 있고, mkcert localhost 127.0.0.1 이런 식으로 명령어를 한 번만 입력하면 알아서 .pem 파일이 생성됐다. npm으로 설치하면 이것조차 .pem이 아니라 .key, .cert 이런 식이다
• 만약 내가 프론트엔드를 로컬에서 https로 띄워서 개발한다고 하면 서버나 클라이언트도 url 때문에 영향을 받지 않을 수가 없을 텐데 아무래도 이걸 package.json scripts에 포함시키는 게 나을 것 같아서 scripts 안에 brew install mkcert ... 도 넣어놨다. 근데 이건 진짜 쎄하다.. 괜찮은 건지 내일 여쭤봐야지
• 아 그런데 또 슬픈 포인트: 구글 로그인 버튼과 마찬가지로 회원가입 페이지 갔다 돌아오면 버튼이 없어진다..ㅠㅠ 구글 버튼은 요행히도 살려냈지만 페이스북 버튼만큼은 같은 방식이 안 먹힌다 엉엉
• 와 오늘 한 거 이거밖에 없어ㅠㅠㅠㅠㅠㅠㅠㅠㅠ세상에나

오늘 배운 것

• caddy: 문서는 정말 친절하고 직관적인데 왜 나는 안되지...

• mkcert 깃헙: 아니.. advanced topics에 나온 옵션들은 어떻게 해야 먹일 수 있는 거야ㅠㅠ

• mkcert npm: 문서 간결하고 좋은데 어쨌든 적용 실패였따

• mkcert는 brew install 하자^^

오늘 한 일

• 어제 썼듯이, 앞으로는 우리 팀(?)도 매일 스크럼도 하고 카드도 배정 받겠지만 지라 카드를 처음으로 만져볼 일이 먼저 생겼다. 당장 업무로 긴급히 처리해야 할 일은 아니지만 어쨌든 한 번쯤은 해결하고 넘어가야 할 비교적 중요도가 낮은 일들이 이렇게 배정되는 것 같았다. 카드에 적힌 내용이 간단해서 나로서는 해석이 조금 필요했다. 어제 쿠버네티스 문서를 보는 한편으로 이 카드의 필요성을 이해하기 위해서 토코톡 코드를 조금 들여다 봤었다. 그리고 오늘 내가 생각한 게 맞는지 남훈님께 여쭤봤다.
• 생각한 내용은 맞았지만 이걸 해결하기 위해서는 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 공식문서