230518(목)

🎄 성장일지 4.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

🌳 (1.0)키워드
최대한 간단하게 정리, 추후에 보면서 스스로 설명
🍉 (2.0)경험 위주로
단순 정보를 전달하기보다 무엇을 배웠고 어떻게 해결했는지 짧고 간단하게 작성
❄️ (3.0)정해진 템플릿에 맞춰서
키워드, 경험 모두 좋다. 다만 매일 작성하기로 마음 먹은만큼 핵심만 간결하게 정리할 수 있게 템플릿을 작성
(3.1)230102부터 시작되는 학습에 관한 내용 추가
(3.2)230313부터 좀더 경험, 감정 위주의 내용도 담기!
🌾 (4.0)학습 키워드에서 최대한 간단한 정보 제공, 고민에서 내 경험을 자세히 적자!

🔑 오늘의 학습 키워드

OAuth

OAuth는 Open Authorization의 약자로, 인증을 위한 오픈 스탠더드 프로토콜이다. OAuth를 사용하면 웹, 앱, 데스크톱 프로그램 등 다양한 플랫폼에서 사용자의 정보를 사용할 수 있다. 흔히 우리가 어떤 서비스를 이용하기 위해 로그인할 때, 구글이나 페이스북 혹은 깃허브 등의 아이디로 로그인하는 경우가 OAuth를 사용한 것이다. 현재는 사실상 OAuth 2.0이 표준이 되었으며, OAuth 2.0은 인증과 인가를 위한 프로토콜이다.

텍스트뿐이지만 아주 간단한 예시의 흐름을 보면 아래와 같다.

0. 깃헙에 앱을 등록한다. 앱이름, 앱 url, 앱 설명, Authorization callback url을 적어준다.
1. 그러면 깃헙이 client id, client secrets를 준다.
2. 로그인 버튼을 누르면 client id, redirect url(callback url), scope를 가진 url에 get 요청을 보낸다.(이게 A 과정)
3. 그러면 이제 github id, pw로 로그인하는 창이 나오고 로그인 하면(이게 B 과정) scope에 대해서 어떤 데이터에 대한 권한을 부여하고 싶은거였는지 물어본다. 이제 이걸 수락하면
4. 깃헙이 authorization code를 브라우저에게 보내준다. http redirection을 사용하여 보내준다.(깃헙이 302 redirection으로 url에 authorization code를 담아서 보내준다.)
5. 그러면 브라우저는 위의 redirect된 url을 통해 화면이 나온다. 지금 여기까지가 위 그림에서 2번째 C까지 끝난 것(User-agent -> (C) -> Client 부분)
6. 이제 깃헙에 client id, client secrets, 받았던 authorization code를 보내야한다. 이게 D 단계이다.
7. 그러면 이제 깃헙에서 access token이 날라오게 되고
8. 이 access token을 토대로 유저의 개인 정보를 받아올 수 있는 것이다.(access token을 통해서 데이터를 받아오는 건 이제 github api의 방식에 따라서 사용하면 되는 것이다.)

추후 이고잉님의 OAuth 2.0 강의를 마저 다 듣고 정리한 글을 올리려고 한다.

API 명세

그렇게 프로젝트 시작 전에 열심히 api 명세를 맞췄지만 실제 개발할 때는 아주 작은 부분들에서 맞지 않았다. api의 key값이 살짝만 달라도 앱이 돌아가질 않게 되니… 생각보다 쉽지가 않다. 그래서 api 명세를 맞추는 것도 중요하지만, 실제 개발할 때는 api 명세를 잘 지키는 것도 중요하다는 것을 느꼈다.

브라우저의 로딩 과정 중 Composite(합성)

오늘 리액트 개발을 하면서 아주 재미있는 상황이 발생하였다. 현재 진행 중인 프로젝트는 tailwindCSS를 사용하고 있는데, 같은 버튼 컴포넌트임에도 하나는 opacity-100, 나머지 하나는 opacity-[0.64]를 적용하였다. 그런데 opacity-100이 아닌 버튼만 혼자서 마치 z-index가 제일 위에 있듯이 위치하고 있었다. 이는 브라우저의 로딩 과정 중 Composite(합성)때문이다. 합성 과정 때는 브라우저가 화면에 보여줄 요소들을 계산한다. 대표적으로 transform, opacity 등이 이 합성 과정에서 계산된다. opacity가 100이 아닌 버튼은 독자적인 쌓임 맥락을 갖기 때문에 이런 현상이 일어나게 된다.

📝 요약 및 하루 간단 회고

나중에 회사에 가서 사람들과 함께 개발할 걸 생각하니, 너무 재미있을 것 같고 즐겁다!!! 처음엔 혼자 있을 때 개발을 더 효율적으로 할 수 있다는 생각이 많았는데, 이제는 혼자 있을 때보다 사람들과 함께 개발할 때가 더 효율적이고 재밌을 것 같다. 과연 나는 상대방으로 하여금 같이 일하고 싶은 좋은 개발자인지 알 수 없지만… 그런 사람이 되도록 계속 노력하고 갈고닦는 사람이 될 것이다.

오늘의 잘한 점

• 계획한 내용들을 마무리한 점

오늘의 아쉬운 점

• 없다..! 오늘 하루도 열심히 살았다!

참고

• 생활코딩 - OAuth 2.0