개발자들이 남긴 기록..

1. Next.js와 Node.js API 연동

핵심: Next.js에서 Node.js API를 사용하는 것은 기본적으로 문제없음.
설명: Next.js는 Node.js 기반으로 서버사이드 렌더링(SSR) 및 API 라우트를 지원하기 때문에, Node.js API 사용과 환경이 동일해 성능 문제는 거의 없음.
의견: Node.js를 공부하면 Next.js 사용 시 이해도가 증가하고, 서버와 클라이언트 간 시너지를 낼 수 있음.
참고: 클라이언트 컴포넌트가 아닌 서버 컴포넌트 내에서 사용하는 API라면 더욱 안정적임.

핵심: 기존 React 프로젝트를 Next.js(앱 라우터 기반)로 마이그레이션하는 데 걸리는 시간은 규모와 마이그레이션 목적에 따라 다름.
설명:
- 앱 라우터는 기본적으로 서버 컴포넌트로 동작해 SSR에 최적화됨.
- SEO 중요 페이지부터 서버 컴포넌트로 전환하며 점진적으로 마이그레이션하는 것이 효과적임.
- 클라이언트 컴포넌트로만 구성할 경우 오히려 작업 시간이 단축될 수 있으나 SEO 혜택은 적음.
의견: 완전한 리팩토링보다는 단계별 개선 전략 추천.

핵심: 모바일 웹에서 1:1 채팅 인풋 커서 포커스 시 키보드가 화면을 위로 밀어내면서 sticky 헤더가 사라지는 문제는 iOS 웹킷 엔진 특유의 이슈임.
설명:
- iOS 사파리에서는 position: fixed 요소가 키보드 활성화 시 제대로 대응하지 못하는 문제가 있음.
- 여러 대응법 시도해도 완벽한 해결책은 아직 없음.
- React Native for Web(RNW) 등 네이티브 하이브리드 방식으로 접근할 수 있지만 반응 속도와 크로스브라우징 이슈가 있음.
팁:
- iOS 15 이상 크로스브라우징 가이드 참고 (https://channel.io/ko/blog/cross_browsing_ios15)
- VirtualKeyboard API의 발전을 기다리며 임시 방편식 CSS 조정 필요
결론: 완벽한 해결은 아직 먼 이야기지만, 디자인/UI 조정을 통한 UX 개선이 효과적임.

핵심: 보통 .gitignore로 빌드된 결과물은 Git에 올리지 않음.
설명:
- 파일 용량 문제: 빌드 파일은 소스보다 크고, 저장소 용량과 속도 저하를 유발함.
- 버전 관리 문제: 빌드 파일은 자동으로 생성되므로 수정 내역 추적이 어렵고 의미 없는 커밋 로그 증가.
- 재현성 보장: 소스코드만 있으면 누구나 빌드 가능해 일관성 유지.
- 보안: 빌드 파일에 하드코딩된 키나 민감 정보 포함 가능성 있고, 이를 디컴파일하면 노출 위험 있음.
업무 팁:
- 외주 시 비공개(private) 리포지토리에서 작업하고, 최종 산출물만 전달하는 경우 많음.
- 빌드 파일 관리 필요 시 Git LFS(대용량 파일 지원) 활용 권장.

핵심: 일이 적거나 수습 기간이라도 코드 리뷰 및 서비스 이해가 중요함.
설명:
- 비즈니스 로직 및 서비스 구조 파악은 문제 발견과 개선에 필수적.
- 코드를 읽으며 비효율적 구조나 반복되는 패턴을 찾아내고 개선 제안 가능.
팁:
- 코드 리딩을 업무로 인식하고 적극적으로 수행할 것.
- 동료와 의견 공유하며 팀 내 코드 컨벤션이나 리팩토링 방향 모색 추천.

핵심: Tailwind CSS가 널리 쓰이나, Vanilla Extract, Panda, Emotion 등 다양한 대안 존재.
설명:
- Tailwind CSS: 유틸리티 퍼스트 방식, 빠른 개발과 재사용성 강점. 단점은 설정과 확장성이 가끔 복잡.
- Vanilla Extract: CSS-in-JS 형태로 타입 안전과 런타임 오버헤드 최소화 장점. 정보 및 예제가 적어 초기 진입 장벽이 있음.
- Panda: 최근 인기 상승 중인 CSS-in-JS 라이브러리, 도입 초기이나 빠른 컴파일 속도 자랑.
- Emotion: 넥스트와 자주 함께 쓰이며 컴포넌트 스타일링에 유용. 런타임 스타일링이라 퍼포먼스 주의 필요.
의견: 프로젝트 규모와 팀 선호도에 따라 선택하며, 넥스트 프로젝트에는 런타임 CSS-in-JS는 조심할 것.
추천: 소규모~중간규모는 Tailwind + CVA 조합이 생산성 높음.

Git 빌드 파일 관리 원리와 이유를 질문 받을 경우 다음 내용을 활용:
- 버전 관리의 목적과 빌드 산출물의 재현성 차원에서 소스 코드와 빌드 파일 분리 필요성을 설명 가능.
- 빌드 파일을 올리지 않는 이유 중 보안, 성능, 협업 효율성 측면을 상세히 설명할 것.
Next.js와 Node.js API 연동 경험, SSR과 클라이언트 컴포넌트 차이를 실제 업무 사례로 풀어 설명하면 좋음.
모바일 웹 키보드 문제와 대응 경험은 사용자 경험 문제 해결 능력을 보여주는 좋은 포인트임.

React 공식 학습 리소스: https://react.dev/learn
Cross-browser iOS 15 대응 가이드: https://channel.io/ko/blog/cross_browsing_ios15
CORS 미들웨어 cors npm: https://www.npmjs.com/package/cors
Remix 포트 변경 관련 StackOverflow: https://stackoverflow.com/questions/70907527/how-do-i-change-the-port-used-by-remix-runs-local-development-server
Remix 공식 문서 - port 환경 변수: https://remix.run/docs/en/main/other-api/serve#port-environment-variable
입문용 C언어 공부 추천: (간단한 제안으로 제시되었음)