2023-10-23

목차

1. 데이터 Prefetch 및 상태 관리
2. 프론트엔드 학습 순서와 Bun 설치 이슈
3. React Query(SWR) 및 데이터 캐싱 문제
4. React 오디오 재생 제어와 포커스 문제
5. Next.js 13 캐싱 및 동적 렌더링 이슈
6. 도메인, SSL, 배포 관련 질문
7. 반응형 웹 구현 방식과 CSS 미디어 쿼리 활용법
8. 기타 생활 이야기 및 커뮤니티 분위기
9. 기술 면접 준비 및 질문 내용

1. 데이터 Prefetch 및 상태 관리

• 핵심: Next.js에서 prefetch props로 데이터를 넘기고, 테이블 정보를 객체로 묶어 상태 하나로 관리하는 방안
• 설명:
  • prefetch props는 서버에서 미리 데이터를 받아오고 클라이언트 컴포넌트에 넘겨주는 방법으로 페이지 로딩 성능 향상에 도움.
  • React 상태관리는 여러 개 따로 쓰지 말고, 관련 데이터는 객체 형태로 useState 하나에 묶어서 관리하는 것이 편리하며 상태 변경 시 이전 상태를 복사하는 setState(prev => ({...prev, 변경내용})) 패턴을 사용하면 좋음.
• 의견: 단순한 UI라면 상태 하나로 충분하므로 관리가 용이하고 성능도 개선됨.

2. 프론트엔드 학습 순서와 Bun 설치 이슈

• 핵심: 프론트엔드 공부 시 리액트를 먼저 배우고 프로젝트를 해본 뒤 타입스크립트 마이그레이션 권장
• 설명:
  • 기본적으로 HTML, CSS, JavaScript 학습 후 React로 UI 구성 방법 익히는 것이 효율적.
  • 이후 기존 프로젝트에 타입스크립트를 도입하면 실무 적용 능력 향상에 도움.
• Bun 설치 관련:
  • bun install은 윈도우 미지원 상태로, 리눅스 환경이나 도커 컨테이너에서 사용 권장됨.
  • 개발 환경 설정 시 OS 제한을 확인하고, 필요한 경우 도커를 활용해 리눅스 환경을 구축하는 것이 좋음.

3. React Query(SWR) 및 데이터 캐싱 문제

• 핵심: React Query와 SWR은 HTTP 요청 데이터를 관리하는 라이브러리로, 이름 변경 및 발전 과정을 공유
• 설명:
  • React Query가 tanstack Query로 이름이 바뀌면서, React뿐 아니라 다양한 프레임워크(Vue, Svelte 등)를 지원.
  • SWR은 페이스북이 공개한 HTTP 캐싱 전략을 기반으로 한 라이브러리지만, React Query와 직접적인 따라 함 관계는 아님.
  • Next.js 13에서 동적 데이터 캐싱과 관련해 router.refresh 혹은 React Query의 refetch로 데이터를 갱신하는 방법을 실무에서 사용.
• 의견: 기능적으로 유사하지만 상황에 따라 라이브러리를 선택, 적절한 데이터 갱신 전략 필요.

4. React 오디오 재생 제어와 포커스 문제

• 핵심: 여러 오디오 컴포넌트 중 하나만 재생하고 나머지는 멈추도록 제어하면서 브라우저 포커스 문제 발생
• 설명:
  • 각 오디오 요소를 useRef로 관리해 직접 DOM 접근을 줄이고, 오디오 전환 시 이전 오디오 pause 처리 권장.
  • DOM 요소 직접 접근 시 강제 리페인트로 포커스가 옮겨지는 문제가 발생할 수 있음.
  • 코드 유지보수를 위해 이벤트 핸들러 내에서 상태 관리와 refs 활용이 중요.
• 해결팁:
  • 오디오 관리 로직을 useRef로 중앙집중화하고 재생 토글 시 이전 오디오를 pause 하는 콜백을 이용.
  • Chakra UI 등 UI 라이브러리 사용 시 UI 컨트롤러가 포커스에 영향을 미치는지 체크 필요.

5. Next.js 13 캐싱 및 동적 렌더링 이슈

• 핵심: Next.js 13 app 디렉터리에서 서버 컴포넌트 캐시로 인해 뒤로가기 시 올드 데이터가 보여지는 문제
• 설명:
  • Next.js 13의 기본 라우터 캐싱은 popstate(브라우저 뒤로가기, 앞으로가기 이벤트)에 의해 캐시된 데이터가 표시됨.
  • 서버 컴포넌트에서 데이터를 동적으로 매번 불러오려면 캐싱 무효화가 필요함(예: router.refresh() 호출).
  • 새로고침(location.reload())은 전체 페이지를 다시 로드해 상태를 초기화하지만 UX상 부적합.
• 의견 및 팁:
  • 현재 Next.js 13 관련 커뮤니티, GitHub 논의가 활발하지만 완벽한 해결책은 아직 미흡함.
  • 필요에 따라 라우터 이벤트(popstate)를 감지해 수동으로 router.refresh()를 트리거하는 커스텀 훅 구현 가능.

6. 도메인, SSL, 배포 관련 질문

• 핵심: AWS S3 + CloudFront에 서브도메인 배포 시 SSL 인증서 문제와 도메인 네임서버 관리
• 설명:
  • AWS Certificate Manager(ACM)는 Route53과 연동이 쉽지만, 꼭 전체 도메인을 Route53으로 이전해야 하는 것은 아님.
  • 서브도메인(CNAME) 인증도 가능하지만, DNS 설정이 올바르게 되어 있어야 하며, 네임서버가 분산되면 인증 문제 발생 가능성.
• 팁:
  • 가능하면 도메인 DNS 관리를 AWS Route53으로 통합하는 것이 인증과 배포 편의성 상승.
  • SSL 인증서는 도메인의 각 서브도메인 별로 인증서 발급 요청 가능.

7. 반응형 웹 구현 방식과 CSS 미디어 쿼리 활용법

• 핵심: 기본적으로 CSS 미디어 쿼리를 최대한 활용하고, 필요 시 컴포넌트 분리 후 display:none으로 조정
• 설명:
  • 미디어 쿼리는 화면 크기별 스타일 조정으로 리소스 효율적.
  • HTML 레이아웃 구조가 크게 달라야 한다면 컴포넌트 두세트를 만들어 상황에 맞게 노출하는 방법도 사용.
  • CSR 환경에서는 페이지 분리가 가능하지만 SSR에서는 복잡해질 수 있음.
• 의견:
  • 무조건 컴포넌트 분리보다는 CSS만으로 조절하는 것을 우선 고려.
  • 유저 에이전트 검사 기반 완전 분리는 유지보수 비용이 크므로 신중히 선택.

8. 기타 생활 이야기 및 커뮤니티 분위기

• 개발자들의 일상 소소한 이야기, 커뮤니티 내 친목, 학교 이야기, 체력 자랑 등 활발한 분위기
• 가벼운 잡담 속 유대감 형성, 스트레스 해소를 위해 적절히 활용됨

9. 기술 면접 준비 및 질문 내용

• 핵심: 면접 내용은 주로 이력서 기반의 업무 경험 질문이 많음
• 팁:
  • 구체적 프로젝트 경험, 기술 스택 설명 준비 필요.
  • 기술적인 질문은 업무 내용 위주, 기본적인 React와 Next.js 동작 이해 요구됨.
  • 리액트 상태 관리 및 라이프사이클 숙지 필수.
• 기타:
  • 토스 같은 기업 상시채용 존재, 적극 지원 가능.
  • 실전 면접 전 스터디나 모의면접을 통해 사전 준비 권장.

면접팁⚡

• 업무 경험 위주의 질문을 상세히 준비하자.
• React 상태 변경(setState) 비동기성 이해하고 설명 가능해야 함.
• Next.js 13의 새 디렉토리 구조와 서버 컴포넌트 개념 파악 필요.
• React Query 및 SWR의 차이점, 캐싱 전략 이해해두면 도움이 됨.
• 면접 전 꼼꼼히 본인 프로젝트 코드 리뷰 및 API 요청 흐름 정리 권장.

링크🔗

• json-to-ts VSCode Extension - JSON을 TypeScript 타입으로 변환 지원
• Next.js 13 캐싱 관련 공식 문서
• MDN popstate 이벤트 설명
• Next.js 공식 GitHub discussion 이슈
• Mixpanel - 사용자 행동 분석 도구