[유데미 러닝크루] Next.js 스터디 1주차 – 스터디를 시작한 이유와 React 기본 개념 정리

목차

• 1. 스터디를 시작한 이유
• 2. 강의 전 사전 학습 자료
• 3. Udemy 강의 소개
• 4. 1주차 진행 범위
• 5. 1주차 학습 내용 정리
• 6. 추가 정리 – 함수/컴포넌트 네이밍 규칙

1. 스터디를 시작한 이유

프론트엔드 개발자로 취업을 준비하면서 실무 경험 위주의 개발을 해왔다. 주어진 요구사항을 빠르게 구현하는 것에는 익숙하지만, 이론적으로 부족한 부분이 많다고 느꼈다. 예를 들어, 상태 관리, 성능 최적화, 서버 사이드 렌더링(SSR) 등의 개념을 깊이 이해하지 않고 단순히 구현했던 경우가 많았다. 그러던 중, 친구가 Udemy 러닝크루에 참여하면서 Next.js 강의를 함께 공부하자는 제안을 했다. 마침 Udemy에서 할인 쿠폰을 제공해주어 좋은 기회라고 생각했고, 이론적으로 부족했던 부분을 채우기 위해 스터디에 합류하게 되었다.

✅ 스터디 방식

📌 진행 방식

• 학습플랜노트 따라 진행하되, 블로그에 마음에 드는 주제 글 올리기
• 다른 사람 글 읽고 지정해주는 2명 글에 댓글 달기 + 중요한 내용 구두 공유
• 매주 수요일 오후 11시 비대면 스터디
• 강의 완주 후 남은 34일 동안 간단한 Next 프로젝트 (팀/개인 자유)

📌 스터디 규칙

• 지각 X → 1분당 100원
• 스터디 하루 전까지 블로그 글 업로드
• 스터디 전에 읽고 댓글 달기
• 참석/업로드 어려우면 하루 전에 미리 공유

2. 강의를 보기 전, 사전 학습 자료

📌 Udemy 강의 전에 JavaScript & React 개념 복습 (추천!)

✅ ZOVG7_41kJE – JavaScript 기초 및 핵심 개념 ✅ 별코딩(StarCoding) YouTube 채널 – JavaScript 심화 & React 핵심 개념

위 자료 덕분에 React 파트는 2배속으로 빠르게 복습이 가능했다.

3. Udemy 강의 소개

수강 강의: 【한글자막】 Next.js 15 & React - 완벽 가이드 Next.js 15 기초부터 앱 라우터/페이지 라우터로 풀스택 앱 구축까지 다룬다.

💡 강의 정보

• 강의명: 【한글자막】 Next.js 15 & React - 완벽 가이드
• 강의 시간: 40시간
• 수강생: 5,021명
• 평가: ⭐ 4.7/5 (585명)
• 언어: 한국어 자막 제공

📌 강의 주요 내용

✅ 앱/페이지 라우터  ✅ 서버/클라이언트 컴포넌트  ✅ 서버 액션 ✅ SSR·사전 렌더링  ✅ 파일 기반 라우팅  ✅ 인증 흐름

4. 1주차 진행 범위

📝 세션 1 ~ 세션 2의 75번 강의까지 진행

중요

• 세션 2, 50번 강의 이후는 레거시 콘텐츠로 제공
• 해당 이후 내용은 건너뛰고 다음 섹션으로 이동

5. 1주차 학습 내용 정리

📌 Next.js 기초 개념

1️⃣ Next.js란?

• React 기반 풀스택 프레임워크
• SSR(서버 렌더링) & SSG(정적 생성) 지원
• SEO·성능·개발자 경험 강화

2️⃣ Next.js 주요 기능

• 파일 기반 라우팅
• SSR & SSG 선택형 데이터 로딩
• 서버 액션으로 API 없이 서버 작업
• 자동 코드 스플리팅
• <Image /> 최적화

3️⃣ Next.js vs React

4️⃣ Pages Router vs App Router

• Pages Router: pages/ 기반의 전통 라우팅
• App Router: app/ 기반의 최신 라우팅(서버 액션/서버 컴포넌트)

📌 React 복습 정리

실무에서 자주 쓰는 핵심만 정리.

1️⃣ React 기본

• 컴포넌트 기반 UI
• Virtual DOM으로 변경 부분만 갱신
• Hooks(useState/useEffect)로 상태/사이드 이펙트 관리

2️⃣ 컴포넌트와 Props

✅ 컴포넌트

• 독립적 블록, 재사용 가능

function Greeting({ name }) {
  return <h1>안녕하세요, {name}님!</h1>;
}
<Greeting name="홍길동" />  // "안녕하세요, 홍길동님!"

✔ Props

• 부모 → 자식 데이터 전달
• 읽기 전용 (자식에서 직접 변경 X)

3️⃣ useState()

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>클릭: {count}</button>;
}

1. 초기값 설정: useState(0)
2. 업데이트: setCount(count + 1)
3. 상태 변경 시 UI 자동 갱신

4️⃣ useEffect()

• 렌더링 시 특정 작업 실행(데이터 패칭, 이벤트 등록 등)

import { useState, useEffect } from "react";

function FetchData() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("https://api.example.com/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data));
  }, []); // 최초 1회

  return (
    <ul>
      {posts.map((p) => (<li key={p.id}>{p.title}</li>))}
    </ul>
  );
}

5️⃣ React Router

✅ 설치

npm install react-router-dom

✅ 기본 라우팅

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

function Home(){ return <h1>홈</h1> }
function About(){ return <h1>소개</h1> }

function App(){
  return (
    <Router>
      <nav>
        <Link to="/">홈</Link>
        <Link to="/about">소개</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

6️⃣ useLoaderData()

✅ 라우트 진입 시 데이터 선로딩

export async function loader() {
  const res = await fetch("https://api.example.com/posts");
  return res.json();
}

import { useLoaderData } from "react-router-dom";

function Posts() {
  const posts = useLoaderData();
  return (
    <ul>{posts.map((p) => (<li key={p.id}>{p.title}</li>))}</ul>
  );
}

7️⃣ useParams()

import { useParams } from "react-router-dom";
function PostDetail(){
  const { id } = useParams();
  return <h1>포스트 상세: {id}</h1>;
}

8️⃣ Form + action()

import { Form } from "react-router-dom";
function NewPost(){
  return (
    <Form method="post">
      <input name="title" placeholder="제목" required />
      <button type="submit">추가</button>
    </Form>
  );
}

export async function action({ request }){
  const formData = await request.formData();
  const newPost = { title: formData.get("title") };

  await fetch("https://api.example.com/posts", {
    method:"POST",
    body: JSON.stringify(newPost),
    headers:{ "Content-Type":"application/json" }
  });
  return null;
}

🔥 최종 정리

6. 추가 정리 – 함수 및 컴포넌트 네이밍 규칙

💡 파일명과 컴포넌트/함수명을 일치시키고, 일관된 컨벤션을 따른다.

✅ 컴포넌트 네이밍 (파일명=함수명)

• PascalCase 사용: 파일/컴포넌트 모두 대문자로 시작
• 예: PostsList.jsx → function PostsList(){}

✅ 이벤트 핸들러 네이밍

• on + 동작명 + Handler: 예) changeBodyHandler()

✅ 상태 변수/세터 네이밍

• 상태: entered + 데이터명 (예: enteredBody)
• 세터: set + 상태명 (예: setEnteredBody)