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

React에서 XState 간단 사용 후기 😊

XState는 점점 더 단순화되어가는 상태관리 라이브러리들 중에서 좀 더 명확하게 역할을 나누고 책임을 부여한 컨셉의 상태관리 라이브러리이다. ❗ 이런 특징이 redux의 구조와 비슷하게 느껴지기도 한데, 이에 관해서는 직접 제작자가 밝힌 차이점이 있다.https://stackoverflow.com/questions/54482695/what-is-an-actual-difference-between-redux-and-a-state-machine-e-g-xstate What is an actual difference between redux and a state machine (e.g. xstate)?I am working on investigation of one front-end application o..

• format_list_bulleted React
• · 2025. 2. 13.
• 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

JavaScript로 shell 스크립트 작성하기 😎 Google’s zx 라이브러리

JavaScript는 브라우저뿐만 아니라 Node.js 덕분에 서버에서도 자주 사용된다.그런데 이 언어를 활용해 터미널 명령어를 실행하는 shell 스크립트를 작성할 수 있다면 얼마나 좋을까? 이런 요구사항을 Google의 zx 라이브러리가 만족한다 👍이번엔 zx 라이브러리를 실제로 사용해본 경험을 공유하기로 했다. zx란 ❓zx는 Google이 개발한 Node.js 기반의 라이브러리로, JavaScript나 TypeScript를 사용하여 터미널 명령어를 실행하는 스크립트를 간단하고 직관적으로 작성할 수 있게 해준다.✨ 따라서, shell 스크립트가 생소한 JS 개발자가 손쉽게 스크립트를 작성할 수 있게 해준다기존의 스크립트와 비교했을 때 더 강력한 기능과 유연성을 제공한다.zx의 장점 😎간결한 문법..

• format_list_bulleted JavaScript
• · 2025. 1. 22.
• textsms