스토리북이 뭔데 ㅋㅋ 저같은 경우에는 코드스테이츠 과정을 들으면서 처음 알게된 라이브러리인데요 CDD를 도와주는 라이브러리라고 생각할 수 있습니다. CDD란 Component Driven Development ChatGPT Driven Development 의 약자로 컴포넌트를 모듈 단위로 개발하여 UI 구축을 하는 개발 방법론입니다. 프로젝트 규모가 커지면 커질수록 컴포넌트를 독립된 환경에서 테스트하기 어려워집니다. 또한 컴포넌트가 해당 프로젝트에서만 멀쩡하게 UI를 표현하고 다른 프로젝트에서는 제대로 쓸 수 없는 경우도 많습니다. 따라서 독립된 환경에서 테스팅할 수 있도록 도와주는 스토리북은 저도 프로젝트가 어느정도 자리잡힌 환경에서는 아.. 스토리북이 있으면 이런 바보같은 일은 안해도 될텐데.. 라..
🚒 캘린더를 왜 구현해요 라이브러리 쓰세요 라고 생각하기 쉽습니다만 의외로 캘린더는 쓸만한 라이브러리가 많이 없습니다. 대부분 css 커스터마이징에 제약사항이 존재하기 때문입니다. 이는 개발자가 그냥 대충 프로젝트에 갖다 쓰는 용도로는 충분히 유용하지만 디자이너가 있는 팀에서는 사용하기 어렵다는 말로도 바꿀 수 있습니다. 디자이너가 디자인에 있어 타협을 하든 개발자가 피눈물을 흘리든 둘중의 하나는 해야하기 때문입니다. 제가 속한 팀에서도 달력이 필요한 부분이 있었는데요 기존 코드의 경우 라이브러리를 갖다 쓰면서 라이브러리의 css를 모두 오버라이딩하는 식으로 커스터마이징을 수행해두었습니다. 이는 향후 달력 디자인이 바뀌었을 때 대응을 매우 어렵게한다는 문제가 있었는데요 다행히 캘린더는 구현하는게 그리 어..
https://xionwcfm.tistory.com/328 cva, tailwindmerge, clsx를 조합하여 재사용 가능한 UI 만들기 😎세가지를 조합하면 아주 멋진 것을 만들 수 있다. https://xionwcfm.tistory.com/322 https://xionwcfm.tistory.com/323 https://xionwcfm.tistory.com/325 지금까지 진행한 세가지 라이브러리에 대한 포스트입니다. 이 세 xionwcfm.tistory.com 이때 다뤘던 라이브러리인데요 간단히 요약하면 테일윈드에는 css 적용 순서이슈가 있습니다. 이는 빌드타임에 모든 css를 정적으로 생성하고 사용하는 테일윈드의 동작 방식에서 기인하는데요 .green-400 { color:green } .red..
테스트 커버리지 개인적으로 많이 궁금했던게 있습니다. 간혹 이력서에 테스트 커버리지를 몇퍼센트에서 몇퍼센트까지 올렸다. 라는 문구를 넣으시는 분들을 본적이 있는데요 테스트커버리지라는게 대체 뭔데? / 테스트커버리지를 어떻게 측정한건데? 라는 생각이 들었지만.. 따로 찾아보지는 않았었습니다. https://www.daleseo.com/jest-coverage/ Jest로 테스트 커버리지 수집하기 Engineering Blog by Dale Seo www.daleseo.com 근데 위 글을 참고해보니 테스트 커버리지를 측정하는 옵션을 jest에서 이미 제공해주고 있었더라구요 흥미로워서 바로 따라해봤는데 몇가지 문제가 있었습니다. 쓸데없는 파일까지 전부 측정되잖아!! module.exports = { coll..
기술 블로그 운영 꼭 해야할까요? 이 블로그의 첫 게시물은 2022년 11월이지만 제 인생 첫 블로그 게시물이 언제인지를 생각하면 아마 지금으로부터 15~16년은 거슬러 올라가야할 것 같습니다. 개발자가 되기위한 공부를 시작할 때에는 취업에 도움이 된다고해서 시작했는데 정작 블로그가 제 취업에 도움이 되었는지는 잘 모르겠습니다. 아마 제 서류합격률 같은 것엔 전혀 도움이 안 되었던 것 같습니다. 그럼에도 불구하고 / 취업에 도움이 되지도 않고 / 정작 이제 취업을 하기는 한 제가 기술 블로그를 계속 운영하는 이유는 두가지 정도로 요약할 수 있을 것 같습니다. 1. 제 기술 블로그를 가장 유용하게 사용하는 건 미래의 저였습니다. 결국 블로그 글을 작성하면서 그냥 돌아가니까 넘어갈수도 있는 환경설정 같은 부..
🐸 테스트 코드가 왜 어려울까 그것은 테스트 코드를 써본적 없는 사람에겐 환경 설정이 지옥이기 때문이다. 진짜 한참 헤맸던 건데 테스트 코드를 입문하시는 분들이라면 비슷하게 헤매실 것 같습니다. 처음 jest를 설치하고 대충 a + b 테스트코드 짤때는 개쉬운데 컴포넌트 렌더링 해보는거에서 한번 지옥맛보고 비동기 테스트 하는거에서 두번 지옥맛을 본 뒤 테스트 코드를 손절하는.. 저도 그랬었는데요 심지어 리액트 쿼리 공식문서에서도 중요한 셋업을 전혀 가르쳐주질 않아서 한참 헤맸습니다. 테스트 진행 환경은 다음과 같습니다 next.js 13.5.3 / pages router jest ^29.7.0 msw ^1.3.2 @testing-library/jest-dom ^6.1.4 @testing-library/r..
폴더구조의 중요성 저는 개발 프로젝트에서 폴더의 구조를 정하는 것에 항상 고민을 깊게 하는 편입니다.. 체계적이고 잘 정돈된 폴더구조는 장기적으로 유지보수성과 코드생산성을 끌어올려준다고 믿기 때문인데요 가장 커다랗게 체감했던 것은 여러명이서 진행하는 프로젝트였던 PLIP 프로젝트의 폴더 구조를 기획하고 개발을 진행하던 과정에서 였는데요 짤막한 홍보를 하자면 배포 url은 다음과 같습니다. https://plip.netlify.app/ 코벤저스 파이탱~!!! plip.netlify.app 다음 사진은 이 당시 PLIP 프로젝트의 폴더구조를 만들때에 제가 생각하고 짰던 방식입니다. 그 당시에 저는 "같은 성격을 가진 파일은 한폴더에 모여있어야한다."라고 믿었습니다. 그래서 이 프로젝트의 폴더구조도 그와 같이..
Circle Progressbar란?이거 참 검색하기 난해한데요 PPT에 익숙한 분들이라면 원형차트로 인식할 수도 있고 저런 동그라미가 빙글빙글 돌아가는 로딩 스피너에 익숙한 분들은 circle progress bar라고도 인식할 수 있습니다. https://www.npmjs.com/package/react-circular-progressbar react-circular-progressbarA circular progress indicator component. Latest version: 2.1.0, last published: a year ago. Start using react-circular-progressbar in your project by running `npm i react-circula..
🦆 낙관적 업데이트란 무엇일까요? 영어로는 optimistic update 낙관적 업데이트는 UX 개선을 생각하는 프론트엔드 개발자라면 적용할 가치가 충분한 기법입니다. 낙관적 업데이트란 말그대로 낙관적인 관점으로 업데이트를 바라보는 것이라고 생각할 수 있습니다. 기본적으로 다른 서버에게 네트워크 요청을 보내는 행위는 수많은 잠재적인 위험을 내포합니다. 네트워크 요청이 성공할지 실패할지는 내가 작성한 코드가 얼마나 잘 작성되었는지와는 별개로 그 코드가 실행되는 환경 / 요청을 받는 서버의 환경에 전적으로 의존하게 되기 때문입니다. 나는 요청하는 코드를 잘 작성했지만 만약 인터넷이 되지 않는 환경이라면? -> 당연하게도 네트워크 요청은 실패합니다. 나는 요청하는 코드를 잘 작성했지만 요청을 받은 서버가 내..
framer motion이란? framer motion은 리액트 기반의 라이브러리로 애니메이션을 다루는 데에 큰 도움을 주는 라이브러리입니다. 여러가지 도움이 많이 되는 라이브러리이지만 가장 코어한 기능이 뭐냐라고 하면 저는 바로 리액트에서 구현하기 힘든 exit motion을 쉽게 구현할 수 있게 해주는 것이라고 생각합니다. 코드를 작성하다보면 무언가가 등장할 때 주는 애니메이션도 필요하지만 무언가가 사라질 때 주어야하는 애니메이션도 존재하기 마련인데 리액트에서는 이 사라지는 애니메이션을 구현해주기가 매우 까다롭습니다. 리액트 컴포넌트 트리에 존재하지 않는 돔 요소들과의 상호작용이 필요하기 때문인데요 framer motion은 향후 좀 더 깊이 다루어 볼 생각이지만 우선은 radix와의 통합 방법을 알..
