목차
- 출근과 업무 시작 풍경
- React Server Components(RSC) 실험과 Vite 이슈
- 서버 컴포넌트 vs SSR 정보 은닉 목적
- Tailwind CSS와 Vite 버전 충돌 문제
- 커피챗과 탈락 메일 에티켓
- 연봉, 연애, 업무에 관한 자유로운 토론
- ChatGPT 및 AI 도구 사용 경험 공유
- 개발자 휴식과 게임 이야기
- 기술 면접 및 개발 이슈 질문과 답변
- 기타 잡담과 일상 이야기
1. 출근과 업무 시작 풍경
- 오늘 출근 인원은 적었고, 지하철도 한산해져 출근 시간이 빨라짐.
- 팀장님의 출근으로 인해 일부는 당황했으나, 휴식 모드가 예정되어 있어 반응 다양함.
- 출근 후 커피를 키보드에 쏟을지 고민하는 사람도 있을 정도로 늦은 아침 분위기.
2. React Server Components(RSC) 실험과 Vite 이슈
- RSC는 React가 공식적으로 제공하는 서버 컴포넌트 기능으로, 클라이언트의 부담을 줄이고 서버에서 렌더링하는 방식을 확대함. 서버에서 처리되어 클라이언트에 민감한 API 요청 등이 노출되지 않는 장점이 있음.
- Vite에서 RSC를 사용하려 했으나 공식 지원이 부족하고, 오류 메시지(예: "async/await is not yet supported in Client Components")가 발생.
- Vite 기본 설정인 @vitejs/plugin-react 플러그인은 JSX/TSX 변환만 지원하여 RSC와 직접적으로 연동되지 않음.
- RSC 관련하여 vinxi, vite-rsc 플러그인 등이 있지만 아직 완성도가 낮아 직접 환경 구성과 트러블슈팅 필요.
- 넥스트.js(Next.js)의 app router가 RSC와 SSR 지원 면에서 가장 무난하고 안정적인 선택지임.
3. 서버 컴포넌트 vs SSR 정보 은닉 목적
- 특정 페이지 API 활성화 여부를 숨기는 요구사항 때문에 RSC를 사용해보려 했으나, SSR(서버 사이드 렌더링)로도 충분히 구현 가능하며 API 요청 숨김도 가능.
- RSC 자체가 API 요청을 숨기려는 유일한 해결책은 아니며, 기존 SSR 혹은 API 프록시, 토큰 인증 등 다양한 방법으로 처리 가능.
- RSC 도입 시 서버 비용 증가 우려와 환경 구축 복잡성을 고려해야 함.
4. Tailwind CSS와 Vite 버전 충돌 문제
- Vite 6.x.x와 Tailwind CSS 4.x.x 간 호환성 문제 발생. 특히 shadcn(React UI 라이브러리)와 Tailwind 버전 차이로 플러그인 간 충돌 감지됨.
- 해결책으로 Tailwind의 버전을 하향 조정하거나 shadcn에서 호환 가능한 버전으로 맞춤.
- 최신 툴 사용 시 버전 호환성 문제는 자주 발생하니 매뉴얼과 커뮤니티 정보 참고 권장.
5. 커피챗과 탈락 메일 에티켓
- 탈락 통보 이후에도 진심 어린 답변과 커피챗 제안이 온 사례 공유.
- 이러한 소통은 네트워킹과 향후 기회에 긍정적 영향을 줌.
- 개발자라면 탈락 후에도 매너를 지키고 감사 표현하는 것이 좋음.
6. 연봉, 연애, 업무에 관한 자유로운 토론
- "연애 vs 연봉" 토론에서 다양한 의견 등장, 결국 둘 다 중요하다는 유머 섞인 결론.
- 개인 생활과 업무 균형 고민.
- 집-회사 반복 생활로 인해 연애 기회 부족을 호소하는 개발자들.
- 틴더 같은 앱으로 연애를 시작하는 경험담도 공유됨.
7. ChatGPT 및 AI 도구 사용 경험 공유
- AI 도구(Claude, Perplexity) 사용 경험 질문과 공유가 오감.
- ChatGPT 접속 불안정 이슈 발생 시 쿠키, 로컬 스토리지 삭제 후 재접속 권장.
- 여러 AI 도구를 비교하며 코딩 보조에 도움 여부 평가 중임.
8. 개발자 휴식과 게임 이야기
- 주말 세차, 문명 게임 신작 7편 출시 소식과 플레이 계획 공유.
- 업무 외에도 유저 개인의 취미 및 휴식 방법이 자연스럽게 이야기됨.
- 게임을 통한 스트레스 해소와 삶의 활력 강조.
9. 기술 면접 및 개발 이슈 질문과 답변
- Vite에서 RSC 개발 시 발생하는 오류 및 설정 관련 질문.
- 플러그인 역할 이해: @vitejs/plugin-react는 JSX, TSX 문법 지원에 한정됨.
- 효율적인 RSC 사용법과 넥스트.js 활용 추천.
- Tailwind CSS 버전 문제에 대한 해결 팁.
- SEO 대응을 위한 SSR 사용 여부 질의와 간단한 조언(검색광고, 구글 검색 활용 권장).
10. 기타 잡담과 일상 이야기
- 개발자 간 일상적 농담, 아침 출근 풍경, 친구, 대인관계, 그리고 비공식적인 대화 다수 포함.
- 블루투스 키보드 배터리 문제, 음식 이야기(돈까스, 뼈다귀 해장국)
- 긴 하루 동안 쌓인 소소하고 다양한 소통들이 즐겁게 오갔음.
면접팁⚡
- React에서 서버 컴포넌트(RSC)와 SSR의 차이점을 명확히 이해하고 어떤 상황에 쓰이는지 설명할 수 있을 것.
- Vite를 사용할 때, 플러그인 역할과 한계점을 파악하는 것이 중요하다.
- Tailwind CSS 같은 CSS 프레임워크와 빌드 도구 간 버전 호환 문제에 대처한 경험을 이야기하면 큰 장점.
- 탈락 후 예의 바른 커뮤니케이션이 어떻게 미래 기회로 이어질 수 있는지 실제 사례로 설명 가능.
링크🔗
- eslint-plugin-fsd-lint:
- vite-rsc (Vite에서 React Server Components 사용 참고):
- @vinxi/server-components (vinxi에서 RSC 지원 플러그인):
- 뉴스: 대우조선해양 신조 발주 관련 기사
#React#Vite#RSC#ServerComponents#TailwindCSS#ReactSSR#개발자이야기#커피챗#기술이슈#개인잡담