COMMIT.chat
View Bookmarks
react 썸네일react

2024-10-24

목차

  1. Next.js + TailwindCSS 빌드 후 스타일 깨짐 이슈
  2. React Query 캐시 및 stale 시간 설정
  3. Ant Design Carousel과 Form 연동 문제
  4. React Hook Form과 Controlled vs Uncontrolled 컴포넌트
  5. Android React Native Gesture Handler 에러 대응
  6. OIDC 토큰 백엔드 검증 관련 질문
  7. 부모-자식 컴포넌트 크기 조절 및 비율 유지 방법
  8. 로봇청소기 구매 및 가전제품 추천 토론
  9. React에서 FormProvider와 useFormContext 활용법
  10. 기술 면접 및 질문 관련 정보

1. Next.js + TailwindCSS 빌드 후 스타일 깨짐 이슈

  • 핵심 내용
    Next.js에서 yarn prebuild, yarn build로 out 폴더를 생성해 정적 사이트 배포 시 스타일(TailwindCSS)이 깨지는 문제 발생.

  • 설명
    TailwindCSS 적용이 제대로 되었음에도 불구하고, Nginx 서버에서 배포 후 CSS가 정상적으로 렌더링되지 않음. 네트워크 탭에서 CSS 파일은 정상적으로 로드되는 것으로 확인됨.

  • 조언 및 해결 팁

    • tailwind.config.js 파일의 설정 점검 권장 (특히 content 경로 설정)
    • Next.js 공식 가이드 문서에 명시된 대로 정확히 구성할 것
    • 빌드 캐시 (node_modules, .next) 삭제 후 재빌드 시도
    • out 폴더 배포 시 정적 파일 경로 문제 점검
    • 프로젝트가 모노레포 구조라면 경로 설정에 유의
    • 최소 재현 환경을 GitHub 등에 공유해 도움 요청 가능

2. React Query 캐시 및 stale 시간 설정

  • 핵심 내용
    React Query에서 staleTime 만 설정했더니 캐시를 활용하지 않고 계속 재요청되는 현상 발생.

  • 설명
    React Query는 서버 상태 관리 라이브러리로, staleTime은 데이터를 신선하다고 간주할 시간을 의미함. 이 시간 동안은 재요청 없이 캐시를 사용함. 그러나 캐시 무효화를 위한 다른 설정도 중요함.

  • 팁

    • 캐시 활용을 원한다면 cacheTime과 staleTime을 함께 적절히 설정
    • 데이터 fetch 목적에 따라 refetch 정책도 검토할 것
    • 서버와 통신 빈도가 너무 많을 경우, 캐시 설정 미흡 가능성 있음.

3. Ant Design Carousel과 Form 연동 문제

  • 핵심 내용
    부모 컴포넌트에 여러 개의 Ant Design Carousel이 있고, 각 Carousel 내부에 Form이 있음. 부모가 자식 폼값을 getFieldsValue로 가져오지 못하는 문제 발생.

  • 설명

    • 부모는 상태 관리 위해 useState<FormInstance>로 폼 인스턴스를 저장하고 자식에 전달하려 시도
    • 자식에서 setFieldValue는 동작하지만, 부모에서 getFieldsValue로는 입력값이 반영되지 않음 (비동기성 및 렌더링 타이밍 문제 가능성)
    • 각 Carousel의 폼 상태를 부모에서 직접 접근하는 구조가 복잡할 수 있음

  • 해결 방법

    • 부모 컴포넌트에서 useForm를 선언 후, FormProvider로 감싸고, 자식에서 useFormContext() 이용해 동일 폼 인스턴스를 공유
    • 이렇게 하면 상태가 한 곳에서 관리되어 값 공유가 안정적임
    • 자식에서 setValue로 값 업데이트 후, 부모에서 form.watch() 또는 getFieldsValue() 활용 가능
    • 상태 끌어올리기(상태 리프팅)를 직접 form 인스턴스 대신 값 자체로 하는 것도 방법이나, 반응 속도 저하에 유의

4. React Hook Form과 Controlled vs Uncontrolled 컴포넌트

  • 핵심 내용
    React Hook Form 사용 시 Controlled 컴포넌트와 Uncontrolled 컴포넌트 개념 이해의 중요성 대화.

  • 설명

    • Controlled 컴포넌트: React state에 값이 완전하게 통제되는 컴포넌트. 상태와 UI가 동기화됨.
    • Uncontrolled 컴포넌트: 내부 DOM 상태를 직접 관리하며, React가 상태를 완전히 통제하지 않음.
    • React Hook Form은 Uncontrolled 방식을 기본으로 빠른 렌더링과 퍼포먼스를 제공하지만, 복잡한 입력 작업에선 Controller를 이용해 Controlled 형태로 변환 가능.

  • 팁

    • register (Uncontrolled)와 Controller (Controlled) 활용법 이해 및 상황에 맞게 사용
    • Controlled 방식은 동기화가 잘 되고 복잡한 입력 컴포넌트에 적합
    • 성능 문제 발생 시 Uncontrolled 방식 적극 검토

5. Android React Native Gesture Handler 에러 대응

  • 핵심 내용
    React Native Android에서 'rngesturehandlermodule' could not be found 에러 발생.

  • 설명

    • Android에서 react-native-gesture-handler 모듈이 제대로 로딩되지 않음
    • 보통 Java/Kotlin 네이티브 코드에서 라이브러리 링크 문제, 캐시 이슈, 혹은 pod install (iOS는) 적절히 안 됐을 때 발생

  • 해결 팁

    • node_modules 삭제 후 재설치
    • Android 시뮬레이터 데이터 및 앱 삭제 후 재실행
    • 라이브러리 다운그레이드 시도 (예: 2.14.0 버전)
    • react-navigation docs의 네이티브 모듈 mocking 참고
    • 혹은 안드로이드 빌드 클린 및 재빌드

6. OIDC 토큰 백엔드 검증 관련 질문

  • 핵심 내용
    OAuth 로그인 처리 시 백엔드에서 OpenID Connect(OIDC) 토큰 검증을 어떻게 하는지 질문.

  • 설명
    OIDC는 OAuth 2.0 기반 인증 규격이며, 인증 후 ID 토큰과 액세스 토큰을 발급함.
    백엔드에서는 다음 절차로 검증 진행:

    • ID 토큰 서명 검증 (JWT 토큰이니 공개 키 사용)
    • 토큰 만료시간, 발급자(iss), 대상(aud) 확인
    • 토큰 내 권한 및 정보 검증 후 사용자 인증 처리

  • 팁

    • 검증 로직과 라이브러리를 활용하면 간편
    • 직접 파싱하기보단 검증 가능 라이브러리 추천 (ex: passport-openidconnect, oidc-client 등)
    • 서버에서 액세스 토큰은 API 호출 시 사용, ID 토큰은 인증용임에 주의

7. 부모-자식 컴포넌트 크기 조절 및 비율 유지 방법

  • 핵심 내용
    부모 컴포넌트 크기가 자식 컴포넌트 자연 크기보다 작을 때, 비율을 유지하며 축소하는 방법 문의.

  • 설명

    • 자식 요소 크기가 가변적이고 폰트 등 하위 요소까지 모두 축소해야 함
    • CSS aspect-ratio는 가변 크기에는 적절치 않음
    • ResizeObserver를 이용해 부모 크기에 따라 transform: scale() 적용 방법이 있음

  • 고려사항

    • 성능 문제 가능성 (특히 무한 스크롤처럼 많은 요소가 있을 때)
    • 중요한 요소는 축소 시 UI 가독성 저하 가능성
    • CSS Flexbox/Grid 속성 활용 시 일부 비율 유지 가능

  • 팁

    • 꼭 필요한 경우에만 ResizeObserver 활용 권장
    • 필요 시 React 라이브러리로 성능 최적화 작업 병행
    • 비율 유지가 중요한 컴포넌트는 고정 크기 또는 Responsive 디자인 재고

8. 로봇청소기 구매 및 가전제품 추천 토론

  • 핵심 내용
    최근 인기 로봇청소기 브랜드 및 모델, 가성비와 앱 최적화 비교 토론 진행.

  • 주요 브랜드

    • 로보락(Roborock): 앱 기능 우수, 고가 중고급형 라인
    • 에코백스(Ecovacs): 중급기 가성비 좋음
    • 샤오미(Xiaomi): 가성비 최고, 엔트리 및 중급형
    • 드리미(Dreame): 고급형, 앱 기능 좋음

  • 구매 팁

    • 최신 모델은 6개월 주기로 업데이트되니 구매 시점 고려
    • 앱 최적화 및 기능성을 가격 대비 평가할 것
    • 세제 비용, 유지비용도 체크
    • 주요 기능: 물걸레 청소 여부, 흡입력, 앱 인터페이스 등
    • 가전제품은 홈짐, 식기세척기, 건조기 등과 함께 소비자 만족도 고려

9. React에서 FormProvider와 useFormContext 활용법

  • 핵심 내용
    React 폼을 여러 컴포넌트에서 공유할 때 react-hook-form의 FormProvider와 useFormContext 사용법 소개.

  • 설명

    • FormProvider는 상위 컴포넌트에서 폼 상태와 메서드를 하위 컴포넌트들에게 Context로 제공
    • 하위 컴포넌트는 useFormContext() 훅으로 동일 form 객체에 접근 가능
    • 이를 통해 prop drilling 없이 폼 상태를 공유하고 관리할 수 있음
    • 동작 예: 부모에서 useForm() 후 FormProvider로 감싸고, 자식은 useFormContext()로 폼에 접근해 setValue(), watch() 등 활용

  • 장점

    • 상태 관리 간결화
    • 성능 최적화 및 리렌더 방지
    • 복잡한 중첩 폼 구조 처리에 유리

10. 기술 면접 및 질문 관련 정보

  • React 상태 끌어올리기, 폼 상태 관리 및 최적화 관련 질문
  • React Query 캐시 정책 이해, staleTime과 cacheTime 차이
  • Next.js 정적 빌드 환경에서 스타일 적용 문제
  • React Native Android Native 모듈 이슈와 해결
  • OAuth 2.0 / OIDC 기본 개념과 토큰 검증 절차
  • Controlled vs Uncontrolled 컴포넌트 차이와 활용법

상기 내용은 프론트엔드 주요 기술 면접에서도 자주 다뤄지는 주제로, 이해도와 실습 경험이 도움이 됨.

면접팁⚡

  • Next.js + TailwindCSS 배포 관련 질문 시
    빌드과정과 정적 파일 경로 설정 문제, 캐시 클리어 절차, tailwind.config.js content 필드에 대한 이해 강조

  • React Query 질문 시
    staleTime, cacheTime, refetchOnWindowFocus 등의 설정 차이와 케이스별 사용법 이해 필요

  • React Form state 관리 질문 시
    useForm(), FormProvider, useFormContext() 조합을 통한 상태 공유 방법과 상태 리렌더 이슈 설명 가능해야 함

  • React Native 면접에서는
    네이티브 모듈 링킹 절차, 캐시 및 빌드 클리어, react-native-gesture-handler 문제 해결 경험 어필

  • API 인증 관련 질문 시
    OAuth2/OIDC 토큰 검증 과정과 백엔드 역할, JWT 구조 및 검증 절차 명확히 설명

링크🔗

#Nextjs#TailwindCSS#ReactQuery#AntDesign#ReactHookForm#ReactNative#OIDC#ReactFormContext#프론트엔드#개발이슈
이전 포스트

2024-10-23

2024년 10월 23일
다음 포스트

2024-10-25

2024년 10월 25일