이번 포스팅에서는 Passport.js라는 자바스크립트 프레임워크를 사용하여 Bearer 토큰 기반 API 인증을 구현해보겠습니다. 본 포스팅의 예제 코드는 ES 모듈 문법을 사용하여 작성되었습니다. Node.js에서 ES 모듈을 사용하는 방법은 별도 포스팅에서 자세히 다루고 있으니 참고 바랍니다. Bearer 토큰이란? Bearer 토큰은 HTTP 요청에서 인증 정보를 전달하는 방법으로 클라이언트가 서버에 접근할 때 인증을 위해 널리 사용됩니다. 일반적으로 클라이언트가 서버에 요청을 보낼 때 HTTP 요청의 Authorizatio
우리는 인터넷을 통해 누군가가 공유한 창작물을 통해 쉽게 접하고, 그 창작물을 또 다른 타인에게 공유하거나 편집해서 새로운 창작물을 만들어내는 게 아주 자연스러운 시대를 살고 있습니다. 이번 포스팅에서는 저작권을 보호하기 위해서 많이 사용되고 있는 크리에이티브 커먼즈(Creative Commons) 라이선스에 대해서 알아보겠습니다. 저작권이란? 크리에이티브 커먼즈 라이선스에 대해서 알아보기 전에 저작권(copyright)에 대해서 간단하게 짚고 넘어가면 좋을 것 같습니다. 저작권은 쉽게 말해서 저작자가 소유하고 있는 창작물에 대한
웹 개발을 하실 때 HTML에서 뛰어쓰기를 위해서 를 사용하시는 분을 종종 보게 되는데요. 이렇게 무분별하게 를 사용하면 큰 낭패를 볼 수 있다는 사실을 알고 계시나요? 이번 포스팅에서는 사실 공백 문자랑은 완전히 용도가 다른 에 대해서 한번 알아보도록 하겠습니다. 줄바꿈을 일으키는 공백 일반적으로 웹에서는 텍스트가 너무 길어서 요소 내에 주어진 가로 폭을 넘어갈 때는 자동으로 줄바꿈이 일어나는데요. 예를 들어 너비가 250px인 <div> 요소 안에 긴 문장을 넣으면 다음과 같이 알아서 적당한 위치
Netlify에 웹사이트를 배포하면 기본적으로 <웹사이트명>.netlify.app이라는 무료 도메인 네임(domain name)을 주는데요. 취미 프로젝트라면 이 기본 무료 도메인만 사용해도 큰 지장이 없겠지만 대부분의 실제로 운영되는 웹사이트는 유료로 구매한 도메인 이름을 사용해야 할 것입니다. 이렇게 Netlify 사용자가 별도로 구매해서 Netlify에서 주는 도메임 대신에 사용하는 도메인 네임을 소위 커스텀(custom) 도메인 네임이라고 하는데요. 이번 포스팅에서는 Netlify에 배포한 웹사이트에 커스텀(custom) 도
파이썬 프로젝트에서 코드 품질을 관리하려면 여러 도구를 함께 써야 했습니다. 린팅에는 Flake8이나 Pylint, 포맷팅에는 Black, import 정렬에는 isort... 프로젝트 설정 파일만 해도 꽤 복잡해지죠 😅 Ruff는 이 도구들을 하나로 합친 올인원 파이썬 도구입니다. Rust로 작성되어서 기존 도구보다 10~100배 빠르고요. 이번 글에서는 Ruff의 설치부터 린터, 포맷터 활용법, 프로젝트에 적용하는 방법까지 살펴보겠습니다. Ruff란? Ruff는 Astral에서 개발한 파이썬 린터 겸 포맷터입니다. Rust로
웹 서비스에서 이미지가 차지하는 비중이 정말 크죠. HTTP Archive에 따르면 평균 웹 페이지 용량의 절반 가까이가 이미지라고 합니다. 그래서 이미지를 얼마나 잘 관리하느냐가 사이트 성능에 직접적인 영향을 미치는데요. 이미지를 직접 서버에서 처리하려면 Sharp나 libvips 같은 라이브러리를 설치하고, 리사이징, 포맷 변환, 캐싱 로직을 일일이 구현해야 합니다. 소규모 프로젝트에서는 이 정도면 충분하지만 이미지가 수만 장 이상이거나 글로벌 사용자를 대상으로 한다면 CDN 배포와 on-the-fly 변환까지 직접 구축하기가
많은 웹 개발자분들이 HTML 문서 내에서는 띄어쓰기를 여러 번 하더라도 한 번만 띄어쓰기가 되고, 들여쓰기나 줄바꿈이 무시되는 현상을 한 번쯤은 경험하셨을 텐데요. 사실 이러한 HTML 요소 내의 공백 처리 방식은 CSS의 white-space 속성을 이용하여 쉽게 변경할 수가 있다는 사실을 알고 계셨나요? 공백 문자 우선 HTML에서 어떤 문자를 이용해서 공백을 나타낼 수 있는지 이해할 필요가 있는데요. 바로 띄어쓰기, 들여쓰기(t), 줄바꿈(n)이 대표적으로 공백을 나타내는 문자지요? 이러한 문자들을 아무리 연속해서 많이 사용
노트 앱이 넘쳐나는 시대입니다. Notion, Evernote, Apple Notes, Google Keep… 선택지가 너무 많아서 오히려 뭘 써야 할지 모르겠는 상황이죠. 그런데 어느 순간부터 개발자 커뮤니티에서 유독 자주 등장하는 이름이 있었습니다. 바로 Obsidian이에요. 처음에는 "마크다운 에디터가 뭐 그리 특별하겠어"라고 생각했는데, 직접 써보니 생각이 달라졌습니다. 내가 쓴 노트들이 서로 연결되고, 그 관계가 그래프로 시각화되는 경험은 다른 노트 앱에서는 느끼기 어려운 거였거든요. 이 글에서는 Obsidian이 어떤
이번 포스팅에서는 자바스크립트로 어떻게 JWT 토큰을 발급하고 검증하는지에 대해서 알아보겠습니다. jsonwebtoken 패키지 설치 우선 Node.js의 패키지 매니저인 npm을 이용하여 jsonwebtoken 패키지를 설치하겠습니다. jsonwebtoken는 JWT 표준 명세서를 자바스크립트 언어로 구현하고 있는 라이브러리입니다. 따라서 JWT 기반으로 사용자 인증이나 인가를 하는 자바스크립트 서버 애플리케이션에서는 직접적으로든 간접적으로든 (passport-jwt와 같은 프레임워크를 통해서) jsonwebtoken 라이브러리를
이번 포스팅에서는 Json Web Token, 줄여서 흔히 JWT라고 불리는 사용자 인증/인가 수단 대해서 알아보도록 하겠습니다. JWT 란? JWT(Json Web Token)는 말그대로 웹에서 사용되는 JSON 형식의 토큰에 대한 표준 규격인데요. RFC 7519로 정의되어 있으며, 토큰을 어떤 구조로 만들고 어떻게 서명하는지, 그리고 안에 담을 수 있는 표준 클레임(claim)에는 어떤 것들이 있는지를 규정합니다. 주로 사용자의 인증(authentication) 또는 인가(authorization) 정보를 서버와 클라이언트 간
NestJS 앱을 개발,테스트, 운영 등 다양한 환경에 배포하려면 어느 환경에 배포하느냐에 따라서 다르게 설정되야하는 값들이 생기기 마련이죠? 이번 포스팅에서는 NestJS 앱에서 이렇게 환경 별로 달라지는 설정 값들을 어떻게 효과적으로 관리할 수 있는지 알아보겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요. 터미널에서 NestJS CLI 도구의 nest new 명령어를 실행하여 새로운 프로젝트를 구성하도록 하겠습니다. NestJS CLI를 설치하고 NestJS 프로젝트를 구
웹 브라우저에서 3D 그래픽을 구현해야 할 때가 종종 있는데요. 제품을 360도로 돌려볼 수 있는 뷰어, 데이터를 입체적으로 보여주는 시각화, 혹은 몰입감 있는 인터랙티브 경험을 만들고 싶을 때 가장 먼저 떠오르는 라이브러리가 바로 Three.js입니다. Three.js는 WebGL을 추상화해서 복잡한 저수준 API를 직접 다루지 않고도 3D 장면을 만들 수 있게 해주는데요. WebGL로 직접 코딩하면 삼각형 하나 그리는 데도 수십 줄이 필요하지만, Three.js를 쓰면 몇 줄 만에 회전하는 큐브를 화면에 띄울 수 있습니다. 이번
JWS로 이해하는 JSON 데이터 서명에서 서명이 토큰의 위변조를 막아준다는 걸 봤는데요. 한 가지 짚고 넘어간 점이 있습니다. 서명은 내용을 숨겨주지 않는다는 것이죠. JWS나 JWT의 페이로드는 그냥 Base64로 인코딩됐을 뿐이라 누구나 디코딩해서 들여다볼 수 있습니다. 그렇다면 토큰 내용 자체를 진짜로 가려야 할 때는 어떻게 할까요? 이때 등장하는 것이 **JWE(JSON Web Encryption)**입니다. 이번 글에서는 JWE가 JWS와 무엇이 다른지, 독특한 5조각 구조와 2단계 암호화 방식이 무엇인지를 직접 암호화/
웹 개발을 하다 보면 아래와 같이 종종 영단어가 너무 길어서 모바일 환경과 같이 좁은 뷰포트(viewport)에서 부모 요소 밖으로 밀려나오는 경우를 접할 수 있는데요. 꼭 영문 웹사이트가 아니더라도 요즘에는 한국어 콘텐츠에도 워낙 외래어가 많이 사용되고, 게다가 인터넷 URL과 이메일 주소가 대부분 영어로 되어 있어서 의외로 한국어 웹사이트를 구현할 때도 쉽게 겪을 수 있는 문제입니다. 이번 포스팅에서는 웹에서 이렇게 원치 않게 부모 요소 밖으로 삐져나오는 영단어를 처리하는 다양한 방법을 알아보겠습니다. 영어와 한국어의 줄바꿈 차
웹 개발을 하다 보면 데이터를 차트로 보여줘야 할 때가 있죠? 대시보드에 매출 추이를 꺾은선 그래프로 표시하거나, 설문 결과를 막대 차트로 보여주거나, 카테고리별 비율을 도넛 차트로 나타내야 하는 상황 말이에요. 이런 경우에 가장 많이 쓰이는 라이브러리가 바로 Chart.js인데요. GitHub 스타가 6만 개가 넘고, npm 주간 다운로드가 240만 건에 달할 정도로 자바스크립트 차트 라이브러리 중에서는 압도적인 인기를 자랑합니다. D3.js처럼 자유도가 높은 라이브러리에 비하면 차트 종류가 제한적이긴 하지만, 그만큼 배우기 쉽고
jQuery를 기억하시나요? <script> 태그 하나 떨어뜨리면 마법처럼 HTML이 살아 움직이던 그 시절 말이에요. $("button").click(...) 한 줄이면 클릭 이벤트가 붙었고 $(".menu").slideToggle() 한 방이면 메뉴가 스르륵 열렸죠. 빌드 도구도 없고 설정 파일도 없고 node_modules 블랙홀도 없었던 아름답고 단순한 시대였습니다. 그런데 어느 순간 웹 개발이 복잡해졌어요. React, Vue, Svelte 같은 메타 프레임워크가 등장하면서 컴포넌트 기반 개발이 대세가 됐는데요. 분명 강력
최근에 ORM으로 Prisma를 선택하는 자바스크립트 또는 타입스크립트 프로젝트가 부쩍 많아진 느낌입니다. 이번 포스팅에서는 차세대 ORM 프레임워크로 각광받고 있는 Prisma에 대해서 함께 알아볼까요? Prisma란? Prisma는 자바스크립트와 타입스크립트 커뮤니티에서 주목받고 있는 차세대 ORM(Object Relational Mapping) 프레임워크입니다. 데이터베이스와 상호작용하는 응용 애플리케이션을 개발할 때, 프로그래머가 직접 SQL을 작성하지 않아도 되므로, 개발 생산성을 높여주는 측면에서 기존에 사용되던 Sequ
JWT나 JWS로 토큰에 서명하려고 보면 alg 자리에 뭘 넣어야 할지부터 막히는데요. HS256, RS256, ES256, EdDSA... 이름은 비슷비슷한데 막상 고르려니 뭐가 다른지 감이 안 옵니다. 🤔 이 알고리즘들은 모두 JWA(JSON Web Algorithms, RFC 7518)가 정의한 서명 알고리즘인데요. 그냥 아무거나 골라도 토큰은 만들어지지만, 대칭이냐 비대칭이냐, 토큰이 얼마나 커지느냐, 검증 부하가 어디에 실리느냐에 따라 분명한 트레이드오프가 있습니다. 이번 글에서는 자주 쓰이는 네 가지를 비교하고 상황별로
우리는 보통 웹페이지를 2차원 공간으로 생각하고 웹 개발을 하는 경우가 많은데요. 하지만 복잡한 웹페이지를 구현할 때는 마치 3차원 공간처럼 요소를 앞뒤로 겹쳐서 배치해야 경우가 생기기 마련이죠. 이번 포스팅에서는 이렇게 웹에서 요소의 Z축 방향의 깊이를 결정하는 CSS의 z-index 속성에 대해서 배워보겠습니다. z-index가 없을 때 요소 간 상대적 깊이 z-index 속성에 대해서 본격적으로 배우기 전에 먼저 z-index가 없을 때 어떻게 요소(element) 간의 상대적 깊이가 결정되는지에 대해서 이해하는 것이 중요한데
마이크로서비스(microservices) 아키텍처나 분산 시스템 환경에서는 모든 서비스가 정상적으로 살아서 동작하는지를 검사하는 것이 매우 중요합니다. 이를 위해서 각 서비스에 생존 여부(liveness)와 가용 여부(readiness)를 응답해주는 HTTP 엔드포인트(endpoint)가 필요하기 마련인데요. 이번 포스팅에서는 NestJS 앱에서 이러한 엔드포인트(endpoint)를 어떻게 구현할 수 있는지에 대해서 알아보도록 하겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요