OAuth는 인터넷 사용자들이 비밀번호를 제공하지 않고 다른 웹사이트 상의 자신들의 정보에 대해 웹사이트나 애플리케이션의 접근 권한을 부여할 수 있는 공통적인 수단으로서 사용되는, 접근 위임을 위한 개방형 표준이다. (위키백과) 이 글은 RFC 6749 OAuth 2.0 표준을 엄격히 따라 작성합니다. OAuth 2.0 먼저 OAuth 2.0 동작 방식에 대해 살펴봅시다. 우리가 특정 서비스에서 회원가입을 해야 한다고 생각해봅시다. 아이디, 비밀번호 이메일 인증 등등 절대 가볍게 할 수 있는 과정은 아닙니다. 회원 가입 과정에서 이탈하는 유저도 많죠. 이때 OAuth를 이용하면 고객과 서비스 제공자 모두 이점을 얻을 수 있습니다. 사용자는 ID, Password를 처음보는 서비스에 넘겨주지 않아도 됨 서비스는 관리하기 부답스럽고 방대할 수 있는 사용자의 ID, Password 정보를 보관하고 있지 않아도 됨, OAuth 2.0 참여자 OAuth 동작에 관여하는 참여자는 크게 세 가…

웹 개발을 하다보면 자주 CORS 에러를 만날 수 있습니다. 이번에야 말로 CORS가 무엇인지 확실히 알아보고 왜 있어야 하는지 알아봅시다. CORS가 나를 괴롭힌다 로컬에서 개발하고 있던 중 서버에 http 요청을 했을 때 위와 같은 에러를 보게 되었습니다. ‘Access-Control-Allow-Origin’ header is present on the requested resource. 요컨데 클라이언트의 주소는 localhost:5173인데 api요청 주소는 localhost:8080이기 때문에 origin이 다르다. Access-Control-Allow-Origin 헤더가 따로 설정되어 있지 않기 때문에 이 요청은 내가 막았다! 랍니다.. 기존 해결법 저는 제대로 이해도 안한채 그냥 구글에 널린 해결책을 사용했습니다. create-react-app으로 만든 프로젝트에서 package.json에 proxy설정하여 클라이언트 주소를 api서버 주소로 바꿔치기 한다. 만약 a…

Vite라는 요즘 핫한 빌드 도구를 프로젝트에 적용해보고 싶었습니다. 생각보다 간편하게 바로 적용할 수 있더군요! https://vitejs-kr.github.io/guide/ 다음과 같은 명령어로 바로 프로젝트를 생성할 수 있습니다. 의존성 설치 과정이 없어서 빠르게 프로젝트를 생성해줍니다. 또한 그렇기 때문에 pnpm이나 yarn등 원하는 패키지 매니저로 관리할 수 있겠습니다. 원하는 템플릿 선택하시면 되겠습니다. 버전 4.3.1 기준 생성 직후 package.json입니다. vite와 @vitejs/plugin-react-swc 라는 의존성이 눈에 띕니다. vite.config.ts config 파일이 ts로 되어있어 Definition을 찾아보며 작성할 수 있어 좋은 것 같습니다. swc를 사용하는 플러그인이 적용된 것을 볼 수 있습니다. build시간이 말도안되게 빠릅니다. 이제 create-react-app은 놔줘야 할 떄가 된 것 같습니다 그리고 CRA에 대해 다…

쿠키와 세션 자주 들었는데 이번 기회로 명확히 알아봅시다. 먼저 이 기술이 등장한 배경을 이해해야 합니다. HTTP 프로토콜은 stateless(무상태), connectionless(비연결지향) 특성을 가지고 있기 떄문에 클라이언트의 요청에 대해 어떤 클라이언트인지 식별할 수 없습니다. Stateless: 커넥션이 종료되는 순간 상태정보를 유지하지 않는 특성 Connectionless: 클라이언트가 요청을 보내고 서버의 응답을 주면 연결을 끊는다. 초기에는 클라이언트의 IP 주소를 이용하여 식별하려 했으나 몇개의 문제점이 존재했습니다. 여러 사용자가 한 대의 컴퓨터를 사용한다면 하나의 IP로 어떤 사용자인지 식별할 수 없다. 인터넷 서비스 제공자(ISP)는 사용자가 로그인하면 동적으로 IP 주소를 할당한다. 매번 다른 주소를 받으므로 식별할 수 없다. 네트워크 주소 변환(Network Address Translation, NAT) 방화벽을 통해 인터넷을 사용할 경우, NAT 장비는…