D'story

오늘 한 일

• 구글 로그인 버튼이 잘 나온다면 버튼을 렌더링 할 때 나오는 에러는 일단 두기로 했다. 기분 좋게 올리려는데 깃 에러가 발목을 잡았다. 아니, pull 다 했는데 왜 또 pull 하래ㅠㅠ 결국 로컬 디렉토리 자체를 날려버리고 작업을 다시 했다. 어차피 내가 작성한 코드 몇 줄 없었어...ㅎ...기억 잘 나...
• PR 없이 그냥 올리기로 했었는데, 막상 처음부터 PR 올리는 법을 배워 놔서 그런지 PR 없이 머지하는 방법을 모르겠어서 그냥 하자니 걱정도 되고 다짜고짜 PR을 날렸다. 그랬더니 처음으로 케이님이 보는 것만으로도 심장 쿵쾅거리는 리뷰를 남겨주셨다. 어차피 한 컴포넌트 안에서만 사용할 파일인데 굳이 전역으로 등록해서 불러오고 있었다. 후다닥 고쳐서 다시 올렸다. 
• 3시에는 PT mix가 있었다. 비록 영어로 진행되었고 듣기만 하는 입장이었지만, 한 번도 들어본 적 없던 ROAS 같은 마케팅 용어들도 알게 되고 재미있었다.
• 온보딩 팀과의 싱크업이 있었다. 더 상세히 확정되어야 하겠지만, 양쪽에서 겹친다고 판단되는 작업들이 있어서 디자인 등을 공유하게 됐다. PO가 없었던 우리 팀 특성상 가이드 해주실 분이 있게 되면 좋을 것 같다.
• 구글 로그인 때문에라도 회원가입을 하는 신규 유저에 대해서는 이메일 확인하는 절차가 필요하다고 판단되어, 흐름 상 회원가입 페이지와 정보 이용 동의 페이지 사이에 인증 코드 입력 페이지를 넣게 되었다.

오늘 배운 것

• 로컬에서 작업할 때도 브랜치를 따로 따고, merge(pull?)는 최대한 자주 합시다.
• ROAS가 뭘까요?

오늘 한 일

• 웬일인지 출근까지 한참 남은 시간에 눈이 떠졌다. 어제 자기 전까지 환경변수 설정 파일 작성과 관련해서 이게 맞는 건지 계속 고민하고 있었는데, 마침 나보다 훨씬 일찍 일어났다는 상현님에게 도움을 요청할 수 있었다. 덕분에 물론 애매한 부분은 있지만 적어도 완전히 틀리지는 않았다는 약간의 자신감을 얻었다.
• 출근 시간이 되자마자 승진님께 다시 한 번 확인을 부탁드렸다. 아직 실환경 관련한 세팅까지 마무리할 수 있는 단계는 아니므로 일단은 적당히 맞게 했다-는 게 결론. 마무리 작업에 대해서 간략하게 설명을 해주셨는데 알아들을 수가 없었따.. 공부할 거리가 태산이다.
• 승진님이 구글 소셜 로그인 버튼을 프론트단에 넣어 놓으셨다고 하시면서 코드 정리를 부탁하셨다. 환경변수 설정도 했으니 내친 김에 그 부분도 아주아주 약간 손을 봤다. 그런데 문제는 그 버튼이 로그인 페이지로 처음 진입했을 경우나 페이지 자체를 새로고침한 경우에는 잘 보이는데, 링크를 통해 회원가입 페이지로 넘어갔다가 돌아오면 버튼이 없다!?
• 이걸 해결해 보겠다고 시간을 다 썼다. 하루종일 낑낑대다가 beforeMount와 mounted에 각각 구글 로그인 버튼을 렌더링하는 함수를 넣어놓으니 결과적으로 버튼이 두 경우 모두 잘 보이기는 한다. 그런데 브라우저 콘솔 창이 에러로 새빨갛다. 저 어떡하죠
• 1시 30분부터 3시까지는 AWS 클라우드 컴퓨팅 웨비나를 BGM처럼 깔아놓고 있었다. 처음에는 열심히 들으려고 했는데 새로운 내용이 아주 많지 않았고 나중에 필요할 때 구글링해서 찾는 게 훨씬 빠를 것 같았다.
• 용빈님이 docker로 서버 구동하는 게 잘 안된다고 하셔서 상현님과 셋이서 머리를 맞대고 허들을 했다. 그런데 충격적이게도 원인이 또 다시 VPN이었다...!? 잊을 만 하면 나오는 그것

오늘 한 일

• 오늘은 드디어 말로만 궁금해하던 node.js + express를 로컬에서 그냥 돌려만 보았다. 명령어 몇 번이면 뚝딱뚝딱이었다. 그런 점에서 express generator는 리액트의 CRA와 비슷한 느낌이었다.
• 일요일이니까 매우매우 간단하게 :)

오늘 배운 것

• 토코톡 뷰 프로젝트의 package.json에 sass-loader 같은 게 왜 들어가 있는지 알게 되었다. <template>, <script>, <style>에 lang attribute를 주려면 해당 loader의 설치가 선행되어야 한다. vue loader 공식문서에 들어가서 어떤 loader가 필요한지 확인한 후 설치해주면 된다.

• 컴포넌트를 main.js에 import하면 전역으로 사용할 수 있다.

// main.js

import Component from '@/components/Component.vue';

Vue.component('Component', Component);

• 전역으로 사용할 컴포넌트가 너무 많아서 일일이 import 하기 귀찮고 불편하면, 아래 링크를 참고하여 automatic registration을 실행하는 것도 가능하다.

• PascalCase, camelCase, snake_case에 이어 kebab-case라는 것도 있다...!?

오늘 한 일

• 어제 올린 PR이 통과(?)되고 나서 부족한 부분을 보완하는 후속 작업을 했다. url 파라미터가 변경되는 대로 바로 반영되지 않는 건 로그인 페이지뿐만 아니라 다른 페이지도 마찬가지여서 어제와 마찬가지의 방식으로 수정했다.
• 프로젝트 디렉토리 내 components 폴더에 index.ts를 생성해서 아직은 많지 않은 컴포넌트들을 배럴링 했다.
• 아무튼 첫 번째 항목을 완료해서 마음 놓고 있었더니, 거기서 건든 것 외의 다른 url 파라미터가 바뀌면 그것 또한 전혀 반영되지 않는 문제가 제보되어 급히 수정했다.
• 로그아웃을 하면 로컬스토리지에 이메일과 같은 유저 정보가 포함된 데이터들이 그대로 남아 있게 되어서, 유저 정보가 담긴 데이터는 삭제하도록 했다.
• 이메일과 전화번호의 유효성을 검사하는 정규표현식을 거듭 수정하고, 회원가입할 때 뿐만 아니라 로그인을 할 때에도 적용하도록 했다.
• 그리고 오늘도 약간의 뷰 공부를 했다.
• 승진님이 프론트엔드 환경변수 설정과 관련해서 말씀하시는 걸 들으려고 시작한 허들에서, 끝은 약간 삼천포로 빠졌지만 1시간 20분간 너무 재밌고 유익한 시간을 보냈다. 정말 여쭤보고 싶었던, 근데 언제가 좋은 타이밍인지 모르겠던 '게임회사에서도 깃을 쓰나요' 질문에 대한 대답부터 시작해서 온갖 피가 되고 살이 되는 말씀을 해주셨다. 역시 짱짱시니어님

오늘 배운 것

• Vue Router에서 path 대신 name을 사용하면, 나중에 path가 변경되더라도 일일이 찾아다니며 다 바꿀 필요 없이, router 디렉토리의 index 파일에서의 path 한 번만 바꿔주면 된다.

this.$router.push('/about') // 변경 전
this.$router.push({name: 'about'}) // 변경 후

• name과 함께 params를 넘기고, router의 index 파일 안에서 해당 route에 props: true 옵션을 주면, 그 컴포넌트 안에서 params를 그대로 props로 받아서 쓸 수 있다.

오늘 한 일

• 지난 금요일 퇴근 직후에 맞닥뜨린 문제가 있었다. 리액트에서나 뷰에서나, url 파라미터를 받아서 로컬스토리지에 저장한 다음 그걸 꺼내서 화면에 띄워야 한다. url 파라미터가 바뀌면 그 즉시 스토리지에 저장된 값이 바뀌고, 화면에도 바로 반영 되기를 바랐다. 예를 들면 사용자가 A 사이트를 통해 로그인을 시도했다가 곧바로 로그아웃을 하고 나갔는데 바로 다시 B 사이트를 통해 로그인을 시도했다면, 이 사용자가 어디서 유입된 건지에 대한 데이터가 화면에 다르게 보여져야 한다. 리액트에서는 별다른 고민 없이 작성한 코드로 바로 원하는 결과가 나왔는데, 뷰에서는 그게 되지 않았다.
• 이것저것 찾아보고 적용해봐도 보란 듯이 데이터는 따로 놀았고, 당장 너무 궁금하고 해결하고 싶었지만 금요일이니까 접어뒀었다. 그리고 월요일을 맞아 다시 꺼내보았다. 그런데 무심코 넣어 본 코드로 해결되었다!?
• 컴포넌트가 마운트 될 때마다 실행되게 하려고 url 파라미터를 로컬스토리지에 저장하는 코드를 mount() 안에 넣어뒀었는데, 그 바로 아래에 해당 데이터가 있으면 그 데이터를 this.key에 할당한다. 그리고 template에서는 key를 보여준다.

<template>
	...
    <span>{{ key }}</span>
</template>

<script>
	...
    data() {
        key: '',
    },
    mount() {
        // url 파라미터를 로컬스토리지에 저장한 후
        if (window.localStorage.key) {
            this.key = window.localStorage.key
        }
    }
   	...
</script>

• 그렇게 문제 하나를 해결한 후에 프로젝트 디렉터리에 있던 리액트 프로젝트를 통째로 뷰 파일들로 갈아치웠다. 커밋을 하려니 메시지에 적을 커밋 타입을 뭐라 해야 할지 모르겠어서 꽤 오래 고민을 했다. feat, fix, chore도 아니고, 그렇다고 modify, change도 아닌 것 같고. 결국 질문을 남겼고 동균님 말씀대로 refactor를 선택하기로 했다.
• 프로젝트 매니저로 yarn을 쓰던 리액트에서 npm을 쓰는 뷰로 바꾸면서 리드미 내용도 수정하고 안심하며 PR을 날렸는데, copy 파일들이 함께 올라가 버렸다. 첫 리뷰를 받은 후에야 실수를 알게 되었다. 대체 왜 안심했지
• 그리고 오늘은 뷰 공부를 조금 했다. 이제는 조금 익숙하게 쓰고 있던 vue cli 말고도 터미널에 vue ui 명령어를 입력하면 브라우저에서 ui를 통해 프로젝트를 관리할 수 있다는 것도 알게 되었다.
• 상현님한테서 얻은 소스 덕분에 마우스 커서에서 물방울이 생긴다. 그리고 블로그 테마 색상을 변경했다. 물론 난 파란 계열을 선호하지만 기존 색상도 괜찮다고 생각했는데 신랄하게 공격을 받아서 흑흑 조금 마음이 아프다.

오늘 배운 것

• 다양한 코드 스니펫을 제공하는 Emmet을 vue에서도 사용할 수 있다는 것도 처음 알았다. 리액트만 가능한 줄...

오늘 한 일

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

오늘 배운 것

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

오늘 한 일

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

오늘 배운 것

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