COMMIT.chat
View Bookmarks
react 썸네일react

2023-10-14

목차

  1. JSON과 파일 데이터 함께 전송하기
  2. Headless UI와 React 상태관리 질문
  3. React Native RTSP 라이브러리 문제 및 해결법
  4. Git 관리 팁: node_modules 올리기 vs 무시하기
  5. React 렌더링 과정과 성능 최적화 (Fiber, memo)
  6. 이벤트 루프와 setTimeout의 역할
  7. 로그인 상태 데이터 저장소 선택 (localStorage, sessionStorage, cookie)
  8. 코딩테스트(코테) 대리 이슈와 면접 난이도
  9. 캠핑과 힐링 분위기 + 이미지 공유
  10. 기타 잡다한 질문 및 개발자 소통

1. JSON과 파일 데이터를 함께 전송하기

  • 핵심: json 데이터와 파일을 같이 서버로 보내려면 FormData를 사용해야 함.
  • 설명:

    • FormData 객체는 파일과 일반 데이터를 같이 포함할 수 있음.

    • 배열 같은 형태로 여러 FormData를 묶어 보내는 건 보통 잘 안쓰임. 보통 하나의 FormData에 key:value 쌍들을 append.

    • 예:
      js const formData = new FormData(); formData.append('json', JSON.stringify({...})); formData.append('file', fileInput.files[0]);

    • 서버에서는 multipart/form-data 타입으로 처리하면 JSON과 파일 둘 다 받을 수 있음.

  • 팁: 백엔드가 multipart 지원하는지 미리 확인 필요.

2. Headless UI와 React 상태관리 질문

  • 핵심: Next13에서 사용할 수 있는 UI컴포넌트 라이브러리 및 상태관리법 고민
  • Headless UI:
    • UI 스타일 없이 기능만 제공하는 컴포넌트 라이브러리
    • 접근성(Accessibility) 내장
    • 대표 예: Radix UI, headlessui.com
  • 상태관리 중 함수 상태 관리:
    • 함수도 JS 객체이므로 상태로 관리 가능
    • 하지만 보통 함수 자체보다는 상태 변화를 목표로 함 (예: 모달 열린 상태 true/false)
    • zustand 등 상태관리 라이브러리에서도 함수보다는 상태값 관리 권장
  • 팁: 상태에 직접 이벤트 핸들러 함수를 넣기보다 상태 값과 로직을 분리해서 관리하는 게 유지보수에 좋음.

3. React Native RTSP 라이브러리 문제 및 해결법

  • 문제:
    • RTSP 스트림 지원하는 React Native 라이브러리가 부족함
    • 예: JWPlayer 사용 시 빌드 에러 발생 (Unsupported class file major version 64)
  • 설명:
    • 빌드 에러는 보통 Java/Kotlin 컴파일러 버전 문제
    • gradle, JDK 버전 호환성 체크 필요
    • react-native-jw-media-player 같은 라이브러리 최신 버전으로 업데이트 권장
  • 해결팁:

4. Git 관리 팁: node_modules 올리기 vs 무시하기

  • 핵심: node_modules를 Git에 올리지 않는 것이 표준 관례임
  • 이유:
    • 용량 과다
    • 컴파일된 바이너리와 종속성이 많아 변경점 파악 어렵고 충돌 위험
    • 종속성은 package.json으로 관리
  • 이미 올린 경우:
    • git rm -r --cached node_modules로 Git에서 제거 가능
    • GitHub에서 웹 UI로도 삭제 가능
  • 코드 리뷰 어려움:
    • 대용량 변경 발생 시 PR을 세분화하거나, 변경 범위를 줄이는게 좋음
    • 변경 내역 불필요한 부분 제거

5. React 렌더링 과정과 성능 최적화 (Fiber, memo)

  • React Fiber 구조:
    • Fiber는 React 내부에서 UI 트리를 메모리 형태로 관리하여 효율적 렌더링 구현
    • 리렌더링 -> Fiber 구성요소 업데이트 -> 커밋 단계(실제 DOM 변경) -> 리페인트(화면 그리기 순서)
  • memo 사용법:
    • 상태 변경이 크지 않고 변하지 않는 컴포넌트에 memo를 사용해 불필요한 리렌더링 방지
    • 하지만 지나친 memo 사용은 오히려 성능 저하
  • 프로파일러 활용:
    • React DevTools 프로파일러로 렌더링 성능 이슈 분석 후 memo 적용 판단 권장

6. 이벤트 루프와 setTimeout 역할

  • 상황: 모달 클릭 후 setTimeout 안에 이벤트 핸들러 넣어 문제 해결
  • 설명:
    • 브라우저 이벤트 루프는 이벤트 핸들러 실행 완료 후 다음 이벤트 처리
    • setTimeout은 이벤트 큐에 넣어 콜스택이 비워질 때 실행됨 (비동기 처리)
    • 이로 인해 이벤트 버블링 문제나 상태 업데이트 타이밍 충돌을 방지 가능
  • 정리: setTimeout으로 딜레이 줘 로직 실행 순서를 조절하는 기법임

7. 로그인 상태 데이터 저장소 선택 (localStorage vs sessionStorage vs cookie)

  • 차이점:
    • localStorage:
      • 브라우저 종료 후에도 데이터 유지
      • 탭 간 공유됨
    • sessionStorage:
      • 브라우저 탭별로 독립적
      • 브라우저 종료 시 데이터 삭제
    • cookie:
      • 서버와 클라이언트 모두 접근 가능
      • 보안 옵션 설정 가능 (HttpOnly, Secure)
  • 요구사항: 탭 간 로그인 유지, 브라우저 종료시 자동 로그아웃
  • 해결법:
    • 기본적으로 sessionStorage는 탭마다 독립적이라 부적합
    • IndexedDB + BroadcastChannel API 사용해 탭간 데이터 공유하는 고급 방법 가능
    • 혹은 쿠키를 사용해 세션 유지 후 expiration 설정으로 자동 로그아웃 구현
  • 보안: 로그인 세션은 보통 서버 세션과 연계해 쿠키 기반 관리

8. 코딩테스트(코테) 대리 이슈와 면접 난이도

  • 현상: 코테 대리 요청 문제 발생, 면접 및 취업 난이도 상승 논의
  • 논점:
    • 대리는 부정행위로 기업과 지원자 모두에게 악영향
    • 소규모 커뮤니티 내에서도 이러한 문제 심각하게 인식 중
  • 면접팁:
    • 자신의 문제 해결 과정과 학습 과정 솔직하게 어필
    • 기술의 깊이보다는 문제 해결 능력과 협업 마인드 강조 필요

9. 캠핑과 힐링 분위기 + 이미지 공유

  • 개발자들이 캠핑을 다녀오며 힐링과 자연 사진 공유
  • 업무 스트레스를 푸는 다양한 활동 권장
  • 개발자 커뮤니티 내 긍정적인 소통 분위기 형성

10. 기타 잡다한 질문 및 개발자 소통

  • 각종 개발 관련 툴, 라이브러리 정보 공유
  • 개발자 간 친목 도모 및 정보 교환
  • 블로그, 마크다운 활용 노하우 질문
  • 개발자 일상과 고민 공유

면접팁⚡

  • Git : node_modules 왜 올리지 않는지 설명할 수 있으면 좋음
  • React 렌더링 최적화 방법과 memo 사용 기준 숙지
  • 상태관리에서 함수 상태 직접 저장하는 것에 대한 적절성 평가
  • 로그인 상태 저장 방법 및 보안 관련 질문 대비하기
  • 코딩테스트 부정행위 문제에 대한 본인의 생각을 정리해두면 좋음

링크🔗

#React#ReactNative#Git#HeadlessUI#코딩테스트#로그인#세션관리#이벤트루프#상태관리#개발팁
이전 포스트

2023-10-13

2023년 10월 13일
다음 포스트

2023-10-15

2023년 10월 15일