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에서도 사용할 수 있다는 것도 처음 알았다. 리액트만 가능한 줄...

오늘 한 일

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

오늘 배운 것

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

오늘 한 일

• 회사에 이직으로 인한 퇴사 통보를 했다. 물론 그게 지금 당장인 건 아니지만, 나는 최소 한 달 전에는 알리는 게 도리라고 생각했다. 당연히 빈 자리에 대한 채용도 있어야겠고, 팀 내에서 업무 분장도 달라질 수 있으니 말이다. 떠나는 입장이어도 내가 회사의 앞길에 방해가 되는 일은 최대한 일어나지 않았으면 했다.
• 그래서 위와 같은 이유로, 사실 새 회사에 출근하기로 한 날이 지금으로부터 한 달이 채 남지 않아서(이십 몇 일..?) 말씀 드리기 전부터 살짝 죄책감이 들었다. 합격 연락을 받고 나서 최대한 바로 알리는 거였지만 어쨌든 그랬다.
• 그랬는데 이사님은 '시간을 두고 일찍 말해줘서 고맙다'고 하셨다. 마음이 조금은 가벼워졌다.

오늘 배운 것

• 자주 사용하는 리액트 useEffect 훅은 화면이 그려진 후에 실행된다. 그러므로 경우에 따라서는 사용자 경험을 저해하는 일이 생길 수 있다. 그럴 땐 useLayoutEffect를 사용하면 화면이 다 그려지기 전에 실행할 수 있다.

• 다만 공식문서에서는 우선 useEffect를 사용하고, 그걸로 인해 문제가 생기는 경우에만 useLayoutEffect를 사용하기를 권장하고 있다.

오늘 한 일

• 회사 웹사이트 디자인이 다시 한 번 대변동을 일으켰다. 이번엔 싹 다 갈아엎는 수준까지는 아니어도, 세세한 부분까지 많은 변화가 있어서 하나하나 체크하면서 작업하려니 여간 수고롭지가 않다.
• 형태는 똑같은 이미지인데 색상이 서로 묘하게 달리 적용된 것들도 꽤 있었다. 똑같은 알파벳으로 된 단어가 여기서는 옅은 연두색인데, 저기서는 좀 진한 초록색인 식. 일일이 svg로 저장하며 이미지 파일이 늘어나는 현상에 환멸을 느끼려던 찰나, 또 우연한 기회에 유용한 링크를 찾아냈다.
• 방법인즉슨 이렇다. 해당 svg 파일을 열어서 fill='none'이나 fill='#000000' 같이 색상 코드가 들어간 부분을 fill='current'로 변경해준다.
• 그리고 아래처럼 임포트하면 svg 파일일지라도 리액트 컴포넌트로서 가져와서 보통의 컴포넌트처럼 사용할 수 있다. 이렇게 가져온 컴포넌트에 fill 속성을 원하는 색상 코드로 넣어준다. 그러면 내가 원하는 색을 넣은 이미지로 바뀐다. 또, 마찬가지로 컴포넌트이기 때문에 일반적인 방식으로 style 속성을 넣으면 CSS의 인라인 적용도 가능하다.

import { ReactComponent as Blahblah } from '../your_directory/blahblah.svg';

...

  return (
      <Blahblah fill='#ffffff' style={{ margin: '10px' }} />
  )

오늘 배운 것

• 어쩌다 찾게 됐는지는 기억이 잘 나지 않는다. 뭔가 다른 걸 찾으려고 시작한 구글링이었던 것 같은데 제목에 끌려서 그만..

오늘까지 한 일

• 점점 TIL 쓰는 간격이 길어진다..ㅠㅠ연말 업데이트를 앞두고 퇴근 시간이 점점 늦어지는 와중에 체력이 받쳐주지 못하는 관계로 TIL 쓰는 걸 자꾸 미루다 보니 이렇게 되기에 이르렀다. 일하면서 찾아놓은 귀중한 링크들만 쌓여가고 풀지를 못하고 있다.. 그러니까 저질체력을 벗어나게 운동을 하자
• 12월 업데이트를 제때 하기 위해 매일같이 야근을 하면서, 최근에는 기본 시스템 팝업창을 쓰지 않기 위한 커스텀 모달창을 제작했다. 모달을 띄워야 하는 페이지라면 어디에서든지 사용해야 하는 컴포넌트가 되므로, 그때그때 다른 속성들을 넘기기 위해 이런저런 props를 미리 정의해보았다. 그러는 과정에서 다른 모달 제작 사례들을 찾아봤고, props의 타입을 체크하는 방법을 리액트 공식문서를 통해 알게 되었다...! 공식문서 절대 놓지 말자
• props의 타입을 미리 정해놓고 유효성 검사를 할 수 있게 되는데, 그렇게 하면 모달 컴포넌트에 props를 넘길 때 마치 외부 패키지를 갖다 쓰는 것처럼 vscode에서 알아서 미리 정의된 타입을 알려주는 툴팁을 띄운다. 와 뭐야 감동

오늘 그때 배운 것

• 역시 공식문서! 두 번 보고 세 번 봅시다ㅠㅠ

• 원리는 공식문서를 참고하되 이제는 내장함수가 아닌 패키지로 옮겨졌다고 하니 npm 링크도 함께 첨부합니다.