React / Vue CS 지식백과

React / Vue 관련 핵심 개념을 개발자 기술 면접에서 설명할 수 있도록 문서 7편으로 정리했습니다. 각 문서는 개념, 동작 원리, 시간 복잡도와 실무 선택 기준을 함께 다룹니다.

1. 01

   React Fragment: 불필요한 래퍼 없이 요소를 묶는 방법

   React Fragment는 여러 자식 요소를 추가 DOM 노드 없이 하나로 묶어 반환하게 해 주는 문법 요소다. 하나의 루트 요소 제약을 래퍼 없이 해결해 DOM 깊이와 CSS 레이아웃 문제를 예방하는 원리와 key 사용법을 정리한다.

2. 02

   React Hook: 함수 컴포넌트의 상태와 로직 재사용

   React Hook은 함수 컴포넌트에서 상태 관리와 사이드 이펙트 처리를 가능하게 하는 함수들의 모음이다. 훅의 등장 배경, 호출 순서 기반 동작 원리와 규칙, 커스텀 훅을 통한 로직 재사용까지 면접 관점에서 정리한다.

3. 03

   React와 Spring Boot 연동 구조: CORS, 프록시, 배포 전략

   React SPA와 Spring Boot REST API 서버를 분리해 구성하는 아키텍처를 다룬다. 개발 환경의 CORS와 프록시 설정, 정적 빌드 산출물의 통합 서빙과 분리 서빙 전략, 새로고침 404 해결까지 원리 중심으로 설명한다.

4. 04

   Vue 3와 Firebase 이메일 인증: 토큰 기반 인증 흐름

   Firebase Authentication은 이메일 인증을 서버 구현 없이 제공하는 관리형 인증 서비스다. ID 토큰과 리프레시 토큰의 흐름, Vue 3 컴포저블 통합, 라우터 가드와 세션 유지, 보안 주의점을 원리 중심으로 정리한다.

5. 05

   Vue 3와 Firebase 소셜 로그인: OAuth 위임과 연동 원리

   소셜 로그인의 바탕인 OAuth 2.0 권한 위임 원리와 Firebase가 소셜 제공자를 중개하는 인증 흐름을 다룬다. 팝업과 리다이렉트 방식 비교, Vue 3 구현, 계정 충돌 처리까지 정리한다.

6. 06

   Vue.js 라이프사이클: Composition API 훅으로 보는 컴포넌트의 일생

   Vue 컴포넌트가 생성, 마운트, 갱신, 소멸하는 라이프사이클 전 과정을 다룬다. Composition API 훅의 시점별 역할과 Options API 대응 관계, 데이터 요청과 자원 정리를 배치하는 올바른 시점을 정리한다.

7. 07

   Vue와 Spring Boot 연동 구조: 개발 프록시부터 서빙 전략까지

   Vue SPA와 Spring Boot API 서버를 분리해 HTTP와 JSON으로만 통신하는 구조를 다룬다. Vite 프록시와 CORS 처리, 빌드 산출물 서빙 전략, 히스토리 모드 새로고침 404 해결을 원리 중심으로 설명한다.