목차
- 인프라 및 인사 이벤트
- 컴포넌트 합성과 관련 패턴
- PR과 협업 이슈
- next-auth 및 토큰 관리 고민
- Next.js 하이드레이션 오류와 날짜 처리 문제
- LLM(대형 언어 모델)과 AI 관련 관심사
- 개발 도구 및 아이콘 라이브러리 사용 꿀팁
- 커뮤니티에서 나눈 소소한 질문과 잡담
- 스위프(Swyp) 프로젝트 참가 안내
- 크리스마스 및 일상 이야기
1. 인프라 및 인사 이벤트
- 생일 축하 이벤트가 활발하게 진행됨
- 인프라 관련 맛보기 간단 소개 (inf-cli)
- 분위기가 화기애애하며 소소한 잡담 포함
2. 컴포넌트 합성과 관련 패턴
- 실무에서 컴포넌트 합성 패턴을 사용하는 경우가 많음
- Radix UI 같은 라이브러리를 사용하면 자연스럽게 합성 패턴을 활용하게 됨
- 컴포넌트 합성은 작은 컴포넌트들을 조합해 더 큰 UI를 만드는 방법으로, 재사용성과 유지보수성에 도움됨
3. PR과 협업 이슈
- PR 리뷰가 일주일 이상 지연되는 상황 발생
- 멘션과 의견 교환에도 불구하고 리뷰 불응으로 인한 갈등 우려
- 재택 근무로 소통 부재 심화
- 해결 팁: 멘션 지속, 직접 전화나 메시지 시도, 팀 내 핫라인 활성화 권장
- 이런 문제는 협업에서 자주 발생하며, 원활한 커뮤니케이션과 팀 문화를 만드는 게 중요함
4. next-auth 및 토큰 관리 고민
- next-auth 사용 여부에 대한 논의
- next-auth는 Next.js에서 인증 및 세션관리를 쉽게 해주는 라이브러리
- 요청마다 쿠키에서 토큰을 꺼내 직접 처리하는 것이 귀찮다는 의견
- 대안: 요청 함수 래핑하여 토큰 자동 첨부 방법 제안 (예: axios interceptor 활용)
- next-auth 사용은 선택사항이나, 인증 관련 복잡함 해소에 유용
5. Next.js 하이드레이션 오류와 날짜 처리 문제
- new Date(date).toLocaleDateString() 사용할 때 하이드레이션(hydration) 오류 발생
- 하이드레이션 오류란? 서버사이드 렌더링(SSR) 시 서버와 클라이언트 HTML 불일치로 발생하는 문제
- 문제를 해결하기 위해 'ko-KR' 등 명시적 locale을 넣으면 에러 해결됨
- 하이드레이션 문제는 주로 날짜, 시간, 랜덤 값 등 서버와 클라이언트간 출력 차이에서 발생
- 해결 팁: 클라이언트에서만 렌더하도록 하거나, SSR 시점에 국제화 옵션을 통일
6. LLM(대형 언어 모델)과 AI 관련 관심사
- 샘 알트먼의 프로그래머 미래 전망 유튜브 공유
- AI 기반 버그 파인더 및 코딩 어시스턴트에 대한 관심 증대
- AI로 인해 개발 환경과 업무 방식 변화 예측
- 개발자들이 AI 관련 공부 및 활용 계획 공유
7. 개발 도구 및 아이콘 라이브러리 사용 꿀팁
- 인라인 SVG 아이콘 컴포넌트를 직접 만들다가 라이브러리가 있는 걸 깨달음
- 아이콘 라이브러리 사용시 유지보수가 쉽고 효율적임
- JetBrains IDE 사용자들이 커서(CURSOR) IDE 전환 여부 고민 (WebStorm + GitHub Copilot 비교)
- 도구 선택 시 생산성과 편의성을 우선 고려하는 것이 중요
8. 커뮤니티에서 나눈 소소한 질문과 잡담
- 강릉 여행지 추천 (정동진, 경포대, 독도네 본점 등)
- 실내 런닝머신과 소음 문제에 관한 짧은 토론
- 크리스마스 및 연말 분위기 속 개발자들의 일상 공유
- 주식 이야기, 월급날 파주 방문 계획 등 생활밀착형 이야기
9. 스위프(Swyp) 프로젝트 참가 안내
- 단기간(6주) 웹 개발 프로젝트 참여 프로그램 소개
- PM, 디자이너, 개발자 각 직군과 협업하며 실무 경험 가능
- 초보자도 도전 가능하며 포트폴리오 제작에 큰 도움
- 참가비 99,000원, 현금 리워드 제공
- 일정 및 지원 링크 제공(1/12까지 접수 마감)
- 프로젝트 결과물과 후기 공유 링크도 안내
10. 크리스마스 및 일상 이야기
- 크리스마스 인사와 분위기
- 연말 휴가, 데이트 계획 등 소소한 이야기 이어짐
- 운동, 식사, 가족 및 친구와의 시간 나눔
- 가벼운 농담과 응원의 메시지 오가며 훈훈한 분위기 유지
면접팁⚡
-
하이드레이션 오류 설명 및 해결 방법
- 서버 사이드 렌더링 시 발생하는 클라이언트와 서버 컨텐츠 차이 문제
- 날짜, 시간 출력시 Intl API와 로케일(locale) 지정 필수
- 클라이언트 전용 렌더링 또는 SSR 데이터 통일로 해결 가능
- 면접에서 Next.js SSR과 CSR 차이를 묻거나 하이드레이션 문제 사례 질문 가능
-
토큰 관리 방법
- 인증 토큰을 쿠키에서 읽어 요청 헤더에 자동 첨부하는 방법 설명 (axios interceptor 등)
- next-auth 등 인증 라이브러리 사용 장단점 파악 필수
-
컴포넌트 합성 패턴
- 유지보수 쉽고 재사용 가능한 UI를 구축하는 패턴
- 라이브러리 사용 경험과 패턴 이해도 질문 받을 수 있음
링크🔗
- 샘 알트먼 프로그래머 미래: https://youtube.com/shorts/ip--RTBEI2c?si=ofE26V3o0Df4i-Cw
- Next.js 하이드레이션 오류 관련 GitHub 이슈: https://github.com/vercel/next.js/issues/60302#issuecomment-1879977052
- 산타 추적기 (Google Santa Tracker): https://santatracker.google.com/?utm_source=google&utm_medium=hpp&utm_campaign=Global
- 스위프(Swyp) 프로젝트 안내:
- 소음 잡아주는 런닝머신 소개 영상: https://www.youtube.com/watch?v=9KDOX9JYqMU
#NextJS#React#TokenManagement#HydrationError#PR문제#컴포넌트합성#AI#LLM#개발협업#스위프