리액트 인터뷰 가이드

수디르 조나 (Sudheer Jonna)

수디르 조나는 자바스크립트와 자바 프로그래밍 언어의 선두적인 소프트웨어 개발자이자 작가, 솔루션 아키텍트다. 수디르는 견고한 아키텍처와 높은 성능을 우선시하는 다수의 대규모 애플리케이션을 개발하는 데 참여했다. 싱글 페이지 애플리케이션(리액트/뷰/앵귤러), 백엔드 API 개발, SQL, 그리고 클라우드와 컨테이너화 기술에 대한 폭넓은 지식을 토대로 많은 개발자가 경력을 발전시킬 수 있게 도움을 주었다. 또한 이 책 외에도 네 권의 책을 썼으며, 블로거, 연사, 강사이기도 하다.

앤드류 바이스덴 (Andrew Baisden)

앤드류 바이스덴은 자바스크립트와 파이썬 프로그래밍 언어를 사용하는 데 능숙한 소프트웨어 개발자이자 기술 작가다. 앤드류는 경력을 이어가는 동안 다양한 업계의 여러 회사에서 근무했다. 기술 작가로서 갖추고 있는 기술과 지식은 많은 개발자가 기술 분야에서 경력을 시작하고 기존 기술을 발전시키는 데 도움을 주었다. 그는 3만 명 이상의 소셜 미디어 팔로워를 보유하고 있으며, 커뮤니티에 적극적으로 기여하고 있다.

김용찬

동국대학교 무역학과와 한국과학기술원 기술경영전문대학원 석사과정을 졸업하고 삼성 SDS, 카카오, 트리플(현 인터파크)에서 각각 풀스택 및 프런트엔드 개발자로 근무했다. 현재는 경기도 성남시에 소재한 IT 회사에서 프런트엔드 개발자로 근무하고 있다. 그리고 프런트엔드 기술 블로그(https://yceffort.kr)도 함께 운영하고 있다.

강주희

김용찬과는 오랜 스승과 제자 사이로, 숙명여자대학교 미디어학부, IT공학을 전공하고 e커머스 플랫폼에서 개발자로 근무하고 있다.

• [1부] 면접 준비
•  
• ▣ 01장: 면접 준비를 위한 마음가짐 다지기
• 이력서와 자기소개서 준비
• 깃허브 프로필 또는 웹사이트 포트폴리오 만들기
• 지원할 일자리 찾기
• 밋업 및 추천의 역할
• 면접 팁 살펴보기
• 정리
•  
• [2부] 리액트 핵심 기술 면접 마스터하기
•  
• ▣ 02장: 리액트의 기본 개념과 기능 이해
• 리액트 개발을 위한 선행 조건
• 리액트 소개
• JSX
• 요소와 컴포넌트를 이용한 뷰 구축
• props와 state를 활용한 컴포넌트 데이터 제어
• key prop의 중요성
• 이벤트 처리
• 가상 DOM
• 리액트 애플리케이션에서의 데이터 흐름과 통신
• 리액트에서 DOM 요소 접근
• 컨텍스트 API를 이용한 전역 상태 관리
• 서버 사이드 렌더링
• 정리
•  
• ▣ 03장: 훅 - 함수 컴포넌트에 state와 다른 기능 추가하기
• 훅 소개와 목적
• 훅을 이용한 지역 state 관리
• 훅을 이용한 전역 state 관리
• 리액트 애플리케이션에서 부수 효과 실행하기
• 애플리케이션 성능 최적화
• ref 훅을 사용한 DOM 노드 접근
• 인기 있는 서드파티 훅
• 사용자 정의 훅 구축
• 훅 문제 해결과 디버깅
• 정리
•  
• ▣ 04장: 라우팅과 국제화
• 기술 요구사항
• 내비게이션 및 리액트 라우터 소개
• 라우트, 라우트 타입, 링크
• 라우트 추가
• URL 파라미터에 접근하기
• 중첩 라우트
• 동적 라우팅
• 오류 페이지
• 국제화와 지역화
• 번역 및 포매팅된 메시지 추가
• 인수 전달 및 플레이스홀더
• 정리
•  
• ▣ 05장: 리액트의 고급 개념
• 포털
• 에러 바운더리
• Suspense API를 활용한 비동기 작업 관리
• 동시성 렌더링을 활용한 렌더링 성능 최적화
• Profiler API를 활용한 리액트 애플리케이션 디버깅
• 엄격 모드
• 정적 타입 검사
• 리액트의 모바일 환경 및 기능
• 정리
•  
• [03부] 리액트 그 너머, 그리고 심화 주제
•  
• ▣ 06장: 리덕스 - 최고의 상태 관리 솔루션
• 플럭스 패턴과 리덕스 이해하기
• 리덕스의 핵심 원칙, 컴포넌트, API
• 리덕스 미들웨어: 사가와 썽크
• RTK를 활용한 리덕스 로직 표준화
• 리덕스 개발자 도구로 애플리케이션 디버깅하기
• 정리
•  
• ▣ 07장: 리액트에서 CSS를 다루는 다양한 방법
• 기술 요구사항
• CSS를 적용하는 다양한 방법
• 전처리기와 CSS 모듈 알아보기
• CSS-in-JS 접근법과 styled-components의 사용법
• 리액트 애플리케이션에서 styled-componen
• 사용하는 법
• 정리
•  
• ▣ 08장: 리액트 애플리케이션 테스팅과 디버깅
• 기술 요구사항
• 리액트 테스트 헬퍼 소개
• 소프트웨어 테스트하기
• 애플리케이션 속 데이터 관리하기
• 이벤트 및 타이머를 활용한 코드 실행
• 리액트 개발자 도구를 활용한 디버깅과 분석
• 정리
•  
• ▣ 09장: Next.js, 개츠비, 리믹스 프레임워크를
• 빠른 개발
• 리액트를 풀 스택 프레임워크로 사용하기
• 정적 사이트 생성
• 서버 사이드 렌더링
• 페이지 메타데이터 추가
• SEO 모범 사례
• 정리
•  
• [04부] 프로그래밍 실습
•  
• ▣ 10장: 실제 프로그래밍 과제 깨부수기
• 기술 요구사항
• 개발 환경 준비
• 올바른 스캐폴딩 도구 또는 템플릿 선택하기
• 애플리케이션 아키텍처 결정
• 코드 테스트하기
• README와 함께 Git 저장소를 만들고 공유하기
• 정리
•  
• ▣ 11장: 리액트, 리덕스, styled-componen
• 파이어베이스 백엔드 기반 애플리케이션 만들기
• 기술 요구사항
• 프로젝트 스캐폴딩 및 구성
• 파이어베이스 서비스 소개와 애플리케이션 구성
• 파이어베이스 인증과 백엔드 구현하기
• 상태 관리를 위한 리덕스 컴포넌트 만들기
• 프레젠테이션 레이어 만들기
• 다국어 지원
• Vitest 프레임워크로 테스팅 구현하기
• README 문서와 함께 Git 저장소 생성하기
• 공개 접근을 위해 애플리케이션 배포하기
• 정리
•  
• ▣ 12장: Next.js 툴킷, 인증, SWR, 그래프
• 배포를 기반으로 한 애플리케이션 만들기
• 기술 요구사항
• REST API 소개
• 사용자 인증, SWR, 그래프
• 배포를 포함한 애플리케이션 구조 설계하기
• 커피 레스토랑 프로젝트
• 정리

• GitHub 저장소: https://github.com/wikibook/react-interview-guide
• ZIP 형식으로 다운로드: https://github.com/wikibook/react-interview-guide/archive/refs/heads/main.zip

• 79쪽, 페이지 중간 참고란의 첫 번째 줄

  userImperativeHandle 훅을 사용해

  ==>

  useImperativeHandle 훅을 사용해

• 80쪽, 두 번째 예제 코드의 6~8번째 줄

  <Context.Provider value={username}>
    <MyParentComponent />
  </Context.Provider>

  ==>

  <UserContext.Provider value={username}>
    <MyParentComponent />
  </UserContext.Provider>