프론트엔드 React 개발자가 알아야 할 기본 개념

프론트엔드 React 개발자가 알아야 할 기본 개념

---

1. 웹의 기본 동작 원리

주요 개념:

• 브라우저의 동작 방식
  브라우저가 HTML, CSS, JavaScript를 처리하여 렌더링하는 과정 이해 (DOM 파싱, 렌더 트리 생성, CSSOM, JS 실행)
• 요청/응답 구조
  HTTP와 HTTPS의 차이점, HTTP 메서드 (GET, POST, PUT 등), 상태 코드의 이해와 활용
• 쿠키/세션과 스토리지
  쿠키와 세션의 차이점, 쿠키 사용 시점, 로컬 스토리지와 세션 스토리지 사용

---

2. React 기본 및 심화

주요 개념:

• React의 렌더링 구조와 최적화
  React의 렌더링 동작 이해 및 성능 최적화를 위한 기법 (예: React.memo, useCallback, useMemo)
• 컴포넌트 설계 및 상태 관리
  컴포넌트 분리, 상태 관리 라이브러리 (예: Redux, MobX) 활용
• React Hooks 심화
  useState, useEffect의 효율적인 사용법 및 커스텀 훅 작성

---

3. JavaScript 심화 개념

주요 개념:

• 비동기 프로그래밍
  Promise, async/await, Generator 개념 및 활용
• 클로저와 스코프
  자바스크립트의 실행 컨텍스트, 스코프 체인 및 클로저 이해
• 모듈화와 최신 문법
  ES6+ 문법, 모듈화 방식 (CommonJS, ES Modules), 트리 셰이킹

---

4. 타입스크립트 적용

주요 개념:

• 타입 시스템
  기본 타입과 유틸리티 타입 이해 및 적용
• Generics와 고급 타입
  제네릭과 조건부 타입을 활용한 유연한 타입 정의
• React와 TypeScript 통합
  React 컴포넌트 설계 시 타입 정의 (Props, State)

---

5. 프론트엔드 성능 최적화

주요 개념:

• 성능 분석과 최적화 기법
  Lighthouse, Chrome DevTools를 통한 성능 분석
• 코드 스플리팅과 번들 최적화
  Webpack, Vite 등을 활용한 코드 스플리팅 및 번들 최적화
• 네트워크 최적화
  지연 로딩, 캐싱 전략, 이미지 최적화

---

6. 테스트와 코드 품질 관리

주요 개념:

• 단위 테스트와 통합 테스트
  Jest, React Testing Library를 사용한 테스트 작성
• E2E 테스트
  Cypress를 사용한 엔드 투 엔드 테스트
• Linting과 포맷팅
  ESLint, Prettier 등 코드 품질 유지 도구 활용

---

7. React 서버 사이드 렌더링과 CSR / SSR / SSG

주요 개념:

• Next.js
  SSR (서버 사이드 렌더링), SSG (정적 사이트 생성) 구현
• CSR과 하이드레이션
  클라이언트 렌더링 방식 및 하이드레이션 이해
• 서버와의 데이터 통신
  SWR, React Query로 서버 데이터 처리 및 상태 동기화

---

8. 상태 관리 심화 및 비동기 데이터 핸들링

주요 개념:

• React Query와 상태 관리 최적화
  비동기 데이터 관리 및 상태 동기화
• Recoil, Zustand와 같은 새로운 상태 관리 도구
  대안적인 상태 관리 도구 사용

---

9. 디자인 시스템과 컴포넌트 라이브러리 설계

주요 개념:

• 디자인 시스템
  일관된 UI를 위한 디자인 시스템 설계, Storybook을 통한 문서화
• 컴포넌트 라이브러리 구축
  재사용 가능한 컴포넌트 개발 및 배포

---

10. 보안 및 접근성(A11Y)

주요 개념:

• 보안 기본 지식
  XSS, CSRF 방어법과 CSP 설정
• 웹 접근성(A11Y)
  접근성 표준(ARIA), 키보드 네비게이션 설계

---

11. CI/CD와 DevOps 실습

주요 개념:

• CI/CD 파이프라인 구축
  GitHub Actions, GitLab CI 등 배포 자동화 도구 사용
• 모니터링과 로깅
  Sentry, LogRocket을 통한 프론트엔드 모니터링

---