드리프트의 뉴 코딩 이야기

TypeScript의 템플릿 리터럴 타입: 타입 검사 중 파싱 및 활용 방법TypeScript 템플릿 리터럴 타입: 기초 이론과 기본 활용TypeScript는 JavaScript의 슈퍼셋으로, 정적 타입 시스템을 제공하여 코드의 안정성을 높여줍니다. 특히 템플릿 리터럴 타입(Template Literal Types)은 TypeScript 4.1에서 도입된 기능으로, 문자열 리터럴 타입을 더 유연하게 다룰 수 있게 해줍니다. 이번 포스트에서는 템플릿 리터럴 타입의 기본 개념과 간단한 활용법을 알아보겠습니다.템플릿 리터럴 타입이란?템플릿 리터럴 타입은 JavaScript의 템플릿 리터럴(백틱(`)을 사용한 문자열)과 비슷한 문법을 가지고 있지만, 타입 수준에서 동작합니다. 이를 통해 문자열 리터럴 타입을 조..

RegExp.escape() 마스터하기: 정규표현식 이스케이프 처리 완벽 가이드오늘은 ECMAScript의 새로운 제안인 "RegExp escaping"에 대해 자세히 알아보겠습니다. Jordan Harband와 Kevin Gibbons가 제안한 이 기능은 현재 stage 3 단계에 있는데요. RegExp.escape() 함수를 사용하면 주어진 문자열을 정규표현식에서 안전하게 사용할 수 있도록 이스케이프 처리할 수 있습니다. RegExp.escape()는 어떻게 동작하는가?RegExp.escape(text)는 주어진 text 문자열과 정확히 일치하는 정규표현식 패턴을 생성합니다. 정규표현식에서 특별한 의미를 가지는 문자들은 그대로 사용할 수 없어서 이스케이프 처리가 필요한데요. 예를 들어보겠습니다:> R..

리액트 폼 데이터 저장, 이제 Nuqs로 완벽하게 해결하세요! 안녕하세요! 웹 개발을 하다 보면 폼 데이터 때문에 머리가 아픈 순간이 많죠? 사용자 입력 내용을 저장하거나 페이지 새로고침을 처리하고, 심지어는 사용자 간에 폼 상태를 공유해야 할 때도 있습니다. 전통적인 방법들도 있지만, 요즘은 더 똑똑하고 세련된 방법들이 많이 등장했답니다! 오늘은 Nuqs를 사용해서 이러한 문제들을 어떻게 우아하게 해결할 수 있는지 알아볼까요? 과거의 방법과 한계점1. 로컬 스토리지 (localStorage)옛날 옛적에 개발자들은 브라우저의 localStorage를 사용해서 폼 데이터를 저장했답니다.// 폼 데이터 저장localStorage.setItem("formData", JSON.stringify(formData)..

URL 쿼리 스트링과 React 리액트 상태 관리의 만남: nuqs 사용법 가이드 안녕하세요! 오늘은 React 애플리케이션에서 URL 쿼리 스트링을 활용해 상태를 관리할 수 있게 도와주는 nuqs라는 라이브러리를 소개하겠습니다. nuqs는 간단하고 타입 안전하며, Next.js, React Router, Remix 등 다양한 React 기반 프레임워크와 함께 사용할 수 있습니다. 이 글은 튜토리얼 형식으로 작성되었으니, 단계별로 따라 하면서 nuqs의 매력을 체험해 보세요!1️⃣ 시작하기: nuqs 설치먼저 nuqs를 설치해야 합니다. 프로젝트 루트 디렉토리에서 다음 명령어 중 하나를 실행하세요.# npmnpm install nuqs# yarnyarn add nuqs# pnpmpnpm add nuqs ..

Vite React vs Next.js: 더 나은 선택은? Hono와 함께하는 최신 웹 개발 트렌드웹 개발 프레임워크는 지속적으로 발전하고 있지만, 완벽한 솔루션은 존재하지 않는다. 오랫동안 Next.js를 사용해 온 개발자들 사이에서도 새로운 대안이 필요하다는 목소리가 나오고 있다. 최근 Vite React와 Hono를 조합한 개발 방식이 많은 주목을 받고 있는데, 과연 Next.js를 대체할 수 있을까? Vite React는 빠른 빌드 속도와 가벼운 구조를 자랑하며, Hono는 Express 스타일의 간결한 미들웨어 시스템을 제공한다. 이러한 조합은 개발자들에게 더 직관적이고 유연한 개발 환경을 제공하지만, 단점도 분명히 존재한다. 이 글에서는 Vite React + Hono의 장점과 단점을 살펴보고..

더 이상 느린 리액트는 없다: 리액트 컴파일러 완벽 가이드React의 매력은 마치 레고 블록처럼 함수(컴포넌트)를 조립하여 UI를 구축하는 직관성에 있습니다. 개발자는 그저 함수를 만들고, React는 그 함수를 적절한 시점에 불러내 화면을 구성하죠. 하지만 이 간편함 뒤에는 성능이라는 잠재적 문제가 숨어 있습니다. 복잡한 연산을 수행하는 함수는 앱을 느리게 만드는 주범이 될 수 있기 때문입니다. 그래서 과거에는 개발자가 직접 성능 튜닝이라는 험난한 여정을 떠나야 했는데요. "이 함수는 언제 다시 실행해야 최적일까?"라는 질문에 답을 찾기 위해 고군분투해야 했습니다. 이제, 리액트 팀이 이 고된 여정을 자동화해 줄 구원투수를 등판시켜줬는데요. 바로 리액트 컴파일러(React Compiler)입니다! 코드..

React useState 업데이트 함수의 비밀: 최신 상태를 참조하는 마법 (디버깅으로 더 쉽게!)React에서 가장 많이 쓰이는 훅 중 하나인 useState! 그 안에는 업데이트 함수라는 게 존재하는데요, 오늘은 이 업데이트 함수를 useState의 내부 작동 원리 관점에서 깊이 파헤쳐 보겠습니다. 특히, React 소스 코드 분석과 디버깅을 통해 좀 더 쉽고 확실하게 이해해 보도록 하죠! 들어가기 전에: useState 업데이트, 왜 다르게 동작할까?문자열 타입의 state가 있다고 가정하고, 현재 문자열에 새로운 문자를 추가하는 함수를 만들어 보겠습니다.const [inputString, setInputString] = useState(""); 아래의 경우, 둘 다 같은 결과("A")가 나올 텐..

TypeScript 성능 향상의 비밀: tsconfig.json 마스터하기TypeScript 5.7 버전 기준으로, 완벽한 tsconfig.json 설정을 위한 핵심 옵션들을 알아볼까요?  이 블로그 글에서 다루지 않는 내용 이 글은 로컬 모듈이 모두 ESM인 프로젝트 설정 방법에 중점을 두고 있습니다. CommonJS 모듈 import에 대한 팁은 제공하지만, 다음 내용은 다루지 않습니다.allowJs 및 checkJs 옵션을 사용한 일반 JavaScript 파일 가져오기 및 타입 검사JSX 설정 (TypeScript 핸드북의 "JSX" 섹션 참조)composite 옵션 등을 사용한 모노레포 프로젝트 설정 (TypeScript 핸드북의 "프로젝트 참조" 챕터와 제 블로그 글 "npm workspaces..

타입스크립트 Enum 정복: 실전 가이드 & 완벽 대안이번 글에서는 타입스크립트 열거형(Enum)에 대해 자세히 살펴보려고 합니다.열거형은 어떻게 작동할까요?어떤 경우에 사용하면 좋을까요?사용하고 싶지 않을 때는 어떤 대안이 있을까요?마지막에는 어떤 상황에 무엇을 사용하는 것이 좋은지 추천해드리면서 글을 마무리하려고 합니다.  표기법 소스 코드에서 유추된 타입을 표시하기 위해 npm 패키지 ts-expect를 사용했는데요. 예를 들면 다음과 같습니다.// Types of values// @ts-expect-error: Argument of type 'number' is not assignable to parameter of type 'string'.expectType(123);// @ts-expect-e..

자바스크립트 정규 표현식의 새로운 힘! 패턴 수정자 알아볼까요?요즘 자바스크립트 개발하며 정규 표현식 써보면서 꿀팁 하나 알려드릴까 합니다. 바로 패턴 수정자(Regular Expression Pattern Modifiers) 인데요! 이 기능 덕분에 정규 표현식을 더욱 유연하고 효율적으로 사용할 수 있게 되었답니다. 이 글에서는 패턴 수정자가 뭔지, 어떻게 쓰는지, 그리고 어떤 경우에 유용한지 자세히 알아볼게요.  패턴 수정자는 뭘까요? 기존에는 정규 표현식 플래그(예: i - 대소문자 구분 안 함)를 정규 표현식 전체에만 적용할 수 있었는데요. 하지만 패턴 수정자 덕분에 이제는 정규 표현식의 일부분에만 플래그를 적용할 수 있게 되었답니다. 마치 정규 표현식 안에 플래그를 직접 넣는 것처럼 말이죠! 예..