"타입스크립트로 코드를 짜니까 별도로 유효성 검증은 필요없는 거 아니에요?" 타입스크립트를 공부하고 계시거나 자바스크립트 경험이 많지 않은 개발자들로 부터 종종 받는 질문인데요. 정말 타입스크립트의 타입 검사가 자바스크립트의 유효성 검증을 대신할 수 있을까요? 이번 포스팅에서는 이러한 타입스크립트에 대한 오해를 풀어보는 시간을 갖도록 하겠습니다. 타입스크립트의 역할 이해를 돕기 위해서 타입스크립트로 간단한 코드를 함께 짜볼까요? 사용자 계정을 나타내는 Account 인터페이스를 선언하고 이것을 입력으로 받는 processAccoun
TypeScript 선언 병합: declare module로 라이브러리 타입 확장하기에서는 사용자 입장에서 남의 라이브러리 타입을 보강하는 법을 봤는데요. declare module "@tanstack/react-router"로 Register를 채우거나, declare module "@apollo/client"로 TypeOverrides를 채우는 식이었죠. 그런데 그 Register나 TypeOverrides라는 빈 인터페이스는 대체 누가, 어떻게 만들어 둔 걸까요? 🤔 이번 글은 입장을 완전히 뒤집어서, 라이브러리를 만드는 쪽
세트(Set)는 자바스크립트에서 고유한 값들의 집합을 다루는 자료구조입니다. 이를 활용하면 데이터 중복을 제거하고 유일한 값들을 효과적으로 관리할 수 있는데요. 아무래도 세트가 ES6에서 추가된 기능이다 보니 아직도 많은 분들이 세트를 쓰면 딱인 경우에도 습관처럼 배열을 쓰시는 것 같습니다. 뿐만 아니라 굳이 세트를 쓸 필요가 없는 상황에서 단지 새로운 기능이라고 세트를 오용/납용하시는 주니어분들도 심심치 않게 볼 수 있는데요. 이번 포스팅에서는 다양한 예제를 통해서 자바스크립트의 Set을 어떻게 사용하는지 아주 꼼꼼하고 차근차근
TypeScript로 타입을 다루다 보면, 어떤 타입 안에 들어 있는 다른 타입만 쏙 꺼내고 싶을 때가 있습니다. "이 배열의 요소 타입이 뭐지?", "이 Promise가 결국 무슨 타입으로 resolve되지?", "이 함수가 반환하는 타입만 가져오고 싶은데" 같은 상황이죠. 🤔 이럴 때 쓰는 게 바로 infer 키워드입니다. 타입 안에 숨어 있는 타입에 이름을 붙여 끄집어내는, TypeScript 타입 프로그래밍의 핵심 도구인데요. 이번 글에서는 infer가 어떻게 동작하는지, 그리고 실무에서 어떤 식으로 쓰이는지 예제로 알아보
우리가 버그가 없는 코드를 작성하기 위해서 사용하는 타입스크립트도 알고 보면 은근히 버그 투성이라는 것을 혹시 알고 계신가요? 이번 포스팅에서는 많은 개발자들이 타입스크립트로 코딩하다가 겪게 되는 황당한 경우에 대해서 알아보고, 이러한 타입스크립트의 버그를 깔끔하게 고쳐주는 ts-reset이라는 라이브러리를 소개해드리려고 합니다. 배열의 includes() 함수의 배신 배열에 특정 요소가 존재하는지를 확인하기 위해서 includes() 함수를 많이 사용하시죠? 그런데 배열을 상대로 as const를 사용하여 읽기 전용(read-on
타입스크립트로 개발하다 보면 라이브러리가 제공하는 타입이 살짝 아쉬운 순간이 찾아옵니다. @types 패키지까지 설치했는데도 process.env.DATABASE_URL에 자동 완성이 안 뜬다거나, 익스프레스 요청 객체(req)에 인증 미들웨어가 붙여둔 req.user를 꺼내려는데 "그런 속성 없다"며 빨간 줄이 그어지는 경우 말이죠. 🤔 그렇다고 node_modules 안에 있는 라이브러리의 .d.ts 파일을 직접 고칠 수도 없는 노릇입니다. 패키지를 다시 설치하면 수정 사항이 그대로 날아가 버리니까요. 이럴 때 쓰는 게 바로
웹, 모바일, 서버 등 다양한 환경에서 확장이 용이한 애플리케이션을 개발하기 위해서 전통적인 숫자 시퀀스 기반의 식별자 대신 랜덤 문자열 기반의 식별자를 많이 사용하는 추세인데요. 이번 포스팅에서는 이러한 문자열 기반의 고유 식별자를 빠르게 생성하기 위한 간편한 도구인 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
이번 포스팅에서는 자바스크립트로 어떻게 JWT 토큰을 발급하고 검증하는지에 대해서 알아보겠습니다. jsonwebtoken 패키지 설치 우선 Node.js의 패키지 매니저인 npm을 이용하여 jsonwebtoken 패키지를 설치하겠습니다. jsonwebtoken는 JWT 표준 명세서를 자바스크립트 언어로 구현하고 있는 라이브러리입니다. 따라서 JWT 기반으로 사용자 인증이나 인가를 하는 자바스크립트 서버 애플리케이션에서는 직접적으로든 간접적으로든 (passport-jwt와 같은 프레임워크를 통해서) jsonwebtoken 라이브러리를
NestJS 앱을 개발,테스트, 운영 등 다양한 환경에 배포하려면 어느 환경에 배포하느냐에 따라서 다르게 설정되야하는 값들이 생기기 마련이죠? 이번 포스팅에서는 NestJS 앱에서 이렇게 환경 별로 달라지는 설정 값들을 어떻게 효과적으로 관리할 수 있는지 알아보겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요. 터미널에서 NestJS CLI 도구의 nest new 명령어를 실행하여 새로운 프로젝트를 구성하도록 하겠습니다. NestJS CLI를 설치하고 NestJS 프로젝트를 구
웹 브라우저에서 3D 그래픽을 구현해야 할 때가 종종 있는데요. 제품을 360도로 돌려볼 수 있는 뷰어, 데이터를 입체적으로 보여주는 시각화, 혹은 몰입감 있는 인터랙티브 경험을 만들고 싶을 때 가장 먼저 떠오르는 라이브러리가 바로 Three.js입니다. Three.js는 WebGL을 추상화해서 복잡한 저수준 API를 직접 다루지 않고도 3D 장면을 만들 수 있게 해주는데요. WebGL로 직접 코딩하면 삼각형 하나 그리는 데도 수십 줄이 필요하지만, Three.js를 쓰면 몇 줄 만에 회전하는 큐브를 화면에 띄울 수 있습니다. 이번
웹 개발을 하다 보면 데이터를 차트로 보여줘야 할 때가 있죠? 대시보드에 매출 추이를 꺾은선 그래프로 표시하거나, 설문 결과를 막대 차트로 보여주거나, 카테고리별 비율을 도넛 차트로 나타내야 하는 상황 말이에요. 이런 경우에 가장 많이 쓰이는 라이브러리가 바로 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
마이크로서비스(microservices) 아키텍처나 분산 시스템 환경에서는 모든 서비스가 정상적으로 살아서 동작하는지를 검사하는 것이 매우 중요합니다. 이를 위해서 각 서비스에 생존 여부(liveness)와 가용 여부(readiness)를 응답해주는 HTTP 엔드포인트(endpoint)가 필요하기 마련인데요. 이번 포스팅에서는 NestJS 앱에서 이러한 엔드포인트(endpoint)를 어떻게 구현할 수 있는지에 대해서 알아보도록 하겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요
웹에서 체크박스는 사용자로부터 어떤 동의를 받거나 하나 이상의 옵션을 선택받기 위해 사용되는데요. 양식(form)이나 설문(survey)과 같은 UI를 구현할 때 빠질 수 없는 핵심적인 요소입니다. 이번 포스팅에서는 체크박스(checkbox)를 사용하여 사용자와 다양하게 상호작용을 할 수 있는 React 컴포넌트를 작성해보도록 하겠습니다. Checkbox 컴포넌트 구현 웹에서 체크박스가 쓰이는 가장 흔한 사례는 사용자로 부터 어떤 동의를 받기 위함일텐데요. 이렇게 서로 관련이 없는 체크박스가 하나 이상 필요할 때 유용하게 쓸 수 있
자료형(data type)에 대한 이해가 중요한 타입스크립트(Typescript)가 대중화되면서 나타나는 흥미로운 현상이 있습니다. 바로 기존에 자바스크립트(JavaScript)에서 비교적 등한시되던 자료형에 대해서 많은 개발자들이 다시 관심을 갖게 되었다는 것인데요. 이번 포스팅에서는 typeof 연산자를 통해서 알아낼 수 있는 자바스크립트의 대표적인 자료형에 대해서 알아보겠습니다. typeof 연산자 우선 본 포스팅 전체에 걸쳐 빈번하게 사용하게 될 자바스크립트의 typeof 연산자에 대해서 짚고 넘어갈까요? 기본적으로 type
이번 포스팅에서는 React의 Children API를 사용해서 컴포넌트의 children prop을 다루는 방법에 대해서 다뤄보겠습니다. Children API의 필요성 먼저 React에서 Children라는 API가 왜 필요한지에 대해서 간단하게 짚고 넘어가겠습니다. 우선 이름이 비슷해서 컴포넌트의 children prop과 Children API이 헛갈리게 쉬운데요. 소문자로 시작하는 children은 소외 props라고 일컫는 컴포넌트 함수의 매개 변수가 가지고 있는 하나의 속성이며 이를 통해 컴포넌트의 자식이 넘어오게 됩니
로깅(logging)은 애플리케이션에서 발생하는 각종 이벤트에 대한 기록을 남기고 문제 발생 시 원인을 파악하는데 핵심적인 역할을 하는데요. 이번 포스팅에서는 NestJS 앱에서 어떻게 로거(logger)를 사용하고 커스터마이징(customizing)할 수 있는지 알아보겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요. 터미널에서 NestJS CLI 도구의 nest new 명령어를 실행하여 새로운 프로젝트를 구성하도록 하겠습니다. NestJS CLI를 설치하고 NestJS 프로