Vite가 Webpack이나 Parcel과 같은 기존 번들러(bundler)를 제치고 자바스크립트 생태계의 표준 빌드 도구로 자리 잡았습니다. Vue.js의 창시자인 Evan You가 만든 Vite는 2026년 3월 Vite 8 출시와 함께 Rust 기반의 Rolldown을 도입하면서 성능이 한층 빨라졌는데요. 이번 포스팅에서는 Vite를 처음 사용하시는 분들을 위해서 Vite로 웹 프로젝트를 시작하는 아주 기초적인 방법을 알려드리겠습니다. Vite란? Vite는 기존 자바스크립트 번들러의 만성적인 성능 문제를 해결하고 개발자 경험
새 제품을 만들 때 로그인 기능은 거의 예외 없이 등장하는 요구사항인데요. 막상 직접 구현하려고 보면 비밀번호 해싱, 세션, 소셜 로그인 연동, 비밀번호 재설정 메일, 2단계 인증까지 할 일이 끝도 없이 늘어납니다. Auth0는 이 귀찮은 일들을 외주 주듯 맡길 수 있는 관리형 인증 서비스예요. 설정 몇 번에 소셜 로그인과 MFA까지 붙여주기 때문에, 인증 자체가 제품의 핵심이 아니라면 시간을 크게 아낄 수 있습니다. 이 글에서는 Auth0가 어떻게 생긴 서비스인지, 실제로 SPA에 어떻게 붙이는지, 그리고 언제 쓰면 좋고 언제 피
쉘 스크립트를 읽다 보면 ${tag#v}나 ${file%%.*} 같은 독특한 문법을 마주치게 됩니다. 중괄호 안에 #이나 % 같은 기호가 붙어 있어서 처음 보면 꽤 당황스러운데요. 이게 바로 Bash의 **파라미터 확장(Parameter Expansion)**입니다. 파라미터 확장을 알면 sed, awk, cut 같은 외부 명령어 없이도 변수값을 자유자재로 다룰 수 있습니다. 문자열에서 특정 부분을 잘라내거나, 패턴을 치환하거나, 변수가 비어 있을 때 기본값을 넣어주거나... 이런 작업을 Bash 내장 기능만으로 처리할 수 있죠.
쉘 프로그래밍을 처음 하시는 분들이 스크립트를 읽으시다가 2>&1와 같은 알 수 없는 문법을 보고 당황하시는 경우가 있습니다. 이 것을 보통 리다이렉션(Redirection)이라고 하는데요. 어떤 명령의 입력이나 출력을 다른 곳으로 변경하기 위해서 사용됩니다. 이번 포스팅에서는 쉘 리다이렉션의 기본 사용법을 알아보고 다양한 예제를 통해 어떻게 실제 쉘 프로그래밍에 활용할 수 있는지 배워보겠습니다. 표준 스트림 쉘의 리다이렉션을 이해하려면 우선 MacOS와 같은 리눅스/유닉스 운영체제의 세 가지 표준 스트림(Standard Strea
웹 개발을 하다 보면 소위 팝업(pop-up) 창을 띄어서 무언가를 알려주거나, 확인을 받거나, 입력을 받아야할 때가 있는데요. 브라우저에서는 아주 오래 전부터 이러한 팝업 창을 띄울 수 있도록 alert(), confirm(), prompt()를 제공하였습니다. 이번 포스팅에서는 간단한 예제를 통해서 이 세가지 함수를 언제 어떻게 사용하는지 알아보겠습니다. alert() 함수 사용자에게 정보를 전달하는 간단한 팝업 창이 필요하다면 alert() 함수를 사용할 수 있습니다. alert() 함수는 인자로 넘어온 문자열을 그대로 팝업
혹시 git worktree라는 Git 명령어를 아시나요? 사실 이 명령어는 Git 2.5(2015년)에 도입된 꽤 오래된 기능인데요. 그동안 잘 알려지지 않았다가 최근 Claude Code, Cursor 같은 AI 코딩 에이전트들이 적극적으로 활용하면서 다시 주목받고 있습니다. 여러 작업을 병렬로 처리하면서 변경사항을 안전하게 격리하기 위해서인데요. 이처럼 git worktree는 사람뿐 아니라 AI에게도 빠질 수 없는 도구가 되어가고 있습니다. 이번 글에서는 git worktree의 기본 개념과 실전 활용법에 대해 알아보겠습니다
자바스크립트의 배열은 여러가지 메서드를 제공하고 있지만 그 중에서 가장 강력한 녀석을 뽑으라면 단연 reduce()를 뽑을 수 있을텐데요. 워낙 범용적으로 쓰일 수 있는 메서드이다 보니 reduce()가 사용된 코드를 해석하는데 어려움을 느끼시는 분들이 많습니다. 이번 포스팅에서는 reduce() 메서드의 기본 사용법을 알아보고 다양한 예제를 통해 어떻게 실제 개발에서 활용할 수 있는지 배워보겠습니다. 기본 문법 어떤 배열을의 reduce() 메서드를 호출하면 배열을 상대로 각 요소인자로 넘어온 콜백 함수를 실행하여 누적된 하나의
소프트웨어를 릴리스할 때 "이 커밋이 v1.0.0이다"라고 표시해두면 나중에 특정 버전의 코드를 찾기가 훨씬 수월해지는데요. git tag는 바로 이런 용도로 특정 커밋에 이름표를 붙이는 명령어입니다. 커밋 해시를 외울 필요 없이 v1.0.0, v2.1.3 같은 의미 있는 이름으로 중요한 시점을 기록할 수 있죠. 태그 종류 Git 태그에는 두 가지 종류가 있습니다. Lightweight 태그는 단순히 특정 커밋을 가리키는 포인터입니다. 이름만 붙이고 별도의 정보는 저장하지 않습니다. Annotated 태그는 태그를 만든 사람, 날짜
Git으로 작업을 하다 보면 현재 브랜치에서 뭔가를 한창 수정하고 있는데 급하게 다른 브랜치로 전환해야 하는 상황이 생기곤 합니다. 아직 완성되지 않은 코드를 커밋하자니 찜찜하고 그렇다고 변경사항을 날리기엔 아까운데요. 바로 이럴 때 git stash가 유용합니다. git stash는 현재 작업 중인 변경사항을 임시로 저장해두고 나중에 다시 꺼내 쓸 수 있게 해주는 명령어인데요. 이번 글에서는 기본 사용법부터 실전에서 유용한 고급 활용법까지 함께 알아보겠습니다. 기본 사용법 git stash의 가장 기본적인 사용법은 간단합니다. 이
주변에 보면 경력과 무방하게 오픈 소스 기여에 관심이 있는 개발자 분들이 참 많은 것 같아요. 오픈 소스에 기여한 이력은 인터넷에 공개되어 있기 때문에 개인의 인지도를 높이는 데 도움이 되고, 오픈 소스 경험이 있는 개발자를 우대하거나 적극적으로 채용하는 기업들도 있으니까요. 뿐만 아니라, 오픈 소스 커뮤니티에서 활동하고 있는 전 세계의 개발자들과 협업하면서 글로벌 네트워크를 넓힐 수 있다는 점도 큰 매력인 것 같습니다. 무엇보다 자신이 작성한 코드가 무료로 많은 사람들에게 해택을 준다는 것은 개발자로서 정말로 보람된 경험이죠. 그
자바스크립트의 배열은 forEach(), filter(),map(), reduce, every(), some() 등과 같이 콜백 함수를 인자로 받아 배열에 저장되어 있는 모든 원소로 상대로 호출해주는 함수들을 제공합니다. 이 함수들을 잘 활용하면 소위 함수형 프로그래밍(Functional Programming) 스타일로 코딩을 할 수 있게 되죠. 그런데 혹시 이러한 자바스크립트의 배열에 제공하는 함수에 비동기 함수를 인자로 넘기면 낭패를 볼 수 있다는 것을 아시나요? 이번 포스팅에서는 자바스크립트 배열 함수를 통해서 비동기 함수를
타입스크립트 프로젝트에서 @types/로 시작하는 수 많은 패키지가 개발 의존성으로 설치되어 있는 것을 보신 적이 있으신가요? 이번 포스팅에서는 이러한 패키지들이 도대체 왜 필요하며 어디서 오는 것인지에 대해서 간단히 알아보려고 합니다. Definitely Typed란? 자바스크립트는 생겨난지 30년이 다 되가는 프로그래밍 언어이지만 타입스크립트는 이제 겨우 탄생한지 10년이 조금 넘었습니다. 최근에 만들어진 자바스크립트 패키지는 대부분은 타입 선언(type definitions)이 내장되어 있지만, 타입스크립트가 등장하기 이전에
React로 앱을 만들다 보면 서버에서 데이터를 가져오는 코드를 정말 자주 작성하게 됩니다. useEffect() 안에서 fetch()를 호출하고 useState()로 로딩 상태와 에러 상태를 관리하고 데이터가 오면 상태를 업데이트하고... 이 패턴을 몇 번이고 반복하다 보면 문득 이런 생각이 들지 않나요? "매번 같은 코드를 쓰고 있는데, 이걸 더 잘 처리하는 방법은 없을까?" 🤔 여기에 캐싱, 재시도, 백그라운드 갱신, 낙관적 업데이트까지 고려하면 상황은 더 복잡해집니다. 이런 문제를 정면으로 해결하기 위해 만들어진 라이브러리
요즘 어떤 프로그래밍 언어로 개발을 하든 코드 편집기로 VSCode를 참 많이 사용하는 것 같아요. 그런데 VSCode에서 마치 커서를 여러 곳에 둔 것처럼 동시에 편집할 수 있다는 것을 알고 계시나요? 잘 활용하면 여러분의 개발 생산성을 폭발시킬 수 있는 치트키와 같은 기능이죠! 이번 포스팅에서는 제가 VSCode에서 다중 편집을 위해서 즐겨 사용하는 멀티 커서 기능에 대해서 알려드리겠습니다. 멀티 커서 하나씩 추가하기 우선 멀터 커서를 사용하는 가장 기초적인 방법부터 알려드릴게요. VSCode에서 아무 파일이나 하나 여시고 맥(
실시간 양방향 통신을 위해서 웹소켓(WebSocket)이 표준이 된지가 꽤 되었고, 현재 대부분의 모던 브라우저에서 웹소켓 API를 지원하고 있습니다. 하지만 여전히 우리는 모든 사용자가 최신 브라우저를 사용한다고 단정할 수 없으며, 웹소켓이 지원되지는 않는 환경에서는 어쩔 수 없이 대안 기술을 사용해야 하죠. Socket.IO는 이런 호환성 부분에 대해서 개발자가 크게 걱정할 필요없이 실시간 양방향 통신을 하는 웹 애플리케이션을 작성할 수 있도록 도와주는 라이브러리입니다. 이번 포스팅에서는 간단한 실습을 통해서 Socket.IO를
요즘 웹을 보면 예전에는 상상하지도 못했던 방식으로 여러 사용자와 실시간으로 양방향 상호작용을 하는 애플리케이션을 볼 수 있습니다. 대표적인 예로 다수의 참여자가 동시에 메시지를 주고 받는 채팅이나 실시간으로 게이머 간의 동기화해야 하는 온라인 게임을 들 수 있는데요. 게다가 최근에는 ChatGPT가 등장하면서 AI 기반 채팅 기능을 제공하는 웹사이트들이 점점 늘고 있는 것 같습니다. 이 블로그 글에서는 웹에서 이렇게 실시간 양방향 통신을 필요로 하는 애플리케이션을 구현하는데 필수적인 기술인 웹소켓(WebSocket)에 대해서 살펴
Git은 정말 강력한 도구이지만 명령어가 너무 많고 옵션도 복잡해서 막상 터미널에서 쓰려면 머리가 아플 때가 있습니다. git log --oneline --graph --all을 외우고 있는 사람이 몇이나 될까요? 😅 그렇다고 GUI 클라이언트를 쓰자니 무겁고, 터미널 작업 흐름이 끊기는 게 싫은 분들도 계실 겁니다. 이런 고민을 단번에 해결해주는 도구가 바로 Lazygit인데요. 터미널 안에서 동작하는 Git TUI(Text User Interface)로, 키보드 몇 번이면 스테이징부터 커밋, 브랜치 관리, 인터랙티브 리베이스까
올인원(All-in-one) 테스팅 프레임워크 Vitest를 사용하면 다른 라이브러리 설치 없이 바로 mocking과 spying 기능을 쓸 수 있는데요. 그런데 여기서 mocking과 spying을 한국어로 뭐라고 번역해야 모르겠네요. 😅 주변에서 보면 "모킹"과 "스파잉"으로 그냥 영어를 차용해서 쓰고 있는 것 같습니다. Mocking 이란? 먼저 mocking이 생소하신 분들을 위해서 mocking 대한 기본 개념부터 잡고 들어가는 게 좋을 것 같습니다. mocking은 단위 테스트를 작성할 때, 해당 코드가 의존하는 부분을
깨진 유리창의 법칙(Broken Windows Theory)을 들어보셨나요? 깨진 유리창을 방치하면 그 지점을 중심으로 범죄가 확산된다는 사회학 이론인데요. 이미 낙서가 되어 있는 화장실 벽에는 왠지 낙서를 더 해도 괜찮을 것 같은 느낌이 들거나, 누군가가 무심코 버린 작은 쓰레기 주변에 금세 쓰레기 더미가 쌓이는 모습은 깨진 유리창의 법칙의 대표적인 예입니다. 최근 많이 들리는 미국 캘리포니아 주에서 경범죄에 대한 처벌을 약화시킨 결과, 유명 브랜드들이 사업을 철수할 정도로 치안이 매우 좋지 않아졌다는 뉴스도 깨진 유리창의 이론의
React로 관리자 페이지나 대시보드를 만들다 보면 테이블 UI는 거의 빠지지 않고 등장합니다. 데이터를 표로 보여주는 것까진 괜찮은데, 정렬이나 필터링, 페이지네이션까지 붙이려면 코드가 금세 복잡해지죠 😅 예전에는 이런 걸 React Table이라는 라이브러리로 해결했는데요. 이 라이브러리가 v8에서 완전히 새로 설계되면서 이름도 TanStack Table로 바뀌었습니다. TanStack Query나 TanStack Start로 유명한 TanStack 생태계의 일원인데, "headless UI"라는 재밌는 접근 방식을 쓰고 있습