익명 고민함
1.익명고민함 - 프로젝트🚀 Next.js의 레이아웃 구조
최근에 익명고민함이라는 Next.js 프로젝트를 새로 시작했다.이 프로젝트는 “익명으로 고민을 나누는 커뮤니티”를 만들고 싶어서 시작한 팀 프로젝트인데,Next.js는 아직 익숙하지 않아 하나씩 공부하면서 구조를 잡고 있다.이번 글에서는 프로젝트를 세팅하면서 받았던 피
2.[Next.js]🧭 공통 컴포넌트 Header 만들기 — 피드백을 반영한 개선 과정
“프로젝트마다 헤더를 따로 만드는 대신, 재사용 가능한 Header 컴포넌트를 설계하자.”최근 진행 중인 Next.js 프로젝트에서 공통 컴포넌트 제작을 맡게 되었는데이번엔 공통 Header 컴포넌트를 만들어 재사용성을 높이고,피드백을 반영해 점차 개선한 과정을 기록해
3. 🧩 회원가입 폼 리팩터링 & Zod 검증 트러블슈팅 (공통 Input의 한계와 우회 전략)
다른 팀에서 만든 회원가입 폼을 리팩터링해달라는 요청을 받았다.코드를 분석해보니 다음과 같은 이슈가 있었다:비밀번호 검증이 .regex()로 중첩되어 유지보수 어려움여러 조건을 위반해도 첫 번째 에러만 표시(스무고개 UX)여러 에러 메시지가 줄바꿈 없이 한 줄로 출력프
4.🚀 Fetch → Axios 전환으로 배우는 HTTP 통신과 RESTful API
이번에 팀에서 “프로젝트 전반의 Fetch API를 Axios로 리팩터링해달라”는 요청을 받았다.단순히 요청 코드를 바꾸는 작업처럼 보였지만,막상 진행해보니 HTTP 통신의 구조와 RESTful API 설계까지한 번에 이해할 수 있는 계기가 됐다.클라이언트(브라우저)와
5.‼️ 서버 컴포넌트에서 onClick이 안되는 이유 — ActionToggle 리팩터링 과정
익명고민함 프로젝트를 진행하면서,좋아요 / 댓글 버튼 역할을 하는 ActionToggle 컴포넌트를 만들었다.UI는 문제없었지만, 코드 리뷰 과정에서 이런 피드백을 받았다.“서버 컴포넌트에서 이벤트 핸들러 props(onClick, onToggle)는 넘기면 안 돼요.
6.🎨 TagBadge 리팩터링: 팀 간 UI 일관성을 위한 단일 컴포넌트화
프로젝트를 진행하면서 다른 팀에서 사용하는 ‘태그 뱃지(TagBadge)’ 스타일이 조금씩 달라지는 문제가 생겼다.예를 들어, best 태그와 author(글쓴이) 태그가 각각 별도로 만들어져 있었고, 스타일이 비슷함에도 불구하고 서로 다른 컴포넌트로 관리되고 있었다.