COMMIT.chat
View Bookmarks
react 썸네일react

2025-01-05

목차

  1. 아침 인사와 가벼운 일상 대화
  2. 서버 액션(Server Action)에서 에러 처리 방법
  3. React Context와 리렌더링 이슈
  4. CSS 레이아웃 문제 해결 경험 공유
  5. Next.js 에러 핸들링 및 배포 시 문제점
  6. 에러 메시지 사용자 노출과 보안 이슈
  7. 기술 문서 및 관련 링크 소개
  8. styled-components와 Next.js 14에서의 사용법
  9. 개발 중 겪는 일상과 소소한 농담
  10. 인프라 및 새로운 서비스 소식

1. 아침 인사와 가벼운 일상 대화 🌞

  • 아침에 해가 뜨지 않아 잠이 덜 깬다는 이야기.
  • 주말 아침 보통 시리얼과 귤을 먹는다는 개인적인 식사 패턴 공유.
  • FT 아일랜드 노래가 듣고 싶다는 등 자유로운 분위기의 대화.

2. 서버 액션에서 에러 처리 방법 💻

핵심

  • 서버 액션 내에서 throw로 에러를 던지면, error.tsx에서 에러 내용을 제대로 참조하거나 보여주기 어렵다는 문제 발생.
  • 이 때문에 에러를 return 형태로 처리하는 방식을 권장함.

설명

  • **서버 액션(Server Action)**은 서버 측에서 실행되는 비동기 함수로, 보통 API 호출이나 데이터베이스 작업에 사용됨.
  • throw는 자바스크립트에서 예외를 발생시키는 방식이나, Next.js 13+ App Router에서는 에러가 서버 컴포넌트 렌더링 중 처리되어, 프로덕션 환경에서 구체적인 에러 메시지가 생략됨.
  • 따라서 throw 대신 에러 정보를 담은 객체를 반환하여, 클라이언트가 명시적으로 핸들링하도록 권장.

의견

  • catch 블록에서 에러를 잡고, 에러 내용을 return하는 방법이 더 안정적이며 전달이 쉬움.
  • 던진 예외를 전파하지 않으면 에러 객체 참조가 가능해짐.

3. React Context와 리렌더링 이슈 🔄

질문

  • Provider 상태가 바뀌면 하위 컴포넌트 중 useContext를 참조하는 컴포넌트만 리렌더링 되는 건지?

답변 및 경험

  • 이론상 useContext를 사용하는 하위 컴포넌트만 리렌더링됨.
  • 하지만 실무에서 의도대로 동작하지 않는 경우도 있어 주의 필요.
  • 상태 관리가 많은 컴포넌트를 감싸는 Provider는 불필요한 리렌더링의 원인이 될 수 있음.

4. CSS 레이아웃 문제 해결 경험 🎨

문제

  • navbar에서 로고는 왼쪽, 검색 버튼 등은 오른쪽에 배치하고 싶지만 원하는 레이아웃이 안 됨.

해결법

  • 오른쪽 아이템들을 감싸는 컨테이너에 display: flex와 justify-content: flex-end 적용.
  • 상위 컨테이너에 justify-content: space-between 속성을 유지하면서 내부 컨테이너로 레이아웃 조정.
  • container에 부여된 margin: auto가 문제였음.
  • display: block으로 설정 후 문제가 해결됨.

팁

  • CSS Flexbox 레이아웃 사용할 때 부모와 자식 요소의 속성 충돌을 확인하자.
  • 여러 방법이 있으니 상황에 맞는 조합을 테스트하는 것이 중요함.

5. Next.js 에러 핸들링 및 배포 시 문제점 ⚠️

상황

  • 프로덕션 배포 후 error.tsx에서 error 메시지가 보이지 않는 현상.
  • 이는 Next.js가 보안상 프로덕션 환경에서 구체적 에러 메시지를 숨기기 때문.

관련 이슈

  • Github 이슈 71101
  • 프로덕션 빌드시 민감한 에러 정보가 노출되는 것을 막기 위해 메시지가 생략됨.
  • digest라는 요약 정보만 제공.

해결 방향

  • 예상 가능한 에러는 throw 대신 커스텀 반환 객체로 처리.
  • 클라이언트에서 이 메시지를 받아 UI에 적절히 노출.
  • 예기치 않은 에러는 error.tsx에서 처리하되 메시지 대신 기본화면 제공.

6. 에러 메시지 사용자 노출과 보안 이슈 🔐

  • 사용자에게 에러 메시지를 그대로 보여주는 것은 권장되지 않음. 민감정보 유출 가능성 존재.
  • 로그인/회원가입 폼과 같은 컴포넌트는 Form 상태 관리(formState.setError)를 통해 에러를 사용자 친화적으로 표시.
  • 만약 메시지를 에러 바운더리나 서버 컴포넌트에서 직접 노출하고 싶다면, 메시지 노출 정책과 보안상 문제를 충분히 고려해야 함.

7. 기술 문서 및 참고 링크 📚

8. styled-components와 Next.js 14에서의 사용법 🎨

  • Next.js 14부터는 클라이언트 컴포넌트에서 styled-components를 사용할 경우 use client 지시문을 필수로 작성해야 함.
  • use client는 React의 새로운 서버 컴포넌트와 클라이언트 컴포넌트 구분을 위한 선언문으로, 클라이언트 전용 라이브러리 사용 시 필요함.
  • styled-components는 CSS-in-JS 라이브러리로, CSS 코드를 JS 파일 내 작성 가능.

9. 개발 중 겪는 일상과 소소한 농담 🎉

  • "푸시업 하지 말고 푸시 커밋" 같은 개발자 유머 공유.
  • 나이 관련 농담, 애니메이션과 웹툰 이야기 등 가벼운 소통.

10. 인프라 및 새로운 서비스 소식 🆕

  • '인프 새 소식'으로 구 킷허브 기반 게임 유통 서비스에서 페이 기능 추가 예정.
  • 이벤트메이커 API에도 페이 기능 추가 계획.

면접팁⚡

  • 에러 핸들링 방법에 대해 질문받으면 서버 액션 throw vs return 처리 차이를 명확히 설명할 것.
  • React Context 리렌더링 최적화 경험과 실제 어려움을 솔직히 공유하는 것도 좋은 인상.
  • CSS Flexbox 레이아웃 문제 해결 경험은 실무 적응력 강조에 유리.
  • Next.js 프로덕션 에러 처리 보안 이슈를 알고 있는지 확인하는 경우도 있음.

링크🔗

#Nextjs#React#서버액션#에러처리#리렌더링#CSS#styledcomponents#개발팁#웹개발#기술면접
이전 포스트

2025-01-04

2025년 1월 4일
다음 포스트

2025-01-06

2025년 1월 6일