2024-04-29

목차

1. 리액트 iOS 클라이언트 에러 이슈
2. Next.js 14 뒤로가기 스크롤 복원 문제
3. SSR과 CSR, Partial/Full Hydration 개념 설명
4. React 프로젝트 질문 및 도움 요청 팁
5. 메뉴바 개발 방법과 JSON 활용
6. 멀티 커서 익스텐션 관련
7. 데이지 체인(Daisy Chain)과 듀얼 모니터 세팅
8. 리액트 네이티브 vs 리액트 러닝 커브
9. 직장 내 사적 질문 예절
10. 힙합처럼 "핫이슈" 커뮤니티 기여와 PR 문화

1. 리액트 iOS 클라이언트 에러 이슈

• 특정 아이폰에서 "Application error: a client-side exception has occurred" 발생함.
• 이는 리액트 앱이 클라이언트 쪽에서 예외가 발생했다는 의미.
• 해결 팁:
  • 사파리 개발자 도구를 이용해 에러 메시지와 call stack을 확인한다.
  • iOS 사파리에서만 발생한다면 iOS 특정 버전이나 브라우저 API 사용 제한이 원인일 수 있음.
  • 브라우저 콘솔 에러는 앱의 자바스크립트 오류를 의미하니 디버깅 필요.
• 크롬 개발자 도구로도 디버깅 가능하지만, iOS 기본 브라우저는 사파리임을 유념해야 함.

2. Next.js 14 뒤로가기 스크롤 복원 문제

• Next.js 버전 14 버전에서 뒤로가기 버튼을 눌러도 스크롤 위치가 원래대로 복구가 되지 않는 증상 보고됨.
• 이는 SPA(싱글 페이지 앱) 최적화나 새로운 라우터 변경 사항 때문일 수 있음.
• 해결책:
  • 직접 스크롤 위치를 저장/복원하는 커스텀 로직 작성 가능.
  • Next.js 최신 문서나 GitHub 이슈 확인 필요.
• 한 개발자는 e.preventDefault()를 언급했으나, 이는 이벤트를 막을 때 쓰이는 것으로 상황에 맞는지 확인 필요.

3. SSR과 CSR, Partial/Full Hydration 개념 설명

• SSR(Server-Side Rendering): 서버에서 HTML을 먼저 렌더링해 클라이언트에 전달하는 방식. 초기 로딩 속도와 SEO에 유리함.
• CSR(Client-Side Rendering): 클라이언트가 필요한 데이터를 받아와서 렌더링하는 방식. UI가 동적일 때 많이 사용됨.
• Full Hydration: SSR 후 전체 페이지가 클라이언트에서 다시 React로 활성화됨. 리소스가 많이 소요될 수 있음.
• Partial Hydration: SSR 중 일부 영역만 클라이언트에서 활성화하는 방식. 성능 최적화에 도움 됨.
• Gatsby 문서를 참고하면 Partial Hydration 개념 자세히 알 수 있음:
  https://www.gatsbyjs.com/docs/conceptual/partial-hydration/
• React Server Components(RSC) RFC 문서도 참고:
  https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md#update-refetch-sequence
• 페이지 리스트에 항목 추가 시 SSR로 동기화는 상황에 따라 다름; full hydration일 땐 초기 진입만 SSR, 이후는 CSR 처리.

4. React 프로젝트 질문 및 도움 요청 팁

• 질문을 받을 때는 “막힌 부분”을 구체적으로 정리해 공유하는 것이 중요함.
• 채팅방에서는 중구난방 코드를 공유하기보단 문제점과 시도한 부분을 명확히 작성해야 좋은 답변을 받음.
• 답변이 늦어지는 경우도 많으니 최대한 정리를 잘해서 빠른 도움을 노리는 것이 효율적임.

5. 메뉴바 개발 방법과 JSON 활용

• 메뉴바 구현 시 메뉴 항목이 단순하면 직접 컴포넌트에 적는 것도 방법임.
• 복잡하거나 중첩된 메뉴가 많을 때는 JSON 형태로 데이터를 만들어 map으로 렌더링하는 게 유지보수에 편리함.
• 메뉴바가 자주 바뀌면 비동기 호출로 동적으로 받는 것도 고려 가능.
• 상태 정보 전달은 props로 각 메뉴 컴포넌트에 맞게 구조화하는 것이 좋음.

6. 멀티 커서 익스텐션 관련

• VSCode 등 에디터에서 멀티커서를 지원하는 익스텐션이 있음.
• 기본 멀티커서는 여러 위치를 동시에 편집할 때 쓰이고, 더 고급 기능이 있는 확장 프로그램도 존재.
• "튤립"이나 "플립" 같은 이름이 있었으나 최근 찾기가 어려워졌다고 함.
• 개발 시 멀티커서 활용은 생산성 향상에 도움됨.

7. 데이지 체인(Daisy Chain)과 듀얼 모니터 세팅

• 듀얼 모니터는 보통 PC/노트북 본체에 모니터를 각각 HDMI, DP(디스플레이포트), 썬더볼트로 연결해 사용함.
• 데이지 체인은 모니터끼리 연결해 신호를 전달하는 방식(주로 DP MST 기능)으로 모니터 포트가 많을 때 유용하다.
• 모니터 간 직접 연결은 특수한 환경에서 가능하지만 일반적이지 않고, 기본적으로는 본체에서 각각 모니터로 연결함.
• 노트북은 보통 HDMI + USB-C/썬더볼트 포트 등으로 2대 이상 연결 가능.
• 모니터 수 확장은 그래픽 카드의 출력 포트와 지원 여부, GPU 성능에 따라 달라짐.

8. 리액트 네이티브 vs 리액트 러닝 커브

• 리액트와 리액트 네이티브는 문법이 비슷하지만, 네이티브 특성 때문에 학습 곡선이 있음.
• 일반 웹 개발 경험이 있으면 기본 UI 컴포넌트와 네이티브 환경 차이만 익히면 됨.
• 출시까지 걸리는 시간은 개인 역량과 경험에 따라 차이가 크며, 플랫폼별 디버깅과 빌드 환경 학습도 필요함.

9. 직장 내 사적 질문 예절

• 동료에게 결혼 여부, 연애 상태 등 개인적 질문은 조심해야 함.
• 인사나 가벼운 대화가 자연스럽고, 상대가 편안해 보일 때 가벼운 일상 이야기부터 시작하는 것이 안전함.
• 반지 착용 여부 등을 보고 추측하는 것은 부담 줄 수 있으니 삼가는 게 좋음.
• 사적인 궁금증은 동료와 친밀도가 충분할 때만 자연스럽게 묻는 게 바람직함.

10. 힙합 스타일 "핫이슈" 커뮤니티 기여와 PR 문화

• 개발자 커뮤니티에서 ‘핫이슈’ 글을 올릴 때는 무작정 이슈 등록보다는 직접 기여하거나 PR(풀 리퀘스트)을 통해 문제 해결을 제안하는 것이 권장됨.
• 오픈소스나 커뮤니티 참여 시에는 토론에 참여하거나 개선 방향 제시가 더 긍정적으로 받아들여짐.
• ‘핫이슈’는 단순 공론의 장이 아니라 발전을 위한 논의의 장으로 이해하면 도움됨.

면접팁⚡

• SSR과 CSR 차이와 각자의 장단점을 명확히 설명할 수 있도록 준비하자.
• 리액트 개념 중 Partial Hydration과 Full Hydration은 최신 웹 개발 이슈로 주목받으니 숙지해두면 좋음.
• iOS 사파리에서 발생하는 클라이언트 예외 디버깅 도구 사용 경험 및 문제 해결 과정도 어필하기 유리.
• 개발 도중 장애 상황이나 문제 해결 시 효과적인 커뮤니케이션과 정리 능력 강조.

링크🔗

• Gatsby Partial Hydration 공식 문서: https://www.gatsbyjs.com/docs/conceptual/partial-hydration/
• React Server Components RFC: https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md#update-refetch-sequence
• 직장 내 사적 질문에 대한 가이드 (블로그 외부 참고 필요)