kimminna

최근 리쿠르팅 사이트의 어드민 페이지를 개발하며, 지원서 열람 페이지의 복잡한 필터와 다중 정렬 로직을 처리해야 했습니다. 처음에는 당연하게도 Redux나 Zustand 같은 전역 상태 관리 라이브러리와 로컬 상태 관리를 먼저 떠올렸습니다. 하지만 현직자분과의 코드 리뷰 도중, "복잡한 로컬 상태에 매몰되지 말고, URL에 상태를 담아보라"는 조언을 듣게 되었습니다. 이 조언은 제가 가진 '상태 관리'에 대한 고정관념을 깨는 계기가 되었습니다. 흔히 상태 관리라고 하면 외부 라이브러리를 통한 메모리 관리를 떠올리지만, 어드민 서비스에서 URL은 단순한 주소창을 넘어 공유성, 보존성, 신뢰성을 보장하는 최적의 상태 저장소였기 때문입니다.왜 URL인가? (The Power of URL as State)우리는..

모노레포 환경에서 공통 UI 패키지(@repo/ui)를 구축할 때 각 패키지가 독립적으로 스타일을 빌드하게 만든다면, sm:px-10 같은 반응형 클래스가 무시되거나, 스타일 우선순위가 뒤엉키는 'Cascade Conflict'가 발생합니다. 이번 트러블슈팅을 통해 CSS Cascade(계단식 적용) 원리와 Tailwind v4의 빌드 메커니즘, 그리고 모노레포에서의 정확한 경로 설정의 중요성을 알아봅니다. 1. 문제 증상상황: packages/ui 내부의 Modal 컴포넌트에 px-5.25 sm:px-10.75를 적용함.현상: 화면 너비가 640px(sm) 이상임에도 불구하고, 개발자 도구에서 sm:px-10.75에 취소선이 그어지고 px-5.25가 최종 적용됨.특이사항: sm:!px-10.75..

2025년 3월부터 2026년 2월까지 코테이토 활동을 마치고리쿠르팅 시즌을 맞아 IT 연합 동아리 고민을 하시는 분들께 도움이 되길 바라며 이 글을 작성합니다! 1. 코테이토를 선택한 이유 3학년을 맞아 진로에 대한 고민을 시작하면서 처음으로 IT 연합 동아리 지원을 고민했는데,여러 동아리들이 있었지만 저는 코테이토만 지원했고, 코테이토에 한번에 합격을 하여 1년 동안 활동했던 케이스였습니다! 그만큼 코테이토는 오래 활동하기 좋은 동아리고, 정말 많은 걸 얻어갈 수 있는 활동입니다. 많은 동아리 중 코테이토를 선택했던 이유는 크게 두 가지가 있었는데요. 세션 시간에 CS 교육을 들을 수 있다여러 스터디가 열려서 배우고자 한다면 무엇이든 배울 수 있는 환경이 주어진다 다른 동아리들과는 다르게..

복잡한 서비스일수록 회원가입, 비밀번호 찾기와 같은 '온보딩' 과정은 단순한 페이지 이동 이상의 복잡한 상태 관리를 요구하는데요,IT 연합 동아리 Cotato 리뉴얼 프로젝트에 참여하면서, 홈페이지 온보딩 프로세스를 작업하는 과정에서 토스의 @use-funnel을 이용하여 온보딩 로직을 작업한 과정을 공유합니다. 1. @use-funnel이 무엇인가요? @use-funnel은 복잡한 UI 흐름을 간편하게 구현할 수 있도록 도와주는 리액트 훅입니다. 사용자가 여러 단계를 거쳐 순서대로 입력해야 하는 UI 흐름을 가지는 프로세스를 구현하려면 각 단계별 상태와 히스토리를 관리해야 하는데, @use-funnel을 사용하면 이러한 흐름을 쉽게 구현할 수 있습니다. 1.1 3가지 개념 step : 사용자에게 ..

안녕하세요, IT 연합 동아리 Cotato(코테이토) 리뉴얼 프로젝트 프론트엔드 개발로 참여 중인 김민아입니다. 저희 팀은 최근 코테이토 리뉴얼 프로젝트를 진행하며 큰 구조적 변화를 겪었습니다. 기존에는 메인 홈페이지(cotato.kr)와 리쿠르팅 페이지(recruit.cotato.kr)를 각각 독립적인 멀티 레포지토리로 관리할 계획이었습니다. 하지만 프로젝트가 진행될수록 두 서비스 사이의 강력한 연결 고리를 발견했고, 이를 효율적으로 관리하기 위해 pnpm + Turborepo 기반의 모노레포로 마이그레이션을 진행했습니다. 모노레포 전환을 고민 중인 다른 팀들에게 도움이 되길 바라며 기록을 공유합니다. 1. 도입 배경: 왜 모노레포여야 했나?코테이토의 웹 생태계는 크게 두 가지 도메인으로 나뉩니다.메..

프론트엔드 개발을 하다 보면 컴포넌트 단위로 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 기준으로 다음과 같은 구조..