D'story

지금까지

• 개막이라도 하듯 6월의 시작과 함께 많은 일들이 있었다. 내가(또는 인간이) 참 많이 나약하다는 것을 깨달았고, 더 이상 이대로는 안되겠다고 생각했고, 병원의 힘을 빌리기로 했다. 그래서 지금까지도 병원 문턱이 닳도록 드나드는 중이다. 비록 한편으로는 약의 부작용으로 또 다른 고생을 하기도 했지만, 어찌 됐든 결과적으로 그럭저럭 상황은 이전보다는 많이 나아진 듯 보인다.
• 글을 쓸 마음의 여유가 없었는데 또 그런 것치고는 업무 시간에 알게 된, '이거 나중에 블로그에 올려야지' 하고 저장해 둔 링크들이 많다. 시간 날 때마다 조금씩 정리해봐야 할 것 같아서 오늘을 그 시작으로 할까 한다.
• 지금껏 거의 3주간 무슨 일을 했느냐 하면, ...기억이 안 난다. 이래서 기록이 중요한 건데 말이다. 계속 뭔가 해 왔고, 하면서도 '와 세상에! 나라는 바보가 이런 멍청한 실수를 한다' 하면서 자책하듯이 웃었던 적도 꽤 많았는데 진짜 하나도 기억이 안 난다. 되짚어 가면서 소급해서 적기보다는 앞으로 게을리하지 않는 게 나을 것 같다는 건 나만의 생각(합리화).

그 언젠가 배운 것

• 언젠가는 SSO에서 번역을 담당(?)하던 json 파일의 역할을 지완님이 i18n이라는 플러그인에 넘기셨었다. json 파일은 아무리 사용자가 설정한 언어에 따라서 다른 텍스트를 보여준다고 하더라도 그 과정 자체를 직접 만들어야 하고, 날것 그대로의 느낌이 있을 수밖에 없다. 하지만 i18n을 사용하면 그런 수고로움을 덜 수 있고, 상황에 따라 달라지는 변수를 넣어 텍스트를 바꿀 수도 있다.
• 그런데 이때 텍스트에 특수문자를 넣고 싶다면 이것이 말 그대로 literally string이라는 것을 알려줘야 한다(literal interpolation). 예를 들면 이메일 주소에 들어가는 @라든지. 이걸 literal 처리하지 않고 사용해 보니 콘솔에 에러가 찍히면서 화면 자체가 출력되지 않는 일이 발생했다.

• 이외에도 여러 변수를 한 번에 같이 출력하고 싶을 때에는 해당 부분을 {0}, {1} 하는 식으로 표현하는 list interpolation도 많이 사용하게 됐다.

오늘 한 일

• 오늘은 내 기준 두 번째 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까지 마무리하고 나서 스벨트로 방향을 바꿨다. 오늘은 어제에 이어서 튜토리얼을 훑으며 이건 뷰나 리액트와는 확실히 다르다 싶은 것들만 따로 정리중. 그 두 가지에는 그래도 어느 정도 적응한 내가 또 새로운 방법으로 코드를 짜려면 그게 더 직관적이고 쉬운 방식이라 하더라도 한동안 허둥댈 게 분명하니까 다음에 한 번 더 읽고 싶은 링크, 나중에라도 참고하면 좋을 링크도 모아놓고 있다. 지금 적어놓고 있는 것들이 전혀 필요하지 않을 만큼 익숙해지고 싶다.

오늘 한 일

• 오늘 하루는 스벨트와 함께 시작했고 스벨트와 함께 끝냈다.
• 궁금한 게 있으면 자료를 타고 타고 들어가서 어딘가에서 헤매다가 다시 돌아오길 여러 번 반복했지만 그것도 나름 좋았다.

오늘 배운 것

• 스벨트 튜토리얼(튜토리얼이 아니더라도 REPL 자체를 제공한다)은 요즘 다른 데서도 흔히 볼 수 있는 형태로 웹사이트에서 REPL(Read-Eval-Print Loop)로 제공하는데, 이런 CodePen 같은 거 이용하다가 .zip 파일로 받아서 압축 푸는 거 말고 로컬에서 그럴싸하게 돌려보고 싶어서 이것저것 찾아 보았다.

• 개인적으로 어떤 프레임워크든 CLI를 이용하는 걸 좋아하는데 스벨트는 svelte-cli가 deprecated 되어서 아쉬웠다. 사용 자체는 가능하지만 변화가 일어나면 바로 반영하지 못해서 프로덕션 환경에서는 비추한단다.

• 첫 번째 링크에서 제안하는 REPL을 제외한 또 한 가지 방법은 degit을 이용하는 것이다. git repo의 가장 최근 버전만을 가져오는 것으로, 히스토리는 포함하지 않으므로 git clone보다 빠르고 가벼운 수단이라고 한다. npx degit user-name/repo-name으로 사용할 수 있다.

• 그런데 이렇게 하면 말 그대로 템플릿으로서 가져오는 것이기 때문에 번들러는 이미 Rollup으로 지정되어 있다. 나는 이유는 모르겠고 그냥 왠지 sso의 Vue3에서 사용한 Vite를 적용하고 싶었다. 그러러면 npm init @vitejs/app으로 직접 프로젝트명을 지정하고 프레임워크를 선택하면 아래 링크와 같은 스캐폴딩이 적용된 프로젝트를 새로 생성할 수 있다. 물론 타입스크립트로도 가능하다.

• Rollup과 Vite를 비교하면 어떤지 자료를 찾아보고 싶었는데 마땅한 게 눈에 띄지 않았다. Vite가 빠르다는 얘기는 있지만 둘의 수치나 이런 걸 비교한 건 딱히. 나중에 시간 내서 Rollup 공식문서도 읽어보고 둘을 비교해 봐야겠다.

오늘까지 한 일

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

오늘 배운 것

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

오늘 한 일

• 오전에 있었던 케이님과의 허들에서 작업을 하다 보면 끝내지를 못해서 공부할 시간을 자꾸 확보하지 못하게 된다고 말씀 드렸다. 작업을 중간에 끝내는 것은 중요하고 필요하지만, 실제로는 시니어들도 그러기 어렵다고 하시면서, 그런 의미에서 뽀모도로 기법을 활용하는 것도 방법이라고 말씀해 주셨다. 25분의 작업이 끝나면 5분을 쉬어야 하므로 흐름이 끊길 수밖에 없는 것이었다. 뽀모도로에서는 항상 작업에 몰두할 25분만을 비중 있게 생각했던 나로서는 새로운 접근 방식이었다.
• 오후부터는 sso 회원가입 페이지 작업을 할 때 창현님이 추천해주신 어플로 뽀모도로 타이머를 적용해 보았다. 25분이 생각보다 짧아서 나도 모르게 집중하게 되는 효과는 있었다. 그러나 기계적으로 타이머 실행 버튼을 눌러가며 무한정 작업에 몰두하게 되는 부작용을 경험했다ㅋㅋㅋㅋ
• 코딩, 말 그대로 코드를 짜는 작업은 하면 할수록 그 속에 파묻힐 수밖에 없는 것 같다. 전체적으로 코드의 틀을 잡았다고 생각하면 세부적인 구멍이 눈에 띄고 그 구멍을 촘촘히 메우고 나면 다시 전체 그림이 뭔가 비효율적인 것 같고 아무튼 마음에 안 든다. 리팩토링과 수정 보완의 무한 굴레. 하루가 다 끝날 때쯤에도 여전히 내 투두 리스트에는 작업 말미에 찾아낸 빵꾸들이 손에 손을 잡고 나란히 줄지어 있다.
• 그래서 결국 공부는 다시 퇴근 이후로 밀리고야 말았다. 스벨트의 탄생 배경, 특징, 컨셉 같은 것들을 훑어보았다. 영어라서 읽는 시간은 오래 걸렸지만 그래도 단 한 줄도 공부하지 못했던 어제보다는 훨씬 낫다고 셀프 칭찬

오늘 배운 것

• 예전에 창현님과의 페어 프로그래밍에서 뽀모도로 타이머를 쓰셨던 게 생각이 나서 타이머 뭐 쓰시는지 여쭤보았다. Be Focused! 오늘 몇 시간 사용해 본 결과, UI도 기능도 깔끔하고 직관적이어서 만족스러웠다.

• 리액트나 뷰에 비해 스벨트는 같은 코드여도 코드 자체가 짧다. 예를 들면 리액트의 <React.fragment> 또는 <>, 뷰의 <template> 같은 보일러플레이트가 필요 없어진다. 무조건 짧게 쓴다고 가독성의 향상을 보장하지는 않지만, 애초에 원래 짧게 써도 되는 언어가 있다면 그걸 선택하는 게 옳다는, 대충 그런 얘기. 리액트도, 뷰도 조금이나마 사용해 봤기 때문인지 스벨트의 장점이 더더욱 와 닿는다.

• 스벨트는 프레임워크가 아닌 컴파일러이기 때문에, 필요하지 않은 코드들도 함께 안고 가야 하는 다른 프레임워크들과는 달리 필요한 만큼의 코드만 바닐라 자바스크립트로 컴파일한다. 따라서 상대적으로 용량은 작고 실행 속도는 빠르다.

• 영어 문장이 조금 어렵게 느껴져서 내가 이해한 게 맞는지 잘 몰라 다른 블로그를 찾아 한 번 더 읽어보았다.

오늘 한 일

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

• 갑작스러운 일로 수요일부터 공백이 생겼다.
• 머릿속에도 공백이 생겨서 흐름이 왕창 끊긴 느낌.
• 뭐부터 해야 하는지 모르겠다.
• 내가 생각해도 지금 좀 너덜너덜..?
• 여러 모로 초기화 필요.

오늘 한 일

• 지난주가 인도네시아 휴일이었기 때문에 vms UI에 대한 QA 피드백은 오늘 받을 수 있었다. 내가 고쳐야 하는 버그는 총 3가지였는데, 첫 번째부터 조금 난감했다.
• 사용자가 비밀번호를 잊어서 리셋할 수 있는 링크를 휴대폰으로 받겠다고 하면, 그걸 왓츠앱이나 문자 중 선택해서 보내도록 하는 버튼이 있다. 기존 vms에는 이 버튼이 하나로 합쳐져 있는데, 아무래도 이번 작업은 UI 변경 작업이다 보니 기존에 붙어 있던 함수를 그대로 가져다 썼고 결국 같은 함수가 두 번 붙은 셈(...이건 전적으로 내 잘못)이었다.
• 혹시나 프론트에서 특정 뭔가를 인수로 넘기면 왓츠앱과 문자를 분기할 수 있는 로직이 백엔드 쪽에 있나 봤는데 golang이라 살짝 난처했지만 없는 것 같았다. 그래도 혹시 모르니 창현님께 여쭤봤고, 백엔드 디버깅이 필요하다 하더라도 이건 할당된 UI 변경 카드로 해결할 문제가 아니라 별도의 카드로 해야 한다는 답변을 들을 수 있었다. 영어로 내가 앞뒤 정황을 다 설명할 자신이 없어서 소연님께 이러이러한 문제로 당장 로직 변경은 어려울 것 같다 말씀드리니 바로 이해하시고 버튼을 원래대로 합칠 수 있게 해 주셨다. 🥳
• 나머지 버그도 삽질이 없잖아 있었으나 translation에 변수 넣기, 클립보드 복사 기능 넣기 등 첫 번째에 비하면 그래도 비교적 간단히 해결할 수 있는 것들이었다.
• sso 관련해서는 승진님과 프론트 작업 현황을 공유하는 시간을 가졌다. 허들이 시작되자마자 깨달은 사실: pr 올려놓고 슬랙에 링크를 안 올렸다. 내 기억력 무슨 일이야? 비밀번호 리셋하는 페이지는 우연찮게도 내가 마음대로 만들었으나 결과적으로는 피그마와 디자인이 상당히 일치하므로 세부적인 부분만 간단히 확인하고 넘어갈 예정이었다. 비밀번호 변경 페이지는 아직 급하지 않으므로 뒤로 미루고, 베타 테스트 때 숨겨 놓았던 그렇기 때문에 손볼 데가 많을 회원가입 페이지부터 우선 작업하기로 했다.
• 승인된 pr의 브랜치를 머지한 기념으로 손대지 않고 있었던 sso 카드를 정리했다. 승진님이 할당해 주신 카드를 내 멋대로 잘게 나눈 것들이 있는데, 제목만 봐서는 그게 그거 같아 보이는 함정이 있어서 이해를 돕기 위해 짧게나마 설명을 덧붙였다. 그러다 보니 뭔가 이상하다는 것을 깨달았다. 방금 이미 dev 브랜치에 머지까지 끝낸 pr 브랜치명을, 유사한 다른 카드 넘버로 잘못 딴 것이었다. 나중에 찾기 쉽도록 pr 제목과 내용만 바꿔주고 넘어갈 수 있었지만 잠깐 온몸에 소름이 돋았다. 그러게 누가 카드 그렇게 나누래

오늘 배운 것

• 지난번에 상현님에게 테이블플러스 사용법을 배웠었다. 근데 그게 회사에 두고 온 맥북에 있다ㅠㅠ DB를 오늘도 봐야 했는데 테이블플러스를 잃은 나는 다시 선생님께 도움 요청해서 워크벤치를 깔았는데, 충격과 공포의 연속이었다. ? 얘 왜 이렇게 생겼어..가독성 무슨 일이야..주황색 코끼리 돌려줘..