전체 글

node.js 환경에서 외부 의존성 패키지를 추가할 때, 보통 다음과 같이 버전을 명시할 수 있다. # yarn을 사용한다면 yarn add package-name@version # npm을 사용한다면 npm install package-name@version 그런데 버전 뿐 아니라, 다음과 같이 특별한 태그를 지정할 수도 있다. (이걸 dist-tag 라고 부른다.) 가장 많이 쓰이는 태그는 latest다. # yarn yarn add package-name@latest # npm npm install package-name@latest 이렇게 설치를 하면 프로젝트의 디펜던시는 특정 버전이 아닌, 배포된 패키지의 최신 버전을 자동으로 바라보게 된다. // next 의존성을 latest로 설치한 결과 {..

브라우저에서 이미지를 비롯한 바이너리 파일을 다룰 일이 종종 생긴다. 작업할때마다 매번 찾아보게 되는 것들이 있어서 이참에 정리해보려고 한다. 이미지 MIME type 다음과 같이 이미지 File 객체의 type으로 판단할 수 있다. Blob 객체의 readonly attribute로서 존재한다. filepicker.addEventListener("change", (event) => { const files = event.target.files; for (const file of files) { console.log(file.type) // 해당 파일이 webp 형식의 이미지인지 확인하려면? console.log(file.type === 'image/webp') } }); 이미지 용량 다음과 같이 Fil..

프론트엔드 환경에서 API 동작을 모킹하는 것은 여러 가지 이유로 필요해진다. 프론트엔드의 동작은 필연적으로 백엔드 API와 강한 의존성을 가지게 되기 때문이다. 그런데 우리는 생산성을 높이기 위해 백엔드와 독립적인 환경에서 개발을 하고 싶다. 만약 서버 요청이 들어가는 페이지의 e2e 테스트를 짜고 싶다면? 백엔드 개발이 완료되기 전에 프론트엔드 개발에 착수한다면? 개발 서버의 특정 API에서 에러가 나고 있어 프론트엔드 개발이 블로킹된 상황이라면? 위와 같은 케이스는 API단을 모킹하는 수고를 들일 만한 충분한 이유가 될 것이다. 특히 두 번째 이유는 꽤나 자주 일어나는 일인데, 보통 프로젝트를 시작할 때 프론트엔드와 백엔드가 동시에 개발에 착수하곤 하기 때문이다. 서비스 런칭 데드라인은 가까워질 터..

터미널을 자주 사용한다면 한번쯤 생각해봤을 것이다. 커멘드라인으로 터미널에서 직접 IDE를 실행할 수 있다면 정말 편할 텐데! 그래서 써보는 아주 간단한 웹스톰 커멘드라인 적용법. 웹스톰 커멘드라인 실행환경 만들기 1. 우선 웹스톰을 실행한다. 2. Tools > Create Command-line Launcher 3. 환경변수에 웹스톰 경로를 설정하라는 팝업을 확인할 수 있다. 4. 설정 파일에 들어가서 다음과 같이 PATH 환경 변수에 Webstorm 실행 파일의 경로를 추가해준다. # zsh을 사용한다면 vim ~/.zshrc # bash를 사용한다면 vim ~/.bash_profile export PATH="/Applications/WebStorm.app/Contents/MacOS:$PATH" 5..

팀 단위로 협업을 하는 환경에서는 코드 포맷팅(code formatting)이나 린트(lint) 등 코드 수정이 발생할 때마다 지켜져야 하는 규칙들이 존재할 것이다. 이런 코드 스타일은 세팅파일을 읽어와서 개개인의 에디터에서 직접 자동으로 적용되도록 설정해둘 수 있다. 그러나 Error 또는 Warning이 발생하더라도 코드 자체를 커밋하고 푸시하는 것에 제한이 걸리지 않는다면, 규칙없이 작성된 코드가 머지되고 배포될 가능성이 생긴다. 이를 방지하기 위해 Pull Request를 통해 코드를 머지하는 시점에 해당 규칙을 검사하도록 CI 파이프라인을 만들 수도 있겠다. 그러나 워크플로우를 돌리기 위한 별도의 서버 자원을 사용하고 관리해야 한다는 점, 그리고 소스의 커밋, 푸시가 이미 완료된 시점에서 그 다..