Web

브라우저 환경에서 UI 마크업을 하다 보면 가장 헷갈리는 지점 중 하나가 바로 줄바꿈이다. 언어 별로 줄바꿈이 동작하는 방식도 다르고, 공백 문자가 줄바꿈에 적용되게 하기 위한 방식도 가지각색이다. 줄바꿈에 대한 요구사항이 들어올 때마다 매번 대충 구글링해서 쓰던 white-space: pre 뭐시기 속성, word-break, 태그 등… 이번에는 과연 이 속성들이 어떻게 동작하는 것이고, 어떤 상황에서 어떤 줄바꿈 전략을 사용해야 하는지 알아보고자 한다. 줄바꿈을 적용하는 방법을 알아보기 위해, 먼저 줄바꿈에는 어떤 종류의 것들이 있고, User Agent에 의한 콘텐츠 래핑은 어떻게 발생하는지 짚고 넘어가보자. 줄바꿈은 어떻게 발생할까 인라인 성격의 텍스트가 줄로 배치되는 경우, 박스 영역을 기준으로..

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..

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

모던한 환경에서 자바스크립트를 사용하는 개발자라면 흔히 npm을 사용해보았을 것이다. 자바스크립트 패키지들을 한 프로젝트에서 사용할 수 있도록, 그리고 누구나 배포할 수 있도록 만들어진 패키지 매니저가 바로 npm이다. node.js에 기본으로 내장된 패키지매니저인 만큼 점유율이 가장 높기도 하다. 그러나 사용하다보면 여간 불편한 점들이 존재하기 마련이다. 특히 package.json을 통해 생성하는 node_modules는 관리하기가 상당히 까다롭다. 본 포스팅에서는 npm의 문제점을 짚어보고, 대안으로 등장한 yarn berry의 개념 및 간단한 사용법을 알아보고자 한다. npm의 문제점 npm으로 만들어진 프로젝트에는 크게 package.json, package-lock.json, 그리고 거대한 n..