D'story

오늘 한 일

• 오늘 아침은 어제 업무 설명을 들은 팀의 스크럼에 참여했다. 줌이나 구글밋이 아닌 미로에서 스크럼 보드를 보면서 바로 진행하는 방식이었는데, 접속부터가 잘 안 돼서 애를 먹었다. 결국 크롬을 버리고 사파리로 갈아탔더니 극적으로 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로 바꿔도 무방하다.

오늘 한 일

• 오늘도 계속해서 기본 환경 설정을 진행했다. (터미널에 oh-my-zsh, agnoster theme 적용하기 포함)
• 터미널에 vi 명령어를 입력하면 터미널에서 바로 에디터를 사용할 수 있다는 건 알고는 있었다. 하지만 지금까지는 에디터를 사용해야 할 때 vscode로 해당 파일을 열어서 편집했으므로 구체적으로 vi 명령어로 어떻게 할 수 있다는 건지는 몰랐다. 오늘 온보딩 가이드를 따라가다가 vscode로는 열기가 어려워 vi 명령어를 통해 처음으로 vim 에디터를 사용해 보았다.
• 그리고 아주아주 기본적일지언정 말로만 듣던 바로 그 Docker를 실행해보게 되었다. 프론트 서버 딱 하나만 localhost:3000 포트로 돌려본 나에게, Docker로 서버와 DB를 한 번에 돌리는 신기하고 놀라운 일이 일어났다. 심지어 고래 너무 귀여워 윽
• 그리고 또 오늘은 셀러들의 편의 증진 및 옴니채널에 주력하는 팀의 업무와 구성에 대한 설명을 들었다. 정말 너무 상세하고 친절하게 설명해주신 PO님, 설명만 하셨을 뿐인데 너무 멋지셨다. 질문 있냐고 하셨는데, 제 블로그니까 감히 뒤늦게 고백하는 거지만, 속으로 감탄하느라 바빠서 질문거리 생각도 못했어요..

오늘 배운 것

• oh-my-zsh는 맥의 기본 터미널에 바로 적용해줄 수도 있고, iTerm2라는 터미널을 설치한 후 적용해줄 수도 있다. 나는 오늘 회사에서는 iTerm2를 설치해서 적용했지만 어떤 링크를 참고해서 했는지를 다시 찾지 못해서, 내 개인 맥북에 iTerm2 없이 기본 터미널에 적용했을 때 참고한 링크를 가져와 봤다. 반드시 적용해야 하는 건 아니지만 한번 적용하고 나면 다시는 내 마음이 이전으로는 돌아갈 수 없다. 갑자기 생각났는데, 누구라고 말은 안 하겠지만 누군가에게 공유했을 때 욕과 칭찬을 동시에 들었다. 왜 이제 알려줬냐, 너무 마음에 든다

• 터미널에서 vi 명령어로 에디터를 실행했다면, 편집 모드로 들어가기 위해서는 i 또는 o 등등 명령어를 다시 한 번 입력해줘야 한다. 편집이 완료되면 저장 후 종료할 때는 :wq 입력 후 enter.

• Docker가 도대체 뭐냐, 한 마디로 정의하고 싶다 할 때 참고할 만한 AWS의 설명이다.

• Docker로 실행할 여러 개의 컨테이너를 docker-compose.yml 파일 안에 정의하면, 작성 후 docker compose up 명령어로 실행할 수 있다. 해당 파일의 작성 포맷은 아래 공식문서를 참고하면 된다.

• 아, 그리고 로지텍 마우스 사용하다가 마우스 휠이 갑자기 안 먹는 경우 배터리가 얼마 안 남아서 그런 게 아니라면 맥의 Activity Monitor app 실행 후 Logitech Options Daemon 프로세스 종료하고 스크롤 되는지 테스트해보기.

오늘 한 일

• 여전히 새로 나온 디자인대로 페이지를 갈아 엎는 중이다. 드롭다운 메뉴 같은 것들이 참 다양한 형태로 여기저기에 만들어지고, 태블릿에서는 각각 따로 나눠진 페이지였던 것들이 모바일에서는 하나로 붙어 나오는 등 갖가지 변화무쌍함을 온몸으로 체감하고 있다.
• 헤매다 길 잃기 딱 좋은 때로는 구면인데 초면 같은 나의 코드 정리도 좀 해야 되는데 내 손이 느린 건지 할 게 많은 건지 그럴 틈이 안 난다.

오늘 배운 것

• 오늘은 쉬어가는 의미(이유는 없다)에서 변수명 짓기 사이트 링크를 올린다. 회사 서버 개발자 분이 알려주셨다. 뭐 무조건 검색해서 확인해보고 이대로 변수명을 지어야 한다기보다는, 가끔 단어가 생각이 안 나거나 이런 변수명을 붙여서 이 뜻을 나타내고자 하는 게 괜찮은가 싶을 때 아니면 심심할 때 참고하기 좋다. 검색해보고도 여기서 알려주는 단어를 안 쓸 때도 있다ㅋㅋ 히스토리를 보니 로그가 안 남겨진 지 1년 정도 됐는데 아직 유지보수가 이루어지고 있는 건지는 잘 모르겠다.

오늘 한 일

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

오늘 배운 것

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

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

오늘 한 일

• 지금은 아니고 예전에, 동영상과 문서 파일을 업로드하는 기능을 한창 작업하고 있을 때였다. 파일을 올리면 화면에 첨부한 파일 리스트가 생성되고 그 리스트에서 파일을 지울 수가 있었는데, 파일 A를 올렸다가 지우고 다시 같은 파일을 올리려고 하면 먹통이 되곤 했다.
• 사용자가 어쩌다 파일 하나를 올리고 실수로 지워버려서 다시 올리려고 한다면? 파일 A가 재차 첨부되지 않으므로, 임의로 파일 B를 첨부했다가 그 뒤에 파일 A를 첨부하고, 애초에 필요가 없는 파일 B를 다시 지워야 한다. 수고롭다...
• onChange 이벤트를 통해 첨부된 파일을 감지하는데, 말 그대로 onChange이기 때문에 기존 상태와 다른 데이터가 들어가야지만 이벤트가 실행된다. 파일 A가 들어갔는데, 다시 똑같은 파일 A가 들어간다면 변화가 없으므로 아무런 일도 일어나지 않는다.

오늘 배운 것

• onChange가 실행될 때마다 event.target.value에 빈 값을 주면 다음 순서로 똑같은 파일이 들어와도 변화를 감지할 수 있게 된다.

오늘 한 일

• 회사 웹사이트 디자인이 다시 한 번 대변동을 일으켰다. 이번엔 싹 다 갈아엎는 수준까지는 아니어도, 세세한 부분까지 많은 변화가 있어서 하나하나 체크하면서 작업하려니 여간 수고롭지가 않다.
• 형태는 똑같은 이미지인데 색상이 서로 묘하게 달리 적용된 것들도 꽤 있었다. 똑같은 알파벳으로 된 단어가 여기서는 옅은 연두색인데, 저기서는 좀 진한 초록색인 식. 일일이 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' }} />
  )

오늘 배운 것

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

오늘 한 일

• 출근해서 맞닥뜨린 가장 첫 이슈였다. 댓글을 삭제하기 위해 서버로 DELETE 요청을 보내는데, 분명 형식에 맞춰 보냈는데도 왜인지 자꾸만 400 에러가 뜨고 오류의 원인은 쉽게 찾아지지가 않았다.
• 400이 뜨는 만큼 내가 뭔가 잘못한 것 같기는 한데 명확한 에러 메시지도, 가늠해 볼만한 단서도 없어서 일단 구글링을 시작했다.
• 찾아보니 DELETE에 request body를 보내도 되느냐를 가지고 제각기 말들이 많았다. 아니 근데 나도 body 보내는데...!?
• 이것과 관련한 문제가 맞을 것 같은 예감이 들었고, 그러던 중 스택오버플로우에서 해결책을 찾았다.

오늘 배운 것

• request body를 data라는 키를 붙인 객체로 만든다. {key: value} 이었다면 {data: {key: value}} 이런 식으로. 단순히 이걸로 해결된다니...