Module 2
Server Components 심화
서버 컴포넌트의 동작 원리와 클라이언트 컴포넌트와의 차이를 이해해요.
서버/클라이언트 컴포넌트 이해하기
서버/클라이언트 컴포넌트
서버 컴포넌트의 동작 원리와 클라이언트 컴포넌트와의 차이를 이해해요.
핵심 포인트
- 기본적으로 모든 컴포넌트는 서버 컴포넌트예요
- "use client" 지시어를 추가하면 클라이언트 컴포넌트가 돼요
- 서버 컴포넌트는 DB 직접 접근, 비동기 데이터 가져오기가 가능해요
- 클라이언트 컴포넌트는 useState, onClick 등 상호작용이 필요할 때 써요
선수 개념
이 내용을 배우기 전에 app-router-basics 개념을 먼저 이해하면 좋아요.
💡 관련 키워드: server-component, client-component, use-client, rendering, hydration
서버/클라이언트 컴포넌트 코드로 보기
Next.js에서 서버/클라이언트 컴포넌트이(가) 실제로 어떻게 사용되는지 아래 코드를 읽어보세요.
// 서버/클라이언트 컴포넌트 예시 (Next.js)
// 기본적으로 모든 컴포넌트는 서버 컴포넌트예요
// 💡 실제 프로젝트에서 이 패턴을 찾아보세요!Quiz
퀴즈: 서버 vs 클라이언트 컴포넌트 선택 기준
서버 vs 클라이언트 컴포넌트 선택 기준
다음 중 올바른 설명은 무엇일까요?
A기본적으로 모든 컴포넌트는 서버 컴포넌트예요
B위 설명과 반대되는 내용이에요
C이것은 서버/클라이언트 컴포넌트와(과) 관련 없는 설명이에요
Log in to take the quiz and check your score
Quiz
퀴즈: "use client" 사용 시점
"use client" 사용 시점
다음 중 맞는 것을 고르세요.
A이것은 서버/클라이언트 컴포넌트와(과) 관련 없어요
B"use client" 지시어를 추가하면 클라이언트 컴포넌트가 돼요
C이건 다른 개념에 대한 설명이에요
Log in to take the quiz and check your score
Challenge
도전! Server Components 심화 실습하기
실습 과제
이번 모듈에서 배운 내용을 직접 코드로 작성해보세요.
- 새 파일을 만들어서 배운 개념을 적용해보세요
- 기존 프로젝트에서 비슷한 패턴을 찾아 수정해보세요
- 콘솔에서 결과를 확인하세요
💪 직접 코드를 작성하는 것이 가장 효과적인 학습 방법이에요!
Log in to write code and check the answer
내 프로젝트에서 찾아보기 🔍
프로젝트 탐색
Server Components 심화 개념이 여러분의 프로젝트에서 어떻게 사용되는지 찾아보세요.
- 프로젝트 파일에서 관련 코드를 검색해보세요
- AI가 생성한 코드 중 이 패턴이 적용된 부분을 찾아보세요
- "왜 이렇게 작성했을까?" 생각하며 읽어보세요
🎯 내 코드에서 배운 개념을 발견하면 진짜 이해한 거예요!
That's the end of the preview!
Start the remaining modules with AI tutor, quizzes, and code challenges for free.
Get Started Free