day2 - Next.js 렌더링방식 및 JS 문법

학습목표
1. Next의 렌더링방식 (SSR, SSG, ISR, CSR) 완벽 이해 및 프로젝트 적용방식을 확인할 수 있다.
2. JS 문법 (map(), filter(), reduce(), async/await, optional, chainging)을 활용할 수 있다.
3. 프로젝트에서 렌더링 방식이 어떻게 사용되는 지 확인하고 분석할 수 있다.

 

 

---

렌더링 방식

 

1. CSR

클라이언트에서 실행한다.

(1)초기

브라우저가 서버에 요청을 보내면 빈 HTML과 JS번들파일을 받는다.

이때 서버는 거의 아무런 데이터를 포함하지 않는다. HTML을 제공하고 JS파일을 다운로드하여 생성한다.

(2)JS 실행 후 요청

JS가 실행되면서 클라이언트에서 데이터를 가져오기 위해 API요청을 보낸다. 즉, 페이지를 보여주기 위해 서버에서 데이터를 다시 요청하는 과정이 발생된다.

(3)데이터를 받아서 화면에 렌더링

서버에서 받은 데이터를 바탕으로 화면을 구성한다.

예를들면, 채팅이나 대화형 애플리케이션

 

Q. 로그인 페이지에서 CSR로 구현했는데 가능했던 이유

A. 클라이언트에서 fetch('/api/sign-in')요청을 보내고 서버에서 검증 후 응답을 받는 방식이다.

useEffect, onSubmit같은 이벤트를 사용해서 아이디,비번입력-> API요청 보내기-> 응답받아서 상태업데이트 흐름이다.

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

const LoginPage = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const handleLogin = async (e) => {
    e.preventDefault();
    const res = await fetch("/api/login", {
      method: "POST",
      body: JSON.stringify({ email, password }),
      headers: { "Content-Type": "application/json" },
    });
    const data = await res.json();
    console.log("로그인 결과:", data);
  };

  return (
    <form onSubmit={handleLogin}>
      <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
      <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
      <button type="submit">로그인</button>
    </form>
  );
};

export default LoginPage;

로그인 인증은 보안이 중요한 기능이라서 서버에서 직접 처리하는 것이 더 안전하다.

CSR방식으로 하면 브라우저에서 직접 로그인 요청을 보낼 때 네트워크에서 비밀번호가 노출될 위험이 크다.

서버액션이나 API Route를 사용하면 서버에서 직접 로그인 검증을 처리하므로 보안이 더 강화된다. 따라서 로그인같은 중요한 인증기능은 SSR이나 Server Action을 사용하는 게 일반적이다.

 

Q. 어차피 서버요청이 들어갈 거면 SSR로 쓰는 게 낫지않을까?

A. CSR을 쓰는 이유

1. 빠른 페이지전환이 가능하다 (SPA, Single Page Applicaion)

 csr은 한 번 페이지가 로드되면 추가적인 페이지 이동이 빠르다.

react, next같은 프레임워크는 페이지 전환 시 새로고침 없이 js로 화면을 변경할 수 있다.

2. 서버 부하 감소

ssr은 페이지가 요청될 때마다 서버가 HTML을 다시 생성해야 한다.

트래픽이 많아지면 서버 부담이 커질 수 있다.

CSR은 초기 로딩 이후에는 클라이언트에서 데이터를 처리하므로 서버 부담이 줄어든다.

3. 인터렉티브한 UI구현 용이

CSR에서는 useState, useEffect같은 클라이언트 측 기능을 자유롭게 사용이 가능하다.

반면 ssr에서는 이러한 기능을 사용할 수 없기 때문에 동적인 UI를 만들기 어렵다.

 

 

 

2. SSR

서버에서 요청 시 HTML생성하여 제공

예를들면, 로그인한 사용자의 대시보드, 변동되는 데이터 표시

3. SSG

빌드 시 HTML생성, 변동이 적은 페이지에 적절

예를들면, 블로그, 문서

4. ISR

SSG단점 보완, 정적페이지 생성, 일정시간마다 갱신

예를들면, 뉴스

 

 

공식문서를 통해 개념 정리하기

https://nextjs.org/docs/app/building-your-application/rendering

Building Your Application: Rendering | Next.js

 

각 렌더링 방식이 언제 사용되는지 예제코드와 함께 분석하기

getServerSideProps, getStaticProps, useEffect, fetch() 비교하여 역할 파악하기

---

 

JavaScript 필수 문법 복습

 

 

 

1.JS 고차 함수 (map, filter, reduce)

(1) map() - 배열을 변형하는 메서드

const num = [1, 2, 3, 4];
const squared = numbers.map(num => num * num);
console.log(squared); // [1, 4, 9, 16]

(2) filter() - 특정 조건을 만족하는 요소만 필터링

const words = ['apple', 'banana', 'cherry'];
const longWords = words.filter(word => word.length > 5);
console.log(longWords); // ['banana', 'cherry']

(3) reduce() - 배열 요소를 하나의 값으로 축약

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum); // 10

2.비동기 처리 (async/await, fetch, Promise)

async function fetchData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}
fetchData();

3.옵셔널 체이닝 (?.)

객체의 특정 프로퍼티가 존재하는지 확인하면서 안전하게 접근할 수 있는 문법이다.

즉 객체의 특정 속성이 없을 경우 undefined를 반환하고 오류를 발생시키지 않도록 하는 방법이다.

const user = {}; // profile 속성이 없음
console.log(user.profile.name); //  TypeError: Cannot read properties of undefined

user객체는 profile속성이 없기 때문에 .name을 호출하면 오류가 발생된다.

const user = {}; // profile 속성이 없음
console.log(user.profile?.name); //  undefined (에러 발생 안 함)

옵셔널 체이닝을 사용하면 user.profile이 존재하는 경우에만 .name을 호출한다.

user.profile이 undefined라면, .name을 호출하지 않고 undefined를 반환하기 때문에 에러가 발생되지 않는다.