이전 포스팅에서 타입스크립트로 코드를 작성하는 것과 무관하게 왜 자바스크립트 프로그램에서 유효성 검증이 필요한지에 대해서 알아보았는데요. 이번 포스팅에서는 최근 개발자들로부터 많은 인기를 끌고 있는 Zod를 사용하는 전반적인 방법에 대해서 알아보겠습니다. 라이브러리 설치 프로젝트에 zod라는 패키지를 npm으로 설치합니다. 그리고 Zod를 사용하실 때는 가급적 타입스크립트는 strict 모드로 쓰시기를 추천드릴게요. 이제 zod 패키지에서 z를 불러올 수 있으며, 이 녀석만 있으면 우리는 Zod의 모든 기능을 활용할 수 있습니다.
"타입스크립트로 코드를 짜니까 별도로 유효성 검증은 필요없는 거 아니에요?" 타입스크립트를 공부하고 계시거나 자바스크립트 경험이 많지 않은 개발자들로 부터 종종 받는 질문인데요. 정말 타입스크립트의 타입 검사가 자바스크립트의 유효성 검증을 대신할 수 있을까요? 이번 포스팅에서는 이러한 타입스크립트에 대한 오해를 풀어보는 시간을 갖도록 하겠습니다. 타입스크립트의 역할 이해를 돕기 위해서 타입스크립트로 간단한 코드를 함께 짜볼까요? 사용자 계정을 나타내는 Account 인터페이스를 선언하고 이것을 입력으로 받는 processAccoun
TypeScript 선언 병합: declare module로 라이브러리 타입 확장하기에서는 사용자 입장에서 남의 라이브러리 타입을 보강하는 법을 봤는데요. declare module "@tanstack/react-router"로 Register를 채우거나, declare module "@apollo/client"로 TypeOverrides를 채우는 식이었죠. 그런데 그 Register나 TypeOverrides라는 빈 인터페이스는 대체 누가, 어떻게 만들어 둔 걸까요? 🤔 이번 글은 입장을 완전히 뒤집어서, 라이브러리를 만드는 쪽
세트(Set)는 자바스크립트에서 고유한 값들의 집합을 다루는 자료구조입니다. 이를 활용하면 데이터 중복을 제거하고 유일한 값들을 효과적으로 관리할 수 있는데요. 아무래도 세트가 ES6에서 추가된 기능이다 보니 아직도 많은 분들이 세트를 쓰면 딱인 경우에도 습관처럼 배열을 쓰시는 것 같습니다. 뿐만 아니라 굳이 세트를 쓸 필요가 없는 상황에서 단지 새로운 기능이라고 세트를 오용/납용하시는 주니어분들도 심심치 않게 볼 수 있는데요. 이번 포스팅에서는 다양한 예제를 통해서 자바스크립트의 Set을 어떻게 사용하는지 아주 꼼꼼하고 차근차근
HTML에서 체크 박스나 라디오 버튼과 같이 양식(form)을 구성하는 요소들은 CSS로 스타일하기가 까다롭기로 악명이 높은데요. 브라우저에서 제공하는 기본 스타일대로 두자니 너무 올드해보이고 직접 스타일을 하자니 다른 HTML 요소처럼 쉽게 스타일이 되지 않으니까요. 그런데 CSS 속성 딱 하나로 이렇게 스타일이 어려운 HTML 요소를 나름 그럴 듯하게 스타일할 수 있다는 사실을 알고 계셨나요? 이번 포스팅에서는 최소한 노력으로 최대 스타일 효과를 낼 수 있는 CSS의 accent-color라는 유용한 속성을 소개해드리겠습니다.
TypeScript로 타입을 다루다 보면, 어떤 타입 안에 들어 있는 다른 타입만 쏙 꺼내고 싶을 때가 있습니다. "이 배열의 요소 타입이 뭐지?", "이 Promise가 결국 무슨 타입으로 resolve되지?", "이 함수가 반환하는 타입만 가져오고 싶은데" 같은 상황이죠. 🤔 이럴 때 쓰는 게 바로 infer 키워드입니다. 타입 안에 숨어 있는 타입에 이름을 붙여 끄집어내는, TypeScript 타입 프로그래밍의 핵심 도구인데요. 이번 글에서는 infer가 어떻게 동작하는지, 그리고 실무에서 어떤 식으로 쓰이는지 예제로 알아보
우리가 버그가 없는 코드를 작성하기 위해서 사용하는 타입스크립트도 알고 보면 은근히 버그 투성이라는 것을 혹시 알고 계신가요? 이번 포스팅에서는 많은 개발자들이 타입스크립트로 코딩하다가 겪게 되는 황당한 경우에 대해서 알아보고, 이러한 타입스크립트의 버그를 깔끔하게 고쳐주는 ts-reset이라는 라이브러리를 소개해드리려고 합니다. 배열의 includes() 함수의 배신 배열에 특정 요소가 존재하는지를 확인하기 위해서 includes() 함수를 많이 사용하시죠? 그런데 배열을 상대로 as const를 사용하여 읽기 전용(read-on
웹 페이지에 이미지나 비디오를 넣을 때 가로세로 비율 때문에 고생해본 적 있으신가요? 너비를 100%로 맞추면 높이가 찌그러지고, 높이를 고정하면 이미지가 잘리고 😅 특히 반응형 웹에서는 화면 크기에 따라 요소의 너비가 계속 바뀌기 때문에 비율을 유지하는 게 쉽지 않습니다. 예전에는 padding-top 트릭 같은 우회 방법을 썼는데요. 이제는 CSS의 aspect-ratio 속성 하나로 깔끔하게 해결할 수 있습니다. aspect-ratio 속성 aspect-ratio는 요소의 가로세로 비율을 지정하는 CSS 속성입니다. 너비 /
예전에는 웹에서 너비와 높이가 제한된 상황에서 이미지를 효과적으로 보여주는 것이 쉽지가 않았는데요. 그래서 이미지의 왜곡을 피하기 위해서 어쩔 수 없이 대신 배경 이미지를 사용해서 처리해야 하는 경우가 많았습니다. 하지만 다행히도 최근 몇 년 동안 CSS에서 이미지 요소를 다루는 방식이 상당히 개선되었습니다. 이번 포스팅에서는 이미지를 보여주는 방식을 결정하는 CSS의 object-fit 속성에 대해서 다양한 예제를 통해 최대한 쉽게 설명드리겠습니다. 이미지 본래 크기 HTML에서 <img> 요소를 사용할 때 너비나 높이를 지정해주
타입스크립트로 개발하다 보면 라이브러리가 제공하는 타입이 살짝 아쉬운 순간이 찾아옵니다. @types 패키지까지 설치했는데도 process.env.DATABASE_URL에 자동 완성이 안 뜬다거나, 익스프레스 요청 객체(req)에 인증 미들웨어가 붙여둔 req.user를 꺼내려는데 "그런 속성 없다"며 빨간 줄이 그어지는 경우 말이죠. 🤔 그렇다고 node_modules 안에 있는 라이브러리의 .d.ts 파일을 직접 고칠 수도 없는 노릇입니다. 패키지를 다시 설치하면 수정 사항이 그대로 날아가 버리니까요. 이럴 때 쓰는 게 바로
CSS에서는 포커스 상태를 스타일링하기 위해 focus, focus-visible, focus-within과 같은 가상 클래스(pseudo class)를 제공하는데요. 그런데 이 녀석들이 이름이 묘하게 비슷해서 정확하게 언제 어떻게 쓰시는지에 대해서 햇갈려하시는 분들이 많은 것 같습니다. 이번 포스팅에서는 CSS의 focus와 focus-visible 그리고 focus-within 가상 클래스에 대해 자세히 알아보고, 각각이 나타내는 포커스 상황과 용도와 차이점을 비교해보겠습니다. HTML 요소의 포커스 상태 CSS의 포커스(foc
어떤 웹 프로젝트를 하든 브라우저의 내장 스타일에 영향을 최소화하면서 일관적인 UI를 구현하는 것은 매우 중요한 고려사항인데요. 이번 포스팅에서는 Tailwind에서 제시하고 있는 이러한 CSS 초기화 문제에 대한 해답인 Preflight에 대해서 알아보겠습니다. Preflight란? Preflight는 Tailwind에서 가장 근간이 되는 기본 스타일시트(stylesheet)이며 Tailwind로 스타일한 웹 페이지가 어느 브라우저에서 열든 일관적으로 보이도록 해주는데요. Tailwind를 사용하는 것을 "비행"이라고 비유하여 T
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)를 떠올리시는 분들이 많을 것 같은데요. 대표적인 식별자 생
유지보수가 용이하고 안정적으로 동작하는 NestJS API를 개발하려면 각각의 엔드포인트가 잘 작동하는지 확인하는 것이 필수적입니다. 이번 글에서는 Jest와 Supertest를 활용하여 효과적으로 NestJS 앱을 테스트하는 방법에 대해서 알아보겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요. 터미널에서 NestJS CLI 도구의 nest new 명령어를 실행하여 새로운 프로젝트를 구성하도록 하겠습니다. NestJS CLI를 설치하고 NestJS 프로젝트를 구성하는 기본적인
이번 포스팅에서는 Passport.js라는 자바스크립트 프레임워크를 사용하여 Bearer 토큰 기반 API 인증을 구현해보겠습니다. 본 포스팅의 예제 코드는 ES 모듈 문법을 사용하여 작성되었습니다. Node.js에서 ES 모듈을 사용하는 방법은 별도 포스팅에서 자세히 다루고 있으니 참고 바랍니다. Bearer 토큰이란? Bearer 토큰은 HTTP 요청에서 인증 정보를 전달하는 방법으로 클라이언트가 서버에 접근할 때 인증을 위해 널리 사용됩니다. 일반적으로 클라이언트가 서버에 요청을 보낼 때 HTTP 요청의 Authorizatio
웹 개발을 하실 때 HTML에서 뛰어쓰기를 위해서 를 사용하시는 분을 종종 보게 되는데요. 이렇게 무분별하게 를 사용하면 큰 낭패를 볼 수 있다는 사실을 알고 계시나요? 이번 포스팅에서는 사실 공백 문자랑은 완전히 용도가 다른 에 대해서 한번 알아보도록 하겠습니다. 줄바꿈을 일으키는 공백 일반적으로 웹에서는 텍스트가 너무 길어서 요소 내에 주어진 가로 폭을 넘어갈 때는 자동으로 줄바꿈이 일어나는데요. 예를 들어 너비가 250px인 <div> 요소 안에 긴 문장을 넣으면 다음과 같이 알아서 적당한 위치
많은 웹 개발자분들이 HTML 문서 내에서는 띄어쓰기를 여러 번 하더라도 한 번만 띄어쓰기가 되고, 들여쓰기나 줄바꿈이 무시되는 현상을 한 번쯤은 경험하셨을 텐데요. 사실 이러한 HTML 요소 내의 공백 처리 방식은 CSS의 white-space 속성을 이용하여 쉽게 변경할 수가 있다는 사실을 알고 계셨나요? 공백 문자 우선 HTML에서 어떤 문자를 이용해서 공백을 나타낼 수 있는지 이해할 필요가 있는데요. 바로 띄어쓰기, 들여쓰기(t), 줄바꿈(n)이 대표적으로 공백을 나타내는 문자지요? 이러한 문자들을 아무리 연속해서 많이 사용
이번 포스팅에서는 자바스크립트로 어떻게 JWT 토큰을 발급하고 검증하는지에 대해서 알아보겠습니다. jsonwebtoken 패키지 설치 우선 Node.js의 패키지 매니저인 npm을 이용하여 jsonwebtoken 패키지를 설치하겠습니다. jsonwebtoken는 JWT 표준 명세서를 자바스크립트 언어로 구현하고 있는 라이브러리입니다. 따라서 JWT 기반으로 사용자 인증이나 인가를 하는 자바스크립트 서버 애플리케이션에서는 직접적으로든 간접적으로든 (passport-jwt와 같은 프레임워크를 통해서) jsonwebtoken 라이브러리를