D'story

오늘 한 일

• 지난밤, 그렇게 해결된 줄 알았던 문제는 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를 적용하면 자식 컴포넌트가 아닌, 해당하는 컴포넌트 자체를 클릭했을 때에만 핸들러가 동작한다.

오늘 한 일

• 어제부터 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) 하는 식으로 쓸 수 있다는 것을 아래 링크에서 봤다.

오늘 한 일

• 저녁에 친구를 만나기로 했는데 친구가 퇴근할 때까지 기다려야 했기 때문에 처음으로 카페에서 일을 해봤다. 멋진 경험일 것 같았지만 의외로 카페의 음악과 사람들 대화 소리가 시끄러웠다. 이어폰 노이즈캔슬링 덕에 위기 모면.
• 아침 스크럼 때 얘기했듯이 패스워드 리셋할 때 보여주는 페이지 작업을 진짜_최종_정말로_final.jpg 시작해야 했다. 이제 더 이상 미룰 수 없었다. 남은 것 중에서 그것보다 우선순위가 높은 작업은 딱히 없기 때문이었다.
• 그런데 말입니다... 마치 이 때를 기다리기나 한 것처럼 QA 팀으로부터 피드백이 왔다. 1. 패스워드 입력란 안에 있는 눈 모양 버튼 위치를 바꿔야 했다. 아니 이거 분명 피그마에서 그 위치 아니었는데... 2. 유저가 입력한 이메일과 비밀번호가 없어도 일단 로그인 버튼은 누를 수 있게 해야 했다. 3. 에러 메시지는 유저 입력 시가 아닌, 로그인 버튼을 누른 후에만 띄워야 했다. 
• 카드 만들어준다길래 기다렸다가 카드 넘버 받아서 처리했다. 2, 3번은 간단한 작업이었고, 시간은 1번이 훨씬 오래 걸렸다. 처음부터 버튼이 거기 있었더라면 css 작업도 간단했을 텐데, 어려운 방식으로 만들어 놨다가 다시 쉽게 바꾸려니 오히려 까다로웠다ㅠㅠ흑흑
• 그리고 패스워드 리셋 페이지를 만들고 있다...

오늘 한 일

• 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에서 무슨 일이 나려나(두근)
• 스몰톡 이벤트로 진행한 희순님 인터뷰 결과물을 오늘 드디어 제출했다. 원하던 영상이 아닌 서면 제출이었지만 그래도 너어무 뿌듯하고 후련하다. 줌 너어는 진짜아 나빴다아..