웹 애플리케이션을 개발하다 보면 로컬에서 실행 중인 서버를 외부에서 접속할 수 있게 해야 할 때가 있습니다. 예를 들어, 작업 중인 결과물을 클라이언트나 동료에게 시연해야 하거나, 외부 서비스(예: GitHub, Stripe, Slack)의 웹훅(Webhook)을 테스트해야 하는 경우가 그렇죠. 매번 클라우드 서버에 배포하는 것은 번거롭고 시간도 오래 걸립니다. 공유기 설정을 건드려서 포트 포워딩을 하는 것도 보안상 위험할 수 있고요. 이럴 때 가장 간편하게 사용할 수 있는 도구가 바로 ngrok입니다. ngrok은 로컬 컴퓨터의
Google Cloud Console에서 VM 하나 만들려고 브라우저를 열고, 프로젝트를 전환하려고 또 클릭하고, 배포 상태를 확인하려고 다시 페이지를 새로고침하고... 이런 경험 없으신가요? gcloud는 Google Cloud의 공식 CLI 도구입니다. Compute Engine, Cloud Storage, Cloud Run, BigQuery 같은 주요 서비스를 터미널 명령어 하나로 다룰 수 있어서 브라우저 없이도 클라우드 리소스를 관리할 수 있는데요. 셸 스크립트나 CI/CD 파이프라인에서도 그대로 쓸 수 있어서 자동화에도 딱
이번 포스팅에서는 차세대 번들러인 Vite 사용하여 React 프로젝트를 생성하고 설정하는 방법에 대해서 알아보겠습니다. Vite에 대한 기초적인 내용에 대해서는 별도 포스팅에서 자세히 다루고 있으니 참고하세요. CRA 🆚 Next.js 🆚 Vite 오랫동안 React 프로젝트를 만들기 위해서 Create React App라는 CLI 도구가 사용되었습니다. State of JS 2023 설문 결과를 보시면 Create React App을 사용해봤다는 응답자가 90%가 넘을 정도로 CRA는 오랫동안 React 생태계에서 프로젝트를
셸 스크립트를 들여다보면 거의 항상 첫 줄에 이런 코드가 있습니다. -euo pipefail이라는 옵션이 뭔지 모르고도 한참을 그냥 따라 쓰다가, 어느 날 set -a로 시작하는 .env 로딩 스크립트를 마주치면 또 한 번 당황하게 되는데요. 그러다 문득 "그러면 옵션 없이 그냥 set만 쓰면 어떻게 되지?" 하는 의문도 생깁니다. set은 셸에서 가장 자주 쓰이는 명령어인데도 정작 그 정체가 뭔지 정리된 자료가 많지 않습니다. 이번 글에서는 set이 어떤 명령어이고, 왜 옵션이 헷갈리게 보이는지, 자주 쓰는 패턴은 무엇인지 하나씩
Vite가 Webpack이나 Parcel과 같은 기존 번들러(bundler)를 제치고 자바스크립트 생태계의 표준 빌드 도구로 자리 잡았습니다. Vue.js의 창시자인 Evan You가 만든 Vite는 2026년 3월 Vite 8 출시와 함께 Rust 기반의 Rolldown을 도입하면서 성능이 한층 빨라졌는데요. Vite를 관리하는 회사 VoidZero는 2026년 6월 Cloudflare에 인수되었지만, Vite는 변함없이 MIT 라이선스 오픈소스로 유지됩니다. 이번 포스팅에서는 Vite를 처음 사용하시는 분들을 위해서 Vite로
터미널에서 작업하다 보면 길고 복잡한 명령어를 반복해서 입력하게 됩니다. docker compose --file docker-compose.production.yml up --detach 같은 명령어를 한 글자씩 정확히 치는 건 너무 비효율적이죠. 그래서 우리에게는 Tab 키가 있습니다. Tab 키로 명령어 이름과 파일 경로를 완성하는 건 누구나 알고 있죠. 그런데 쉘의 자동 완성은 그게 끝이 아닙니다. 서브 명령어, 옵션 플래그, 환경 변수, 심지어 Git 브랜치 이름까지 Tab 한 번으로 완성할 수 있는데요. 이 글에서는 Bas
쉘 스크립트를 읽다 보면 ${tag#v}나 ${file%%.*} 같은 독특한 문법을 마주치게 됩니다. 중괄호 안에 #이나 % 같은 기호가 붙어 있어서 처음 보면 꽤 당황스러운데요. 이게 바로 Bash의 **파라미터 확장(Parameter Expansion)**입니다. 파라미터 확장을 알면 sed, awk, cut 같은 외부 명령어 없이도 변수값을 자유자재로 다룰 수 있습니다. 문자열에서 특정 부분을 잘라내거나, 패턴을 치환하거나, 변수가 비어 있을 때 기본값을 넣어주거나... 이런 작업을 Bash 내장 기능만으로 처리할 수 있죠.
쉘 프로그래밍을 처음 하시는 분들이 스크립트를 읽으시다가 2>&1 같은 알 수 없는 문법을 보고 당황하시는 경우가 있습니다. 이것을 보통 리다이렉션(Redirection)이라고 하는데요. 어떤 명령의 입력이나 출력을 다른 곳으로 변경하기 위해서 사용됩니다. 이번 포스팅에서는 쉘 리다이렉션의 기본 사용법을 알아보고 다양한 예제를 통해 어떻게 실제 쉘 프로그래밍에 활용할 수 있는지 배워보겠습니다. 표준 스트림 쉘의 리다이렉션을 이해하려면 우선 macOS와 같은 유닉스 계열 운영체제의 세 가지 표준 스트림(Standard Stream)을
혹시 git worktree라는 Git 명령어를 아시나요? 사실 이 명령어는 Git 2.5(2015년)에 도입된 꽤 오래된 기능인데요. 그동안 잘 알려지지 않았다가 최근 Claude Code, Cursor 같은 AI 코딩 에이전트들이 적극적으로 활용하면서 다시 주목받고 있습니다. 여러 작업을 병렬로 처리하면서 변경사항을 안전하게 격리하기 위해서인데요. 이처럼 git worktree는 사람뿐 아니라 AI에게도 빠질 수 없는 도구가 되어가고 있습니다. 이번 글에서는 git worktree의 기본 개념과 실전 활용법에 대해 알아보겠습니다
소프트웨어를 릴리스할 때 "이 커밋이 v1.0.0이다"라고 표시해두면 나중에 특정 버전의 코드를 찾기가 훨씬 수월해지는데요. git tag는 바로 이런 용도로 특정 커밋에 이름표를 붙이는 명령어입니다. 커밋 해시를 외울 필요 없이 v1.0.0, v2.1.3 같은 의미 있는 이름으로 중요한 시점을 기록할 수 있죠. 이때 버전 번호를 매기는 규칙은 유의적 버전(SemVer)을 따르는 것이 일반적입니다. 태그 종류 Git 태그에는 두 가지 종류가 있습니다. Lightweight 태그는 단순히 특정 커밋을 가리키는 포인터입니다. 이름만 붙
Git으로 작업을 하다 보면 현재 브랜치에서 뭔가를 한창 수정하고 있는데 급하게 다른 브랜치로 전환해야 하는 상황이 생기곤 합니다. 아직 완성되지 않은 코드를 커밋하자니 찜찜하고 그렇다고 변경사항을 날리기엔 아까운데요. 바로 이럴 때 git stash가 유용합니다. git stash는 현재 작업 중인 변경사항을 임시로 저장해두고 나중에 다시 꺼내 쓸 수 있게 해주는 명령어인데요. 이번 글에서는 기본 사용법부터 실전에서 유용한 고급 활용법까지 함께 알아보겠습니다. 기본 사용법 git stash의 가장 기본적인 사용법은 간단합니다. 이
쉘을 처음 쓰시다 보면 누군가의 블로그나 README에서 이런 명령어를 자주 보게 됩니다. 가운데 들어 있는 | 기호가 도대체 무슨 역할을 하는지 처음에는 감이 잘 잡히지 않으실 텐데요. 이 기호를 파이프(pipe) 또는 파이프라인(pipeline)이라고 부릅니다. 이름 그대로 한 명령어의 출력을 다음 명령어의 입력으로 흘려보내는 관이라고 생각하시면 됩니다. 이번 포스팅에서는 리눅스 파이프의 기본 개념부터 실제로 자주 쓰는 조합 패턴까지 차근차근 살펴보겠습니다. 앞으로 파이프가 들어간 명령어를 보실 때 마음이 한결 편해지실 거예요.
도메인을 구매한 후에 DNS 설정을 했는데 브라우저에서 해당 웹사이트에 접속이 안되면 어디서부터 디버깅을 해야 할지 상당히 난감할 수 있는데요. 이번 포스팅에서는 DNS 설정에 문제가 발생했을 때 정말로 유용하게 사용할 수 있는 도구인 dig 명령어에 대해서 알아보겠습니다. 명령어 소개 dig는 Domain Information Groper의 약자로, DNS 정보를 조회하고 진단하기 위한 커맨드 라인 도구인데요. dig라는 영단어가 "파다", "파헤치다", "파서 찾아내다" 라는 뜻이 있어서, 도구의 목적을 생각해보면 굉장히 쉽게
이번 포스팅에서는 ChatGPT API를 활용하여 파이썬으로 GhatGPT와 유사하지만 터미널 상에서 돌아가는 간단한 챗앱을 구현해보겠습니다. OpenAI API 키 설정 OpenAI에서 회원 가입 후에 API 키를 발급받는 방법은 별도 포스팅에서 자세히 다루었으니 참고 바랍니다. 사전 준비로 터미널을 열고 OPENAI_API_KEY라는 환경 변수에 OpenAI에서 발급받은 API 키를 설정해줍니다. 이렇게 API 키를 환경 변수로 저장해놓으면 Python 코드를 실행할 때 os 모듈의 getenv() 함수를 통해 쉽게 환경 변수를
이번 포스팅에서는 ChatGPT API를 활용하여 자바스크립트로 GhatGPT와 유사하지만 터미널 상에서 돌아가는 간단한 챗앱을 구현해보겠습니다. 사전 준비 최대한 간단한 예제를 위해서 GhatGPT API를 호출할 때 외부 라이브러리를 사용하지 않고 Node.js에 내장되어 있는 fetch() 함수를 사용하려고 합니다. Node.js에서는 v17.5 이상부터 fetch() 함수를 지원하고 있으므로 본인 컴퓨터에 v17.5 이전 Node.js가 설치되어 있다면 현재 LTS 버전인 v18로 업그레이드를 추천드리겠습니다. 원격 API를
최근에 ORM으로 Prisma를 선택하는 자바스크립트 또는 타입스크립트 프로젝트가 부쩍 많아진 느낌입니다. 이번 포스팅에서는 차세대 ORM 프레임워크로 각광받고 있는 Prisma에 대해서 함께 알아볼까요? Prisma란? Prisma는 자바스크립트와 타입스크립트 커뮤니티에서 주목받고 있는 차세대 ORM(Object Relational Mapping) 프레임워크입니다. 데이터베이스와 상호작용하는 응용 애플리케이션을 개발할 때, 프로그래머가 직접 SQL을 작성하지 않아도 되므로, 개발 생산성을 높여주는 측면에서 기존에 사용되던 Sequ
분산 시스템 환경에서 가장 흔하게 접할 수 있는 백엔드(backend) 애플리케이션은 아마도 특정한 도메인의 데이터를 관리해주는 REST API일 텐데요. 이번 포스팅에서는 NestJS를 이용하면 얼마나 효과적으로 이러한 전형적인 REST API를 개발할 수 있는지 알아보겠습니다. 실습 프로젝트 구성 먼저 간단한 실습을 위해서 NestJS 프로젝트가 하나 필요할 것 같은데요. 터미널에서 NestJS CLI 도구의 nest new 명령어를 실행하여 새로운 프로젝트를 구성하도록 하겠습니다. NestJS CLI를 설치하고 NestJS 프
최근에 NestJS로 시작하는 백엔드(backend) 프로젝트가 부쩍 많아진 느낌입니다. 이번 포스팅에서는 차세대 웹 프레임워크로 각광받고 있는 NestJS에 대해서 함께 알아보려고 합니다. NestJS란? NestJS는 자바스크립트나 타입스크립트로 서버 애플리케이션을 개발할 수 있는 백엔드 웹 프레임워크(Web framework)입니다. 다른 프로그래밍 언어에서 넘어오신 분이라면 자바의 스프링(Spring)이나 파이썬의 장고(Django)를 생각하시면 이해가 쉬우실 것 같네요. 자바스크립트 쪽에서는 상당히 오랫동안 Express라
이번 포스팅에서는 Glob Patterns, 흔히 줄여서 Globs라고 불리는 패턴 매칭에 대해서 알아보도록 하겠습니다. Globs(Glob Patterns)란? Globs은 오래전부터 리눅스 운영체제에서 한 번에 여러 개의 파일을 찾을 때 사용해온 패턴 매칭 기법인데요. 많은 리눅스 명령어가 인자로 Glob 패턴을 받기 때문에 알게 모르게 많이 사용하고 있으실 거에요. 예를 들어, 터미널에서 ls src/*.java와 유사한 커맨드를 날려보신 적이 있으시면 이미 어느 정도 Globs 문법을 자연스럽게 체득하셨다고 볼 수 있을 것
이번 포스팅에서는 타입스크립트 코드를 자바스크립트로 컴파일하는 기본적인 방법에 대해서 알아보겠습니다. 타입스크립트가 처음이라면 먼저 TypeScript 입문 글에서 정적 타입 검사와 타입 소거가 무엇인지 살펴보셔도 좋습니다. 타입스크립트 컴파일러 우선 타입스크립트 컴파일러(TypeScript compiler)가 무엇을 해주는 도구인지 간단히 짚고 넘어갈까요? 일반적으로 컴파일(compile)은 소스 코드를 특정 플렛폼에서 실행 가능한 형태로 변환하는 과정을 의미하는데요. 기존에는 C++나 Java와 같이 자체 타입 시스템을 가진 프