storybook은 일반적으로 chromatic에 배포하는 경우가 많은 것 같습니다.하지만 제 개인적으로는 chromatic 생태계와 대시보드를 한번 더 학습해야하는 비용이 있다보니 스토리북 관리를 하기 싫게 만드는 이유 중 하나였는데요 chromatic 생태계에서 사용할 수 있는 기능들이 필요한 것이 아니라면 사실 storybook 빌드 결과물은 chromatic에 종속적이지 않으니 github pages나 netlify 등 다양한 정적 호스팅 사이트와도 쉽게 결합할 수 있습니다.마찬가지로 vercel과도 원활하게 통합을 수행할 수 있는데요 이번에는 vercel로 스토리북을 배포한 과정을 다뤄보겠습니다. 사실 그냥 배포하면 됩니다만은 저는 모노레포로 패키지를 관리하고 있다보니 이와 관련하여 자잘하게 귀..
😋왜 필요할까?react-query가 제공해주는 SSR 환경에서 사용법을 보면서 한가지 의문이 들었습니다. react query가 제공해주는 캐싱, 리페칭 등등의 기능들이 매력적이긴한데...사실 대부분의 기능은 캐싱 , revalidate 같은 부분은next.js가 제공해주는 확장된 fetch 함수로도 충분하지 않나?? 그렇다면 next.js에서 react-query를 꽤나 복잡한 설정을 꾸역꾸역 설정하며 굳이굳이 사용할 필요성이 있을까?라는 의문이 들었습니다. 물론 아직 제공되지 않는 부분도 많을 것 같습니다.하지만 꼭 필요할까?라고 묻는다면 좀 애매할 것 같았습니다.그러던 중 You Might Not Need React Query라는 글을 발견했어요https://tkdodo.eu/blog/you-m..
Supabase로 웹사이트 3개 클론하기 (Next.js 14)를 수강하며 얻은 지식들을 정리합니다.제가 수강중인 강의는 다음 링크에서 확인 가능해요! https://inf.run/6SLYm본 강의" data-og-host="www.inflearn.com" data-og-source-url="https://inf.run/6SLYm" data-og-url="https://www.inflearn.com/course/요즘엔-supabase-대세지-nextjs-클론프로젝트" data-og-image="https://scrap.kakaocdn.net/dn/mAGFA/hyWOdAxUr4/QQ7at4MRUmCOV5gkWkf9B0/img.jpg?width=1200&height=781&face=0_0_1200_781,..
Supabase로 웹사이트 3개 클론하기 (Next.js 14)를 수강하며 얻은 지식들을 정리합니다.제가 수강중인 강의는 다음 링크에서 확인 가능해요! https://inf.run/6SLYm본 강의" data-og-host="www.inflearn.com" data-og-source-url="https://inf.run/6SLYm" data-og-url="https://www.inflearn.com/course/요즘엔-supabase-대세지-nextjs-클론프로젝트" data-og-image="https://scrap.kakaocdn.net/dn/mAGFA/hyWOdAxUr4/QQ7at4MRUmCOV5gkWkf9B0/img.jpg?width=1200&height=781&face=0_0_1200_781,..
supabase는 이름에서도 그 유사성을 어느정도 알 수 있지만 Firebase의 대안이라는 슬로건을 가진 오픈소스 프로젝트입니다.제가 Supabase를 처음 접했던 것은 작년 이맘때 즈음이었던 것 같습니다.그당시에는 컨셉 자체는 좋지만 레퍼런스가 많지 않아 파이어베이스에서 당장 넘어가기에는 조금 부담이된다.라고 생각했던 기억이 납니다. 파이어베이스는 NoSQL 기반이라는 점이 장점이기도 하지만또 동시에 프로젝트가 고도화되면 될수록 NoSQL을 사용함으로 인해 따라오는 단점이 더 커지는 경우가 있기 때문에Supabase의 컨셉이 매력적인게 아닌가 싶습니다. Supabase의 장점 앞서 Firebase를 이야기하면서 NoSQL을 살짝 언급했었는데요.Supabase의 경우에는 PostgreSQL을 기반으로..
최근 turbo-repo를 흥미롭게 보며 학습하고있습니다.yarn workspace 기능만으로 바닥부터 만들어나갈때의 불편함들이 많이 해소된 형태로 api 들이 제공되어서 DX에 매번 놀라고 있는데요그렇다보니 크게 막히는 부분이 있지는 않았지만 조금 헷갈렸던 부분이 있어서 정리해봅니다.큰 내용만 먼저 정의를 해보자면 다음과 같은 내용입니다. tailwindcss를 사용할 때 모노레포 프로젝트라면 configuration을 어디서 어떻게 적용해야하는가?https://turbo.build/repo/docs/guides/tools/storybook Storybook | TurborepoLearn how to use Storybook in a Turborepo.turbo.build turbo repo의 stor..
모노레포는 이미 현대 프론트엔드에서 떼어놓고 이야기할 수 없는 존재가 된 것 같습니다.이제 대부분의 메이저한 도구들의 Docs에서 모노레포에 대한 가이드라인이 작성되어 있는 것을 심심찮게 찾아볼 수 있으며다들 모노레포가 가져다주는 장점에 대한 공감대는 형성되어있는 것 같다고할까요? 그런데 그럼에도 불구하고 모노레포의 지저분한 부분들을 다루는 아티클들은 찾아보기 힘들었습니다.제가 능력이 부족해 못찾은 것일수도 있지만 저같은 경우엔 찾기가 힘들더라구요그러던 중 터보레포가 메이저버전 2를 출시하면서 Docs도 새롭게 개편한 것을 알게되었는데 이 터보레포의 Docs에서 평소 고민하던 부분들에 대한 답을 시원하게 얻어가는 경험을 하게되어서 소개드립니다. 보통 모노레포로 프로젝트를 구성한다고 하면 일반적으로 이러한..
최근 프론트엔드 커뮤니티를 중심으로 Feature-Sliced Design에 대한 관심이 이전에 비해 많아졌다고 느낍니다.저같은 경우에는 클린아키텍처를 프론트엔드에 적절히 적용할 방법을 고민하다가 접하게된 방법론이기도 한데 꽤 마음에 드는 방법론이었어서 개인 프로젝트는 물론 사내 프로젝트도 점차 Feature-Sliced Design을 따르는 형태로 리팩토링한 경험이 있습니다.이렇게 제가 처음 Feature-Sliced Design을 접하고 지금까지 꽤 많은 프로젝트를 Feature-Sliced Desgin을 통해 진행하면서 느꼈던 인사이트들을 공유해보고자 글을 작성해봅니다. Feature-Sliced Design이란?https://feature-sliced.design/docs/branding Bran..
안녕하세요 오늘은 변경에 자유로운 코드를 작성하기라는 주제로 이야기를 해보겠습니다.사실 거의 상식이나 다름없는 느낌으로 많이 알려진 내용이다보니 거창한 척(?) 말하는 것이 조금 민망하기도 합니다어떻게하면 변경에 자유로운 코드를 작성할 수 있을까요?쉽게 생각해봤을 때 우리의 커다란 목적에만 집중할 수 있는 구조를 만들면 우리는 작은 내용들이 바뀌더라도 우리의 커다란 목적으로 향해 가는데에 아무런 영향도 받지 않을 수 있을 것입니다. 그렇다면 어떤 내용이 "작은 내용" 일까요?여러가지 견해가 있을 수 있겠지만 저는 라이브러리, 프레임워크와 같은 외부 코드들은 기본적으로 항상 "작은 내용"이라고 생각하려고 하는 편입니다.채용공고에는 리액트, next.js와 같은 라이브러리, 프레임워크들이 "당연"하다는 듯이..
프론트엔드 테스팅 환경을 구성하는것은 상당히 정신건강을 해치는 작업 중 하나입니다.그래도 다행인 점은 시간이 지나면서 outdated 되는 정보도 있을 수 있지만 환경설정을 하는데에 큰 틀은 보통 바뀌지 않는 것 같아요또 하다보면 꼭 필요하지만 기억이 잘 안나는 설정들이 존재하는데요 그런 세부적인 디테일들을 한곳에 정리해보았습니다. 저는 next.js | tailwindcss | react-query를 주로 사용하므로 해당 사항에 맞게 설정을 하였습니다. nextjs initailzationnpx create-next-app@latest next.config.js/** @type {import('next').NextConfig} */const nextConfig = { compiler: { rem..
