파이썬으로 데이터를 다루다 보면 여러 리스트를 하나로 이어 붙이거나, 조건을 만족할 때까지만 순회하거나, 모든 조합을 구해야 하는 상황이 생기곤 하는데요. 그럴 때마다 for 루프와 임시 리스트를 조합해 작성하다 보면 코드가 생각보다 길어집니다. 😅 이럴 때 파이썬 표준 라이브러리의 itertools 모듈이 큰 도움이 됩니다. 이터레이터를 효율적으로 만들고 조합하는 함수를 모아놓은 모듈인데요. 내장 함수인 map()이나 filter()와 마찬가지로 결과를 한꺼번에 메모리에 올리지 않고 필요할 때마다 하나씩 생성하기 때문에 대용량
컴포넌트 기반 UI 개발의 패러다임을 주도한 React가 등장한지도 어느 덧 10년이 넘었네요. 이제 Vue.js, Svelte, Angular 등 어떤 프론트엔드 프레임워크를 사용하든 현대 웹 개발에서 컴포넌트 기반으로 UI 개발하는 것은 거의 당연한 얘기가 되었죠. 그리고 마침내 웹 컴포넌트(Web Components)를 통해서 별다른 프론트엔드 프레임워크가 없어도 웹 표준 기술만을 이용해서 UI 컴포넌트를 만들 수 있는 길이 활짝 열렸습니다. 이번 포스팅에서는 UI 컴포넌트를 만들 수 있는 웹 표준 기술인 웹 컴포넌트의 기본
파이썬에서는 두 객체를 비교할 때 is 연산자와 == 연산자를 사용합니다. 비슷해 보이지만 이 두 연산자는 비교하는 대상이 완전히 다른데요. 차이점을 정확히 이해하지 않으면 찾기 어려운 버그를 만들어낼 수 있습니다. 이번 포스팅에서는 is 연산자와 == 연산자가 정확히 무엇을 비교하는지, 그리고 언제 어떤 연산자를 써야 하는지 알아보겠습니다. is 연산자 🆚 == 연산자 파이썬에서 is 연산자는 두 변수가 메모리 상에서 같은 객체를 가리키는지를 확인합니다. 반면 == 연산자는 두 객체의 값이 같은지를 비교합니다. 간단한 예로 리스
Command Palette(명령 팔레트)는 VSCode의 기본 기능과 확장 기능을 빠르게 실행할 수 있는 매우 강력한 도구입니다. Command Palette를 사용하면 번거롭게 마우스로 메뉴바에서 원하는 기능을 일일이 찾아보지 않아도 키보드만으로 VSCode 다양한 기능을 제어할 수 있습니다. 이번 포스팅에서는 VSCode의 만능 치트키와 같은 Command Palette를 어떻게 사용하는지 알아보겠습니다. 파일 검색 VSCode에서 Command Palette를 여는 것은 매우 간단한데요. 맥에서는 Cmd + P, 윈도우즈에서
웹 개발을 하다 보면 한 가지 의문이 드는 순간이 있습니다. 버튼 하나 클릭했을 때 서버에서 데이터 받아와서 화면 일부만 바꾸고 싶은데, 꼭 React나 Vue 같은 프레임워크를 써야 할까? 간단한 검색 폼이나 좋아요 버튼 하나 만드는데 JavaScript를 수십 줄씩 작성하는 게 과연 맞는 걸까? 이런 고민은 사실 꽤 오래전부터 있었어요. SPA(Single Page Application)가 대세가 되면서 JavaScript 코드는 점점 늘어났고 빌드 도구도 복잡해졌고 번들 크기도 커졌죠. 그런데 정작 만들고 싶었던 건 "클릭하면
이번 포스팅에서는 차세대 번들러인 Vite 사용하여 React 프로젝트를 생성하고 설정하는 방법에 대해서 알아보겠습니다. Vite에 대한 기초적인 내용에 대해서는 별도 포스팅에서 자세히 다루고 있으니 참고하세요. CRA 🆚 Next.js 🆚 Vite 오랫동안 React 프로젝트를 만들기 위해서 Create React App라는 CLI 도구가 사용되었습니다. State of JS 2023 설문 결과를 보시면 Create React App을 사용해봤다는 응답자가 90%가 넘을 정도로 CRA는 오랫동안 React 생태계에서 프로젝트를
수집기 정리까지 오면서 흘려보낸 건 추적뿐이었습니다. 추적은 요청 하나를 아주 자세히 보여 주지만 "지난 한 시간 동안 오류율이 몇 퍼센트였나"에는 답하지 못해요. 요청 하나하나를 다 뒤져 세야 하니까요. 지표, 로그, 추적 정리에서 정리했듯 그건 지표(metric)의 몫입니다. 이 글에서는 지표를 만드는 계측기(instrument) 종류를 고르는 법, 속성을 붙일 때 조심할 것, 그리고 Prometheus까지 연결하는 과정을 다루겠습니다. 계측기는 네 가지 지표를 만들려면 먼저 미터(meter)를 얻고 거기서 계측기를 만듭니다.
VSCode에서 코딩을 하다보면 글자나 단어 단위가 아닌 줄 또는 행(line) 단위로 편집 작업을 하고 싶을 때가 있은데요. 이번 포스팅에서는 개발 생산성을 극대화 시킬 수 있는 VSCode의 줄 편집 관련 단축키를 알려드리려고 합니다. 위/아래에 새로운 줄 넣기 코드 편집을 하다보면 커서가 줄 맨 뒤에 있지 않을 때도 아래에 새로운 줄을 추가하고 싶을 때가 있는데요. 이럴 때 커서가 있는 곳에서 그냥 Enter 키를 누르시면 커서 뒤에 있는 모든 내용이 다음 줄로 가버리죠. 대신에 한번 Command+Enter를 눌러보세요. 그
VSCode에서 효과적으로 코드 편집을 하려면 무엇보다 마우스 커서(cursor)를 원하는 위치로 빠르게 이동하고 원하는 영역을 빠르게 선택하는 것이 매우 중요한데요. 양손으로 키보드로 타이핑을 하다가 커서를 옮기거나 드래그를 하기 위해서 잠깐 잠깐 한 손을 마우스나 트랙패트로 옮기는 것이 은근히 개발 생산성을 떨어뜨릴 수 있기 때문입니다. 이번 포스팅에서는 VSCode에서 커서를 키보드로 자유자재로 제어하시려면 꼭 알고 계셔야 하는 필수 단축키를 정리해드리겠습니다. 영역 선택 코드를 편집할 때 한 글자씩 하면 너무 생산성이 떨어지
CSS 네스팅(Nesting)은 어떤 선택자 내부에 다른 선택자를 넣어서 계층적인 스타일이 가능케하는 문법입니다. 예전에는 SCSS, SASS, LESS와 같은 CSS 전처리기를 사용해야 쓸 수 있던 기능이 었지만, 최근에는 CSS 표준에도 CSS Nesting이 정식으로 도입되어 Vanilla CSS에서도 사용이 가능해졌습니다. 이번 포스팅에서는 CSS Nesting을 왜 사용해야하고 어떻게 사용하는지에 대해서 알아보겠습니다. 본 포스팅은 CSS 선택자(selector)와 결합자(combinator)에 대한 기본적인 이해가 필요합
B2C 서비스를 잘 운영하다가 엔터프라이즈 고객과 계약을 앞두면 십중팔구 듣게 되는 말이 있는데요. "저희는 Okta로 SSO 연동해야 합니다. SAML 메타데이터 보내드릴게요." "Azure AD 그룹 그대로 사용자 프로비저닝 되죠? SCIM 스펙 문서 공유 드립니다." 이때부터 일이 커집니다. SAML 명세는 두껍고, 고객사마다 IdP가 Okta, Azure AD, Google Workspace, OneLogin, Ping 등으로 제각각이라 각 IdP의 설정 화면까지 안내해야 해요. WorkOS는 이 고통을 표준화된 API 하나
셸 스크립트를 들여다보면 거의 항상 첫 줄에 이런 코드가 있습니다. -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로
새 제품을 만들 때 로그인 기능은 거의 예외 없이 등장하는 요구사항인데요. 막상 직접 구현하려고 보면 비밀번호 해싱, 세션, 소셜 로그인 연동, 비밀번호 재설정 메일, 2단계 인증까지 할 일이 끝도 없이 늘어납니다. Auth0는 이 귀찮은 일들을 외주 주듯 맡길 수 있는 관리형 인증 서비스예요. 설정 몇 번에 소셜 로그인과 MFA까지 붙여주기 때문에, 인증 자체가 제품의 핵심이 아니라면 시간을 크게 아낄 수 있습니다. 이 글에서는 Auth0가 어떻게 생긴 서비스인지, 실제로 SPA에 어떻게 붙이는지, 그리고 언제 쓰면 좋고 언제 피
터미널에서 작업하다 보면 길고 복잡한 명령어를 반복해서 입력하게 됩니다. 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)을
웹 개발을 하다 보면 소위 팝업(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() 메서드를 호출하면 배열을 상대로 각 요소인자로 넘어온 콜백 함수를 실행하여 누적된 하나의