Tailwind가 좋다는 소문을 듣고 막상 써보려고 해도 초기 설정에서 어려움을 겪을 수 있는데요. tailwindcss 패키지 뿐만 아니라 postcss, autoprefixer와 같은 추가적인 패키지 설치도 필요한데다가, tailwind.config.js와 postcss.config.js 등 설정이 다소 복잡하게 다가올 수 있기 때문입니다. 이러한 Tailwind의 진입 장벽을 느끼시는 분들을 위해서 이번 포스팅에서는 Play CDN을 사용해서 번거로운 초기 설정을 건너띄고 좀 더 간편하게 Tailwind를 써볼 수 있는 방법에
Tailwind는 최근 웹 개발 분야에서 상당히 인기를 끌고 있는 차세대 CSS 프레임워크인데요. 워낙 호볼호가 많이 갈리다보니 개발자 커뮤니티에서 단골 논쟁거리가 되기도 합니다. Tailwind에 대한 첫 번째 포스팅으로 이번 글에서는 Tailwind에 대한 기본 개념과 기존에 우리가 스타일링해온 방식과 비교해서 무엇이 다른지에 대해서 간략하게 알아보겟습니다. Tailwind란? Tailwind는 쉽게 말해 엄청나게 많은 유틸리티(utility) 클래스로 이루어진 CSS 프레임워크입니다. Tailwind가 제공하는 유틸리티 클래스
웹, 모바일, 서버 등 다양한 환경에서 확장이 용이한 애플리케이션을 개발하기 위해서 전통적인 숫자 시퀀스 기반의 식별자 대신 랜덤 문자열 기반의 식별자를 많이 사용하는 추세인데요. 이번 포스팅에서는 이러한 문자열 기반의 고유 식별자를 빠르게 생성하기 위한 간편한 도구인 NanoID에 대해서 알아보겠습니다. NanoID란? 고유 문자열 식별자 생성기(unique string ID generator)기 하면 아마도 UUID(Universally Unique IDentifier)를 떠올리시는 분들이 많을 것 같은데요. 대표적인 식별자 생
pip(Package Installer for Python)는 파이썬에 기본적으로 내장되어 있는 패키지 매니저입니다. 이 명령줄 도구를 사용하면 Python Package Index에 다른 개발자들이 올려놓은 패키지를 쉽게 다운로드하고 설치할 수 있는데요. 이번 포스팅에서는 pip를 사용하여 패키지를 관리하는 기본적인 방법에 대해서 알아보겠습니다. pip 설치 여부 확인 pip는 파이썬만 설치하면 기본적으로 딸려서 설치가 되는데요. 혹시 모르니 컴퓨터에 먼저 파이썬과 pip의 설치 여부를 확인하고 넘어가주세요. 패키지 설치 pip로
유지보수가 용이하고 안정적으로 동작하는 NestJS API를 개발하려면 각각의 엔드포인트가 잘 작동하는지 확인하는 것이 필수적입니다. 이번 글에서는 Jest와 Supertest를 활용하여 효과적으로 NestJS 앱을 테스트하는 방법에 대해서 알아보겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요. 터미널에서 NestJS CLI 도구의 nest new 명령어를 실행하여 새로운 프로젝트를 구성하도록 하겠습니다. NestJS CLI를 설치하고 NestJS 프로젝트를 구성하는 기본적인
이번 포스팅에서는 ChatGPT API를 활용하여 파이썬으로 GhatGPT와 유사하지만 터미널 상에서 돌아가는 간단한 챗앱을 구현해보겠습니다. OpenAI API 키 설정 OpenAI에서 회원 가입 후에 API 키를 발급받는 방법은 별도 포스팅에서 자세히 다루었으니 참고 바랍니다. 사전 준비로 터미널을 열고 OPENAI_API_KEY라는 환경 변수에 OpenAI에서 발급받은 API 키를 설정해줍니다. 이렇게 API 키를 환경 변수로 저장해놓으면 Python 코드를 실행할 때 os 모듈의 getenv() 함수를 통해 쉽게 환경 변수를
이번 포스팅에서는 파이썬으로 ChatGPT API를 호출하는 방법에 대해서 알아보겠습니다. OpenAI API 키 설정 OpenAI에서 회원 가입 후에 API 키를 발급받는 방법은 별도 포스팅에서 자세히 다루었으니 참고 바랍니다. 사전 준비로 터미널을 열고 OPENAI_API_KEY라는 환경 변수에 OpenAI에서 발급받은 API 키를 설정해줍니다. 이렇게 API 키를 환경 변수로 저장해놓으면 Python 코드를 실행할 때 os 모듈의 getenv() 함수를 통해 쉽게 환경 변수를 읽어올 수 있습니다. Python에서 환경 변수를
이번 포스팅에서는 ChatGPT API를 활용하여 자바스크립트로 GhatGPT와 유사하지만 터미널 상에서 돌아가는 간단한 챗앱을 구현해보겠습니다. 사전 준비 최대한 간단한 예제를 위해서 GhatGPT API를 호출할 때 외부 라이브러리를 사용하지 않고 Node.js에 내장되어 있는 fetch() 함수를 사용하려고 합니다. Node.js에서는 v17.5 이상부터 fetch() 함수를 지원하고 있으므로 본인 컴퓨터에 v17.5 이전 Node.js가 설치되어 있다면 현재 LTS 버전인 v18로 업그레이드를 추천드리겠습니다. 원격 API를
이번 포스팅에서는 터미널에서 curl을 이용하여 ChatGPT API 직접 호출해보면서 ChatGPT와 어떻게 메시지를 주고 받을 수 있는지 알아보겠습니다. 터미널에서 간단한 명령어를 입력하여 웹 페이지나 API 데이터를 요청하고 받을 수 있는 HTTP 클라이언트 도구인 curl에 대한 자세한 설명은 관련 포스팅을 참고 바랍니다. ChatGPT API 키 발급 ChatGPT API를 사용하려면 반드시 OpenAI의 API 키가 있어야 합니다. API키가 없으신 분들은 이전 글을 따라서 OpenAI 웹사이트에 가입을 하시고 API 키
이번 포스팅에서는 ChatGPT 앱 개발을 위한 첫걸음인 API 키를 발급 받는 방법에 대해 알아보겠습니다. ChatGPT API OpenAI에서는 누구나 ChatGPT를 기반으로 새로운 애플리케이션을 개발하거나 기존 서비스에 ChatGPT를 통합하기 용이하도록 ChatGPT API를 제공하는데요. ChatGPT API는 OpenAI에서 제공하는 인공지능 모델을 활용하여 자연어 대화를 생성하는 기능을 제공합니다. 구글이나 페이스북의 API처럼 ChatGPT API는 HTTP 프로토콜 기반 Rest API 형태로 되어 있어 네트워크를
이번 포스팅에서는 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에서 어떤 문자를 이용해서 공백을 나타낼 수 있는지 이해할 필요가 있는데요. 바로 띄어쓰기(s), 들여쓰기(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 형식의 토큰에 대한 표준 규격인데요. 주로 사용자의 인증(authentication) 또는 인가(authorization) 정보를 서버와 클라이언트 간에 안전하게 주고 받기 위해서 사용됩니다. JWT 토큰 웹에서 보통 Authorization HTTP 헤더를 Bearer <토큰>의 형태로 설정하여 클라이언트에서 서버로 전