전체 글

깃허브 소셜 로그인 구현하기

GitHub 로그인, 회원가입 구현하기 깃헙 소셜 로그인은 OAuth 표준을 따른다. 다른 소셜 로긴도 OAuth 를 따르니 비슷하게 구현이 가능하다. 이 포스팅에 쓰인 코드는 노마드코더-캐럿마켓 클론코딩 에서 배운 코드를 참고했다. 단, 비슷하긴 하나, 완전히 동일하지 않고 몇몇 부분이 다르다. GitHub 로그인, 회원가입 절차 살펴보기 시퀀스 다이어그램으로 살펴보기 sequenceDiagram participant User as 사용자 participant App as 애플리케이션 participant Google as 구글 서버 User->>App: 구글 로그인 요청 App->>Google: 인증 코드 요청 (client_id, redirect_uri, scope) Google->>User: 로그..

아이언 세션 (Iron session) 이란 무엇인가? (쉬운 설명과 보안 관련 생각해볼점)

iron session 이란? 안전하고 무상태인 쿠키 기반의 세션 라이브러리 더 쉬운 말로 설명하면? 사용자가 입력한 암호를 통해 쿠키값을 암호화하고 복호화해주는 것이다. 쿠키는 원래 클라이언트에게 공개되고 클라이언트가 임의로 변경할 수 있는 값인데 이에 보안을 주기 위해서 암호화/복호화를 하는 것이다. 작동 방식 세션 데이터가 서명되고 암호화된 쿠키에 저장된다. 서버 코드에서 네트워크가 필요 없는 상태 비저장 방식으로 디코딩된다. Ruby on Rails 에서 쓰는 것과 동일한 기술이다. 특징 서버리스 환경에 적합하다. 세션 데이터를 쿠키에 저장하여 별도의 서버측 저장소 필요 없음 사용자 패스워드가 없어도 안전하게 암호화가 가능하다. 미들웨어 하나로 쉽게 세션 기능을 추가할 수 있어서 러닝커브가 작다...

Node.js 프로젝트에서 Husky 와 commitlint 를 이용하여 커밋 메세지 포맷 제한하기

Husky 와 commitlint 를 이용하여 커밋 메세지 포맷 제한하기 프로세스 Husky 설치: Husky 를 설치한다. Husky 세팅: 필요한 커밋 전 명령어 및 커밋 검증 명령어 등을 세팅한다. 테스트: 세팅이 잘 되었는지 테스트한다. Husky 설치 공식문서 중 get-started 에 나와있는대로 설치 후 초기화를 한다. 설치 명령어 npm install --save-dev husky 초기화 명령어 npx husky init Husky 세팅 pre-commit pre-commit 에서는 커밋 전 실행할 명령어에 대해 세팅할 수 있다. 기본으로는 npm test 가 세팅되어 있다. npm test commit-msg 커밋 메세지를 검증할 룰을 세팅할 수 있다. 난 udacity rules 를 ..

도커 컴포즈 (Docker Compose) 란? 도커 컴포즈 사용법

도커 컴포즈란? 보통 개발할 때 로컬 환경이나 개발 환경에서 가상의 DB를 띄우기 위해서 많이 사용한다. 도커 컴포즈는 단일 호스트 환경에서 동작하고, 고가용성도 지원하지 않기 때문에 운영에서는 비슷한 역할을 하지만 고가용성을 지원하는 쿠버네티스를 사용한다. 도커 컴포즈 이용하기 (Node.js 기준) 프로젝트 메인 디렉토리에 docker-compose.yaml 파일을 생성한다. 도커 컴포즈 문법에 맞게 docker-compose.yaml 파일 작성 Docker Compose 공식문서 에 작성법이 있긴 한데, 예제를 보거나 GPT 를 이용하는 것이 빠를 것 같다. Postgres Yaml 파일 작성 방식은 Postgres 도커 페이지 에서 참고할 수있다. services: # 자동완성됨 postgres:..

브라우저 History API 를 활용하는 방법

History API 로 작업하기 (History API 활용 방법) History API 를 이용하면, 브라우저의 세션 기록과 상호작용할 수 있다. 세션 기록이란, 브라우저에서 사용자가 방문했던 페이지를 기록한 것을 말한다. 일반 사용자는 앞으로 가기, 뒤로 가기 버튼을 통해 세션 기록을 이용한다. History API 제공 메서드 페이지를 이동하는 메서드는 직관적으로 이해가 쉬우나, 기록된 페이지를 수정하는 메서드들은 잘 활용하기 위해 약간의 학습이 필요하다. 이 API 의 주요 목적은 fetch() 같은 메서드를 통해 업데이트 되는 SPA(Single Page Application)와 같은 웹사이트를 지원하기 위한 것이다. 기록된 페이지로 이동 History.back() History.forward..

History API 란? (간단 정리)

History API 란? History 인터페이스는 브라우저의 세션 기록, 현재 페이지를 불러온 탭 혹은 프레임의 방문기록을 조작할 수 있는 방법을 제공한다. 브라우저에서 뒤로가기와 같은 액션을 수행했을 때 방문하는 페이지를 조작하는 것이다. history 는 싱글톤 인스턴스로 글로벌에 1개만 존재한다. 인스턴스 프로퍼티 History 인터페이스는 어떤 속성도 상속하지 않는다. length: 세션 기록에 몇개의 페이지가 있는지의 길이이다. scrollRestoration: 해당 세션으로 갔을 때 스크롤까지 복원할지를 설정한다. auto 혹은 manual 이 있다. state: 히스토리 스택의 맨 위에 있는 상태를 나타내는 값을 반환한다. pushState() 혹은 replaceState() 를 사용할 ..

브라우저 라우팅과 해시 라우팅의 차이 (Browser Routing 과 Hash Routing 의 차이)

브라우저 라우터 (Browser Router) 모던 웹브라우저에서 제공하는 히스토리 API 를 활용하여 히스토리 스택을 조작한다. 히스토리 스택에는 브라우저 탭이나 창에서 방문한 URL 이 들어있다. 해시 라우팅과 비교하면 해시(#)가 없는 깔끔한 URL 을 사용할 수 있다. 장점 깔끔한 URL: URL 이 깔끔해진다. SEO 친화적: URL 이 깔끔하여 SEO 에 친화적이다. SSR 지원: 서버가 미리 렌더링된 초기 페이지를 반환할 수 있어서 SEO 를 용이하게 하고 처음 방문하는 방문자의 로딩 시간을 개선한다. 단점 서버 구성: 서버에서 모든 요청을 index.html 로 라우팅되도록 해야 SPA 라우팅이 올바른 뷰를 렌더링 할 수 있다. 브라우저 호환성: 일부 구형 브라우저는 히스토리 API 를 지..

MVC 패턴이란? 짧게 설명하기 / (Model, View, Controller 패턴이란?)

MVC 패턴이란? (Model, View, Controller 패턴이란?) 화면 개발에서 많이 쓰이는 디자인 패턴이다. MVC 는 각각 Model, View, Controller 를 의미한다. 모델 (Model) 이란? 앱의 데이터를 저장하고 관리하는 역할 데이터를 관리하는 역할이다. API, DB, 로컬 저장소 등에 있는 데이터를 가져와 앱에서 사용할 수 있는 모양으로 만든다. 데이터를 추가하거나 수정하거나 삭제할 수 있는 방법도 알고 있다. 뷰 (View) 란? 사용자에게 보여지는 화면을 구성하고 업데이트하는 역할 화면을 관리하는 역할이다. HTML, CSS, JS 를 포함한다. 데이터를 받아 화면에 UI 를 렌더링한다. 이벤트가 발생했음을 감지하고 컨트롤러에 전달한다. 컨트롤러 (Controller..

Nest.js 웹소켓 (WebSockets) 이란? + 사용법

웹소켓 게이트웨이 웹소켓 게이트웨이란, 웹소켓에서 REST Controller 와 비슷한 역할을 해주는 것이라고 보면 된다. 단, 진입점이 단순히 엔드포인트가 아니라 이벤트(namespace)이며, 뒤에 추가 path 가 있는 게 아니라 추가 event 가 더 있는 것으로 보면 된다. 웹소켓에서 엔드포인트는 단순히 처음 connection 을 맺을 때 한번만 쓰인다. @WebSocketGateway() 데코레이터를 단 클래스이다. 게이트웨이는 플랫폼에 구애받지 않으므로 어댑터가 생성되면 모든 WebSockets 라이브러리와 호환된다. 기본 지원은 socket.io 와 ws 이다. 의존성 설치 $ npm i --save @nestjs/websockets @nestjs/platform-socket.io 기본..

자바스크립트의 Socket.io 라이브러리란? (웹소켓 통신 라이브러리)

개요 WebSocket 프로토콜을 사용해서 만든 양방향 통신이다. 웹에서 일반적으로 사용하는 HTTP 는 기본적으로 클라이언트가 서버에게 요청하는 관점이라면, WebSocket 은 서로서로 요청하는 양방향이다. low-latency (낮은 지연), bi-directional (양방향), event-based (이벤트 기반) 로 클라이언트와 서버가 통신할 수 있게 해준다. 기본 통신 예제 emit() 은 메세지를 보낸다. (연결된 모든 소켓에게 보낸다.) boradcast.emit() 이란 것도 있는데, 이는 나 빼고 모두에게 메세지를 보낸다. on() 은 메세지를 받는다. 서버 코드 import { Server } from "socket.io"; // 웹소켓 서버를 생성 const io = new Ser..

Nest.js 미들웨어 (Middleware) 란?

미들웨어 (Middleware) 란? 라우트 핸들러 앞에 호출되는 함수 요청-응답에서 요청 및 응답 객체와 next() 미들웨어 함수에 접근 가능 다음 미들웨어 함수는 일반적으로 next 라는 변수로 표기됨 기본적으로 express 의 미들웨어와 동일 express 의 미들웨어 소개 어떤 코드든 실행한다. 요청-응답 객체를 변환한다. 요청-응답 사이클을 종료한다. 스택에서 다음 미들웨어 함수를 호출한다. 다음 미들웨어 함수에 제어권을 넘기기 위해 next() 를 호출해야 한다. 그렇지 않으면 요청이 중단된 채로 유지된다. next() 를 꼭 불러줘야 한다는 점이 Interceptor 나 Guard 와 같은 것과 구분된다. 미들웨어는 요청에 제공하는 기능 중 올인원 솔루션 같은 느낌이다. 제약받지 않고 많..

Nest.js 인터셉터 (Interceptor) 란?

인터셉터 Nest.js 의 인터셉터 클래스는 @Injectable 데코레이터를 추가해야 한다. NestInterceptor 인터페이스를 상속해야 한다. 인터셉터는 Aspect Oriented Programming 기술에서 영감을 받았다. 메서드 실행 전 후에 추가 로직 바인딩 함수 결과를 변환 함수 예외를 변환 함수 동작을 확장 조건부 함수 완전 재정의 (ex. 캐싱 목적) 기초 인터셉터는 intercept() 메서드를 구현해야 한다. 메서드엔 두개의 인자가 있다. 1번째 인자, ExecutionContext: 요청의 타입 정보나 호출된 컨트롤러 메서드 정보 등을 가져올 수 있다. ex) http 에서 헤더, 쿠키 등의 정보 그리고 컨트롤러 메서드 정보 이는 ArgumentsHost 를 상속한다. 2번째..