kimminna

프론트엔드 개발을 하다 보면 컴포넌트 단위로 UI를 나누어 개발하는 일이 많아진다.특히, Next.js를 사용하면서 페이지 단위가 아닌, 재사용 가능한 UI 컴포넌트의 중요성을 깨닫게 되었다. 컴포넌트가 늘어나면 늘어날수록 다음과 같은 고민이 생긴다. 이미 만들어진 컴포넌트가 있는지 한눈에 파악하기 어렵다props에 따라 컴포넌트가 어떻게 변하는지 확인하려면 직접 페이지를 띄워야 한다UI 테스트를 하려면 매번 특정 페이지와 상태를 만들어야 한다 이런 문제점들을 해결하기 위해 iDear 프로젝트에서 Storybook을 도입해 보기로 했다. Storybook이란?스토리북은 비즈니스 로직이나 페이지 맥락에서 분리된 상태로 UI 컴포넌트를 개발하고 테스트할 수 있도록 도와주는 도구다.컴포넌트를 독립된 환경에서..

프론트엔드 개발을 하다 보면 모달 컴포넌트는 정말 자주 등장한다.알림, 확인창, 폼 입력 등 다양한 UX에서 빠질 수 없는 요소 중 하나다.하지만 그동안 여러 모달을 구현하면서, 보기에 자연스러운 모달에만 집중해 왔고, 키보드 사용자나 스크린 리더 사용자에게이 모달이 어떤 경험으로 다가올지는 깊게 고민하지 못했던 것 같다. 코테이토 동아리에서 진행한 아티클 스터디를 통해 DEVOCEAN의「시각장애인을 위해 모달 컴포넌트 접근성 개선하기」 글을 읽게 되었고, 이를 계기로 실제 프로젝트에 적용해 보며 느낀 점과 구현 과정을 정리해보려 한다. 왜 모달에서 접근성이 중요한가?일반 사용자는 마우스로 모달을 클릭하고 닫을 수 있지만, 시각장애인이나 키보드 사용자들은 Tab, shift + tab 을 통해 HTML ..

Next.js 프레임워크를 사용한 프로젝트를 몇 개 진행하다 보니, 자연스럽게 반복해서 마주치게 되는 고민들이 있었다.폴더 구조를 어떻게 잡아야 유지보수가 쉬울까?어디까지를 서버 컴포넌트로 두고, 어디서부터 클라이언트 컴포넌트로 분리해야 할까? 특히 App Router가 도입되면서 기존의 pages 기반 구조보다 자유도가 훨씬 높아졌고, 그만큼 팀 혹은 개인의 기준이 더 중요해졌다고 느꼈다. 이 글에서는 Next.js 공식 문서를 기반으로, 내가 실제 프로젝트(COTATO 동아리 리쿠르팅 홈페이지)에 적용한 구조와 그 이유, 그리고 그로 인해 얻은 장점들을 정리해보려고 한다. 1. Next.js App Router에서의 기본 구조Next.js 공식 문서에서는 App Router 기준으로 다음과 같은 구조..