COMMIT.chat
View Bookmarks
react 썸네일react

2024-10-21

목차

  1. API 인증 문제와 Bearer 토큰 사용
  2. React에서 Suspense와 Error Boundary 작동 원리
  3. React 상태관리와 useState 초기값 관련 이슈
  4. React 컴포넌트 리렌더링과 React.memo 활용법
  5. 커스텀 훅(Custom Hook)과 Redux 상태관리 병합
  6. React 라우팅 시 화면 초기화 문제와 해결 팁
  7. Frontend 백엔드 협업 이슈 - CSV 다운로드 API 문제
  8. 개발 장비 및 업무 환경 토론: 맥북, 헤드폰 등
  9. 개발자 졸음 해소 및 업무 집중법 공유
  10. 간단한 상태 공유 방법: 쿠키, 쿼리 스트링 등

1. API 인증 문제와 Bearer 토큰 사용

  • API 호출 시 Authorization 헤더에 Bearer 토큰을 반드시 포함해야 함.
  • 토큰 없이는 API가 작동하지 않는 문제 발생.
  • 실제 코드에서는 토큰을 얻어 호출하는 부분을 래핑하는 방식 (handleApiCall) 사용.
  • 한 번에 두 개 이상의 API 콜이 있을 경우, 호출 실패 시 원인을 코드로부터 확인해야 함.
  • HTTPS로 전환 후 특정 API 호출이 실패하는 현상 보고됨. 프로토콜 변경에 따른 보안 이슈나 CORS 설정 확인 필요.

Bearer 토큰은 API 요청 시 인증을 위한 표준 토큰 방식으로, 헤더에 Authorization: Bearer <token> 형태로 전달합니다. 서버는 이를 검증해 요청자의 권한을 판단함.

2. React에서 Suspense와 Error Boundary 작동 원리

  • Suspense는 컴포넌트가 비동기 작업 중일 때 중간 상태로 로딩 UI를 보여주는 기능.
  • 내부적으로는 컴포넌트가 비동기 작업을 할 때 throw Promise를 사용해 React가 중단/재개할 수 있도록 함.
  • Error Boundary는 실제 에러(예: throw Error) 발생 시 렌더링 오류를 잡아내는 컴포넌트.
  • Suspense fallback은 throw Promise를,// Error Boundary는 일반적인 에러를 잡음.
  • react-query 같은 라이브러리가 Suspense를 공식 지원해 쉽게 상태관리 가능.
  • 비동기 데이터를 Suspense에 맞게 처리하려면 비동기 로직을 wrapPromise 형태로 만들어야 함.

React Suspense는 비동기 작업 시 UI를 중단하고 fallback을 보여주는 선언적 수단입니다. throw Promise는 자바스크립트 예외 처리 패턴을 변용한 React 내부 구현 기법임.

3. React 상태관리와 useState 초기값 관련 이슈

  • useState(initialValue)에서 initialValue는 최초 렌더링 시점에만 적용됨.
  • 이후 부모 컴포넌트 props가 변경되어도 이미 생성된 상태값은 유지됨 (초기화 되지 않음).
  • 상태를 props 변경에 따라 다시 초기화 하려면 key 속성을 변경하거나, useEffect로 명시적 업데이트 필요.
  • 함수로 초기값 전달(useState(() => expensiveComputation()))는 최초 렌더링 때만 계산되어 효율적임.

React에서 상태의 초기값은 컴포넌트가 처음 마운트 될 때만 반영되며, 이후에는 상태가 독립적으로 관리되어 props 변경과 무관함.

4. React 컴포넌트 리렌더링과 React.memo 활용법

  • React.memo는 불필요한 리렌더링 방지를 위한 최적화 수단.
  • 모든 컴포넌트에 무분별하게 적용할 경우 오히려 성능 저하가 발생할 수 있음.
  • 조건부 렌더링(if 문 등)으로 컴포넌트가 교체(언마운트/마운트)되면 상태는 초기화됨.
  • 화면 전환 시 상태 초기화를 막으려면 컴포넌트를 계속 유지하면서 display:none 처리하거나 상태를 외부에 저장하는 방법이 필요.
  • React.memo는 리렌더링을 막는 것이지 컴포넌트 교체 시 초기화 문제를 해결하지 못함.

5. 커스텀 훅(Custom Hook)과 Redux 상태관리 병합

  • 커스텀 훅은 로직 재사용을 위한 React 훅의 조합체.
  • 커스텀 훅 내부에서 Redux 상태를 useSelector로 조회하고 dispatch 사용해도 가능.
  • 단, 여러 훅을 동시에 사용할 때 상태 업데이트 충돌이나 의도치 않은 영향이 없도록 설계해야 함.
  • Dan Abramov는 커스텀 훅이 독립적이고 예상 가능한 동작을 하도록 권장함.
  • 공통 상태를 훅에서 직접 공유하는 건 문제를 일으켜 디버깅 어려움.

6. React 라우팅 시 화면 초기화 문제와 해결 팁

  • react-router-dom 기본 동작은 페이지 전환 시 기존 컴포넌트는 언마운트되고 새 컴포넌트가 마운트됨.
  • 따라서 이전 페이지의 상태가 초기화되는 것은 정상 동작임.
  • 상태 유지가 필요하면 로컬 스토리지, Context API, Redux 같은 전역 상태관리 또는 URL 쿼리 파라미터 이용.
  • 숨김(display:none) 방식으로 화면 전환을 처리하면 컴포넌트를 언마운트하지 않아 상태 유지 가능.
  • 조건부 렌더링으로 컴포넌트가 바뀌면 상태 초기화는 피할 수 없음.

7. Frontend 백엔드 협업 이슈 - CSV 다운로드 API 문제

  • 백엔드에서 받은 CSV 다운로드 API가 호출 시 에러(404, 302, 500 등) 발생.
  • 프론트엔드에서는 라이브러리 활용해 CSV 기능 요청만 하고, 백엔드 API 동작을 기대함.
  • 배포 환경, API 경로, 인증 토큰, CORS 설정 등 면밀히 점검해야 함.
  • 원격 접속 환경 미비로 인해 실시간 협업과 문제 해결 지연됨.
  • Git 브랜치 관리와 커밋 전략으로 충돌과 에러 최소화 필요.

8. 개발 장비 및 업무 환경 토론: 맥북, 헤드폰 등

  • 맥북 RAM 16GB 추천, 프로 모델은 RAM 8GB로는 성능 부족 의견 다수.
  • 작업량과 용도에 따라 16GB 이상 권장.
  • 헤드폰(소니 WH-1000XM5 vs 맥스) 비교 중:
    • 소니: 편안함, 노이즈 캔슬링 우수.
    • 맥스: 연동성, 디자인에서 선호도 높지만 무게 및 착용감 이슈 있음.
  • 이어폰 대비 헤드폰이 웅장한 사운드 제공.
  • 직접 사용해본 후 선택 권장.

9. 개발자 졸음 해소 및 업무 집중법 공유

  • 커피 외 다양한 졸음 해소법 제안:
    • 밖에 나가 바람 쐬기, 스트레칭
    • 잠시 눈을 붙이기 (짧은 낮잠)
    • 코 건드리기(임시방편)
  • 근본적으로 수면 부족이 문제라면 일찍 자는 것이 가장 좋은 방법.
  • 업무 중 졸음 방지를 위한 환경 조성도 중요.

10. 간단한 상태 공유 방법: 쿠키, 쿼리 스트링 등

  • 간단히 두 페이지 간에 값 한 번만 전달하고 싶을 때 Redux는 과도한 선택.
  • 쿠키, 쿼리 스트링, sessionStorage 등 다양한 방법으로 상태 전달 가능.
  • 보안이나 노출 민감도가 없다면 쿼리 스트링이 가장 간단.
  • 필요하면 쿠키 수명 짧게 지정해도 무방.
  • 선택 기준은 데이터 노출 여부, 사용 빈도, 보안 고려 사항.

면접팁⚡

  • React Suspense vs Error Boundary 차이점 정확히 이해하기
    -> Suspense는 비동기 로딩 대기용, Error Boundary는 실제 오류 처리용임.
  • useState의 초기값 처리 방식
    -> 상태 초기화는 최초 렌더링에만 적용되고, 이후 props 변경과 무관함.
  • React.memo는 리렌더링 최적화 도구이지 상태 유지 도구가 아니다
    -> 화면 전환시 언마운트 마운트로 인한 상태 초기화 해결이 아님.
  • 커스텀 훅 내에서 Redux 상태 사용 가능하나 설계 주의 필요
    -> 독립적, 예상 가능한 상태관리 구조를 유지해야함.

링크🔗

#React#API인증#Suspense#useState#ReactMemo#커스텀훅#라우팅#상태관리#개발환경#협업
이전 포스트

2024-10-20

2024년 10월 20일
다음 포스트

2024-10-22

2024년 10월 22일