[React] Day_59 데일리 정리

넥스트는 오류덩어리야.

 

챌린지 방탈출, 당당하게 실패!

문제해결 과정에서 .next 문제로 404발생!

4주차 과제.. 하고 잘 수 있을까? 어헝헝

일단 강의 정리 후다닥 할게욧

 

 

 

Next.js 강의 정리 - 렌더링 패턴과 Next.js 기능 활용

라우팅의 종류는 생각보다 많다! ㅇ0ㅇ

 

으아악 ㅅ...싫어요ㅠㅡㅠ

 

 

서버 컴포넌트/ 클라이언트 컴포넌트

app 폴더 하위의 모든 컴포넌트 = 서버 컴포넌트가 디폴트!

 

 

서버 컴포넌트

- 서버에서 실행되는 컴포넌트

서버에서 실행된다? → 해당 컴포넌트의 로직이 서버(Node.js 환경)에 처리

 

[실행 환경 테스트]

 

1. console.log 확인

// src/app/page.tsx
// 결과: 터미널에 console.log 출력.
export default function Home() {
  console.log("여기는 어디일까요?");
  return <div>안녕하세요! Next.js 입니다!</div>;
}

 

2. 런타임 환경 이해하기

- alert("hello") 추가

// 결과: 오류 발생. 브라우저 전용 API = 서버 컴포넌트에서 사용 X
export default function Home() {
  alert("hello");
  return <div>안녕하세요! Next.js 입니다!</div>;
}

 

- os.hostname 추가

// 결과: 서버 컴포넌트에서 사용 ok
const os = require("os");
console.log("Hostname:", os.hostname());

 

 

클라이언트 컴포넌트

- 브라우저에서 실행되는 컴포넌트

• 유저와 상호작용이 필요하거나 브라우저에서 동작하는 로직 포함
• 클라이언트 컴포넌트로 변경: 컴포넌트 최상단에 "use client"; 추가

 

[실행 환경 테스트]

 

1. console.log 확인

// 결과: 브라우저 콘솔에 출력
"use client";
export default function Home() {
  console.log("여기는 어디일까요?");
  return <div>안녕하세요! Next.js 입니다!</div>;
}

 

2. alert & 상태 관리

- alert test

"use client";
export default function Home() {
  alert("클라이언트 컴포넌트 테스트");
  return <div>안녕하세요! Next.js 입니다.</div>;
}

 

- useState, useEffect 사용

"use client";
import { useState, useEffect } from "react";

export default function Home() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("렌더링이 완료되었습니다.");
  }, []);

  return (
    <div>
      <p>클릭 수: {count}</p>
      <button onClick={() => setCount(count + 1)}>클릭</button>
    </div>
  );
}

 

 

컴포넌트 분리하기

- 서버 컴포넌트와 클라이언트 컴포넌트를 구분 → 최적화 가능!

 

1. 문제 상황

// 결과: onClick 이벤트로 인해 전체 컴포넌트가 클라이언트 컴포넌트로 전환
export default function Home() {
  return (
    <div>
      <h1>제목</h1>
      <button
        onClick={() => {
          alert("안녕하세요!");
        }}
      >
        클릭
      </button>
    </div>
  );
}

 

2. 해결 방법

- 컴포넌트 분리

// src/app/page.tsx
import Button from "@/components/Button";

export default function Home() {
  return (
    <div>
      <h1>제목</h1>
      <Button />
    </div>
  );
}

// src/components/Button.tsx
"use client";

export default function Button() {
  return <button onClick={() => alert("안녕하세요!")}>클릭</button>;
}

 

 

언제 사용해야 할까

• 서버 컴포넌트 : 데이터를 렌더링 or SEO를 고려한 정적 페이지에 적합.
• 클라이언트 컴포넌트 : 유저 상호작용 or 상태 관리가 필요한 경우.

 

주요 렌더링 기법

 

1. SSG (Static Site Generation)

• 특징 : 빌드 시 데이터를 미리 가져와 정적 HTML 생성(렌더링 한번으로 충부내)

// 결과: 정적으로 생성된 페이지, 항상 동일한 데이터 반환
const HomePage = async () => {
  const res = await fetch("http://localhost:4000/products", { cache: "force-cache" });
  const products = await res.json();
  return <ProductList products={products} />;
};

 

2. ISR (Incremental Static Regeneration)

• 특징 : 정적 페이지를 일정 시간마다 재생성 (특수한 조건이 있다? 조건에 맞춰 렌더링하긔)

// 결과: 주어진 시간 'n초' 마다 데이터 갱신.
export const revalidate = n;
const HomePage = async () => {
  const res = await fetch("http://localhost:4000/products");
  const products = await res.json();
  return <ProductList products={products} />;
};

 

3. SSR (Server Side Rendering)

• 특징 : 매 요청마다 서버에서 데이터를 가져와 HTML 생성

// 결과: 항상 최신 데이터 반환
const ProductsPage = async () => {
  const res = await fetch("http://localhost:4000/products", { cache: "no-store" });
  const products = await res.json();
  return <ProductList products={products} />;
};

 

4. CSR (Client Side Rendering)

• 특징 : 클라이언트에서 데이터 가져와 렌더링

// 결과: 클라이언트가 데이터 요청 및 렌더링 담당. SSR과 반대
"use client";
const HomePage = () => {
  const [products, setProducts] = useState([]);
  useEffect(() => {
    fetch("http://localhost:4000/products")
      .then((res) => res.json())
      .then((data) => setProducts(data));
  }, []);
  return <ProductList products={products} />;
};

 

 

로딩 UI / Suspense / Streaming SSR

 

- Loading 컴포넌트

// 비동기 요청 중 로딩 상태 표시
export default function Loading() {
  return <div>Loading...</div>;
}

 

- Suspense 사용 

import { Suspense } from "react";
<Suspense fallback={<Loading />}>
  <ProductList />
</Suspense>

 

- Streaming SSR

// 서버에서 준비된 데이터를 부분적으로 스트리밍하여 빠른 렌더링
// 효과 : 빠른 TTFB(Time To First Byte)와 better UX 제공
<Suspense fallback={<Loading />}>
  <ComponentA />
</Suspense>
<Suspense fallback={<Loading />}>
  <ComponentB />
</Suspense>

 

 

 

 

마무리 - 내일...내내일부터는 개인과제 꼭 한다.

 

으아아아아아아!!!!!! 4주차 과제 아오!!!!!

 

 

챌린지 방탈출로 인해

4주차 과제 못했당 ^-^);;

오늘 끝내고.. 자야겠지?

개인과제는.. 내일부터 해야겠당

잘자용 ^-^)b

 

 

오늘의 KPT 회고

 

Keep: 챌린지 그래도 4단계까지 완!

Problem: Next.js가 자꾸 오류줌 ㅇㅍㅇ

Try: 내일은 무적권 개인과제 시작한다.