웹 개발을 하다 보면 이미지를 다뤄야 하는 일이 정말 많죠. 사진을 리사이징하고, 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에 대해서는 git checkout 사용법에서 다루고 있으니 참고 바랍니다. 브랜치 전환 가장 기본적인 사용법은 이미 존재하는 브랜치로 전환하는 것입니다. 예를 들어, main 브랜치로 전환하려면 다음과 같이 입력합니다. feature/user
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
git push는 원격 저장소(remote repository)에 코드 변경분을 업로드할 때 사용하는 Git 명령어입니다. git commit vs. git push git commit 명령어는 로컬 저장소(local repository)에 코드 변경 이력을 남기기 위해서 사용됩니다. 여기서 로컬 저장소란 git clone 명령어를 통해서 내 컴퓨터에 복제해둔 원격 저장소의 복사본을 의미합니다. 따라서 git commit을 통해 로컬 저장소에 아무리 많은 코드 변경 이력을 남기더라도 원격 저장소에서는 알 길이 없습니다. 반드시 명시
Git은 분산 버전 관리 시스템이라서 하나의 프로젝트에 여러 원격 저장소(remote repository)를 연결할 수 있습니다. git remote 명령어는 이런 원격 저장소들을 관리하는 데 사용하는데요. 원격 저장소를 추가하거나, 연결 상태를 확인하거나, 더 이상 필요 없는 원격을 삭제할 때 모두 이 명령어를 씁니다. 원격 저장소 목록 확인 가장 기본적인 사용법은 현재 등록된 원격 저장소의 이름을 확인하는 것입니다. git clone으로 저장소를 복제하면 기본적으로 origin이라는 이름으로 원격 저장소가 자동 등록됩니다. -v
macOS에서 개발 환경을 처음 셋업할 때 가장 먼저 하는 일이 뭘까요? 대부분의 개발자가 Homebrew부터 설치할 거예요. Git, Node.js, Python, Docker CLI 같은 개발 도구를 터미널 명령어 하나로 설치하고 관리할 수 있게 해주는 도구이기 때문인데요. 한번 쓰기 시작하면 없이는 못 살게 되는 도구죠. 이번 글에서는 Homebrew 설치부터 Cask, Tap, Bundle까지 하나씩 살펴보겠습니다. Homebrew란? Homebrew는 macOS(와 Linux)용 패키지 매니저입니다. Ubuntu에 apt가
git restore는 작업 디렉토리(working directory)나 스테이징 영역(staging area)에 있는 파일을 이전 상태로 되돌릴 때 사용하는 Git 명령어입니다. Git 2.23 버전(2019년 8월)에서 처음 도입되었는데요, 기존 git checkout의 파일 복원 기능을 좀 더 명확하고 안전하게 쓸 수 있도록 만들어졌습니다. 레거시 명령어인 git checkout에 대해서는 별도의 포스팅에서 다루고 있으니 참고 바랍니다. 작업 디렉토리의 변경사항 되돌리기 코드를 수정하다 보면 변경한 내용이 마음에 들지 않아서