React란 무엇인가?
사용자 인터페이스(UI)를 만들기 위한 JavaScript 언어
핵심 개념
- 컴포넌트(Component) : 화면을 작은 조각으로 나눈 단위( ex: 버튼, 카드, 리스트, 페이지 등)
- State / Props
- State: 컴포넌트 내부 상태(변경 가능)
- Props: 부모 > 자식으로 전달되는 데이터(읽기 전용)
- Virtual DOM
- 실제 DOM을 직접 조작하지 않고 변경된 부분만 계산해 효율적으로 업데이트
React의 역할 요약
" 화면을 그리는 책임만 가진다."
데이터 저장 ❌
API 통신 로직 ❌ (가능은 하지만 주 역할 아님)
SEO ❌
서버 ❌
Next.js란 무엇인가?
React 기반 풀스택 프레임워크
Next.js가 React 위에서 해결해주는 것
| 문제 | React 단독 | Next.js |
| ------- | -------- | --------- |
| 라우팅 | 직접 구현 | 파일 기반 라우팅 |
| SEO | 취약 | 매우 강함 |
| 서버 렌더링 | 어려움 | 기본 지원 |
| 백엔드 API | 별도 서버 | 내장 가능 |
- 렌더링 방식
- SSR: 요청 시 서버에서 HTML 생성
- SSG: 빌드 시 HTML 생성
- ISR: 정적 + 재생성
- CSR: 기존 React 방식
Next.js의 역할 요약
"React 앱을 '서비스 가능한 웹앱'으로 만둘어준다."
Apollo Server란 무엇인가?
GraphQL 기반 백엔드 서버
- Rest 대신 사용하는 쿼리 언어
- 클라이언트가 필요한 데이터만 정확히 요청
Apollo Server의 역할
"프론트엔드가 원하는 형태로 데이터를 제공하는 중간 계층" > 인증, 권한, 비즈니스 로직, 데이터 조합
- GraphQL 스키마 정의
- 요청을 처리하는 Resolver 구현
- DB / 외부 API와 연결
| 계층 | 역할 |
|---|---|
| React | UI 컴포넌트 |
| Next.js | 웹앱 프레임워크 + SSR |
| Apollo Server | 데이터 API / 비즈니스 로직 |
| MongoDB | 데이터 저장 |
- React: 화면 그리는 도구
- Next.js: React를 서비스로 만들어주는 프레임워크
- Apollo Server: 프론트가 원하는 데이터 API
- MongoDB: 데이터를 담는 저장소
