JavaScript 라이브러리에서 exports 필드로 여러 환경 대응하기
2024-06-16
기존에 브라우저와 Node.js 각각의 환경에 맞게 다른 코드 베이스를 빌드하고, package.json의 module, main, browser 필드를 활용해서 제공한 패키지가 있었습니다. Next.js 환경에서도 이를 사용할 수 있도록 지원했으나, Next.js v14.0.2 이후 App Router 환경에서 패키지를 제대로 불러오지 못하는 ...
Yarn berry + Yarn workspaces 패키지 Github Packages에 배포해보기 - 2
2022-09-12
지난 포스트에 이어서 이번에는 Github Packages에 npm 패키지를 배포해 보도록 하겠습니다. 배포를 위한 준비 우선 지난 포스트 내용처럼 설정을 진행했다면 배포를 위한 준비는 마친 상태입니다. 한 번 더 해당 설정을 살펴보겠습니다. packages/util/sample-util/package.json Github Packges 배...
Yarn berry + Yarn workspaces 패키지 Github Packages에 배포해보기 - 1
2022-09-11
Node.js 기반의 프로젝트 개발을 진행하다 보면 많은 패키지를 npm을 이용해서 설치하고 사용하게 되는데요. npm을 통해 설치하여 사용하는 모듈은 기본적으로 npm public registry에 배포되기 때문에 누구나 설치 가능한 패키지가 됩니다. 하지만 패키지를 만들어서 사내, 조직에서만 private하게 사용하고 싶으면 private n...
Safari CSS transition 관련 문제
2022-03-09
Safari에서(이 놈의 사파리...) css transition 사용 시 발생하는 문제 사내에서 진행하고 있는 프로젝트에 MUI를 사용하는데, MUI의 Input 컴포넌트에서 사용하는 CSS 애니메이션에서 해당 문제를 발견하였다. 해당 애니메이션을 재현한 CSS 위의 CSS처럼 box 클래스에 가상 선택자로 border가 그려지게끔 하고 t...
meta tag 정리
2022-01-16
HTML 문서에 대한 정보인 메타데이터(metadata)를 정의할 때 사용한다. 작성자, 키워드 목록과 같은 HTML 문서의 속성을 설명하거나 하는 등의 역할을 한다. 기본적으로 메타 태그는 문서의 실제 모양에 영향을 미치지 않는다. 따라서, 메타 태그가 작성되지 않는다고 하더라도 문서에는 아무런 지장이 없다. 그럼에도 사용하는 이유는 검색 엔진 최...
Webpack
2021-10-25
많은 파일들을 필요한 형태의 하나 또는 여러 개의 번들 파일로 만들어줌 Webpack을 사용하는 이유 1. 네트워크 병목현상 해결 너무 많은 자바스크립트 파일을 로드하게 되면, 네트워크 병목현상에 빠질 수 있음 이때의 해결 방법으로 하나의 자바스크립트 파일만을 사용할 수 있지만 가독성 및 유지 보수 효율성이 떨어지는 문제가 발생 해결 방법으로...
Babel
2021-10-25
Babel is a JavaScript compiler Babel은 JavaScript 컴파일러 정확하게 말하면 Babel은 JavaScript로 결과물을 만들어주는 컴파일러이다 JavaScript로 변환 과정이 필요한 이유 자바스크립트에 새로운 문법, 여러가지 기술들이 생기면서 호환성의 문제를 갖게 됨 오래된 브라우저는 이러한 새로운 문법, ...
