D'story

오늘까지 한 일

• 이번 주부터 다시 어깨가 근육 뭉친 것마냥 아프기 시작했다. 1월에도 한 일주일간 그랬었는데, 잠을 도대체 어떻게 잤길래 이렇게까지 어깨가 쑤시나 하고 그냥 넘겼었다. 그런데 이번에 다시 또 비슷하게 아프길래 월요일에는 병원에 가봤다. 네? 일자목이요?
• 태어나서 처음으로 물리치료라는 것을 받아봤다. 어깨 아픈 건 생각도 안 날 만큼 정말 너무 아팠다. 치료 끝나고 한 세 시간쯤 지나니 아픔이 좀 가시고 시원해지기는 했는데 그때까지 다소 고통스러웠다. 사실 오늘도 가야 했는데 어쩌다 보니 안 갔다. 오늘 꼭 오라고 신신당부 하셨었는데..
• 오늘 오전에는 앞으로 생각해봐야 하는 것들에 대한 회의가 있었다. 나름대로 열심히 귀기울여 들었지만 내 머리로는 정보 처리의 한계가 있었다ㅠㅠ 일단 지금까지 기본적인 로그인 플로우는 구현을 했고, 앞으로 작업해 나가야 하는 과정들을 짚어보는 단계였다. 결국 지금 하는 프로젝트는 구글이나 페이스북 같은 소셜 로그인 어플리케이션을 만드는 것인데, 단순히 로그인 기능만을 제공하는 것이 아니라 이미 있는 사용자 계정들과도 데이터를 통합할 수 있어야 하기 때문에 생각해야 하는 경우의 수도 많아지고 계산이 복잡해지는 것 같았다.
• 근데 나는 일단 저번까지 만들어놓은 기본적인 기능들에서 로그아웃을 빼먹은 상태였다. 어렵고 손이 많이 가는 작업은 아니니 일단 그것부터 하고 나서, 앞으로 할 일이 많아져 코드가 더 복잡해지기 전에 지금 단계에서 리액트를 뷰로 엎어치기로 했다.
• ? 그런데 서버가 안 켜졌다. (????) 로그인을 하든, 로그아웃을 하든, 서버를 돌려놔야 테스트를 할 수가 있는데 원래 하던 대로 명령어를 입력해도 터미널에서 자꾸 에러가 났다. 에러 메시지 내용으로 보아 100% 이해는 못하겠지만 mongoDB 관련인 것 같아 설치도 해보다가 설치마저도 잘 안 되고? 커맨드 에러 자꾸 나고? 수렁으로 빠져드는 삽질.. 혹시 내가 갯벌에 대고 삽질 중인가
• 삽질 삽질 끝에 영봉님께 헬프를 쳐봤다. 에러가 나는 상황을 보여드리니 잠깐 고민하시더니 "혹시 VPN 켜셨나요?" 하셨다. ??????????????????????????????????예...???설마 제가 안 켰나요?????????

오늘 배운 것

• 아무리 주니어라지만 너무 부끄럽다. 스스로 박제하고 다신 이러지 말자. DB 사용할 때는 VPN을 꼭 켭시다. 나 자신아 제발...ㅠㅠ

오늘 한 일

• 어제는 또 다른 이유로 몸이 안 좋아서 아침부터 끙끙 앓다가 결국 오후에 오프를 외치고야 말았다. 오후에 쉬겠다고 점심 때 말해놨는데 사람 마음이라는 게, 쉰다니까 갑자기 하나라도 더 하고 싶어지는데... 내가 봐도 이상하다. 두시 넘어서까지 에러가 난 걸 붙잡고 있다가 질문을 올렸더니 쉰다고 하지 않았냐시던 케이님의 말씀에 흠칫. 다행히 케이님이 주신 힌트와, $PATH 어쩌고 하던 에러 메시지를 이용해서 혼자 급하게 문제를 해결하고 후다닥 튀었다.
• 오늘은 매달 한 번씩 있다는 타운홀 미팅이 있었다. 인도네시아에 계셔서 뵐 일이 도무지 없었던 대표님을 처음 뵀다. 대표님인데 첫 출근 3주 만에 처음 뵙는 것도 웃기다, 생각해 보니... 아무튼 회사가 전체적으로 어떤 상황에 있는지, 어떻게 돌아가고 있는지 알 수 있는 좋은 기회였다. 그리고 신나게 웃었다
• 현재는 로그인 테스트를 하려면 회원가입을 해서 계정을 생성해야만 한다. 애초에 외부 클라이언트에서 우리 서버에 통신을 시도해야 서버에서 앞단의 로그인 페이지로 리다이렉트 시키며 접근이 가능하게 되는 거라, 자체적으로 회원가입 페이지에서부터 테스트를 시작하면 클라이언트에서 받아와야 하는 파라미터들을 놓쳐버리게 되는 문제가 있었다.
• 보통 어떤 문제를 맞닥뜨리면 일단 나 혼자 구글링과 함께 고민을 좀 해보다가 여쭤볼 각을 재는데, 이건 시간을 갖고 고민하던 문제가 아니었기 때문에 어떻게 정리해서 질문해야 하는지도 명확하지 않았다. 지금은 글로 정리해서 쓰니까 좀 낫지만. 여쭤봐야겠지, 막연히 생각만 하던 중에 타운홀 직후 승진님, 영봉님과 허들할 기회가 생겨서 궁금증을 미처 정돈하지는 못했지만 그냥 여쭤봤다. 정리된 질문은 아니었어도 다행히 전달이 잘 된 것 같았고 명쾌한 답변을 얻었다. 역시 궁금하면 바로바로 여쭤보는 게 최고다. 승진님 카르마 재벌 만들어 드릴 테다
• 로그인 또는 회원가입을 정상적으로 마치고 나면, 유저에게 '너의 검증을 요청한 애가 너의 계정 정보를 원하는데 제공해 줄래?' 하는 권한 요청 페이지를 새로 만들었다. 이 페이지는 정확히 어떤 상황에서만 제한적으로 보여줄 건지 아직 구체적으로는 정해진 바가 없다. 그래서  지금으로서는 로그인을 하든, 회원가입을 하든, 애초에 이미 로그인이 되어 있어서 그저 다시 리다이렉트만 시켜주는 경우든, 일단 필요하다고 생각되는 모든 경로에 넣어놓기로 했다.

오늘 한 일

• 어제, 로그인 시도하면 자동으로 새로운 페이지로 리다이렉트 되어야 하는데 그게 안 되고 끝났었다.
• 그걸 해결하시는 과정에서 승진님이 전체적인 플로우를 바꾸셨고, 오늘 출근했을 때는 이미 내 코드에서도 그 부분을 고쳐주신 상태였기 때문에 나는 사실상 플로우 변화에 큰 영향을 받지 않은 거나 다름없었다. 다시 그려주신 다이어그램과 수정해주신 코드를 하나씩 비교하면서 실행해보니 이해하는 데 큰 어려움은 없었다.
• 변경된 플로우에 맞춰 그 외 다른 코드들을 조금씩 변경한 후에는 다시 로컬에서 뷰로 동일한 내용의 작업을 진행했다. 언제 리액트랑 바꿔치기 해야 될지 알 수 없으니 미리미리...!

오늘 배운 것

• 서버가 응답 헤더에 쿠키를 넣어서 보내주려면, 앞단에서는 그 직전 요청에 withCredentials 옵션을 보내줘야 한다. axios를 쓰는 경우로 예를 들면 이렇다. 헤더에 따로 넣을 필요 없이 config 부분에 그냥 바로 넣어주면 된다.

axios.post('http://server.url', {body_key: body_value}, {withCredentials: true});

• 아래 링크에 따르면 서버쪽에서도 쿠키를 넣을 때 헤더에 Access-Control-Allow-Credentials 옵션을 함께 넣어줘야 한단다. 그러면 헤더에 쿠키가 실려온다. 이후 이 쿠키는 같은 서버로 요청을 보낼 때마다 자동으로 헤더에 들어가게 된다. 정말 놀라운 사실은, 나는 이 쿠키를 서버에서 생성해서 넘길 수 있다는 것 자체를 처음 알았다. 항상 앞단에서 자체적으로 생성하곤 했었는데... 하나만 알고 둘은 몰랐구나ㅠㅠ

오늘 한 일

• 어제는 아팠다. 점심까지는 멀쩡했는데, 점심을 먹은 후에 속이 뒤집어지고 5시쯤 급격히 컨디션이 안 좋아지면서 거의 기절.
• 오늘은 pr 두 개 날렸다! pr 개수가 중요한 건 아니지만...
• 외부 클라이언트에서 우리의 oauth 어플리케이션으로 접근하면, 첫 페이지에서는 인증된 사용자인지 확인하고 인증되지 않은 경우 로그인 페이지로 리다이렉트 시킨다.
• 로그인 페이지에서 이메일, 비밀번호 넣고 로그인 버튼을 누르면 api 콜을 하는데, 자꾸만 cors 에러가 났다. 사실 프로젝트 시작하자마자 사용자 인증 여부 확인하는 과정에서부터 에러는 났었지만 그때는 크롬 익스텐션 중 cors 관련된 걸로 대강 해결했었다. 그러고 나서 로그인 페이지로 넘어와서 로그인 하는 api 콜을 하면, cors 익스텐션이 작동 중인데도 에러가 다시 났다.
• 익스텐션을 끄고 나서 승진님이 cors 관련된 요청 헤더를 넣어주시면서 첫 번째 에러는 다시 해결이 됐다. 그래도 여전히 로그인 api에서는 에러가 났다.
• 첫 번째 에러랑 두 번째 에러가 메시지 내용이 약간 달랐다. 첫 번째는 'Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.'였고, 두 번째는 'Response to preflight request doesn't pass access control check: It does not have HTTP ok status.'였다. 첫 번째는 해결했으니 됐고, 두 번째는 검색해봐도 이렇다 할 만한 해결책이 보이지 않았다ㅠㅠ
• 그러던 중 승진님이 내가 보내는 요청은 options method에서도 404 에러가 나면서 튕기는데, 인터넷에서는 사람들이 options method에 204로 응답하는 것 같더라 하시면서 204로 바꿔주셨고, 해결되었다. 원인이 알고 싶다
• 로그인을 하고 나면 반환되는 액세스 토큰을 다시, 처음의 그 인증된 사용자인지 확인하는 api 요청 헤더에 실어 보낸다. 인증된 사용자임이 확인되면 웹페이지가 다른 url로 리다이렉트 되어야 하는데...... 이게 잘 안되는 상태에서 일단 오늘은 끝.
• 퇴근 후: 오늘은 전화영어 두 번째 날이었다. 여전히 한 마디 뱉는 데 지나치게 신중해지지만 그래도 첫날보다는 말 많이 했다는 데 의의를 두겠다.

오늘 배운 것

• 로그인 api에서 cors 에러가 자꾸 날 때, 어차피 cors는 브라우저에서 띄우는 에러이니 터미널에서 api 콜을 해봐야겠다 싶어서 curl 명령어를 사용해봤다. 예전에 한 번 사용해본 적이 있어서 노션에 대충 적어놓은 걸 보고 따라해봤는데 아무래도 자료를 찾아봐야 할 것 같아서 찾아본 링크.

• 동균님이 알려주신 httpie. 맥 터미널에서 homebrew로 설치하고 http 명령어로 사용할 수 있다. curl에 비해 출력되는 모양새도 예쁘고 명령어도 훨씬 직관적인 느낌이다.

오늘 한 일

• 어제는 리액트로 로그인, 회원가입 페이지를 만들었고, 아직 사용할 api가 준비되지 않은 틈을 타 오늘은 어제와 똑같은 페이지를 뷰로 구현하는 작업을 시작했다. 역시 손에 익은 리액트만큼은 속도가 나지 않았다. 그래도 하루종일 붙잡고 있으니 비밀번호 입력값에 대한 유효성 검사만 제외하면 웬만큼은 비슷해진 것 같다.
• 비슷하게 생긴 두 페이지를 라우팅하려니 Vue Router가 필요했다. 한 번도 뷰로는 라우팅을 해본 적이 없어서 공식문서를 찾아봤더니, 놀랍게도 cli로 vue add router 명령어만 입력해주면 router 디렉토리가 자동으로 생성되고, app.vue 파일도 라우터가 적용된 가장 기본적인 템플릿으로 덮어씌워진다. 명령어 하나로 다 해결되는 건 참 좋은데, app.vue 파일 덮어쓰기 때문에라도 앞으로는 라우터가 필요하면 프로젝트를 생성하자마자 바로 적용하는 것이 훨씬 나을 듯하다. 페이지 이동을 하려면 this.$router.push('이동하려는 url path') 코드를 사용하면 된다.
• 분명 튜토리얼 때 별 어려움 없이 사용했던 것으로 기억하는데도, eventBus를 다시 구현해보려니 순서가 조금 헷갈려서 내 나름대로 낑낑대며 완성해보고, 상현님께 컨펌을 받았다. eventBus에 이벤트를 넣고, 넣은 것을 감지해서 처리하는 절차 자체가 틀리지는 않았는데, 어차피 Vuex를 사용할 거라면 그때 생성되는 store가 eventBus와 같은 역할을 한다는 얘기를 들었다. 어? 그러면 Vuex를 지금 당장 적용해보겠다! 방금 기본 프로젝트에 Vue Router를 추가로 설치했듯이, Vuex도 그렇게 하면 되겠거니 하고 공식문서를 다시 찾아보려던 찰나, 상현님의 한 마디: "vue create면 알아서 다 되는데?" ...?!
• 처음부터 cli로 시작했으니 당연히 vue create로 프로젝트를 생성해왔던 건데, 나는 터미널에 vue create '프로젝트명'을 입력하고 나면 나오는 선택지들에서 아무 고민 없이 'Default'를 선택했었다. 거기서 'Default' 대신 'Manually select features'를 선택한다면, TypeScript, Router, Vuex, Linter 등을 자유롭게 조합해서 프로젝트를 생성할 수가 있었던 것이었다...!! 이왕 조합해서 시도해 보는 김에 TypeScript와 ESLint + Airbnb config까지 끼얹어 보았다. 분명 작업 속도는 훨씬 더 느려지겠지만ㅋㅋ

오늘 배운 것

• Vue Router는 명령어 딱 하나만으로도 라우터가 생성되고 공식문서가 워낙 깔끔하게 잘 되어 있어서 원하는 기능을 갖다 붙이기가 어렵지 않다.

• vue create의 마법과도 같은 기능은 공식문서에 이미 있었다.. 공식문서를 잘 읽자. 다시 한 번 다짐

• Vue Router를 vue add router로 따로 붙이든, vue create로 처음부터 붙이고 시작하든, 터미널에는 history mode를 적용할 거냐는 질문이 나온다. 적용 안 하면 hash mode가 되어 url에 /#/이 추가된다. 이로써 누군가의 오랜 고민 해결! 아싸 맛있는 거 먹어야지

오늘 한 일

• 아침 스크럼이 끝났을 때를 적당히 노리다가 케이님과의 허들 타임에서 어제까지 온갖 종류의 에러를 만난, 변명 아닌 변명을 구구절절하게 풀었다. PoC 프로젝트인 만큼 속도가 중요해서, 빠르게 작업할 수 있다면 리액트를 사용해도 괜찮다고 하셨다. 역시 PoC이기 때문에 리액트로 짜 놔도 코드 전체가 다 엎어질 수 있다고도 하셨다.
• 그렇다면 나는 배운 게 도둑질이라 리액트로 속도를 내보기로 했다. 지금까지 손댔던 모든 부분을 미련 없이 통째로 밀어버리고 프로젝트를 다시 생성했다. 오늘 만든 페이지는 단 두 개, 로그인과 회원가입이었고 디자인은 원래 있는 것을 그대로 따다 썼다. 두 페이지를 라우팅 하는 과정에서는 드디어 react-router v6를 적용해 보았다. <Switch>가 <Routes>로 바뀌고 <Redirect>가 없어지는 등 다양한 변경사항이 있지만 공식문서가 워낙 잘 되어 있어 큰 어려움은 없었다. 애초에 <Route>가 둘밖에 없기도 하고
• 단순한 유효성 검사 정도의 간단한 기능만 붙인 후 작업을 마쳤다. 상현님의 도움으로 내 생애 첫 PR을 날려보았다. reviewer에는 세 분 다 올려놓고 한 분 확인이 나자마자 기다렸다는 듯이 바로 머지했다는 게 함정ㅋㅋ..
• PR도 해봤겠다, 그러고 나니 이제는 기능을 붙여야겠는데, 로그인이나 회원가입에 쓸 api가 있는지, 있다면 어떤 건지, 명세는 있는 건지를 전혀 모르겠다는 문제가 있었다. 지금 진행되는 이 프로젝트에서 내가 맡은 부분이 정확히 어디까지인가도, 처음에는 안다고 생각했는데 생각할수록 아리송했다. 그래서 잠깐의 낯가림 고민 끝에 채널에 헬프를 쳤다. 그리고 발렛 키를 든 승진님이라는 천사가 날아왔다..
• 지난번 첫 싱크업 때의 미로 보드 한쪽에 도식을 그려가며 거의 40분 가량 설명을 해주셨다. authentication과 authorization부터 시작해서 OIDC, OAuth의 기능과 역할, 전체 흐름이 어떻게 되는지, 거기서 내가 작업할 파트가 무엇인지까지... 설명을 잘 못하시는 것 같다고 자꾸 말씀하셨지만, 이해가 너무 잘 되는 설명이었고, 만약 이해가 안됐다 하더라도 그건 제가 바보이기 때문인 거죠ㅠㅠ 그리고 바쁘실 텐데 시간 내 주셔서 감사하다고 말씀드리니 시니어들은 이런 설명을 하는 것도 시니어의 일이라고 생각한다고도 말씀하셨다. 나도 꼭 이런 멋있는 시니어가 되고 말겠다.

오늘 배운 것

• 상현님한테 PR 날리는 법을 배우는 중에 git commit -am 명령어로 git add . 를 생략하고 한 번에 입력하는 방법이 있다는 것을 처음 알았다! 충격 나는 그것도 모르고 지금까지 일일이 git add . 입력 후에 git commit -m 을 했다. 다만 나는 새로 생성한 프로젝트에서 git add 를 한 번도 한 적이 없기 때문에 오늘 나의 경우에는 적용할 수 없었다.

• authentication(인증): 유저가 누구인지를 식별하는 과정, authorization(인가): 식별한 유저에게 적절한 권한을 부여하는 과정

오늘 한 일

• 어제 정해진 대로 기존 서비스에서 로그인 파트만 분리하(기를 시도해보)려고 프로젝트를 신규로 하나 생성해서 거기에 컴포넌트 단위부터 옮겨 보려고 했다. 그런데, 뭐 당연하지만 기존 프로젝트를 구성하는 다양한 파일들은 이미  서로서로 얽혀서 영향을 주고받고 있었다. 로그인과 관련된 작은 컴포넌트부터 옮긴 후, 거기에 영향을 미치는 다른 파일들을 가져오는 식으로 시도해 봤는데 그렇게 하면 결국 건드려야 하는 파일의 범위가 너무 넓어지고 말았다. 더욱이 기존 프로젝트의 전체 구성을 제대로 파악하지 못하는 나로서는 이게 맞는 건지 더 모르겠다ㅠㅠ... 고로, 오늘은 해낸 게 없다.

오늘 배운 것

• 다만 상현님 덕분에 nullish coalescing operator를 알게 되었다. ??: 덕분에 살았네 예를 들어, a ?? b 라고 쓰면 a가 null 또는 undefined일 경우 b이고, 그렇지 않은 경우에는 a이다. 한마디로 연산자 기준 왼쪽 값이 null 또는 undefined인 경우 오른쪽 값을, 아니면 왼쪽 값을 반환한다. ||는 truthy한 값을, ??는 defined한 값을 반환하기 때문에, 예를 들어 a에 할당한 값 자체가 0일 경우 ||를 사용하면 0을 falsy하게 취급하므로 원하는 결과를 얻지 못할 수도 있다.

오늘 한 일

• 오늘은 유난히 구글 캘린더에 잡힌 일정이 많은 날이었다.
• 10시 반에는 민기님이 프로덕트와 관련해 전체적인 프로세스를 알려주시며 큰 그림을 잡아주셨다. 11시에는 오박사님을 비롯해 태초마을에서 함께할 일행분들을 만났고, 다 같이 아테네의 지도를 그려보았다. 물론 나는 구경 헤헤 12시 반에는 에스더님이 TVA팀에 대한 설명을 해주셨다. 3시에는 PT Mix, 4시에는 TVA 스크럼, 4시 반에는 세일즈채널 데모를 참관했다.
• 어제 Kei님이 말씀해 주신 것처럼 태초마을에서는 현재의 로그인 프로세스를 별도의 어플리케이션으로 분리하는 작업을 한다. PoC로 간다는 건, 최종적으로는 엎어질 가능성도 있다는 뜻일까?
• 일단 로그인 파트의 프론트엔드 부분부터 떼어내야 하기 때문에 Docker로 구동을 시켜놓고 코드를 살펴보기 시작했다. 그런데 생각해보니 나 아직 Vue를 겨우 다룰 줄만 알지, 라우팅도 Vuex 사용도 할 줄 모른다. 오.. 할 거 너무 많아.. 이제부터 일학습병행이다