Day 59 - Spring-Next · haxxru.log

이 글은 2026년 05월 28일 작성된 글입니다.

📌 오늘 배운 내용

오늘은 Next.js 기반 프론트엔드 프로젝트를 세팅하고, Spring Boot REST API 서버와 연동하여 게시글 목록/상세/작성 기능을 구현했다.
또한 서버 컴포넌트와 클라이언트 컴포넌트의 차이, fetch 기반 데이터 요청, 환경변수 관리, 동적 라우팅 등을 학습했다.

1. Next.js 프로젝트 생성 및 실행

프로젝트 생성

npx create-next-app@latest

실행

npm run dev

2. Prettier 설정

{
    "tabWidth": 4,
    "trailingComma": "all",
    "semi": false,
    "singleQuote": true
}

3. 서버 컴포넌트와 클라이언트 컴포넌트

'use client'

구분	서버 컴포넌트	클라이언트 컴포넌트
상태관리	불가능	가능
이벤트	불가능	가능
렌더링	서버	브라우저

4. 글 목록 API 연동

useEffect(() => {
    fetch('http://localhost:8080/api/v1/posts')
        .then((res) => res.json())
        .then((data) => setPosts(data))
}, [])

5. 동적 라우팅

src/app/posts/[id]/page.tsx

6. Guard Clause 패턴

if (post == null) {
    return <div>로딩중...</div>
}
 
return <div>{post.title}</div>

7. 환경변수 사용

NEXT_PUBLIC_API_BASE_URL=http://localhost:8080

8. 실제 글 작성 API 요청

fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/v1/posts`, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        title: titleInput.value,
        content: contentInput.value,
    }),
})

✅ 정리

Next.js App Router 기반 프로젝트 구조를 학습했다.
서버 컴포넌트와 클라이언트 컴포넌트의 차이를 이해했다.
REST API 데이터를 fetch로 받아 렌더링했다.
동적 라우팅과 환경변수를 적용했다.
POST 요청으로 실제 글 작성 기능을 구현했다.