D'story

오늘 한 일

• 아무래도 공백이 너무 길었다. 내가 무슨 작업까지 하다가 쉬게 됐는지 기억이 안 나서 내가 쓴 TIL 내가 다시 보는 기현상까지 벌어졌다. 그나마 상세히 적어놔서 다행이었다고나 할까. 오늘 분명히 공부해야겠다고 마음 먹은 것들도 있었는데 들춰 보지도 못했다. 이래서 개발자들이 미팅으로 흐름 끊기는 걸 싫어한다는 걸까. 아무말
• sso 쪽 작업은 회원가입부터 손봐야 하니까 피그마에 들어가서 간만에 해당 부분 구경 겸 헤매기 하면서, 회원가입 페이지를 전혀 사용하지 않은 베타 테스트 이후엔 건드리지 않아서 그 상태가 어떤지조차 모르고 있던 코드들을 더듬더듬 하나씩 고쳐 나갔다. 마침 그때 승진님과의 간만의 싱크업. 내 기억으로는 지난번과 크게 다르지는 않은 내용이었지만, 이제 정말 더 이상 미룰 수 없을 정도로 본격적으로 작업을 해야 한다는 것처럼 느껴졌다. 그렇다고 해서 지금껏 미뤘다는 뜻은 아니지만
• 페이지로 따로 있던 내용들이 다이얼로그로 바뀐 부분도 있고, vms UI 작업 때 똑같이 만들어본 디자인이 들어간 부분도 있는데, 역시 다른 점은 그건 vue 2, 이건 vue 3라는 점... 생각으로는 이런 식으로 구현하면 되겠다, 했다가도 내장 API 쓰는 방식이 달라서 결과적으로는 사소한 것들인데 조금씩 빙빙 돌아서 해결하게 되곤 했다.
• 구글 로그인 버튼도 와이어프레임 느낌 정도로만 넣어 놓고 기능조차 안 붙이고, 중간중간 구멍이 전혀 없을 거라고 보장은 못 하지만 어찌 됐든 승진님이 다시 살려 놓으셨다는 API와 이번에 바꾼 디자인 간에 기본적인 연결은 할 수 있었다.
• 오늘 월요일이라 지완님과 신나는 원온원이 있는 날인데 하루종일 허둥대다가 준비가 미흡한 나머지 결국 다음주로 미루고 말았다. 앞으로는 이런 일 없게 해야겠다ㅠㅠ
• 내일은 회원가입 페이지에 대한 의문점들을 해결하고 나서 조금 더 다듬고, 반드시 공부도 하리라 부들부들

오늘 한 일

• 최근까지 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을 사용해야 한다.

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

오늘 한 일

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

오늘 배운 것

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

오늘 한 일

• 어제부터 Pinia를 본격적으로 탐구해 보려다 Vuex 문서도 지난번에 보다 만 것을 깨닫고 일단 Vuex부터 이어서 시작, Pinia에는 Vuex와는 달리 mutations가 없다는 것을 깨닫고 쾌재를 불렀다. 똑같이 생긴 코드 자꾸 반복하고 있었잖아...
• 그리고 Pinia가 최고인 이유: 파인애플이 귀엽다
• 그럼 본격적으로 Vue 3로 마이그레이션 된 코드를 좀 정리해볼까, 하다가 ref와 reactive에서 멈칫. 중첩 사용된 부분이 있었다. 딱히 오류는 안 나는데 그렇다고 해서 반응형 데이터를 다루는 비슷한 역할을 하는 애들을 중첩할 이유도 없을 것만 같은 느낌.
• ref()와 reactive()의 차이점은 무엇인지 찾아보았다. 1. reactive primitive value는 ref()로만 다룰 수 있다. 2. ref()의 값에 접근하기 위해서는 .value를 사용해야 한다. 3. ref()를 사용하면 object 전체를 아예 재할당할 수 있다. 쓰고 나니 왠지 ref()에 대한 설명이 되어버렸다.

오늘 배운 것

• 스페인어로 파인애플을 뜻하는 단어(piña)와 발음이 같다고 한다. 하나의 파인애플은 여러 꽃들이 모여서 만들어 낸 여러 개의 열매로 이루어진 송이이므로, 이것이 각기 생성되지만 서로 연결되어 있는 스토어와 같다고 해서 이름을 붙였다고 한다....하하

• ref()와 reactive()의 차이점에 대해서 친절하게 설명한 글이 필요하다면 우선 이걸로 입문하기. 그런데 첫 번째 링크는 작성한 사람이 ref()을 편애하는 것 같다.

• 포커스 그룹 테스트(FGT)란, 선별을 통해 표본에게 행하는 테스트로 선별 방법이나 테스트 진행 절차는 상황에 따라 여러 가지로 나뉜다. 개발 중인 게임의 시장성 등을 테스트할 때 주로 사용하며, 결과물이 엉성할 경우에는 질 좋은 피드백을 받기 어렵다. 테스트 결과가 나쁘다고 해서 항상 시장에서 실패하지는 않는다...는 내용

오늘 한 일

• 월요일임에도 불구하고 일찍 일어나 보았다. 코어 타임, 음, 그거 효과는 좋은데 아침을 제외한 모든 시간에 너무 졸리다. 하루의 모든 체력과 집중력을 그 시간에 쏟아 붓게 되는 듯. 그래서 오히려 그땐 머리가 잘 도는 건가. 그렇지만 내일도 일찍 일어나고 싶다. 마음만은 얼리버드
• 금요일에 이어 Vue 3 부족한 부분을 계속 채워 나가고 있다.
• 그런데 PO님이 requirements를 제시하셨다!? 아마 본격적인 얘기는 내일 나오지 싶은데 이것도 이제 끝인가

오늘 배운 것

• 완전히 새로 알게 된 건 아니었지만 어쩌다 읽게 된 링크... 뭘 찾다가 보게 된 거였는지조차 기억이 나지 않는군😞  기본적인 내용이기는 한데 되새김질 하는 느낌으로 가볍게 읽기 좋았다.

오늘 한 일

• 평소보다 일찍 일어나서 어제 다 마치지 못한 패스워드 리셋 페이지를 Vuetify 없이(Vue 3이므로...) 모달로 띄우는 작업을 마저 했다. 이것이 코어 타임의 효과인가? 쏟은 시간은 한 시간 반뿐이었는데 효율이 엄청 좋았다. 물론 후속 작업이 없다는 것은 아니고..
• 아무튼 뿌듯한 마음으로 들어간 아침 스크럼에서, PO님이 SSO의 작업 속도가 requirement 생성되는 속도보다 빠르다고 말씀하셔서 갑자기 작업 텐션이 좀 느슨해졌다...!? 이때를 노려서 Vue 3와 Pinia를 부숴버려야겠다! 라고 생각했지만 하루아침에 부숴버리기에는 하루가 너무 짧았다😞  못다 한 공부는 주말을 노린다!
• 오랜만에 생존 확인 차 다녀가신 승진님과의 장장 1시간에 걸친, 1시간이 지나가는지도 미처 눈치채지 못했던 즐거운 허들 타임! 오늘도 포인트는 많았지만 그 중에 몇 가지만 꼽아 보자면, 1. 언제든지 스스럼 없이 버리거나 방향을 전환하기에 자유로운 흥미 위주의 개인 사이드 프로젝트 도전, 2. 야근을 하는 대신 낮 근무 시간을 효율적으로 쓰면 좋겠는데, 3. 그 방법으로는 뽀모도로 타이머...? 하지만 효과는 없을 수 있다, 정도..?ㅋㅋㅋ아무튼 진짜 재밌었다.
• 아니 누구 피셜, 깃헙 프로필에 쓴 스킬 중에서 자바스크립트는 남훈님 정도는 되어야 쓰는 거라는 말에 후다닥 지웠더니... 리액트랑 뷰는 넣어 놓고 자바스크립트는 왜 뺐냐고 하면... 나 귀 얇은데...

오늘 배운 것

• 승진님이 알려주신, 짤줍하기 좋은 사이트 링크(https://xkcd.com/)
• Vue 3 컴포넌트에서 선언한 data 영역의 변수들을 css에서 가져다 쓸 때는 color: v-bind(variable-name) 하는 식으로 쓸 수 있다는 것을 아래 링크에서 봤다.

오늘 한 일

• Vue 3로 마이그레이션 된 코드 중 css와 언어 설정 관련한 부분을 조금 손봤다. 분명 코드 생긴 모양은 좀 다를지언정 내용 자체는 크게 차이가 없는데 원하는 대로 동작하지 않는 게 참 이상했다. 아직도 왜 다르게 나오는지 모르겠는 것들이 좀 있어서 100% 돌려놓지는 못했지만 차근차근 작업해 나가고 있다. 한 번 잘라서 pr 날렸을 때의 왠지 모를 안도감이란
• 누군가 무슨 일로 슬랙 토코톡 워크스페이스에서 나를 멘션 했나 했더니만, 로그인 폼에서 비밀번호까지 입력한 후 엔터 키를 누르면 로그인 버튼이 눌리게 해야 한다는 내용의 대화가 오가고 있었다. 앗 전혀 생각 못함!
• 메인에서 브랜치를 따려니까 pr 날리려면 카드 넘버가 있어야 했던 것 같은데 그러고 보니 카드가 없다. 카드 만드는 건 어떻게 하는 거지...!? 모를 땐 헬프!
• 도움을 받아 카드를 만들고 나서 생성된 카드 넘버로 브랜치를 따서 작업을 했다. 구글링 해보니 해결책이 생각보다 간단해서 추가한 코드는 사실상 두 줄뿐이었다.
• 그리고 아직도 익숙하지 못한 Vue 3 코드를 잡고 낑낑대는 중.. 내가 원하는 그 모양새 왜 안 나오냐고 엉엉

오늘 배운 것

• 아래 링크에는 @keyup을 사용했지만 나는 @keypress를 사용해봤다. 어떤 키 코드를 입력했는지 따로 확인하지 않아도 @keypress.enter면 해결된다니 이보다 간결할 수가 있을까.

• forEach는 언제 쓰나 했는데 map을 사용할 상황에서 return을 굳이 할 필요가 없을 때, 배열을 굳이 반환하지 않아도 될 때 쓰면 좋을 것 같다.

오늘은

• 나는 봄을 너무 타서 문제다. 컨디션 안 좋은 것만 생각하면 봄이 빨리 지나갔으면 좋겠지만 더운 건 더 싫어...ㅠㅠ
• 승규님이 Vue 3+Vite+Piniar로 마이그레이션을 하셨다. 뭐 혹시 자잘한 오류나 이런 것들이 있으면 계속 잡아나가야 하겠지만 어쨌든 Vue 3의 세상이 오는구나...생긴 게 좀 리액트스럽다. 승규님이 pr 올려주실 때마다 어디가 달라졌는지 구경하기. approve도 처음 눌러보았다. approve 버튼이 따로 있을 줄 알았는데 리뷰 하겠다는 버튼을 먼저 눌러야 나오는 일종의 옵션으로 들어가 있었다. 생각보다 거창하지 않아서 왠지 실망
• 근데 왠지는 모르겠지만 CSS가 좀 전체적으로 틀어진 느낌이었다. 내일 pr 하나가 마저 머지되고 나면 이것부터 손대야 할 것 같다.
• 본의 아니게 오늘 또 뭔가 징징이와의 페어 프로그래밍 느낌이었다. 근데 나는 한 게 별로 없군.. 그리고 그 코드가 좋은 코드인지는 아직도 의심 중이다. pr에서 무슨 일이 나려나(두근)
• 스몰톡 이벤트로 진행한 희순님 인터뷰 결과물을 오늘 드디어 제출했다. 원하던 영상이 아닌 서면 제출이었지만 그래도 너어무 뿌듯하고 후련하다. 줌 너어는 진짜아 나빴다아..