2024-12-17

목차

1. 커뮤니케이션과 소소한 일상 공유
2. React Router v7과 TailwindCSS 이슈
3. 서버 컴포넌트(Server Components) 사용 사례
4. SSR과 Partial Hydration 개념과 현실적 활용
5. Next.js 404 페이지 상태코드 문제
6. 한글 입력 완전 차단 이슈와 해결 팁
7. React와 최신 프레임워크에 대한 현황과 고민
8. 면접팁⚡
9. 링크🔗

1. 커뮤니케이션과 소소한 일상 공유 🍽️

• 개발자들 간의 친근한 대화와 식사 메뉴 추천이 활발하게 오감.
• 역삼 지역 맛집과 웨이웨이, 카레, 짜장 등 구체적인 메뉴 추천도 공유됨.
• 낮은 온도에 대한 농담과 일상적인 인사도 포함되어 팀 분위기가 자연스럽고 편안함을 보여줌.

2. React Router v7과 TailwindCSS 이슈 🕸️

• React Router v7은 최신 버전으로 쓸 만하다는 평이 존재.
• 하지만 React Server Components(RSC)를 아직 미지원해 논란이 있음.
• TailwindCSS가 필수로 기본 설치되는 점에 대한 불만이 많음.
  • 보통 라이브러리 설치 시 꼭 필요한 것만 포함되길 기대하는 개발자들이 많음.
  • Next.js는 설치 전에 물어보는 걸로 유명하지만, v7은 무조건 Tailwind 포함.
• 이런 기본 설정 강제 적용은 개발자 경험(Developer Experience)을 해칠 수 있음.

3. 서버 컴포넌트(Server Components) 사용 사례 🧩

• 서버 컴포넌트는 React 18에서 도입된 개념으로, 서버에서 렌더링되는 컴포넌트다.
• 주로 정적 콘텐츠와 동적 콘텐츠가 혼재한 경우에 유용하며, 서빙 성능 최적화에 도움 준다.
• 하지만 메모리 사용량 증가와 서버 자원 부담 문제로, 잘 쓰지 못하는 경우도 많음.
• 전문적인 프론트엔드나 서버 지식이 없으면 남용해 서버 부하 초래 가능.
• 제대로 활용하면 스트리밍 SSR과 부분 하이드레이션(partial hydration)이 핵심 기능임.

4. SSR(서버 사이드 렌더링)과 Partial Hydration 🖥️

• SSR은 초기 페이지 렌더링을 서버에서 미리 처리해 사용자에게 빠르게 보여주는 기술.
• Partial Hydration은 SSR로 렌더링한 페이지 중 일부만 클라이언트에서 인터렉티브하게 하도록 작동하는 기법.
• Gatsby 공식 문서에서 관련 내용을 잘 설명하고 있어 참고할 만함.
• 현실에선 SSR 제품 활용 미숙으로 서버 과부하 발생, 클라우드 비용 폭증 이슈도 존재.
• Vercel 같이 SSR 관련 기능과 연동된 서비스들은 비용이 다소 높고, 커스터마이징이 어렵다는 지적도 있음.

5. Next.js 404 페이지 상태 코드 문제 ❗

• Next.js 14버전에서 동적 서버 컴포넌트 기반 404 페이지에서 페이지는 정상 작동하나 HTTP 상태 코드는 200으로 응답함.
• 이는 빌드 후 배포된 환경(특히 AWS Amplify)에서만 발생하는 버그로 현장에서 혼란 야기.
• 기본 404 페이지는 문제없으나, 커스텀 동적 404 페이지는 이슈가 있음.
• 해결책으로는 공식 문서, GitHub 이슈 참고를 권장하며 확장자 설정이나 export 설정 옵션이 영향을 줄 수 있음.

6. 한글 입력 완전 차단 이슈와 해결 팁 🔤

• JavaScript로 한글 입력을 완전히 차단하려 할 때 keydown 이벤트 등에서는 입력 값을 완전히 통제하기 어렵다.
• 특히 input 이벤트에서 값을 조작하면 ‘값 복사 버그’가 발생, 입력이 두 번 처리되는 문제 존재.
• 이때는 requestAnimationFrame을 이용해 값을 지연 처리하는 방식이 어느 정도 해결책이 될 수 있음.
• 하지만 완벽한 방법은 없고, preventDefault나 pattern 속성의 제한도 한계가 있음.
• 구체적인 코드를 공유하면 더 정확한 도움을 받을 수 있음.

7. React 및 최신 프레임워크 동향과 고민 🤔

• Next.js가 개발자들에게 사랑받으면서도 동시에 아쉬움과 불만도 공존함.
• 대안 프레임워크 부재로 ‘울며 겨자 먹기’ 식으로 사용한다는 현실.
• React Server Components와 같은 신기술은 사용 난이도가 높아 제대로 활용하는 회사가 적음.
• Vercel 과금 문제, 내부 커스터마이징 어려움과 같은 인프라적 제약도 존재.
• React Router v7는 유용하지만 RSC 미지원, Tailwind 강제 설치 문제는 두고두고 논란 예상.

8. 면접팁⚡

• SSR과 Partial Hydration의 차이 및 활용 이유를 명확히 설명할 수 있어야 함.
• React Server Components(Server Components)의 개념과 한계점을 이해하고, 언제 쓰이는지 설명할 수 있어야 좋음.
• Next.js 404 상태코드 처리 문제나 배포 시 나타나는 이슈에 대해 질문 받을 수 있으니 경험 공유 준비 권장.
• JavaScript 이벤트 처리(특히 한글 입력 관련 이슈)에 대한 이해도면에서 해결 방향을 제시하는 능력도 중요함.
• 최신 React Router 버전 변화와 TailwindCSS 같은 인프라 결정에 대한 개발자 경험의 중요성도 짚고 넘어가면 좋음.

링크🔗

• 라이코스 https://lykos.ai/
• Gatsby Partial Hydration 개념 https://www.gatsbyjs.com/docs/how-to/performance/partial-hydration/
• Gatsby Partial Hydration 기술 설명 https://www.gatsbyjs.com/docs/conceptual/partial-hydration/
• MDN pattern attribute https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern