GraphQL을 사용하다 보면 스키마를 관리하는 일이 점점 중요해지는데요. 팀원이 늘어나고 서비스가 커지면서 "이 필드 바꿔도 기존 클라이언트에 문제 없을까?", "지금 운영 중인 스키마가 정확히 뭐였지?" 같은 고민이 생기기 마련이잖아요? 😅 이럴 때 큰 도움이 되는 도구가 바로 Apollo에서 만든 Rover CLI입니다. 이번 글에서는 Rover CLI의 설치부터 주요 명령어, CI/CD 파이프라인 연동까지 쭉 다뤄보겠습니다. Rover CLI란? Rover는 Apollo GraphQL에서 제공하는 공식 CLI 도구입니다.
지난 포스팅에서는 저장소의 특정 브랜치를 배포 디렉토리로 지정하여 아주 쉽고 빠르게 GitHub Pages로 웹사이트를 호스팅할 수 있다고 배웠는데요. 하지만 요즘 웹 개발에서 HTML, CSS, JavaScript를 직접 작성하는 일은 드물죠? 대부분 React와 같은 프론트엔드 라이브러리와 Vite와 같은 빌드 도구를 사용하여 HTML, CSS, JavaScript를 생성해낼 것입니다. 이번 포스팅에서는 웹 프로젝트를 GitHub Actions를 사용하여 빌드하고, 빌드 결과물을 바로 GitHub Pages에 배포하는 방법에 대
혹시 git worktree라는 Git 명령어를 아시나요? 사실 이 명령어는 Git 2.5(2015년)에 도입된 꽤 오래된 기능인데요. 그동안 잘 알려지지 않았다가 최근 Claude Code, Cursor 같은 AI 코딩 에이전트들이 적극적으로 활용하면서 다시 주목받고 있습니다. 여러 작업을 병렬로 처리하면서 변경사항을 안전하게 격리하기 위해서인데요. 이처럼 git worktree는 사람뿐 아니라 AI에게도 빠질 수 없는 도구가 되어가고 있습니다. 이번 글에서는 git worktree의 기본 개념과 실전 활용법에 대해 알아보겠습니다
GitHub Pages에 웹사이트를 배포하면 기본적으로 github.io 서브 도메인을 무료로 제공해주는데요. 대부분의 개인 프로젝트에서는 GitHub Pages의 기본 도메인을 사용해도 큰 지장이 없을 것입니다. 하지만 비즈니스를 위한 웹사이트를 호스팅할 때는 브랜딩이나 SEO(검색 엔진 최적화) 차원에서 커스텀 도메인을 원하게 되죠. 이번 포스팅에서는 간단한 실습을 통해서 GitHub Pages에 배포한 웹사이트에 커스텀 도메인을 연결하는 방법을 알려드리겠습니다. 커스텀 도메인 구매 GitHub Pages에 커스텀 도메인을 연결
GitHub Pages는 깃허브에서 코드 저장소에 딸려오는 무료 호스팅 서비스입니다. GitHub Pages를 사용하면 정적 웹사이트, 블로그, 포트폴리오, 프로젝트 문서 등을 아주 손쉽게 웹에 배포할 수 있죠. 이번 포스팅에서는 간단한 실습을 통해서 GitHub Pages에 웹사이트를 배포하는 가장 기초적인 방법을 알려드리겠습니다. GitHub Pages란? GitHub Pages는 깃허브 저장소에 올려놓은 프로젝트를 최소한의 노력으로 웹에 호스팅해주는 서비스입니다. 깃허브에서 거의 초창기부터 무료로 제공하고 있는데 은근히 모르시
오픈소스 프로젝트를 운영하다 보면 코드 기여자에게만 공을 돌리기 쉽습니다. 하지만 문서 작성, 번역, 버그 리포트, 디자인, 아이디어 제안 등 다양한 방식으로 프로젝트에 기여하는 분들도 많죠. 이런 다양한 기여자들을 빠짐없이 인정해주고 싶은데, 어떻게 해야 할까요? 🤔 이번 포스팅에서는 All Contributors라는 도구를 소개해드리려고 합니다. All Contributors는 코드 기여뿐만 아니라 모든 형태의 기여를 인정하자는 철학을 담은 명세(specification)이자, 이를 자동화해주는 봇과 CLI 도구입니다. All
CSS에서 자식이나 후손 요소는 아주 쉽게 선택할 수 있지만, 부모나 조상 요소를 선택하는 것은 불가능한 일이 었습니다. 그래서 오랫동안 자바스크립트를 동원해서 이러한 문제를 해결하곤 했었죠. 하지만 CSS에 :has() 가상 클래스가 추가되면서 이것도 이제 옛말이 되었습니다. 웹 개발자들이 많이 기다렸던 만큼 2023년 State of JS 설문 조사 가장 많이 채택된 기능으로 뽑히고도 했었죠. 이번 포스팅에서는 비교적 최근에 CSS에 추가된 기능인 :has() 가상 클래스를 어떻게 사용하는지 알아보도록 하겠습니다. 본 포스팅은
데이터를 특정 기준에 따라 분류하는 것은 자바스크립트로 데이터 처리를 할 때 자주 필요한 작업인데요. 그런데 아직도 데이터 그룹화를 위해서 reduce() 함수나 Lodash 라이브러리를 사용하시나요? 이번 포스팅에서는 자바스크립트에서 데이터를 그룹화를 위해 쓸 수 있는 비교적 새로운 API인 groupBy()에 대해서 알아보도록 하겠습니다. 기존 데이터 그룹화 방법 우선 예전에 자바스크립트에서 데이터 그룹화가 얼마나 불편했는지 살펴볼까요? 다음과 같이 여러 사용자의 이름, 나이, 국가를 담은 배열이 주어졌을 때, 아래와 같이 국가
CSS에서 스타일이 적용되는 범위를 제한하는 일(CSS Scoping)은 오랫동안 웹 개발자들에게 굉장히 커더란 숙제였습니다. 소규모 웹사이트에서는 스타일 충돌을 막기 위해서 BEM(Block Element Modifier)와 같이 클래스의 이름을 일관적으로 짓기 위한 섬세한 규칙을 정해놓고 모든 개발자들이 기억하고 따라야 했습니다. 어느 정도 규모가 있는 앱 애플레케이션을 개발할 때는 React, Svelte, Vue와 같은 프론트엔드 프레임워크의 도움을 받거나 CSS 모듈 또는 CSS-in-JS를 사용해야 특정 컴포넌트에만 스타
웹 개발을 하다보면 CSS를 작성할 때 원하는 스타일이 우선적으로 적용되지 않아서 골치가 아플 때가 많습니다. 특히 대규모 프로젝트에서는 여러 CSS 파일에서 스타일을 가져오다 보니 스타일의 우선순위를 파악하는 것이 쉽지 않죠. 이런 문제를 해결하기 위해 CSS에는 @layer라는 새로운 at-rule을 도입되었습니다. 이번 포스팅에서는 @layer를 사용하여 CSS 스타일 시트를 계층화하여 우선순위를 효과적으로 설정하는 방법에 대해서 알아보겠습니다. 기존의 스타일 우선순위 관리법 CSS에 @layer가 없던 시절에는 동일한 요소를
Bun이 Node.js를 잇는 차세대 자바스크립트 런타임으로 급 부상하면서, Bun을 위해서 탄생한 웹 프레임워크인 Elysia도 큰 관심을 받고 있습니다. 이번 포스팅에서는 Elysia의 주요 특징과 사용법, 그리고 Elysia가 다른 웹 프레임워크와 어떻게 차별화되는지에 대해서 살펴보겠습니다. Elysia란? Express 프레임워크가 Node.js 생태계에서 대표 웹 프레임워크를 담당하고 있다면 Elysia는 Bun 생태계에서 비슷한 역할과 인지도를 갖고 있는 하고 있는 웹 프레임워크입니다. 물론 간단한 웹 서버를 개발할 때는
마침내 제가 쓴 자바스크립트 책, "헬로 Bun"이 출간되어 온라인 서점에서 예약 판매가 시작되었습니다. Bun은 아직 국내에는 많이 알려지지 않았지만, 해외에서는 Node.js의 뒤를 잇는 차세대 자바스크립트 런타임으로 주목받고 있습니다. JavaScript Rising Stars 🌟 2023 집계에서 당당히 2위를 차지한 오픈 소스 프로젝트이며, State of JS 2023 설문 조사에서 개발자 응답에 가장 많이 오르고 내린 정말 HOT🔥한 기술입니다. 사실 처음 Bun을 접했을 때는 제가 국내에 이 기술을 소개하는 책까지
CSS 코드를 작성하다 보면 "이 속성 순서가 맞나?", "컬러 값을 hex로 쓸까 rgb로 쓸까?", "이 선택자는 너무 복잡한 거 아닌가?" 같은 고민을 하게 되는데요. 특히 여러 명이 함께 작업하는 프로젝트에서는 각자 선호하는 CSS 작성 스타일이 달라서 코드 리뷰 때마다 사소한 의견 차이로 시간을 낭비하기 일쑤입니다. 🤔 자바스크립트에는 ESLint라는 훌륭한 린터가 있어서 코드 품질을 자동으로 검사하고 일관된 스타일을 유지할 수 있는데요. CSS에도 이와 똑같은 역할을 해주는 도구가 있습니다. 바로 Stylelint입니다
코드 에디터 하면 VSCode를 떠올리시는 분이 많을 텐데요. 실제로 VSCode가 시장을 지배하고 있지만 가끔 무겁다고 느끼신 적 없나요? 확장을 좀 설치하다 보면 메모리를 잡아먹고, Electron 기반이다 보니 네이티브 앱만큼 빠릿빠릿하지는 않죠. Zed는 이런 불만을 정면으로 해결하려는 코드 에디터입니다. Atom을 만들었던 Nathan Sobo가 Atom의 단종 이후 새로 시작한 프로젝트인데요. Rust로 처음부터 다시 만들어서 GPU 가속 렌더링으로 120 FPS에 가까운 성능을 내고 실시간 협업과 AI 코딩 기능까지 기
지난 포스팅는 HTML, CSS, JavaScript 만으로 UI 컴포넌트를 만들 수 있는 웹 표준 기술인 웹 컴포넌트(Web Components)에 대해서 기본 개념을 잡아보았습니다. 이번 포스팅에서는 웹 컴포넌트를 좀 더 제대로 쓰기 위해서 사용자 정의 요소에 속성(attribute)으로 주어진 값을 활용하는 방법에 대해서 배우도록 하겠습니다. HTML 템플릿 작성 우선 웹 컴포넌트에서 사용할 HTML 코드를 보관하기 위한 HTML 템플릿을 작성해보겠습니다. HTML 템플릿이란 <template> 요소를 사용해서 작성하는 HTM
파이썬으로 데이터를 다루다 보면 여러 리스트를 하나로 이어 붙이거나, 조건을 만족할 때까지만 순회하거나, 모든 조합을 구해야 하는 상황이 생기곤 하는데요. 그럴 때마다 for 루프와 임시 리스트를 조합해 작성하다 보면 코드가 생각보다 길어집니다. 😅 이럴 때 파이썬 표준 라이브러리의 itertools 모듈이 큰 도움이 됩니다. 이터레이터를 효율적으로 만들고 조합하는 함수를 모아놓은 모듈인데요. 내장 함수인 map()이나 filter()와 마찬가지로 결과를 한꺼번에 메모리에 올리지 않고 필요할 때마다 하나씩 생성하기 때문에 대용량
컴포넌트 기반 UI 개발의 패러다임을 주도한 React가 등장한지도 어느 덧 10년이 넘었네요. 이제 Vue.js, Svelte, Angular 등 어떤 프론트엔드 프레임워크를 사용하든 현대 웹 개발에서 컴포넌트 기반으로 UI 개발하는 것은 거의 당연한 얘기가 되었죠. 그리고 마침내 웹 컴포넌트(Web Components)를 통해서 별다른 프론트엔드 프레임워크가 없어도 웹 표준 기술만을 이용해서 UI 컴포넌트를 만들 수 있는 길이 활짝 열렸습니다. 이번 포스팅에서는 UI 컴포넌트를 만들 수 있는 웹 표준 기술인 웹 컴포넌트의 기본
파이썬에서는 객체가 같은지 확인하기 위해서 is 연산자와 == 연산자, 이렇게 두 개의 연산자를 사용합니다. 이 두 연산자의 차이점을 정확히 이해하지 않고 잘못 쓰시면 큰 낭패를 보실 수 잇는데요. 이번 포스팅에서는 is 연산자와 == 연산자의 차이점에 대해서 알아보도록 하겠습니다. is 연산자 🆚 == 연산자 파이썬에서 is 연산자는 두 개의 객체가 메모리 상에서 같은 위치에 있는지 확인할 때 사용하는 연산자입니다. 예를 들어, 숫자나 문자 간에 is 연산자로 비교해보면 참이 나옵니다. 하지만, 리스트나 사전을 is 연산자로 비
Command Palette(명령 팔레트)는 VSCode의 기본 기능과 확장 기능을 빠르게 실행할 수 있는 매우 강력한 도구입니다. Command Palette를 사용하면 번거롭게 마우스로 메뉴바에서 원하는 기능을 일일이 찾아보지 않아도 키보드만으로 VSCode 다양한 기능을 제어할 수 있습니다. 이번 포스팅에서는 VSCode의 만능 치트키와 같은 Command Palette를 어떻게 사용하는지 알아보겠습니다. 파일 검색 VSCode에서 Command Palette를 여는 것은 매우 간단한데요. 맥에서는 Cmd + P, 윈도우즈에서
이번 포스팅에서는 차세대 번들러인 Vite 사용하여 React 프로젝트를 생성하고 설정하는 방법에 대해서 알아보겠습니다. Vite에 대한 기초적인 내용에 대해서는 별도 포스팅에서 자세히 다루고 있으니 참고하세요. CRA 🆚 Next.js 🆚 Vite 오랫동안 React 프로젝트를 만들기 위해서 Create React App라는 CLI 도구가 사용되었습니다. State of JS 2023 설문 결과를 보시면 Create React App을 사용해봤다는 응답자가 90%가 넘을 정도로 CRA는 오랫동안 React 생태계에서 프로젝트를