개발자들이 남긴 기록..

Zustand #포트폴리오 #바닐라JS #외주 #월급밀림 #AR개발

1. Tabs 컴포넌트 useTab() 훅 없이 구현하기

React에서 Tabs UI를 만들 때 보통은 useTab() 같은 훅을 활용하지만, 해당 포스팅에서는 훅 없이 컴포넌트만으로 Tabs를 구현하는 방법 소개됨
핵심 사용 기술
- React.Children과 React.Children.map으로 자식 컴포넌트에 접근해 동적으로 탭 상태 제어 가능
- useImperativeHandle 훅으로 ref를 통해 외부에서 컴포넌트 상태를 조작할 수 있게 구현
초보자 설명:
- React.Children은 부모가 자식을 조작할 때 유용
- useImperativeHandle은 ref를 통해 컴포넌트를 외부에서 제어하는 기술로, 보통 UI 라이브러리 제작 시 쓰임
의견: 복잡한 훅에 의존하지 않고 컴포넌트만으로도 충분히 유연한 Tabs UI 구현 가능함

순수 자바스크립트(바닐라)로 된 date picker 라이브러리를 찾는 질문 등장
간단하고 가벼운 해결책으로는 <input type="date" /> 태그 추천
- 모든 최신 브라우저가 기본 날짜 선택 UI 제공
- 모바일 환경까지 기본 지원해 별도 라이브러리 불필요할 수도 있음
바닐라 JS 라이브러리는 커스텀 UI가 필요한 경우에만 고민할 것

블로그 글 1000개 정도를 Next.js SSG(Static Site Generation)로 빌드 시 문제 발생 가능성 지적
문제: 매번 배포할 때 많은 페이지를 정적으로 재생성하는 작업은 시간과 리소스 소모 큼
대안
- ISR(Incremental Static Regeneration) 활용하기
  - 요청이 있으면 그때그때 필요한 페이지만 새로 생성 가능
- 빌드 시 DB 호출을 줄이려면 미리 JSON 파일로 데이터를 준비해두거나 Vercel 같은 플랫폼 캐시 기능 활용
- Next.js 13부터 fetch cache 기능으로 API 호출 캐싱 가능, 불필요한 DB 호출 감소 도움
설명:
- SSG: 앱 개발 시 정적 페이지를 미리 생성해 빠른 로딩 제공
- ISR: 생성된 페이지를 백그라운드에서 재갱신 하며 최신 상태 유지
팁: 대규모 문서 사이트일 땐 pure SSG보다 ISR과 캐시 조합을 추천

문제 상황: 다중 탭 환경에서 인증 상태를 각각 독립으로 유지해, 한 탭에서 로그아웃 혹은 로그인 시 다른 탭의 상태가 갱신되지 않음
일반적 해결책
- 서버에서 인증/권한을 가져오는 API(/me)를 주기적으로 호출해 최신 정보 반영
- 로컬스토리지 이벤트를 활용해 한 탭에서 상태가 바뀌면 다른 탭에 이벤트를 보내 상태를 갱신
상태 관리 라이브러리(zustand 등)를 클라이언트에만 의존할 경우 싱크 문제 발생
RBAC(Role-Based Access Control)는 서버가 권한 검증을 담당하고, 프론트엔드에서 UI 요소 보여주기 위해 권한 데이터를 받아 사용함
초보자 설명
- SPA는 페이지 내에서 자바스크립트만으로 화면을 바꾸기 때문에 인증 상태를 자주 서버와 맞춰야 함
- 로컬스토리지 이벤트는 storage 이벤트로 다른 탭에서 상태 변경을 감지하는 방식
권장: SPA에서도 서버와 주기적 인증 상태 동기화, 필요시 로컬스토리지 이벤트 병행

재미있고 독특한 포트폴리오 제작 사례 공유
추천 사이트 및 테마
- CLI(Command Line Interface) 포트폴리오: 터미널 환경에서 동작하는 듯한 UI 제공하는 포트폴리오 예시
- OS 스타일 포트폴리오: 작은 운영체제 같이 보이는 웹 포트폴리오
- 구체 주소
의견: 창의력과 기술력이 잘 표현된 사례들이며, 남들과 다른 인상을 주기 좋음