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 장비는…

프로젝트 설계 스프링에 관심이 좀 있었는데 토이 프로젝트를 하면서 사용해 보기로 했습니다. 기능 종류 도메인 uri method body response 투두목록 조회 Todo /todo GET {tags:Tag[], start:Date, end:Date} Todo[] 투두 추가 Todo /todo POST Todo Todo 투두 수정 Todo /todo/:id PATCH Todo Todo 투두 토글 Todo /todo/toggle:id PATCH null Todo 투두 삭제 Todo /todo/:id DELETE null null 프로젝트 구조 Spring boot 사용, version 2.7.5 jpa, db는 mysql 8버전 사용 종속성 application.properties 개발 Domain 정의 인증도 없는 간단한 투두리스트 프로젝트이기 때문에 도메인은 Todo 하나 뿐입니다. 먼저 Entity를 작성해주었습니다. Repository JPA의 repository를 정의…

1-1. 변수 1-1. 변수란 무엇인가? 왜 필요한가? 는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 다음과 같은 자바스크립트 코드를 살펴보자 자바스크립트 엔진은 위 코드를 평가(evaluation)하기 위해 10, 20, + 라는 기호(리터럴literal과 연산자operator)의 의미를 알고 있어야 하며, 10 + 20이라는 표현식(expression)의 의미도 해석(파싱parsing)할 수 있어야 한다. 자바스크립트 엔진이 + 연산을 수행하기 위해 먼저 피연산자(operand) 10, 20을 기억해야 한다. 컴퓨터는 이를 메모리에 저장하고 읽는다. CPU는 메모리에 있는 피연산자를 읽어 + 연산을 수행한 뒤 30이라는 값을 다른 메모리 공간에 저장한다. 하지만 이대로는 30이라는 메모리 주소에 직접 접근하는 것 말고는 값을 재사용할 수 없다. 자바스크립트는 개발자가 메모리에 직접 접근하도록 허용하지 않으므로 …

이 책은 Michael L. Scott - Programming Language Pragmatics을 번역 정리한 글입니다. 1. Introduction 최초의 전자 컴퓨터는 거대한 기계로 여러 개의 방을 가득 채우고, 공장만큼 전기를 소비했습니다. 1940년대에 수백만 달러의 비용이 들 정도였죠. 이 기계를 사용한 프로그래머들은 기계어로 프로그래밍 했습니다. 기계어는 프로세스를 직접 제어하여 적절한 시간에 데이터를 한 장소에서 다른 곳으로 이동시키는 일련의 비트입니다. 이정도의 상세 수준에서 프로그램을 지정하는 것은 매우 지루한 작업입니다. 다음 프로그램은 GCD 알고리즘을 x86머신의 기계어로 작성한 것입니다. 사람들이 더 큰 프로그램을 쓰기 시작하면서, 실수할 확률이 적은 표기법이 필요했습니다. 는 연산이 니모닉 약어로 표현될 수 있도록 발명되었습니다. 당사의 GCD 프로그램은 x86 어셈블리어로 다음과 같습니다. 어셈블리어는 원래 니모닉과 기계어 명령어 사이의 일대일 대응으…

개요 타입스크립트란 무엇인가. 타입스크립트는 자바스크립트와 어떤 관계인가 타입스크립트의 타입들은 null이 가능한가, any type에서는 어떨까 덕 타이핑이 가능할까. 타입스크립트의 특징 타입스크립트는 인터프리터로 실행되지 않으며 저수준 언어로 컴파일되는 것도 아닙니다. 타입스크립트는 또다른 고수준 언어인 자바스크립트로 컴파일되며, 실행 역시 자바스크립트로 이루어집니다. Item 1. 타입스크립트와 자바스크립트의 관계 이해 Typescript는 Javascript의 superset이다. 자바스크립트 파일은 js, jsx를 쓰는 반면 타입스크립트 파일은 ts, tsx를 씁니다. 타입스크립트는 자바스크립트를 포함하기 때문에 main.js를 main.ts로 바꾼다고 해도 달라지는 것은 없습니다. 따라서 기존 코드를 그대로 유지하면서 일부분에만 타입스크립트를 적용할 수 있습니다. 타입스크립트의 타입 체커는 에러 핸들링에 유용합니다. city 변수가 문자열이라는 것을 알려주지 않아도 타입…

안녕하세요. 이번 글에선 비트마스크의 개념과 사용법, 그리고 간단한 예제를 알아보도록 하겠습니다. 시작하기 전에 비트마스크의 개념을 이해하기 위해서 비트의 표현법과 비트 연산, 보수연산 등을 알면 좋습니다. 1. 비트마스크란? 현대의 모든 CPU는 이진수를 이용해 모든 자료를 표현합니다. 따라서 컴퓨터들은 이진법과 관련된 연산들을 아주 빠르게 할 수 있습니다. 이와 같은 특성을 이용해 이진수 표현을 자료구조(특히 집합)로 쓰는 기법을 비트마스크(bitmask)라고 합니다. 엄밀히 말하면 비트마스크는 자료구조의 한 종류라기보단 이진수 표현을 이용해 집합을 표현하는 하나의 테크닉이라고 할 수 있습니다. 2. 비트마스크를 쓰면 좋은 점 (1) 빠른 수행시간 : 비트마스크 연산은 O(1)에 구현되는 것이 많기 때문에, 적절히 사용 할 경우 다른 자료구조를 사용하는 것보다 훨씬 빨리 동작합니다. (2) 간결한 코드 : 다양한 집합 연산들을 반목문등을 쓰지 않고 비트 연산의 특성을 이용해 한…

평소 공부하며 깨달은 내용과 프로젝트를 하며 겪는 문제와 해결방법을 정리하고 싶어 블로그를 개설하게 됐습니다. 이 블로그는 Gatsby프레임워크로 개발되었으며 zoomkoding-gatsby-blog테마를 기반으로 커스텀 되었습니다. 첫 포스팅으로 테마를 이용해 블로그를 개설하는 방법을 작성해보겠습니다. 1. gatsby로 블로그를 만든 이유 가끔 개발을 하다보면 머리가 깨질 것 같이 아프곤 합니다. 뇌가 새로운 정보를 받아들이길 거부하는 느낌.. 뇌의 용량은 한정적이므로.. 습득한 정보를 압축하고 정리할 필요가 있었습니다. 처음엔 Jekyll을 사용하여 블로그를 만들었습니다. 사실 때깔이 뭐가 중요하겠냐만.. 저는 제 마음대로 블로그를 커스텀해보고 싶었습니다. 하지만 Jekyll은 루비로 작성되어 커스텀하기가 어려웠습니다. 그러다 React 기반의 정적 페이지 개발 프레임워크를 발견했습니다. 평소 리액트를 주력으로 사용하고 있기 때문에 바로 만들어 보기로 했습니다. 정적 웹사이트…