COMMIT.chat
View Bookmarks
react 썸네일react

2024-03-19

목차

  1. React에서 동적 <script> 관리와 컴포넌트화
  2. TanStack Query 캐시와 메모리 구조 이해
  3. 프린터 출력 시 HTML 바 차트 문제
  4. 내부망 보안과 외부 서드파티 사용 이슈
  5. React Swiper 슬라이드 너비 문제
  6. Context API vs Redux/Recoil 비교
  7. 커스텀 훅과 합성 컴포넌트 활용법
  8. 코딩 테스트 플랫폼과 채용과제 현황
  9. React useSelector 남발에 대한 의견
  10. 면접 질문: Access Token 보관과 보안 문제

1. React에서 동적 <script> 관리와 컴포넌트화

  • React에 <script> 태그를 동적으로 가져와서 쓰는 상황에서, 계속 바뀌는 값이 있을 경우 상태 관리를 어떻게 할지 질문.
  • React에서 상태(state) 관리는 UI 재렌더링과 데이터 흐름의 핵심임.
  • 동적으로 바뀌는 값은 state 혹은 props로 관리해야 하며, 스크립트 관련 로직은 별도의 React 컴포넌트로 만들어 재활용하는 게 좋음.
  • 초보자 팁: React의 컴포넌트화는 UI와 로직을 독립적이고 재사용 가능하게 만들어 유지보수를 쉽게 함.

2. TanStack Query 캐시와 메모리 구조 이해

  • TanStack Query의 캐시 저장 위치가 궁금했음.
  • 답변으로 캐시는 프로세스 메모리(heap)에 있다고 봄.
  • **콜 스택(Call Stack)**은 함수 실행 컨텍스트 관리에 쓰이는 메모리 구조이며, 상태 저장 구조로는 부적합.
  • React Query 캐시는 애플리케이션이 실행중인 메모리에 저장되고, 페이지 리로딩이나 앱 종료 시 초기화됨.
  • 따라서 앱 생명주기와 연관되어 캐시 지속 여부가 결정됨.

3. 프린터 출력 시 HTML 바 차트 문제

  • PC화면에서는 바 차트가 정상적으로 나오지만 프린트기로 출력하면 바가 사라지는 이슈 발생.
  • PDF로 변환 시에는 정상 출력됨.
  • 원인 가능성:
    • CSS 미디어 쿼리에서 프린트용 스타일이 누락되었거나 다르게 적용
    • 캔버스가 아니라 HTML과 CSS만으로 바 차트를 만들 경우, 인쇄용 스타일링을 별도로 관리해야 함
    • 프린터 드라이버 혹은 브라우저 인쇄 엔진의 호환성 문제도 있음
  • 해결 팁:
    • @media print CSS로 프린트 전용 스타일 점검 및 수정
    • 바 차트 라이브러리에서 PDF 출력 기능 활용 권장 (예: Chart.js)
    • 브라우저에서 인쇄 미리보기 기능으로 출력 상태 먼저 확인

4. 내부망 보안과 외부 서드파티 사용 이슈

  • 내부망 환경에서 외부 서드파티 사용이 어려워 보안 문제 발생.
  • 보안 회피를 위해 내부망에서 외부 서비스 직접 호출 금지 사례 다수.
  • 보안은 기술보다 의식이 중요하며, 물리적 보안(스티커 부착 등)과 교육 병행 필요.
  • VPN 속도 감소, 사내 모니터링 강화, 암호화 통신 중요성도 언급됨.
  • 외부 API나 CDN 사용 시 보안 검증, 프록시 서버 사용 등 대안 고려 가능.

5. React Swiper 슬라이드 너비 문제

  • Swiper 라이브러리에서 일반 슬라이드 너비를 100px, 활성화된 슬라이드는 200px로 설정했는데 슬라이드 이동 폭이 200px씩 움직여 문제가 생김.
  • 원인 분석:
    • Swiper는 슬라이드 이동 거리를 슬라이드 너비에 따라 조정하므로 활성 슬라이드 너비가 기준이 됨.
  • 해결 팁:
    • 슬라이드 너비를 일정하게 유지하거나, Swiper 옵션인 slidesPerView, spaceBetween, centeredSlides 조절
    • 커스텀 CSS와 이벤트 활용해 이동 효과 직접 구현 고려

6. Context API vs Redux/Recoil 비교

  • Context API는 React에서 props drilling(중첩된 컴포넌트 간 props 전달 문제)을 줄이기 위한 내장 기능.
  • Redux, Recoil 등은 상태를 전역으로 관리하는 라이브러리로, 복잡한 큰 애플리케이션에서 상태 관리에 효율적임.
  • Context API 장점:
    • 추가 라이브러리 없이 React 내장 기능 사용
    • 소규모 데이터 또는 UI 상태 관리에 적합
  • Redux/Recoil 장점:
    • 미들웨어 지원, 비동기 로직 관리, 개발 도구 지원 등 풍부한 기능 제공
    • 대형 프로젝트 및 복잡한 상태 구조 관리에 유리
  • 선택 기준은 프로젝트 복잡도 및 팀 규모에 따라 달라짐.

7. 커스텀 훅과 합성 컴포넌트 활용법

  • 자주 사용하는 onChange, value 같은 input 처리 로직을 반복하는 대신, 커스텀 훅(custom hook)을 만들어 재사용하는 게 효율적.
  • 합성 컴포넌트는 여러 하위 컴포넌트를 조합하여 관리하기 쉽게 만드는 방식.
  • 예를 들어, TextField 컴포넌트를 만들어 내부에 label, input, 오류 메시지 등의 컴포넌트 합성 가능.
  • 초보자 팁: 커스텀 훅은 로직 추상화, 합성 컴포넌트는 UI 추상화에 적합.

8. 코딩 테스트 플랫폼과 채용과제 현황

  • 최근 코딩테스트 플랫폼(Codility 등) 계약 종료 및 과제로 전환하는 기업 증가.
  • Codility는 문제 제출 시 입력까지 캡처하며 부정행위(복붙, 유사코드 등)를 감지할 수 있음.
  • Codility는 영어 문제로 인해 국내 지원자들에게 다소 어려움이 있음.
  • 프로그래머스 등은 채점 시스템과 다른 특성 보유.
  • 과제 기반 채용은 제출물 개별 검증 필요해 인력과 비용 소모 많음.
  • 실무 팁: 코딩 테스트는 문제풀이 능력뿐 아니라 제출 시스템 이해도 중요.

9. React useSelector 남발에 대한 의견

  • Redux의 useSelector 훅을 하나의 함수나 컴포넌트 내에서 여러 번 사용하는 경우 질문.
  • 특별한 에러는 없고, 원하는 대로 작동하지만 남발이 성능에 영향을 줄 수 있음.
  • useSelector는 리덕스 스토어 상태 업데이트 시 변경된 부분만 리랜더링하도록 도와주나, 과도한 사용은 오히려 비효율.
  • 권장 방법은 필요한 최소한의 상태를 선택해서 한 곳에서 관리하는 것.
  • 훅은 컴포넌트 또는 커스텀 훅 내에서만 호출해야 함.

10. 면접 질문: Access Token 보관과 보안 문제

  • 토큰 인증 시 Access Token을 어디에 저장하는지 면접 질문.
  • 일반적으로 로컬스토리지 또는 쿠키에 저장함.
  • 보안 이슈:
    • 로컬스토리지 저장 시 XSS 공격에 취약할 수 있음.
    • 쿠키는 HttpOnly 옵션을 설정하면 스크립트 접근을 차단해 보안성이 높지만 CSRF 공격에 대비 필수.
  • 따라서 각 저장 방식에 맞는 보안 대책 마련이 중요함.
  • 면접 팁: 보관 위치뿐 아니라 각 저장소의 장단점과 보안 위협 대응 방안도 함께 설명할 것.

면접팁⚡

  • React에서 상태 관리 라이브러리 선택 기준: 프로젝트 규모, 복잡도, 팀 역량을 고려.
  • 코딩 테스트 관련 질문엔 문제 풀이뿐 아니라, 플랫폼 특징, 제출 방식, 부정행위 방지 방법에 대해서도 답변 준비.
  • Access Token 저장 위치와 보안 이슈에 대해, 로컬스토리지와 쿠키 각각의 특성과 보안 대책을 명확히 말할 수 있도록 준비.

링크🔗

#React#TanStackQuery#코딩테스트#커스텀훅#내부망보안#Swiper#ContextAPI#Redux#useSelector#면접질문
이전 포스트

2024-03-18

2024년 3월 18일
다음 포스트

2024-03-20

2024년 3월 20일