오늘 한 일

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

오늘 배운 것

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

Event Handling | Vue.js

 

vuejs.org

오늘 한 일

  • 평소보다 일찍 일어나서 어제 다 마치지 못한 패스워드 리셋 페이지를 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) 하는 식으로 쓸 수 있다는 것을 아래 링크에서 봤다.
 

Vue3 (3.2.x) — Vue variables in CSS (style section)

Using Vue3 variables inside of the <style> section

medium.com

+ Recent posts