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

FE 개발에서 Single Source of Truth (SSOT) 알아보기 👍

현대 웹 애플리케이션 개발에서 데이터 관리의 복잡성은 날로 증가하고 있다.  특히 React와 같은 UI 라이브러리를 사용할 때, 점점 더 많은 데이터들을 FE에서 관리함에 따라, 데이터 흐름을 효과적으로 관리하는 것은 필수가 되었다.  이때 등장하는 개념 중 하나가 바로 Single Source of Truth (SSOT)이다. 나도 개인적으로 몇번 들어봤던 개념인데, 정확하게 이해하고 넘어가고자 글로 남겨보기로 했다 👍 이 글에서는 SSOT의 기본 개념, React 앱에서 이를 구현하는 방법, 그리고 장단점을 알아보았다. Single Source of Truth란?  Single Source of Truth는 간단히 말해 애플리케이션의 데이터가 단 하나의 신뢰할 수 있는 출처에서 관리된다는 것을 의..

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

FE 검색 구현에서 검색어와 타겟의 유사성 체크하기 - 레벤슈타인 거리 (Levenshtein Distance) ♥️ With 타입스크립트

프론트엔드 개발자로서, 우리는 사용자의 오타를 교정하거나 비슷한 단어를 찾는 기능을 종종 구현한다.  예를 들어, 검색 창에서 "javascipt"라고 입력하면 "javascript"를 추천해주는 기능은 흔하게 찾을 수 있다 👍(r이 빠졌는데도 찾아준다)이처럼 두 문자열의 차이를 계산하는 알고리즘 중 하나가 바로 레벤슈타인 거리(Levenshtein Distance)입니다. 이번 글에서는 레벤슈타인 거리란 무엇인지, 그리고 이를 타입스크립트로 구현하는 방법을 단계별로 알아보았다.리벤슈타인 거리란?리벤슈타인 거리는 두 문자열 사이의 최소 편집 거리를 계산하는 알고리즘이다. 여기서 [편집]은 다음 세 가지 작업을 의미한다.삽입 (Insertion): 문자 하나를 추가삭제 (Deletion): 문자 하나를 ..

• format_list_bulleted 웹 개발
• · 2024. 12. 28.
• textsms

[Javascript] 이벤트의 실행순서 파악하기 (onMouseDown은 onClick보다 먼저 실행된다 👻)

프론트엔드 개발을 할 때 많이 사용되는 이벤트들이 있다. 그중에 onClick 이벤트가 있는데, onClick은 사용자가 마우스로 무언가를 클릭했을 때 이벤트가 발생하도록 하는 것이다. 다만, onClick 이외에도 또 다른 마우스 클릭 관련 이벤트들이 있고, 때로는 더 섬세한 동작을 위해서 onMouseDown, onMouseUp과 같은 이벤트들을 사용할 수 있다. 여기서, 더 생각해볼만한 점은 이 셋이 모두 한번에 사용되었을 때이다. 세 개의 이벤트는 어떤 순서로 동작할까?  사용자가 UI 요소와 상호작용할 때 마우스 이벤트가 실행되는 일반적인 순서는 다음과 같다.onMouseDown사용자가 마우스 버튼을 누를 때 발생한다.onMouseUp사용자가 마우스 버튼을 놓을 때 발생한다.onClick마우스 ..

• format_list_bulleted 웹 개발
• · 2024. 12. 21.
• textsms