curl로 API를 호출하고 나서 JSON 응답이 한 줄로 쭉 이어져서 나올 때 난감했던 경험, 한 번쯤 있지 않으신가요? 아니면 수백 줄짜리 JSON에서 딱 필요한 필드 하나만 뽑아내고 싶은데 눈으로 훑어보다 포기한 적은요? 이럴 때 빛을 발하는 게 바로 jq입니다. jq는 터미널에서 JSON 데이터를 자유롭게 조회하고 가공할 수 있게 해주는 커맨드라인 도구인데요. sed나 awk가 텍스트를 다루듯이 jq는 JSON을 다루는 전용 도구라고 보시면 됩니다. 이번 글에서는 jq의 설치부터 기본 문법과 실무에서 자주 쓰는 패턴까지 쭉
터미널 도구를 설치하다 보면 "Nerd Font를 설치하세요"라는 안내를 한 번쯤 보셨을 거예요. Starship을 깔 때도 그렇고, NeoVim 플러그인이나 Ghostty 같은 터미널을 꾸밀 때도 빠지지 않고 등장하죠. 그런데 막상 "Nerd Font가 뭔데?" 하고 물으면 선뜻 설명하기가 애매합니다. 폰트인 건지 아이콘 라이브러리인 건지 헷갈리는 분들을 위해 이 글을 준비했어요. Nerd Font가 뭔가요? Nerd Font는 기존 프로그래밍 폰트에 개발 관련 아이콘을 덧붙여주는 오픈소스 프로젝트입니다. "폰트 패치(patch)
개발을 하다 보면 영상이나 오디오 파일을 다뤄야 할 때가 종종 있죠. 프론트엔드에서 업로드된 영상의 포맷을 바꿔야 하거나, 데모 영상에서 오디오만 뽑아야 하거나, API 문서에 넣을 GIF를 만들어야 할 때처럼요. 이럴 때 GUI 편집 프로그램을 열기엔 너무 거창하고 간단한 커맨드 하나로 해결하고 싶을 때가 있는데요. FFmpeg은 바로 그런 상황에서 빛나는 도구입니다. 터미널에서 한 줄이면 영상 포맷을 변환하고, 오디오를 추출하고, 영상을 자르고 합칠 수 있거든요. 이번 글에서는 FFmpeg의 기본 개념부터 실전에서 자주 쓰는 명
PostgreSQL를 사용하실 때 일반적으로 데이터베이스를 보기 좋게 시각화하여 보여주는 GUI(그래픽 사용자 인터페이스) 기반 클라이언트를 이용하실텐데요. 하지만 간혹 어떤 제약 사항 때문에 이렇게 무거운 프로그램을 설치하기 어려운 상황도 생기기 마련이죠? 이런 경우 PostgreSQL에서 제공하는 CLI(명령 줄 인터페이스) 기반 클라이언트인 psql을 사용하면 매우 간편하게 터미널에서 데이터베이스에 접속할 수 있습니다. psql 명령어 설치 psql는 PostgreSQL 데이터베이스만 설치하면 기본적으로 딸려오는 CLI 도구입
웹 개발을 하다 보면 이미지를 다뤄야 하는 일이 정말 많죠. 사진을 리사이징하고, WebP나 AVIF로 변환하고, 썸네일을 만들고, 메타데이터를 확인하고... 이런 작업을 할 때 많은 분이 ImageMagick을 떠올리실 텐데요. 사실 더 빠르고 메모리도 훨씬 적게 쓰는 도구가 있습니다. 바로 libvips인데요. Node.js의 Sharp 라이브러리가 내부적으로 사용하는 이미지 처리 엔진이 바로 이 libvips입니다. Mastodon, Ruby on Rails, MediaWiki 같은 프로젝트에서도 이미지 처리에 libvips를
개발을 하다 보면 이미지를 가공해야 하는 일이 참 많죠. 포맷을 변환하거나, 크기를 줄이거나, 여러 이미지를 합성하거나, 워터마크를 넣거나... 이런 작업을 매번 포토샵 같은 GUI 프로그램을 열어서 하기엔 너무 번거로운데요. ImageMagick은 바로 그런 상황에서 빛나는 도구입니다. 1990년에 첫 릴리스된 이후 30년이 넘도록 꾸준히 개발되어 왔고, 200개 이상의 이미지 포맷을 지원하는 사실상의 표준 CLI 이미지 도구라고 할 수 있어요. PNG, JPEG, WebP, TIFF, GIF, SVG, PDF까지 거의 모든 포맷
웹사이트의 로딩 속도를 줄이려면 이미지 최적화가 빠질 수 없죠. JPEG이나 PNG 대신 WebP 포맷을 사용하면 동일한 화질에서 파일 크기를 25~35% 정도 줄일 수 있는데요. WebP는 Google이 2010년에 발표한 이미지 포맷으로, 손실(lossy)과 무손실(lossless) 압축을 모두 지원합니다. 현재 Chrome, Firefox, Safari, Edge 등 모든 주요 브라우저에서 지원하고 있어서 실무에서도 안심하고 사용할 수 있어요. Google은 WebP 포맷과 함께 libwebp라는 공식 도구 모음도 제공하고 있
웹사이트를 운영하다 보면 이미지 용량 때문에 고민하는 순간이 꼭 찾아옵니다. 특히 PNG 파일은 무손실 포맷이라 화질은 좋지만 용량이 크다는 게 늘 아쉬운 부분이죠. 로고, 아이콘, 스크린샷 같은 이미지는 JPEG으로 바꾸기도 애매하고, 그렇다고 용량이 큰 채로 두자니 페이지 로딩 속도가 걱정됩니다. 이런 상황에서 pngquant를 사용하면 PNG 이미지의 용량을 60~80%까지 줄이면서도 눈으로 보기에는 거의 차이가 없는 수준의 화질을 유지할 수 있습니다. 이번 글에서는 pngquant의 설치부터 실무에서 바로 활용할 수 있는 다
macOS를 쓰다 보면 이미지 크기를 줄이거나 포맷을 바꿔야 할 때가 종종 있죠. 스크린샷을 PNG에서 JPEG으로 변환하고 싶거나, 블로그에 올릴 사진의 해상도를 낮추고 싶을 때처럼요. 이럴 때 보통 Preview 앱을 열거나 ImageMagick 같은 도구를 따로 설치하곤 하는데요. 사실 macOS에는 이미 강력한 이미지 처리 도구가 기본으로 탑재되어 있습니다. 바로 sips(Scriptable Image Processing System)인데요. 터미널에서 한 줄이면 이미지를 리사이징하고, 포맷을 변환하고, 회전까지 할 수 있어
이번 포스팅에서는 하나의 컴퓨터에서 여러 버전의 Node.js를 사용할 수 있도록 도와주는 도구인 nvm(Node Version Manager)에서 대해서 알아보겠습니다. nvm 설치 제가 Mac을 사용하는 관계로 macOS를 기준으로 nvm을 어떻게 설치하는지 설명하겠습니다. macOS를 포함한 리눅스 계열의 운영체제에서는 nvm 사이트에서 설치 스크립트를 확인할 수 있으며, 윈도우 운영체제의 경우 nvm-windows 사이트에서 설치 파일을 다운로드 받을 수 있습니다. 터미널을 열고 다음 설치 스크립트를 실행합니다. 여기서 다운
자바스크립트 프로젝트에서 개발을 하다보면 터미널을 열고 명령어를 실행해야하는 경우가 빈번하게 생기는데요. 대표적인 예로 로컬 환경에서 애플리케이션을 빌드하고 구동하거나 테스트를 실행하는 것을 들 수 있습니다. 이번 포스팅에서는 자바스크립트 프로젝트에서 자주 사용되는 명령어를 스크립트로 등록하고 실행하는 방법에 대해서 알아보겠습니다. 반복 명령은 스크립트로 자바스크립트 프로젝트에서 개발을 진행하다보면 테스트나 빌드(build), 린트(lint), 포맷(format)처럼 반복적으로 수행해야하는 작업들이 생기기 마련입니다. 각 작업은 일
이번 포스팅에서는 React 프로젝트를 쉽고 빠르게 만들 수 있도록 도와주는 Create React App에 대해서 알아보겠습니다. Create React App React로 개발 프로젝트를 맨땅에서 시작하려면 웹팩(Webpack), 바벨(Babel) 등 정말 미리 배워야하는 기술들이 한 두개가 아닙니다. 초보 개발자들이 이러한 선수 기술들을 일일이 학습하다보면 본래 목표했던 React 애플리케이션 개발이 아득하게 멀어지기 일수인데요... React는 각종 개발 편의 도구가 함께 포함된 프레임워크(framework)라기 보다는 어느
Git으로 협업하다 보면 커밋 이력이 점점 복잡해지는 경험을 한 번쯤 해보셨을 텐데요. git rebase는 커밋 이력을 깔끔하게 재정리해주는 명령어입니다. git merge와 비슷하게 브랜치를 합치는 역할을 하지만, 이력을 다루는 방식에서 큰 차이가 있습니다. merge vs. rebase merge와 rebase의 차이를 그림으로 살펴보겠습니다. main에서 feature 브랜치를 만든 뒤, 양쪽 모두 새 커밋이 생긴 상황입니다. 여기서 merge를 하면 두 브랜치를 합치는 병합 커밋(M)이 생깁니다. 반면 rebase를 하면
Git을 사용한 개발에서 브랜치를 나누어 작업하는 건 기본 중의 기본인데요. 각자의 브랜치에서 작업을 마치고 나면 결국 그 변경 내용을 하나로 합쳐야 합니다. 이때 사용하는 명령어가 git merge입니다. 기본 사용법 git merge는 다른 브랜치의 변경 내용을 현재 브랜치에 합치는 명령어입니다. 예를 들어, feature/login 브랜치의 작업을 main 브랜치에 합치려면 먼저 main으로 이동한 뒤 merge합니다. 이렇게 하면 feature/login에서 작업한 모든 커밋이 main 브랜치에 반영됩니다. Fast-forw
git checkout은 Git에서 브랜치를 전환하고, 파일을 복원하고, 특정 커밋으로 이동하는 등 다양한 작업을 수행할 수 있는 만능 명령어입니다. 마치 도서관에서 책을 check out, 즉 대여하는 것처럼 특징 브랜치나 커밋의 내용을 작업 디렉토리로 가져온다고 생각하시면 됩니다. 브랜치 전환 가장 기본적인 사용법은 이미 존재하는 브랜치로 전환하는 것입니다. 예를 들어, main 브랜치로 전환하려면 다음과 같이 입력합니다. feature/user-auth라는 이름의 feature 브랜치로 전환할 수도 있습니다. 몇 가지 유용한
git switch는 브랜치를 전환하기 위해서 사용하는 Git 명령어입니다. Git 2.23 버전(2019년 8월)에서 처음 도입되었으며, 기존 git checkout 명령어의 브랜치 전환 기능을 좀 더 명확하고 안전하게 사용할 수 있도록 설계되었습니다. 레거시 명령어인 git checkout에 대해서는 별도 포스팅에서 다루고 있으니 참고 바랍니다. 브랜치 전환 가장 기본적인 사용법은 이미 존재하는 브랜치로 전환하는 것입니다. 예를 들어, main 브랜치로 전환하려면 다음과 같이 입력합니다. feature/user-auth라는 이름
Git으로 작업하다 보면 브랜치(branch)를 다룰 일이 정말 많죠. git branch 명령어를 사용하면 브랜치를 만들고 목록을 확인하고 이름을 바꾸거나 삭제할 수 있는데요. 이번 글에서는 git branch 명령어의 기본 사용법부터 실전 활용법까지 함께 살펴보겠습니다. 브랜치란? Git에서 브랜치는 특정 커밋을 가리키는 가벼운 포인터입니다. 새 커밋을 만들 때마다 현재 브랜치의 포인터가 자동으로 최신 커밋으로 이동하죠. 보통 Git 저장소를 처음 만들면 main(또는 master)이라는 기본 브랜치가 생성됩니다. 여기서 새로운
이번 포스팅에서는 터미널에서 간단한 명령어를 입력하여 웹 페이지나 API 데이터를 요청하고 받을 수 있는 HTTP 클라이언트 도구인 curl 커맨드에 대해서 알아보겠습니다. curl 커맨드 1998년에 만들어진 curl 커맨드는 Postman이나 Insomnia와 같이 다양한 기능과 화려한 UI를 제공하는 GUI 기반 HTTP 클라이언트가 계속해서 출시되는 와중에도 아직까지 꾸준히 사랑받고 있는 CLI 도구입니다. curl 커맨드는 리눅스나 macOS에 대부분의 경우 기본으로 탑재되어 있으며, 몇 가지 주요 옵션만 숙지하면 매우 간
팀 프로젝트를 하다 보면 동료가 올린 코드를 내 로컬에 반영해야 하는 상황이 자주 생기는데요. 이때 사용하는 명령어가 바로 git pull입니다. git pull은 원격 저장소(remote repository)의 최신 변경분을 가져와서 현재 브랜치에 합치는 과정을 한 번에 처리해줍니다. git fetch + git merge git pull은 사실 두 가지 명령어를 연달아 실행하는 것과 같습니다. 먼저 git fetch로 원격 저장소의 변경 내용을 로컬로 가져오고, 그 다음 git merge로 현재 브랜치에 합칩니다. 이 두 단계를
git fetch는 원격 저장소(remote repository)의 최신 변경분을 로컬로 가져오되, 현재 작업 중인 코드에는 영향을 주지 않는 명령어입니다. git pull과 혼동하기 쉬운데, git pull이 가져오기와 합치기를 한번에 하는 반면, git fetch는 가져오기만 하고 합치는 건 개발자에게 맡깁니다. git fetch vs. git pull 이 둘의 관계를 코드로 표현하면 다음과 같습니다. git fetch는 원격 저장소의 변경 내용을 origin/main 같은 원격 추적 브랜치(remote-tracking bran