vite 플러그인 만들기 (with 간단한 예제 & vite-plugin-pages 분석) 😊

vite는 rollup을 기반으로 만들어졌고, 빌드시 rollup이 사용된다.또한 vite의 플러그인은 rollup을 기반으로 vite의 특정 옵션이 추가된 형태로 개발되었기에,vite에서 제작한 플러그인은 기본적으로 개발 환경과 빌드 환경에서 모두 호환이 된다. (물론, 각 환경에서만 실행되는 특화된 기능을 제공하는 플러그인도 있다) 실제로 vite 플러그인을 만들어보는 것도 재밌는 경험이 될 것 같아서, 어떻게 만들 수 있는지 간단한 예제를 만들어 알아보기로 했다 😙 🌟 일단 가장 간단한 예제로 일단 플러그인을 만들어보자.// vite-plugin-hello.tsimport { Plugin } from 'vite';export default function vitePluginHello(): Plu..

• format_list_bulleted 웹 개발
• · 2025. 3. 18.
• textsms

stylelint 🎨 스타일에도 린트 적용하기

프론트엔드 개발에서 코드 스타일을 일관되게 유지하는 것은 매우 중요하다.협업을 할수록, 여러 사람이 동일한 스타일로 코드를 작성하는 것은 나중의 유지보수를 위해서도 아주 중요한 일이다.(동일한 스타일이면, 당연하게도 가독성이 높아진다 🙌) 동일한 스타일로 코드를 작성할 수 있게 ESLint가 JavaScript 코드 스타일을 검사하는 것처럼, CSS 코드 스타일을 검사해주는 도구가 바로 Stylelint다. 🍰 Stylelint는 CSS, SCSS, LESS 등의 스타일 코드에서 오류를 잡고, 일관된 코드 스타일을 유지하도록 도와주는 린터(Linter)이다. + scss와 함께 사용하기 위해 stylelint-config-standard-scss 플러그인을 설치할 수 있다. scss 설정 공식문서St..

• format_list_bulleted 웹 개발
• · 2025. 3. 1.
• textsms

Next에서 더 효과적인 modal 개발하기 (Parallel Routes & Intercepting Routes) 😎

기존에 React modal을 개발할 때 React Portal을 사용하기도 하고, 조건부 렌더링을 사용하기도 했다. 내가 개발해봤던 이런 기존 방식의 모달은 단점이 있는데, 단순히 컴포넌트를 JS로 화면에 띄우는 방식이기에 브라우저 기능과 웹페이지가 연동된 느낌은 아니다. 즉, 모달을 띄우고 브라우저 뒤로가기를 눌렀을 때 사용자는 모달이 닫히는 것을 생각할 수 있지만 실제로는 모달과 그 뒤의 화면이 통째로 날아가는 경험을 할 수 있다는 점이다. Next.js 15 app router에서는 Parallel Routes과 Intercepting Routes를 사용하여 좀 더 나은 형태의 모달을 개발할 수 있다고 들었기에, 직접 알아보고 예제를 작성해보기로 했다 🥜Parallel RoutesNext의 앱 ..

• format_list_bulleted 웹 개발
• · 2025. 2. 21.
• textsms

pnpm patch를 사용해서 노드 모듈 수정하기 (patch-package 에러 발생 😭)

종종 오픈소스 코드를 수정해야할 경우가 있다.node_modules에 들어가 해당 라이브러리를 직접 수정하는데 이렇게 하면 설치하고 수정한 해당 로컬 프로젝트에서만 유효하고, 동일한 수정사항을 다른 환경에서 반영하기 쉽지 않다. 이럴때, patch-package라는 라이브러리를 통해서 해당 수정사항을 저장하고 post install을 통해 설치 후 자동으로 반영하게 할 수 있다 👍 그런데, pnpm을 사용하는 프로젝트에서 patch-package를 사용하면 에러가 발생한다. package-lock.json, npm-shrinkwrap.json, or yarn.lock위에 세개만 찾을 수 있다고 하는데, pnpm-lock.yaml은 지원하지 않는 것 같다. https://github.com/ds300/p..

• format_list_bulleted 웹 개발
• · 2025. 2. 5.
• textsms

JS 개발 환경에서 커밋 컨벤션 강제하기 (Conventional Commits with commitlint 👻)

커밋 메세지를 작성할 때, 커밋 메세지가 어떤 작업을 의미하는지 확실하게 하기 위해서 커밋 메세지에 prefix로 feat, chore, fix 같은 단어를 붙이는 경우가 많다.이는 Conventional Commit 이라고 불리는데, 꼼꼼하게 커밋 메세지를 작성하는 유용한 방법이다.https://www.conventionalcommits.org/en/v1.0.0/ Conventional CommitsA specification for adding human and machine readable meaning to commit messageswww.conventionalcommits.org JS 개발 환경에서는 더 나아가 lint로 이 커밋 컨벤션을 강제할 수도 있는데 이번엔 commitlint를 사용하..

• format_list_bulleted 웹 개발
• · 2025. 1. 31.
• textsms

Phantom Dependency에 대해서 알아보고 대비책 생각해보기 👻

Phantom Dependency란?팬텀 의존성(Phantom Dependency)은 프로젝트의 package.json 파일에 명시되지 않았지만 빌드 타임이나 런타임에 의존성을 가지게 되는 상황을 의미한다.이 문제는 주로 Node.js의 모듈 평탄화(flattening)로 인해 발생하게 되는데 NPM이나 Yarn이 의존성을 설치할 때, 하위 의존성을 같은 node_modules 폴더에 배치하기 때문에 주로 발생한다.(모듈 평탄화는 중복해서 설치되는 패키지를 줄이기 위해서 설치한 패키지들이 모두 맨 위로 hoisting 되는 것을 의미한다) 😅 쉽게 말해, 우리 코드가 직접적으로 사용하지 않는 패키지에 ‘슬며시’ 의존하고 있는 상태가 팬텀 의존성이다. 예제를 통해서 확인해보면 다음과 같다.{ "d..

• format_list_bulleted 웹 개발
• · 2025. 1. 14.
• textsms