npm 저장소는 모든 프로그래밍 언어를 통털어 명실상부 가장 큰 패키지 저장소입니다. 자바스크립트 개발자들은 편리하게 npm install 명령어를 사용하여 npm 저장소로부터 다양한 패키지를 내려받아 사용하고 있는데요. 이번 포스팅에서는 워낙 자주 사용하다 보니 의외로 잘 모를 수 있는 npm install 명령어를 사용하는 방법에 대해서 알아보려고 합니다. 별도 포스팅에서 자바스크립트 개발자를 위한 필수 npm 커맨드도 정리해두었으니 참고바랍니다. npm install의 별칭 npm install 명령어는 여러가지 별칭이 있는데
개발자 경험을 중요시하는 트렌드에 따라서 최근에 나오는 자바스크립트 프레임워크는 대부분 프로젝트를 편리하게 구성할 수 있도록 명령줄 도구(CLI)를 제공하고 있습니다. 그런데 각 프레임워크의 문서를 확인해보면 프로젝트를 생성하는 방법이 조금씩 다르다는 것을 알 수 있는데요. 예를 들어, React 기반 SPA(Single Page Application)을 생성할 때 많이 사용되는 Create React App의 문서를 보면, npx 명령어나 npm init 명령어를 사용하고 있습니다. 다른 예로, React의 대표적인 메타 프레임워
백엔드와 프론트엔드를 불문하고 대부분의 자바스크립트 프로젝트에는 최상위 경로에 package.json 파일이 있는데요. 그런데 혹시 이 파일이 언제 어떻게 사용되는지를 정확히 알고 계신가요? 이번 포스팅에서는 자바스크립트 개발자로서 알아두면 좋은 package.json 파일에 대해서 자주 사용되는 필드 위주로 정리해드리려고 합니다. 왜 package.json 필요할까? 자바스크립트가 프로그래밍 언어로서 여러 가지 부족한 측면이 있음에도 불구하고 현재의 번영을 누리고 있는 이유는 뭐니 뭐니해도 다른 언어와 비교할 수 없는 어마어마한
웹 개발을 할 때 쿼리 스트링(Query String)을 다루는 일은 번거롭기도 하고 버그도 생기기 쉬워서 오래전부터 라이브러리가 많이 쓰였는데요. 관련해서 npm에서 검색해보면 이름이 조금씩 다른 수많은 라이브러리가 있어서 어떤 것을 선택해야 할지 헷갈릴 수 있습니다. 이번 포스팅에서는 현재 npm trends 기준으로 가장 많이 사용되고 관리가 잘 되고 있는 2종의 자바스크립트 라이브리리, qs와 query-string에 대해서 알아보겠습니다. 라이브러리가 필요한 이유 먼저 자바스크립트로 쿼리 스트링을 다룰 때 왜 라이브러리가
이번 포스팅에서는 깃허브의 CI 서비스인 GitHub Actions를 사용하여 자바스크립트 프로젝트의 지속 통합(Continuous Integration)을 위한 워크플로우를 구성하는 방법에 대해서 알아보겠습니다. 또한 자바스크립트 프로젝트에서 GitHub Actions 셋업이 용이하도록 깃허브에서 제공하는 Setup Node 액션에 대해서도 살펴보겠습니다. 실습 프로젝트와 코드 저장소 생성 실습을 위해서 Create React App을 통해 간단한 자바스크립트 프로젝트를 하나 생성하겠습니다. 그 다음 본인 깃허브 계정에 새로운 코
이번 포스팅에서는 npm 설정을 할 때 필요한 npmrc 파일과 npm config 커맨드에서 대해서 알아보겠습니다. npmrc 파일 npmrc 파일은 npm에서 설정을 저장해두는 파일로서 내장(builtin), 전역(global), 사용자(user), 프로젝트(project) 이렇게 4가지 범위의 npmrc 파일이 존재하는데요. 먼저 내장 설정은 npm이 설치된 경로에 있는 npmrc 파일에 명시되어 있으며 모든 기본 설정을 담고 있습니다. 전역 설정은 같은 컴퓨터를 사용하는 다른 사용자와 모든 프로젝트에 광범위하게 적용되기 때문
이번 포스팅에서는 자바스크립트에서 패키지 매니저로 가장 많이 사용되고 있는 npm과 Yarn에 대해서 알아보겠습니다. 자바스크립트 패키지 매니저 패키지 매니저(package manager)는 프로젝트가 의존하고 있는 패키지를 효과적으로 설치, 갱신, 삭제할 수 있도록 도와주는 관리 도구입니다. 그 어떤 프로그래밍 언어보다 풍부한 오픈 소스 생태계를 자랑하는 자바스크립트에서 특히 패키지 매니저는 중요한 역할을 하는데요. 아무리 간단한 자바스크립트 프로젝트라고 해도 적게는 수십게 많게는 수백개의 다른 패키지에 의존하기 때문입니다. 대부
자바스크립트 프로젝트에서 개발을 하다보면 터미널을 열고 명령어를 실행해야하는 경우가 빈번하게 생기는데요. 대표적인 예로 로컬 환경에서 애플리케이션을 빌드하고 구동하거나 테스트를 실행하는 것을 들 수 있습니다. 이번 포스팅에서는 자바스크립트 프로젝트에서 자주 사용되는 명령어를 스크립트로 등록하고 실행하는 방법에 대해서 알아보겠습니다. 반복 명령은 스크립트로 자바스크립트 프로젝트에서 개발을 진행하다보면 테스트나 빌드(build), 린트(lint), 포맷(format)처럼 반복적으로 수행해야하는 작업들이 생기기 마련입니다. 각 작업은 일
자바스크립트 프로젝트에서 개발을 하다 보면 이름에 lock🔒이 들어있는 package-lock.json, yarn.lock, pnpm-lock.yaml, bun.lock와 같은 파일을 자주 접하게 되죠? 그런데 간혹 신입 개발자가 이 파일의 변경 사항을 커밋하지 않아서 팀원들에게 누가 되거나, 심지어 지웠다가 낭패를 보는 경우를 종종 볼 수 있는데요. 이번 포스팅에서는 무심코 지나치게 쉽지만 사실 매우 중요한 용도를 위해서 사용되는 패키지 잠금 파일(package locks)에 대해서 알아보도록 하겠습니다. 자바스크립트 패키지 매
대부분의 자바스크립트 개발자들은 자신의 프로젝트에 주로 다른 패키지를 설치 후 사용하기 위해서 npm(Node Package Manager)을 사용합니다. 이것이 가능한 이유는 고맙게도 다른 개발자들이 어딘가에서 우리가 사용하는 패키지를 열심히 npm에 배포해주고 있기 때문입니다. 오늘은 한번 이러한 개발자의 입장이 되어 자신이 직접 개발한 자바스크립트 패키지를 npm에 배포하는 방법에 대해서 공부해보겠습니다. npm 저장소 npm을 사용해보신 분이라면 한 번쯤 npm 사이트에 들어가보셨을 것입니다. 보통 이미 사용하고 있는 패키지
브라우저 개발자 도구에서 Sources 패널을 열어보면 원본 TypeScript 파일이 깔끔하게 표시되곤 합니다. 분명 브라우저가 실행하는 건 번들링되고 압축된 JavaScript일 텐데, 어떻게 원본 코드가 나타나는 걸까요? 바로 소스맵(source map) 덕분이에요. 소스맵은 웹 개발에서 빠질 수 없는 디버깅 도구지만 그 내부를 들여다볼 일은 좀처럼 없는데요. 이 글에서는 소스맵의 JSON 구조와 VLQ 인코딩 원리를 깊이 살펴보고 주요 빌드 도구별 설정 방법도 정리해보겠습니다. 나아가 프로덕션 환경에서 소스맵이 뜻하지 않게
백엔드 개발을 하든 프론트엔드 개발을 하든 자바스크립트 프로젝트에서 npm(Node Package Manager)을 사용하는 것은 거의 필수적인데요. 이번 포스팅에서는 실무에서 자바스크립트 프로젝트를 하면서 자주 사용하게 되는 npm 커맨드들을 정리해보았습니다. 프로젝트 생성 npm init 커맨드를 사용하면 현재 디렉터리에 npm 기반으로 프로젝트를 생성할 수 있습니다. 커맨드를 실행하면 패키지 이름, 버전, 설명 등등을 입력하게 됩니다. 프로젝트를 생성할 때 이러한 정보들을 일일이 입력하는 게 귀찮게 느껴질 수 있습니다. 이 때