D'story

오늘 한 일

• 지금 우리의 SSO 프로젝트에 작업 기한이 붙어버렸다. 어, 뭐 사실 저번 달에도 앞으로 한 달 정도 예상한다고 하셨었는데 생각해 보면 거기서 크게 달라진 건 없는 것 같긴 하다.
• 아무튼 그래서 어쨌든 나는 계속해서 리액트 작업분을 뷰로 다시 똑같이 구현 중에 있는데, 갑자기 머리가 잘 안 돌아가는 것 같고 머릿속이 좀 뿌예지는 것 같고 뭔가 생각한 대로 안 되고 있다. 리액트에서는 이렇게 이렇게 하니까 잘 됐는데, 왜 뷰는...! 그러니까 나는 뷰린이가 맞아
• 일단 여기서 첫 번째 문제. 뷰 공식문서를 다 안 봤다. 이것부터 처리(?)해야 한다. 리액트도 사실 공식문서를 보기 전에는 얼기설기 대충 돌아만 가는 코드를 짤 뿐이었다. 지금은 그때보다 더 능숙하게 잘 한다고는 말 못하지만, 코딩하면서 스스로 의심해야 할 포인트, 구글링에 적합한 검색 키워드, 에러가 나면 디버깅을 시작해야 하는 지점, 다른 사람들의 코드에서 눈여겨 보아야 하는 것들을 그래도 많이 알게 되었다. 보통 그런 것들은 공식문서에서 짚어주기 때문이다.

오늘 배운 것

• 공부 열심히 해야지. 역시 다른 차원에 있는 코드를 한 번 구경해 봐야 정신을 차리지.

오늘 한 일

• 오늘은 출근 5분 전에나 일어나던 평소보다 훨씬 일찍 일어나서, 업무 시간 전에 어제 못 받은 물리치료를 받았다. 저번보단 안 아팠지만 여전히 아팠다.
• 목요 테크 세션인 어쩔살롱에서 마이크를 잡게 되어 얘기할 내용을 급하게 정리했다. 주제는 리액트와 뷰인데 발표의 포인트를 어떻게 잡을지는 어제부터 계속 고민을 했었다. 사실 내용 정리도 어제 밤에 하려고 했었지만 깜빡 잠들어 버렸기 때문에 결국 벼락치기가 되어 버렸다ㅠㅠ 하지만 아직 너무 겉만 알기 때문인지 내용을 어떻게 다듬어 봐도 썩 마음에 들지 않았다. 시간은 얼마 없고 강행하게 되었는데, 비록 마음에 걸리는 구석이 많았어도 일단 끝나고 나니 속이 후련하다.
• 어제 급히 붙였던 로그아웃 기능에 쿠키를 핸들링 하는 코드가 없어서 겉으로는 로그아웃이 된 것 같아 보여도 클라이언트를 통해 재진입하고 나면 로그아웃 버튼을 누르기 전의 그 계정으로 이미 로그인한 상태가 되어 버렸다. 생각도 못하고 있다가 영봉님의 제보로 알게 되었다.
• 그래서 로그아웃을 하면 브라우저의 쿠키를 삭제하게끔 했는데, 승진님이 자바스크립트로 쿠키에 접근할 필요는 없겠다고 하셨다. 그것도 그런가 싶어서 승진님이 api 응답 헤더에 넣어 보내주시는 Set-Cookie 속성을 받을 수 있도록 요청에 withCredentials: true를 넣었다. 근데 우리 코드에서 자바스크립트로 접근을 지양한다고 해서 모두의 접근이 차단되는 건 아니지 않나..? 결국 httpOnly 같은 옵션이 들어가야 하지 않을까?

오늘 배운 것

• 대충 스킴만 했으므로 시간 내서 다시 읽어보자.

오늘 한 일

• 어제는 리액트로 로그인, 회원가입 페이지를 만들었고, 아직 사용할 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에 /#/이 추가된다. 이로써 누군가의 오랜 고민 해결! 아싸 맛있는 거 먹어야지

오늘 한 일

• 오늘 아침은 어제 업무 설명을 들은 팀의 스크럼에 참여했다. 줌이나 구글밋이 아닌 미로에서 스크럼 보드를 보면서 바로 진행하는 방식이었는데, 접속부터가 잘 안 돼서 애를 먹었다. 결국 크롬을 버리고 사파리로 갈아탔더니 극적으로 2분 늦게 들어갈 수 있었다.
• 미로는 스크럼 보드도 보고 때로는 작성도 하면서 미팅도 하고, 이걸 한 번에 다 할 수 있다는 장점이 있었지만 한 가지 불편한 건 줌에서처럼 말하고 있는 사람의 카메라에 포커스 되는 기능이 없었다는 점이었다. 아직 어느 분이 어떤 목소리를 가졌는지 파악하지 못한 나로서는 입을 움직이고 있는 주인공을 찾아다니느라 스크럼 내내 혼자 바빴다. 뉴비의 고충
• 어제 뷰 공부하다가 남겨둔 한 챕터를 마저 봤다. 부모 컴포넌트에서 자식 컴포넌트로는 데이터를 props로 넘기고, 자식이 부모의 데이터를 변경하려면 emit을 사용하면 된다. 하지만 만약 자식이 부모를 거치지 않고 더욱 상위의 조상 컴포넌트가 가진 데이터를 건드리려고 한다면? 자식에게서 발생한 이벤트를 eventBus에 태우고, 조상 컴포넌트가 eventBus로부터 해당 이벤트를 감지하여 꺼내오면 된다.
• 그리고 좀 더 심화 자료를 찾아볼까 생각하던 찰나, 세훈님이 앞으로 공부하면 좋을 키워드들을 던져주셨다. 어차피 한 번쯤 만져봐야 하는 것들이라면 이번 기회에 조금씩이라도 봐 놓는 게 좋을 것 같아서 패기 넘치게 바로 Go로 넘어갔다. 패기가 과해
• Go를 설치한 후 구글링해 가면서 환경변수도 적당히 설정했다. 연습용 프로젝트 파일을 생성한 후 vscode 터미널에서 go run main.go 명령어로 실행하려니 자꾸 GOPATH, 또는 GOPATH와 GOROOT 관련한 에러가 떴다. 그런데 특이한 건 맥 터미널에서 같은 경로로 들어가 똑같은 명령어를 입력하면 내가 원하는 결과가 문제없이 출력되었다. vscode extension도 건드려보고, 환경변수도 다시 이리저리 바꿔보고, .mod 파일을 만들었다 없앴다 디렉토리를 바꿔봤다가 별 짓을 다 해봐도 계속 똑같았다. 맥 터미널에서는 돌아가는데 vscode 터미널에서는 돌아가지 않았다.
• 하다하다 지쳐서 처음부터 다시 해보기로 했다. 프로젝트 디렉토리와 ~/go 디렉토리를 전부 삭제해버렸다. 상현님이 노마드 코더 강의 영상이 잘 되어 있다고 해서 원래는 영상 내용을 볼 생각으로 들어갔다가 거기 달린 코멘트 하나를 보고 무심코 따라했는데 성공해버렸다. vscode에서 설치하라는 extension들을 안 깔아서 그랬던 건지 아직 정확히는 원인을 파악하지 못했다.
• Go를 심폐소생하기 전에, 시니어 분들이 진행하시는 테크 세션에 참석했다가 또 다른, 셀러들이 쉽고 직관적으로 서비스를 이용할 수 있도록 전체적인 프로세스를 관리하는 팀의 업무 설명을 들었고, 그러다 보니 나의 죽어가던 Go를 겨우 살려냈을 때는 이미 오후 6시였다..
• 남은 한 시간 동안 공식문서를 들여다 봤는데, 자바스크립트랑은 문법이 비슷하면서도 다른 면이 있어서 오히려 신기하고 재밌었다.

오늘 배운 것

• 아래 링크 코멘트의 2번까지는 이미 잘 되었으므로 나는 3번부터 순서대로 시도했다. 2번에서 go env를 입력하면 나오는 GOPATH는 '/Users/[username]/go', GOROOT는 '/usr/local/go'였다.

오늘 한 일

• 오늘은 어제 업무 소개를 들었던 팀의 스크럼에 참석했다. 사무실에서 온라인 스크럼이라니 새로웠다. Miro에 현황판 같은 게 있고 각자가 프로그레스를 나타내는 상황판을 가지고 있었다. 아직 자세한 내용은 잘 모르지만 체계적으로 진행되는 것 같았다.
• 그리고 어제에 이어, 오늘은 셀러들의 디지털 마케팅과 온보딩을 담당하는 팀의 업무 설명을 들었다. PO님이 재택 중이셔서 미팅룸에 다같이 모여서 온라인으로 미팅을 했다. 어제와는 확연히 다른 종류의 업무가 진행되는 걸로 보아 팀별로 색깔이 확실해 보였다.
• 어제 Docker로 돌려본 vms(가 무슨 뜻인지 모르겠네 그러고 보니.. 내일 물어봐야지) 페이지를 좀 더 들여다보려고 했는데, 뷰 예습하려고 문서 잠깐 들여다보다가 너무 재밌어서 그만 하루종일 시간을 홀랑!
• 뷰 공부를 하려면 Vue.js devtools부터 깔고 시작하라는 귀중한 조언을 받들어 일단 설치를 했다. 처음에는 리액트 개발자 도구랑 비슷한 역할일 테니 안 켜보고 있었다. 그러다 부모 컴포넌트가 가진 데이터를 자식이 함수로 건드리는(emit) 순간부터 그때그때 데이터를 확인하는 게 좋을 것 같아 열어봤는데, 왜인지 크롬 개발자 도구에 모두가 가지는 그 Vue 탭이 없었다. 나만 없어 Vue...
• 당황도 잠시, 급한 대로 구글링을 시작했는데 생각보다 같은 문제를 가진 사람들이 많았다. 크롬을 껐다 켜라, 껐다 켜서 강력 새로고침을 해라, 몇 번 더 껐다 켜라, 개발자도구에 적용한 테마를 풀고 Light로 바꾼 다음 개발자도구를 새로고침해라 등등... 쭉 읽어보면 그다지 실행하기 까다로운 방법들은 아니었지만 나는 그냥 안 먹혔다.

오늘 배운 것

• 시간이 흘러흘러 겨우겨우 찾은 해결책은 이랬다: 1. 적용한 뷰 CDN이 개발 버전이 아니라 상용 버전이었으므로 해당 url을 개발 버전으로 바꿔주고, 2. 개발자 도구의 톱니바퀴 모양 설정 버튼을 눌러서 Preferences > Appearance > Theme을 System preference가 아닌 Light로 바꿔주고, 3. Settings를 x 버튼을 눌러 종료하고 나서 Reload하라는 배너가 떠 있으면 버튼을 클릭해 새로고침해주고, 4. 크롬을 강력 새로고침(맥 기준 command + shift + r) 해준다. 그러면 모두가 있고 나만 없던 Vue 탭이 짜잔! Vue 탭이 생긴 걸 확인한 다음에는 다시 테마를 system preference로 바꿔도 무방하다.