한땀한땀 코딩하기

Storybook? Storybook은 컴포넌트 단위로 나뉜 UI를 프로그램과 별개로 띄워서 확인해볼 수 있게 해주는 일종의 테스트 도구입니다. 리액트 컴포넌트를 개발할 때, props나 상태 값에 따라 디자인부터 기능까지 달라질 수 있는데, 이를 매번 실제 개발하고 있는 페이지에 심어서 테스트하는 것은 번거롭고 놓치게 되는 부분이 많습니다. 제가 Storybook을 사용하면서 느꼈던 장점들은 이렇습니다. 개발 중인 화면과 분리하여 UI를 확인 및 테스트 가능 props 값에 따라 달라지는 모든 형태를 기록해둘 수 있어 디자인 docs 작성 + 개발을 한번에 처리 가능 디자이너와 협업 시 개발 상태를 공유 가능 Jest (React Testing Library)와의 차이 기존에 컴포넌트 테스트를 Reac..

페이지는 누가 렌더 하는가? 리액트를 공부하다 보면 접하게 되는 용어 중 CSR(Client-Side Rendering)이 있습니다. 이름 그대로 클라이언트 측에서 렌더링을 하는 것인데, 이것이 정확히 무슨 의미일까요? 이와 비교되어 항상 등장하는 다른 용어로는 SSR(Server-side Rendering)이 있는데 둘은 어떻게 다를까요? 이를 설명하기 위해선 다양한 방법이 존재하겠지만, 이번 글에서는 간단하게 Next.js를 사용해보면서 Next.js가 제공하는 data-fetching 함수와 연결하여 설명해보려고 합니다. Next.js란? Next.js by Vercel - The React Framework Production grade React applications that scale. Th..

신나는 프론트엔드!! 바닐라 자바스크립트로만 코딩을 하다가 리액트를 처음 접했을 때는 엄청난 신세계를 접한 기분이었습니다. 말로만 듣던(?) 컴포넌트를 활용해서 코딩을 해볼 수 있고, 복잡하게 이벤트리스너와 핸들러를 구현할 필요도 없어 보였습니다. 이런 느낌이면 할만하겠는데!라고 생각이 살짝 올라올 때, 슬슬 그것이 찾아왔습니다. 상태 관리 아주 간단한 페이지 구성을 하는데도 props가 미친 듯이 늘어나기 시작하고, 가장 하위 컴포넌트에게 전달하려고 10개가 넘어가는 props를 몇 번에 걸쳐 전달하는 제 코드를 발견하게 되었습니다. 깃허브 이슈 탭 클론 코딩을 할 때였는데, 결국 보다 못한 팀원 분이 Context API와 useReducer를 이용해 제 코드를 완전 해체하고 조립해주셨습니다. 옆에서..