지금까지 한 일(기억 나는 대로)

  • 구글 로그인은 API 변경 이후로, 가장 최신 버전을 적용하면 버튼에 커스텀 디자인을 입힐 수 없다. API 하나하나 분해(ㅋㅋㅋ)해서 입혀 보려고도 해봤으나 쉽지 않았다. 그래서 커스텀 디자인을 넣을 수 있다는 라이브러리를 찾아서 그 코드를 뜯어 보았지만 내가 라이브러리 없이 했을 때 맞닥뜨리는 문제를 똑같이 만나게 되어서 라이브러리도 별 수 없구나 하는 것을 배웠다. 물론 문제가 다른 데 있을 수도 있지만
  • 구글을 가지고 이렇게나 헤맨 것치고 페이스북 로그인은 붙이기 쉬웠다. 반나절 만에 기능을 작동시킬 수 있었고, 커스텀 디자인도 물론 페이스북의 디자인 가이드를 따르긴 해야겠지만 기술적으로는 어떤 디자인이든지(심지어는 디폴트 버튼 그 회색 그것마저도...) 적용할 수 있었다. 하지만 지난 4월쯤? 페이스북은 한 번 붙이려다가 실패를 맛본 경험이 있었는데, 그건 페이스북 API가 까다로워서라기보다는 페이스북 API는 구글과 달리 테스트조차도 무조건 https 환경에서만 가능한데, 그땐 로컬호스트를 https로 돌리는 방법을 제대로 실행하지 못했기 때문이었다. 저번에 영봉님을 통해 알게 된 caddy를 이용해서 의외로 손쉽게 이 부분을 해결하고 나니 나머지 문제는 일사천리로 해결되었다.
  • 요즘은 SSO 릴리즈 일정이 잡힌 후 개발 속도를 내고 있는 주간이어서 승진님이 만들어 두신 지라 카드 작업을 하고 있다. 그 와중에 구글 로그인과 관련해서 현지 팀과 계속해서 얘기를 할 일이 생겨서 이제까지 안 쓰던 영어를 어제부터 잔뜩 쓰려니 골이 아프다. 인도네시아어 번역이 누락된 부분이라든지, 구글 로그인 버튼 자체에 언어 설정을 적용하는 것이라든지, 어쨌든 브랜치를 하나 따서 관련된 작업을 하다가 연락이 뜸한 시점에는 또 다른 카드의 작업을 하는 식으로 진행하고 있었다.
  • 그 다른 카드의 작업이 마무리되어서 push를 하기 전에 git log를 한 번 확인해 봤는데, 브랜치를 새로 안 따고 구글 브랜치에 그대로 작업한 것을 깨달았다. 터미널에서 브랜치 이름 그렇게 봐 놓고도 몰랐다니 😞
  • 그래서 이번에 정확히 어떨 때 사용하라는 건지 와 닿지 않았던 git cherry-pick을 처음 써 보게 되었다.

오늘 배운 것

# branch A에서 branch B로 옮기고 싶다면

# branch A에서 옮기고 싶은 commit의 hash를 적어둔다
git log

# 그리고 branch B로 바꾼다
git checkout [branch B]

# commit이 하나인 경우
git cherry-pick [hash]
# commit이 복수인 경우
git cherry-pick [hash0] [hash1] [hash2]
# 어느 범위의 commit을 통째로 옮기고 싶은 경우
git cherry-pick [older hash]^..[newer hash]

git commit

오늘 한 일

  • 승진님과 함께 태초마을에서 migration 당했다. 나도 몰랐던 강제 이주! 본격적으로 온보딩 팀과 함께하게 되었다.
  • 오늘은 어쩌다 보니 좀 일찍 일어나서 어제 승진님이 제안(?)하신 페이스북 소셜로그인 기능 붙이기를 시작했다. 처음에는 잘 되나 싶었는데 몇 번 렌더링 시키고 나니 http 환경에서는 버튼을 사용할 수 없다는 오류가 떴다. ???아니 어떡하라고
  • 오늘 스크럼에서 이 오류 내용과 내가 생각한 해결책(devcert)를 말씀드리니 영봉님, 승규님이 로컬에서 https로 띄우는 방법을 각각 알려주셨다. caddy와 mkcert였는데 caddy는 리버스 프록시를 이용해 http를 https로 돌려주는 반면 mkcert는 로컬용 인증서를 발급해서 아예 https로 띄워버리는 방식이었다.
  • 둘 다 사용해봐야지 하는 오만한 생각으로 우선 caddy부터 시도해봤으나 생각했던 것만큼 잘 되지 않아서 mkcert로 옮겨갔다. mkcert는 용례가 많아서 참고 자료도 많았다. 우리 sso 프로젝트 자체가 프론트, 서버, 클라이언트를 동시에 띄워놔야 로컬에서 개발이 가능한 상황이라 아무래도 mkcert 패키지 자체를 노드로 깔면 좋을 것 같았지만, 다들 brew로 설치를 하고 있었다. 여기서부터 쎄했지만 멍청하게도 굴하지 않았다.
  • npm install mkcert 하고 나서 create-ca(certificate authority)와 create-cert 명령어로 인증서 발급을 완료한 후 https 해당 포트로 접속해봐도 err_cert_authority_invalid 오류가 났다. http는 접속 자체가 안되고.. 찾아보면 사람마다 해결 방식이 제각각인데 이때도 사람들은 이미 npm이 아니라 brew로 설치한 상황이었다. 결국 마음을 바꿔먹고 방향을 전환했다. brew install mkcert 하면 애초에 mkcert -install 명령어를 통해서 ca를 설정할 수 있고, mkcert localhost 127.0.0.1 이런 식으로 명령어를 한 번만 입력하면 알아서 .pem 파일이 생성됐다. npm으로 설치하면 이것조차 .pem이 아니라 .key, .cert 이런 식이다
  • 만약 내가 프론트엔드를 로컬에서 https로 띄워서 개발한다고 하면 서버나 클라이언트도 url 때문에 영향을 받지 않을 수가 없을 텐데 아무래도 이걸 package.json scripts에 포함시키는 게 나을 것 같아서 scripts 안에 brew install mkcert ... 도 넣어놨다. 근데 이건 진짜 쎄하다.. 괜찮은 건지 내일 여쭤봐야지
  • 아 그런데 또 슬픈 포인트: 구글 로그인 버튼과 마찬가지로 회원가입 페이지 갔다 돌아오면 버튼이 없어진다..ㅠㅠ 구글 버튼은 요행히도 살려냈지만 페이스북 버튼만큼은 같은 방식이 안 먹힌다 엉엉
  • 와 오늘 한 거 이거밖에 없어ㅠㅠㅠㅠㅠㅠㅠㅠㅠ세상에나

오늘 배운 것

  • caddy: 문서는 정말 친절하고 직관적인데 왜 나는 안되지...
 

Caddy 2 - The Ultimate Server with Automatic HTTPS

Caddy is a powerful, enterprise-ready, open source web server with automatic HTTPS written in Go

caddyserver.com

  • mkcert 깃헙: 아니.. advanced topics에 나온 옵션들은 어떻게 해야 먹일 수 있는 거야ㅠㅠ
 

GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted development certificates with any names you'd lik

A simple zero-config tool to make locally trusted development certificates with any names you'd like. - GitHub - FiloSottile/mkcert: A simple zero-config tool to make locally trusted developmen...

github.com

  • mkcert npm: 문서 간결하고 좋은데 어쨌든 적용 실패였따
 

mkcert

Create Self Signed Development Certificates. Latest version: 1.5.0, last published: 2 months ago. Start using mkcert in your project by running `npm i mkcert`. There are 27 other projects in the npm registry using mkcert.

www.npmjs.com

  • mkcert는 brew install 하자^^

+ Recent posts