storybook은 일반적으로 chromatic에 배포하는 경우가 많은 것 같습니다.하지만 제 개인적으로는 chromatic 생태계와 대시보드를 한번 더 학습해야하는 비용이 있다보니 스토리북 관리를 하기 싫게 만드는 이유 중 하나였는데요 chromatic 생태계에서 사용할 수 있는 기능들이 필요한 것이 아니라면 사실 storybook 빌드 결과물은 chromatic에 종속적이지 않으니 github pages나 netlify 등 다양한 정적 호스팅 사이트와도 쉽게 결합할 수 있습니다.마찬가지로 vercel과도 원활하게 통합을 수행할 수 있는데요 이번에는 vercel로 스토리북을 배포한 과정을 다뤄보겠습니다. 사실 그냥 배포하면 됩니다만은 저는 모노레포로 패키지를 관리하고 있다보니 이와 관련하여 자잘하게 귀..
최근 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..
프론트엔드 코딩 컨벤션, 프론트엔드 네이밍 컨벤션, 프론트엔드 폴더구조 이런 부분들은 항상 고민이 많이 되는 영역인 것 같습니다. 대체로 많이 사용하는 것들이 정해져는 있는 것 같지만 특히 폴더구조의 경우에는 프로젝트의 성격과 유형에 따라 어떤 구조가 좋을지가 항상 다르죠 이게 머리로 이렇게 하니까 좋았었지라는 생각만 갖고 쓰다보니 저도 제 컨벤션이 헷갈리기 시작해서 이번기회에 제가 코드를 짜면서 자주 사용하는 컨벤션들을 정리해보았습니다. 쌍따옴표, 들여쓰기와 같이 포매터의 지원을 받는 부분의 경우에는 생략합니다. 프론트엔드 코딩 컨벤션 함수명 | 변수명 일반1. 모든 변수,함수명은 소문자 카멜케이스를 통해 정의한다.const helloWorld = () => {} const hello = "hi" 2...
next.js 로 블로그를 구축하다보면 가장 크게 느껴지는 문제는 글 작성시의 UX입니다. 사실상 이 문제 때문에 저도 자체 구축한 블로그를 거의 작성하지 않고 있었다고 해도 무방한데요 Dan Abramov의 블로그 github에서 해당 문제를 해결한 것을 확인하고 저도 PR을 분석하여 적용하였습니다. https://github.com/gaearon/overreacted.io/pull/797/files Add a DEV-only watcher for content files by gaearon · Pull Request #797 · gaearon/overreacted.io I use so by default updating the content does not trigger Fast Refresh. To..
