D'story

오늘 한 일

• 지난 금요일 퇴근 직후에 맞닥뜨린 문제가 있었다. 리액트에서나 뷰에서나, 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에서도 사용할 수 있다는 것도 처음 알았다. 리액트만 가능한 줄...

오늘 한 일

• 아침 스크럼이 끝났을 때를 적당히 노리다가 케이님과의 허들 타임에서 어제까지 온갖 종류의 에러를 만난, 변명 아닌 변명을 구구절절하게 풀었다. 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(인가): 식별한 유저에게 적절한 권한을 부여하는 과정