아무 생각없이.. 그냥 아무생각없이 빌드 결과물이 모이는 dist 폴더와 실제 작업이 들어가는 src 폴더를 함께 배포하고 있었는데 문득 그런 의심이 들었습니다. 어차피 사용자는 빌드된 결과물만 사용할텐데 나는 왜 자연스럽게 src 폴더도 같이 배포하고있지? 라는 의문이 들었고 여러가지 평소에 써오던 라이브러리를 참고하여 본 결과 (zod, zustand, jotai , ) 대부분의 라이브러리들이 빌드 결과물만을 내보내고 있다는 사실을 깨닫게되었습니다. src 폴더를 내보내는 경우에는 사용자가 내부구현을 살펴볼 수 있게하기 위함이나 / 사용자가 라이브러리를 확장할 수 있게끔 하고 싶을 때 유용하다는 내용들을 찾을 수 있었는데 사실 라이브러리를 사용하는 사람의 관점이나 만드는 사람의 관점이나 사용자가 라이..
라이브러리 만들어서 배포하면 편하지않을까요? 그래서 한번 만들어봅니다. https://junghyeonsu.com/posts/deploy-simple-util-npm-library/ 간단한 유틸 함수 NPM 라이브러리 배포해보기 (feat. TypeScript 지원, ESM 지원) - 정현수 기술 블로그 NPM 배포를 처음 해보는 사람들을 위해서 차근차근 가이드를 작성해 봤습니다. junghyeonsu.com 이 분 블로그 참고하면서 작성했는데 너무 잘 작성해주셔서 뭐 더 추가할 게 없을 것 같고요 다만 저는 yarn 대신 npm을 사용해서 라이브러리를 만들었기 때문에 이부분에 약간의 차이가 존재합니다. https://github.com/XionWCFM/xion-calculate GitHub - Xion..
할때마다 세팅방법 찾아보는게 지긋지긋하다 이런 세팅을 할때마다 꼭 문제가 발생합니다. 해결방법도 보통 전에 했던 방법과 비슷하게 하면 해결이 되곤하는데요 문제는 이게 여러가지 파일을 만져줘야하는 경우도 많고 하다보니 뭐 하나 빠뜨려서 잘 안되고 스트레스받고 그런 경우가 많다는 것입니다. 환경세팅 포스트는 유통기한이 짧긴하지만.. 없는것보단 나으니.. 이번 글에서는 tailwindcss를 storybook과 통합하는 방법 nextjs에서 storybook을 사용하는 방법 그리고 path alias를 사용하는 모듈도 적절히 resolve 하는 방법을 다룹니다. nextjs에서 storybook 깔기 npx storybook@latest init 간단합니다. 최신버전으로 깔아주시면 되겠습니다. tailwind..
스토리북이 뭔데 ㅋㅋ 저같은 경우에는 코드스테이츠 과정을 들으면서 처음 알게된 라이브러리인데요 CDD를 도와주는 라이브러리라고 생각할 수 있습니다. CDD란 Component Driven Development ChatGPT Driven Development 의 약자로 컴포넌트를 모듈 단위로 개발하여 UI 구축을 하는 개발 방법론입니다. 프로젝트 규모가 커지면 커질수록 컴포넌트를 독립된 환경에서 테스트하기 어려워집니다. 또한 컴포넌트가 해당 프로젝트에서만 멀쩡하게 UI를 표현하고 다른 프로젝트에서는 제대로 쓸 수 없는 경우도 많습니다. 따라서 독립된 환경에서 테스팅할 수 있도록 도와주는 스토리북은 저도 프로젝트가 어느정도 자리잡힌 환경에서는 아.. 스토리북이 있으면 이런 바보같은 일은 안해도 될텐데.. 라..
폴더구조의 중요성 저는 개발 프로젝트에서 폴더의 구조를 정하는 것에 항상 고민을 깊게 하는 편입니다.. 체계적이고 잘 정돈된 폴더구조는 장기적으로 유지보수성과 코드생산성을 끌어올려준다고 믿기 때문인데요 가장 커다랗게 체감했던 것은 여러명이서 진행하는 프로젝트였던 PLIP 프로젝트의 폴더 구조를 기획하고 개발을 진행하던 과정에서 였는데요 짤막한 홍보를 하자면 배포 url은 다음과 같습니다. https://plip.netlify.app/ 코벤저스 파이탱~!!! plip.netlify.app 다음 사진은 이 당시 PLIP 프로젝트의 폴더구조를 만들때에 제가 생각하고 짰던 방식입니다. 그 당시에 저는 "같은 성격을 가진 파일은 한폴더에 모여있어야한다."라고 믿었습니다. 그래서 이 프로젝트의 폴더구조도 그와 같이..
framer motion이란? framer motion은 리액트 기반의 라이브러리로 애니메이션을 다루는 데에 큰 도움을 주는 라이브러리입니다. 여러가지 도움이 많이 되는 라이브러리이지만 가장 코어한 기능이 뭐냐라고 하면 저는 바로 리액트에서 구현하기 힘든 exit motion을 쉽게 구현할 수 있게 해주는 것이라고 생각합니다. 코드를 작성하다보면 무언가가 등장할 때 주는 애니메이션도 필요하지만 무언가가 사라질 때 주어야하는 애니메이션도 존재하기 마련인데 리액트에서는 이 사라지는 애니메이션을 구현해주기가 매우 까다롭습니다. 리액트 컴포넌트 트리에 존재하지 않는 돔 요소들과의 상호작용이 필요하기 때문인데요 framer motion은 향후 좀 더 깊이 다루어 볼 생각이지만 우선은 radix와의 통합 방법을 알..
매우 열받는 상황 '@radix-ui/react-slider' 라이브러리를 이용하던 중 일어난 일입니다. radix가 제공해주는 slider primitive를 이용하여 슬라이더를 구현하던 중 이런 상황을 마주했습니다. 굉장히 열받는 원이 생겨있는것을 확인할 수 있었는데요 이걸 대체 어떻게 지울 수 있을까 공식문서를 찾아봐도 전혀 안내가 없어서 절망했습니다만.. 자세하게 예제코드를 들여다보면서 내 코드에 빠진 게 뭘까 찾아본 결과 알아냈습니다. import React from 'react'; import * as Slider from '@radix-ui/react-slider'; const SliderDemo = () => ( ); export default SliderDemo; 슬라이더에서 제가 거슬리..
왜 필요했냐면.. 최근 며칠동안 프로덕션 배포 일정을 위해 개발 브랜치에 이미 많은 변경사항들이 반영되어 있는 상태였는데 프로덕션에서 긴급하게 수정해야할 버그가 발생하는 일이 있었습니다. 따라서 핫픽스 브랜치가 필요하다고 판단했지만 실제로 핫픽스 브랜치 전략을 사용해본적은 없어 시행착오를 조금 겪었습니다. hotfix branch는 왜 필요한가? 실제로 일을 하다보면 흔히 개발 브랜치와 프로덕션 브랜치가 나뉘어지기 마련입니다. 개발중인 코드가 실제 프로덕션에 올라가게되면 안되는 경우가 빈번합니다. 유저가 없는 서비스라면 마음편하게 개발해도 상관 없지만 만약 유저가 있는 서비스라면 실제 프로덕션에 문제가 생겼을 때 이를 빠르게 조치해주어야합니다. 그렇게하기 위해 hotfix branch를 통하여 해당 문제..
