D'story

오늘 한 일

• 오늘은 내 기준 두 번째 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 공식문서도 읽어보고 둘을 비교해 봐야겠다.

오늘 한 일

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

오늘 배운 것

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

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

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

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

오늘 한 일

• 간밤에 개발자의 탈을 쓴 QA 상현님이 갑자기 vms sign-up이 안 된다고 했다. 상황을 보니 진짜 안 된다. 처음에는 db 환경 문제인 줄 알았는데 나도 똑같은 상황을 만들어 돌려보니 안 됨. 응 db 아니야
• 회원가입 페이지 자체는 내가 작업한 게 아니었지만, 회원가입 버튼을 누르면 뜨는 다이얼로그는 내가 작업한 거였다. 그리고 다이얼로그 UI와 다이얼로그를 오픈하는 방식 자체를 변경하면서, 페이지 컴포넌트가 가지고 있는 sign-up 관련 함수들을 건드린 것도 당근 나였다. 원인을 찾기도 전에 엄습하는 불안감
• 원래 sign-up 관련 로직은 컴포넌트 내에서 단 하나의 함수 안에 전부 다 묶여서 들어가 있었다. 하지만 중간 어느 시점에 다이얼로그를 띄우고, 또 그 다이얼로그에서 입력하는 내용에 맞게 후속 조치가 이루어지는 등 적당한 처리가 필요했기 때문에 나는 그 함수를 여러 개로 쪼개 놓은 상황이었다.
• 그런데 말입니다... vms에 회원가입을 할 때 휴대폰 번호를 넣으면 휴대폰으로 인증 코드가 발송되는데(이게 바로 내가 밴 당했던 그 절차), 이게 특정 조건 하에서 내부 직원이냐 아니냐를 판단할 수 있게끔 분기가 되어 있다. 하지만 바보 같은 나는 직원이 아닌 일반 유저를 가정하고서만 테스트를 진행했고 내부 직원인 경우는 생각을 안(?덜?) 했기 때문에, 직원인 경우에는 아무 코드도 넣어놓지 않아서 그 어떤 함수도 실행되지 않게끔 해 놓은 거였다. 응 db 아니고 너야 심지어 직원인 경우에 쓰려고 바로 아래 라인에 함수도 따로 만들어 놓은 상태였다...ㅠㅠ 함수를 만들었는데 왜 쓰지를 못하니
• 이로써 긴급히 올린 pr에 추가된 코드는 단 한 줄뿐이었다. 코미디
• 착잡한 마음으로 안도하며 잠든 후 일어난 아침에는 케이님과의 원온원이 있었고, 케이님이 사실은 이 글을 모두 읽고 계셨다는 엄청난 소식을 접했고, 주니어 각자에게 맞는 방식이 다 다를 수 있고 원한다면 sso 작업을 계속 하는 것도 괜찮다는 말씀을 들었다. 거기에 더해서 아직 잘은 모르지만 평소 관심 있었던 스벨트 공부+실습도 병행하기로 했다. 🥰
• 원온원이 끝나자마자 승진님한테 허들을 신청했다. 처음에는 팀에서 sso를 어떻게 하기로 했는지를 조심스레 여쭤보며 시작했지만, 결과적으로는 '그럼 제가 할래요'가 되었다ㅋㅋㅋ
• 결론: 신난다 신나 🥰