onion_0.log

Next.js로 API 연결하기 (App Route 기준)

Mon, 20 Oct 2025 08:37:51 GMT

Next.js로 API 연결하는 방법

Next.js에서 개발하면서 API 연결을 처음으로 시도해보고 있다. 우선 APP Route를 기준으로 API 연결 방법을 시도해보려고 한다.

보통 API를 불러올 때 기본적으로 Next.js에서는 fetch()를 사용하기에 이 기능을 활용하여 시도해 볼 예정이다.

추가로 axios도 많이 사용된다고 하나, 우선 기본 기능부터 숙달한 후 사용해보고자 한다.

API 연결하기

1. 백엔드에서 제작한 API 준비하기

2. Next.js 앱 생성

3. Next.js 앱 내부에 API를 불러오기 위한 파일/폴더 생성

0) 전체 작동 흐름

사용자가 필터링 조건 또는 검색어 입력
클라이언트가 서버(API)로 해당 필터링 조건 전달
서버(API)는 전달 받은 필터링 조건으로 DB에서 데이터 조회 후 조건에 맞는 데이터 제공
클라이언트는 서버가 전달한 조건에 맞는 데이터를 받아서 화면에 출력
(새로고침 하면) 입력한 파라미터는 사라지도록 = 새로고침 하면 검색값 초기화

1) 환경변수 파일 생성

.env.local 파일 생성

해당 파일은 최상위 경로에 생성
API_BASE_URL : 백엔드 서버 주소 (브라우저에 노출되지 않을 주소)
NEXT_PUBLIC_API_BASE_URL : API 엔드포인트 시작 경로 (클라이언트에 노출될 경로)
별도 설정을 할 필요 없이 npm run dev 하면 내부적으로 process.env에 .env 파일에 정의된 값이 들어가서 자동으로 인식됨

단, 변수명 이름 주의 (아래의 표 참고)

실행 위치	접근 가능한 변수	이유
서버(Node.js)	모든 `process.env.*` 변수	브라우저에 안 노출되기 때문
클라이언트(React 브라우저 코드)	`NEXT_PUBLIC_`으로 시작하는 변수만	Next.js가 빌드 시 안전하게 삽입해줌

만약 src/app/api를 통해 프록시를 사용하지 않고 lib/api로 바로 API를 불러온다면 NEXT_PUBLIC_API_BASE_URL에서 모두 정의해야 함

2) (프록시를 사용한다면) 게이트웨이 폴더/파일 생성

src/app/api 폴더 생성

비밀/보안: 서버 전용 env(API_BASE_URL, 토큰 등)를 사용해 백엔드 호출 / 토큰은 여기서만 붙임
CORS 우회: 브라우저는 같은 오리진(/api/...)으로 호출 → CORS 문제 없음
요청 검증/정규화: 쿼리·바디를 검사(필수값, 타입)하고 백엔드 요구 포맷으로 변환
캐싱/리밋/로그/트레이싱: 공통으로 처리(Next revalidate, rate limit, 에러 로깅)
에러 매핑: 백엔드 에러를 프론트가 쓰기 쉬운 JSON 형태로 통일
응답 매핑: 백엔드 응답 스키마를 프론트 표준 스키마로 변환(키 이름, 필드 누락 보정 등)
인증 연동: 쿠키/세션에서 유저 인증을 읽어 백엔드로 전달(헤더/쿠키)

3) API 호출을 위한 폴더/파일 생성

src/lib/api 폴더 생성

API에 파라미터를 전달하고 데이터를 받을 수 있는 함수를 정의
이때 API에 전달하는 정보와 받아오는 정보 모두에 대한 타입 및 인터페이스 정의
- 인터페이스 이름은 상관이 없지만 필드 이름과 타입은 백엔드 API에서 정의된 것과 동일해야 함
- 만약 입력 받아야 하는 값이 아닌, 드롭다운과 같이 정해진 값 내에서 선택해야 하는 것들이면 해당 값들을 모은 type을 정의하는 것이 좋음
API 호출 함수 정의
- 전달 받는 파라미터를 통해 어떤 데이터를 받아와서 전달할지 정의
- 전달 받게 되는 파라미터 정의 (이때, 기본값이 정해져 있는 파라미터면 명시)
- URLSearchParams()를 통해 전달된 파라미터 값을 각각 할당
- 정의된 파라미터 값과 .env.local 파일에서 정의한 BASE_URL을 통해 fetch()로 API 요청
- 오류 감지 코드 포함
  - fetch()는 네트워크 오류(DNS 실패, 타임아웃 등)에서만 throw 하고 HTTP 4xx/5xx는 throw하지 않고 정상적으로 Response를 전달
  - res.ok는 상태코드가 200–299이면 true, 그 외(400, 404, 500 등)는 false로 인식
- 전달 받은 응답을 json 형식으로 변환하여 최종 반환

이때 API 호출을 위한 코드를 JS가 아닌 TS로 짜는 이유

JS는 응답 데이터 구조, 파라미터 타입, 오타를 컴파일러가 잡아주지 못하기 때문에 나중에 데이터 형태가 바뀌면 런타임 에러로만 확인 가능
fetch() 자체는 JS의 내장 기능이니까 호출 방식은 동일하지만 TypeScript에서는 “타입만 추가”해서 더 안전하게 동작하도록 함

4) 파라미터 전달 & 전달 받은 데이터 출력

page.tsx 수정

사용할 API 코드 import 하기
필요한 요소들을 useState()로 정의 (새로고침 시 사라지고 싶다면 초기화 값은 빈값으로 설정)
- 서버에서 받아온 데이터
- 이어서 조회할 값 (커서 또는 페이지네이션 값)
- 에러 메시지 문자열 (추후 삭제 필요)
- API 호출 중인지 아닌지 (로딩 출력 시 사용)
API 호출 함수 정의
화면 접속 시 최초 1회 실행되도록 정의한 API 호출 함수 실행 (useEffect() 사용)
불러온 데이터를 map()을 통해 출력

카카오 코테 준비 (Python)

Wed, 01 Oct 2025 17:39:39 GMT

카카오 코테 준비...

카카오 지원서를 제출했고 프로그래머스에서 코테를 본다고 연락을 받았다... 그나마 가장 자신 있는 언어인 Python으로 준비를 해보려고 한다

한동안 Python은 쳐다보지도 않았기 때문에 일단 기초부터 양치기로 풀어가면서 뇌를 좀 풀어보려고 한다

풀면서도 이걸 틀리네 싶어서 쪽팔리긴 하네...

프로그래머스 코테

문제 풀이

너무 쉽거나 내가 절대 생각해낼 수 없는 풀이들은 제외하고 오답해두려는 문제들만 정리하려고 한다

코딩테스트 입문

https://school.programmers.co.kr/learn/challenges/beginner?order=acceptance_desc

1. 분수의 덧셈

첫 번째 분수의 분자와 분모를 뜻하는 numer1, denom1, 두 번째 분수의 분자와 분모를 뜻하는 numer2, denom2가 매개변수로 주어집니다. 두 분수를 더한 값을 기약 분수로 나타냈을 때 분자와 분모를 순서대로 담은 배열을 return 하도록 solution 함수를 완성해보세요.

👇❌ 나의 오답

def solution(numer1, denom1, numer2, denom2):

    a = numer1*denom2 + numer2*denom1
    b = denom1*denom2

    c = 1000
    while (c>1):
        if (denom1 % c == 0) & (denom2 % c == 0):
            a = a // c
            b = b // c
        c -= 1

    return [a, b]

import math

👇⭕ 정답

import math

def solution(numer1, denom1, numer2, denom2):
    b = denom1 * denom2
    a = (numer1 * denom2) + (numer2 * denom1)

    gcd=math.gcd(a,b)
    a = a // gcd
    b = b // gcd

    answer = [a, b]
    return answer

2. 배열 두 배 만들기

정수 배열 numbers가 매개변수로 주어집니다. numbers의 각 원소에 두배한 원소를 가진 배열을 return하도록 solution 함수를 완성해주세요

👇⭕ 나의 정답

def solution(numbers):
    for i in range(len(numbers)):
        numbers[i] = numbers[i]*2
    return numbers

👇⭕⭕⭕ 더 좋은 정답

def solution(numbers):
    return [num*2 for num in numbers]

리스트 컴프리헨션: [표현식 for 항목 in 반복가능객체 if 조건문] 형태

3. 중앙값 구하기

중앙값은 어떤 주어진 값들을 크기의 순서대로 정렬했을 때 가장 중앙에 위치하는 값을 의미합니다. 예를 들어 1, 2, 7, 10, 11의 중앙값은 7입니다. 정수 배열 array가 매개변수로 주어질 때, 중앙값을 return 하도록 solution 함수를 완성해보세요.

👇⭕ 나의 정답

def solution(array):
    array.sort()
    return array[(len(array)//2)]

4. 최빈값 구하기

최빈값은 주어진 값 중에서 가장 자주 나오는 값을 의미합니다. 정수 배열 array가 매개변수로 주어질 때, 최빈값을 return 하도록 solution 함수를 완성해보세요. 최빈값이 여러 개면 -1을 return 합니다.

👇⭕ 나의 정답

def solution(array):
    if len(array) == 1:
        return array[0]

    else:
        array.sort()

        count_list = []
        count = 1
        for i in range(len(array)-1):
            if array[i] == array[i+1]:
                count += 1
            else:
                count_list.append(count)
                count = 1
        count_list.append(count)

        array_copy = list(set(array))
        array_copy.sort()

        a = array_copy[0]
        max = count_list[0]
        for i in range(1, len(count_list)):
            if max < count_list[i]:
                max = count_list[i]
                a = array_copy[i]
            elif max == count_list[i]:
                a = -1    

        return a

5. 짝수는 싫어요

정수 n이 매개변수로 주어질 때, n 이하의 홀수가 오름차순으로 담긴 배열을 return하도록 solution 함수를 완성해주세요.

👇⭕ 나의 정답

def solution(n):

    list = []
    for i in range(1, n+1):
        if i % 2 == 1:
            list.append(i)
    list.sort()            
    return list

👇⭕⭕⭕ 더 좋은 정답

def solution(n):
    return [i for i in range(1, n+1, 2)]

카카오 기출

https://school.programmers.co.kr/learn/challenges?order=acceptance_desc&languages=python3&partIds=58464%2C37527%2C31236%2C25448%2C20069%2C17214%2C12286%2C9317%2C22586%2C18498%2C17931%2C300%2C301&page=1

1. 숫자 문자열과 영단어

https://school.programmers.co.kr/learn/courses/30/lessons/81301

👇⭕ 나의 정답

def solution(s):
    num = []
    for i in range(10):
        num.append(str(i))
    print(num)

    eng = ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"]

    for i in range(10):
        if eng[i] in s:
            s = s.replace(eng[i], num[i])

    return int(s)

기억하기

문법

if문 문법

if ~ elif ~ else

if문 활용

if num1 == num2: 
    return 1 
else: 
    return -1

위 아래 코드는 동일

return 1 if num1==num2 else -1

배열

[1, 2, 3] * 2의 결과는 [1, 2, 3, 1, 2, 3]

set형

중복을 제거하는 형은 set()

sort()

return문이나 print문에 sort()를 쓰면 null값이 반환됨

in

"seven" in "seveneight" → 참
"seveneight" in "seven" → 거짓

replace()

"ababab".replace("a", "b") "ababab" 문자열에서 "a"를 "b"로 변경
기본적으로 첫 번째 인자에 해당하는 전체 문자를 변경 (따로 옵션 지정하지 않는다면)
문자열에서 또다른 문자열로만 바꿀 수 있음 "ababab".replace("a", 1) 불가능
변경 후 재할당 필요 s = s.replace("a", "b")

import

import math

math.gcd(a, b) a, b 사이의 최대 공약수 구하기
math.lcm(a, b) a, b 사이의 최소 공배수 구하기

최적화

함수의 변수

재사용 되는 함수가 아니라면 함수 내 변수는 최대한 지양할 것 (사용하지 말 것)

리스트 컴프리헨션

[표현식 for 항목 in 반복가능객체 if 조건문] 형태

정보처리기사 2025년도 2회 실기

Mon, 15 Sep 2025 08:39:10 GMT

필기와 마찬가지로 살짝 늦은 실기 후기이지만... 실기에 합격하고 나서 신나는 기분으로 작성하고 싶었고 실기 시험을 응시하러 가는 분들께 생생한 정보 공유를 해드리고 기록을 위해 작성하게 되었다.

2025년도 2회 실기 시험 결과

최종적으로 1트만에 합격!

정말 많이 힘들었고 고된 기간이었지만 한번에 합격이라는 결과를 만들어낼 수 있어서 뿌듯했다.

실기 시험 점수는 70점이 나왔다!

시험 보고 나온 당일에 올라온 답안들과 비교했을 때 60점대를 예상하고 있었는데 최종적으로 70점을 맞게 되어서 뿌듯 ㅎ0ㅎ

응시 정보

응시 일자: 2025년 8월 19일(토) 시험 응시 응시 당시의 자격 요건: 서울 소재 4년제 대학에서 관련 과 졸업 예정 공부 기간: 약 4개월 (4~~7월) 실제 빡세게 한 기간: 약 2개월 (6~~7월)

졸업 유예의 상태였으나 다행히 졸업 예정이라서 응시가 가능했다.

응시를 위한 준비

*나는 필기를 1회 때 응시했기 때문에 곧바로 공부를 했다면 1회 실기를 볼 수 있었지만... 지금 보면 차라리 실기 2회를 보길 잘했던 것 같다... *

1. 실기 신청 날짜와 실기 시험 날짜 확인하기

내 공부의 첫 시작은 시험 당일날까지 얼마 남았는지를 계산하는 것부터 시작한다.

실기는 응시 날짜가 다양했던 필기와 달리 모든 지역에서 단 하나의 날짜에만 응시한다. 때문에 본인이 원하는 곳에서 응시를 하고자 한다면 날짜 체크를 확실히 해두고 수강신청처럼 대기 타다가 우다다다 신청을 해야한다. (당연하게도 당일에 큐넷에 접속하면 접속 대기가 뜨기 때문에 잘 맞춰 들어갈 것을 추천한다.)

나는 필기 1회차를 보고 나자마자 2회차의 실기 신청 날짜와 시험 응시 날짜를 확인했다.

3월 초에 일정을 확인했고 2회 실기를 보자고 다짐했기 때문에 확인 날 기준으로 시험까지 약 6개월 정도가 남아있었다. 필기 준비하느라 고생한 나를 위해 1개월 정도는 푹 쉬어주고 4월부터 다시 공부를 시작하자고 마음을 먹었다.

⭐ 참고로 실기는 필기 응시 전에 제출 서류를 다 해뒀다면 따로 제출할 서류가 없다! ⭐

2. 공부할 교재 선정하기

당시에 정보 공유의 목적으로 참여하고 있던 정보처리기사 오픈채팅방이 있었는데 마침 내가 교재를 고르고 있던 시기에 해당 채팅방에서 어떤 교재가 좋을지 투표를 하고 있었다. 몇 백명이 참여한 투표 결과의 상위 2개가 흥달쌤, 수제비였다. 그래서 이 두 개의 교재 중에서 어떤 걸 해야할지 고민했는데, 보통 비전공자는 흥달쌤, 전공자는 수제비를 많이 이용하는 듯 했다.

큰 고민 없이 수제비를 바로 선택했고, 마침 수제비 사이트에서 수제비 개념서+수제비 파이널 강의가 묶어서 할인이 되고 있어서 바로 결제를 했다. 물론 강의를 구매한다고 해서 교재를 주진 않았고 교재는 따로 구매를 해야 했다. (그리고 교재가 굉장히... 두꺼웠기 때문에 무조건 분철을 했다... 분철 없이는 못 살아~)

https://www.aladin.co.kr/shop/wproduct.aspx?ItemId=356476589

시험 공부

실기는 필기와 달리 엄청난 암기와 이해를 요구한다. 그렇기 때문에 나는 내가 제일 잘하는 방식으로 암기와 이해를 파고들었다.

1. 강의 수강

4~5월까지 개념 강의 수강

위에 내가 실제 공부 기간은 7~8월이라고 한 이유가, 4월부터 공부를 시작하긴 했으나 4월부터 5월까지는 개념 강의만 주구장창 듣기만 했기 때문이다.

수제비 개념 강의를 수강했는데 매일같이 들은 것도 아니었고 뜨문뜨문 들었기 때문에 거의 3개월 정도는 날렸다고 봐도 무방할 듯 하다. 그럼에도 기본 개념과 어느 정도의 내용이 있는지, 그리고 전공자에게 알맞은 적절한 설명을 통해서 완전 기초 이해 정도는 해두었다.

(수제비 개념 강의를 수강하면서 느꼈지만 사담이 싫다고 하는 사람들이 왜 있는지 이해하게 됐다. 그러나 나는 오히려 그런 것들이 암기 포인트로 적용하기 때문에 오히려 유용했다.)

2. 무지성 암기 시작

6월 초 (2~3주)

개념을 한번 훑었으니 제일 지옥같은 암기의 시작이다...

나는 오히려 어느 정도 이해하고 암기가 된 상태에서 더 자세하고 정확하게 외우는 건 오히려 쉬운데, 새로 암기하는 그 과정이 제일 고통스럽다... ㅜㅜ

우선 2~3주 정도는 개념서를 바탕으로 차근차근 암기와 정리를 병행했다. 정리가 없으면 공부가 어려운 성격 탓에;; 개념서의 목차를 기준으로 굿노트에 수기로 정리를 했으며 이렇게 정리해둔 건 추후에 키워드나 한 단원에 어떤 내용이 있는지 보기 확실히 편해서 잘 써먹었다.

▲ 굿노트로 직접 정리한 내용의 일부이다.

개념서를 바탕으로 암기를 했다면 수제비 개념서 교재에서 각 단원마다 붙어있는 기출을 풀면서 암기를 어느 정도 했는지 파악했다. 이때에는 다 맞추는 걸 목표로 하지 않았고 시험에 대략 이렇게 나오는구나, 내가 이 개념은 아직 확실하지 않구나, 하는 것들을 확인했다.

3. 기출 풀어보기

6월 중순 (1주)

개정 후 해당하는 기출의 범위가 2020년도~(현재)이다. 개념서를 한번 다 훑었으니 기출을 전부 풀어보았고 소요되는 시간, 틀린 문제 유형, 헷갈리는 개념들을 다시 한번 확인했다.

문제가 20문제밖에 되지 않기 때문에 시간이 부족하지는 않았으나, 외웠다고 생각했음에도 생각보다 많은 부분에서 개념이 흔들리고 있었다.

4. 소단원 기준 개념 암기

6월 말 (2주)

이때부터는 시험이 진짜 더이상 미룰 수 없게도 1달 정도 남았던 기간이어서 거의 매일 공부하는 걸 목표로 했다.

우선 수제비 교재 기준, 하루에 아래의 양을 진행했다.

소단원 1단원
소단원에 붙어있는 기출 다시 풀기 + 오답
기출 1개년치 풀기 + 오답

사실 진짜 2주 정도 걸렸는지 정확히 기억은 안 나지만 아마 양이 적은 부분은 두 단원을 합쳐서 하거나 했어서 대략 2주 정도 걸렸을 거다.

이때는 키워드만 외우는 게 아니고 키워드와 그 정의까지 확실하게 외우는 걸 목표로 진짜 빡세게 암기했다. 그렇지 않으면 만약 시험에서 힌트가 나와도 못 알아볼 가능성이 높기 때문에 어쩔 수 없는 선택이었다...

5. 대단원 기준 개념 암기

7월 초 (2주)

이때에는 기출에도 어느 정도 익숙해졌고 개념도 어느 수준 이상으로는 암기가 되었기 때문에 공부량을 확 늘렸다.

수제비 교재 기준, 하루에 아래의 양을 진행했다.

대단원 1단원
대단원 내에 붙어있는 기출 중 틀린 문제만 풀기 + 오답
기출 2개년치 풀기 + 오답
수제비 파이널 모의고사 5개씩 풀기 + 오답

사실 공부량이 정말 많았어서 사람도 거의 안 만나고 일어나면 자기 전까지 공부만 했던 것 같다. (조금만 공부기간이 더 길었다면 정말 히키코모리가 됐을지도 몰라...)

그래도 필요하다고 느꼈기 때문에 하루에 저 양을 진행했는데, 확실히 암기를 꽉 잡고 가니까 어느 정도 스스로도 틀이 잡히기 시작했다. 이때에는 내가 이전에 정리해뒀던 굿노트 키워드 요약본을 같이 보면서 큰 틀까지 같이 잡아나갔다.

대단원 암기와 오답, 그리고 기출 2개년치 풀고 오답을 진행하는 것까지는 큰 무리가 없었다. 문제는 수제비 파이널... 문제가 정말정말 어렵거나 생각지도 못한 부분에서 더 깊은 이해와 암기를 필요로 하는 부분들이 많았다. 그래서 차라리 통과 점수를 맞는 것보다 내가 약했던 개념들을 잡아간다고 생각하고 풀고 오답을 확실히 했다.

이 시기에는 얼렁뚱땅 넘어갔거나 헷갈렸던 개념들을 확실히 암기하기 위해 수제비 강의와 정오표, 수제비 카페, 정보처리기사 오픈채팅방을 열심히 이용했다. 많은 도움과 조언, 그리고 헷갈려하던 개념들에 대해 설명을 자세히 들을 수 있었다..

수제비 카페: https://cafe.naver.com/soojebi

정보처리기사 오픈채팅방: https://open.kakao.com/o/gQkcTpNh

6. 끝없는 복습...

7월 중 (~시험 당일)

이제는 끝없는 복습의 시작이다.

시험 3일 전부터는

기출 오답
잘 안 외워지는 개념 정리 (notion에 전체 개념과 헷갈리는 개념들 따로 정리) 및 무한 암기
수제비 파이널 모의고사 오답
25년도 1회차 실기 기출 풀어보기

이렇게 진행했다.

그리고 정보처리기사 오픈채팅방에서도 주요한 개념들 위주의 퀴즈를 내주셔서 다같이 합심해서 맞추고 외우는 과정을 반복했다. 실제로 2회차 실기 때 여기에서 내주셨던 퀴즈들 중 하나가 나왔다...!

그리고 notion에 정리하던 게 막판에 보기에 엄청 편했다.

역시 정리가 좋아...

시험 전날

마지막 공부

이제 시험 전날에는 이 이상 새로운 걸 할 수 없었기 때문에 복습만 했다.

기출 오답
notion에 정리해둔 내용 암기
개념서 2회독
내일 시험장 가서 마지막까지 봐야 할 개념들 (안 외워지는 거 + 왕 중요한 거) 정리
준비물 정리

준비물

준비물은 본인 수험번호가 적힌 수험표, 신분을 증빙할 수 있는 서류(민증 등), 검은색 볼펜, 샤프, 지우개, 화이트, 계산기, 물, 초콜릿이 있다.

사실 수험표는 꼭 없어도 좋지만 그래도 수험번호가 적혀있는 건 한 부 챙겨가는 걸 추천한다. 물론 없더라도 감독관이 수험번호를 보여주기 때문에 귀찮다면 뭐...
신분 증빙 서류와 검은색 볼펜은 필수이다. 신분 증빙 서류가 어떤 게 가능한지는 수험표에도 명시되어 있기 때문에 사전에 확인하고 챙겨가길 바란다. 귀찮다면 민증이 최고.
검은색 볼펜으로 답을 기입해야만 올바른 방식으로 답을 기입했다고 인식하기 때문에, 만약 잘 풀어서 답도 맞게 도출했는데 샤프로 기입하거나 검은색 볼펜이 아닌 것으로 기입한다면 오답 처리가 된다.
단, 답을 기입하는 게 아니고 임의의 풀이를 한다거나 개인적으로 문제 풀이를 위해 샤프를 사용하는 것은 문제가 되지 않는다. 답만 검은색 볼펜으로 확실히 쓴다면 문제 없다. 만약 샤프와 검은색 볼펜이 헷갈릴 것 같아 문제가 될 것 같다면 제출 직전에 연필로 작성한 건 지워서 제출해도 된다. (그러나 지금까지 풀이과정 안 지우고 내서 문제가 된 적은 없었다고 한다.)
계산기는 큐넷 사이트에서 허용하는 기종이 맞는지 확인하고 가져가길 바란다. 기종이 맞지 않다면 사용이 불가하기 때문이다. 단순 계산기라면 괜찮기 때문에 다이소에서 구매해서 가져가도 문제가 없다. 계산기가 필요없다고 하는 사람들도 있지만 잘 풀어놓고 계산에서 실수하는 것만큼 슬픈 일이 없기에 나는 챙겨갔다.
계산기, 물, 초콜릿은 아예 반입도 안 된다고 하시는 감독관분들도 계시지만 우선은 챙겨가는 게 좋다. 시험장에서 꺼내놓았는데 큰 제재가 없다면 섭취가 가능하니 챙겨가자.
물, 초콜릿은 까먹기 편한 것으로 가져가자. 문제를 풀다보면 무조건 당이 딸린다. 나는 페레로로쉐를 구매해서 까면 바로 입에 넣을 수 있게 준비해뒀다.

시험 당일

잠은 2시간 정도 잔 듯 하고 자기 직전까지 개념만 주구장창 확인했다. 일어나서 어제 챙겨둔 짐을 들고 바로 수험장으로 출발했다.

2시간 정도 일찍 출발해서 시험 1시간 40분 전에, 그러니까 8시까지 수험장에 도착했다. 도착해서 자리 배치 확인하고 자리 앉아서 세팅부터 했다. 물, 계산기, 신분증, 필기도구, 책, 아이패드를 꺼내고 그때부터 엄청 집중해서 마지막 암기를 시작했다. 확실히 애가 타고 긴장되니까 암기가 잘 되는지 끝까지 암기가 안 됐던 개념들이 갑자기 암기가 되기 시작했다. ㅋㅋㅋㅋㅋ

떨리는 시험...

시험 안내 방송이 시작됐을 때부터 이번에는 얼마나 어려울까에 대한 걱정이 엄청 컸다. 그래서 시험지를 배부받고 오탈자나 시험지 문제가 없는지 확인할 때 슬쩍 확인한 문제가 1회차에 비해 중구난방은 아닌 듯 해서 걱정을 살짝 덜었다.

나는 공부는 스스로에게도 이 이상은 할 수 없었을 거다 했을 정도로 열심히 임했다고 자신있게 말할 수 있다. 그렇기 때문에 스스로를 믿고 시험 문제를 차근차근 풀어나갔다. 헷갈리는 건 과감하게 재껴두고 할 수 있는 것들을 확실하게 풀어나갔다.

20문제이기 때문에 전체 다 푸는 데에는 오래 걸리지 않았으나 검수를 두세 번 했다. 내가 잘못 본 건 없는지, 실수한 계산은 없는지 계산기를 통해 확인했으며 당이 딸릴 때 준비해둔 초콜릿을 계속 먹으면서 집중해서 풀었다.

끝에 끝까지 풀이를 모르겠는 문제들은 과감하게 찍고 나왔다.

후기

1회차보다는 쉬웠다

내가 이번 시험에 유독 긴장했던 이유가 몇 가지 있다.

25년도 1회차가 정말 어려웠는데, 보통 기사 시험은 그 해의 1회차가 가장 쉽다는 말이 있다. 근데 1회차가 이전 년도에 비해 압도적으로 어려웠기 때문에... 그럼 2회차는 얼마나 어려울까 하는 걱정이 컸다.
내년에 약간의 개정이 생긴다는 얘기가 있었다. 그렇다면 올해 안에 무조건 따야하고... 이번에 떨어지면 3회차를 다시 준비해야 한다는 게 엄청 부담이었다.
처음 보는 기사 시험이었기에 어떻게 준비해야 하는지에 대한 고민이 컸다. 어떤 방식으로 준비하는 게 정답일지 모르겠어서 나 스스로에게 부끄럽지 않게 공부하고자 더 몰아붙히면서 공부한 것 같다.

그럼에도 정말 다행히도 1회차보다 오히려 2회차가 쉬웠었다. 개념이 꼬아서 나오거나 그러지도 않았기에 그런 문제들은 확실히 보고 맞추고 가자 싶었다. 다만 여전히 C와 JAVA가 어렵게 나왔으나 1회차에 비하면 크게 어려운 수준도 아니었고 비슷하거나 살짝 쉬웠던 정도였던 듯 하다.

시험이 끝나자마자...

다같이 정보처리기사 오픈채팅방에서 서로가 푼 문제와 답을 공유했고 그날 오후에는 각 강의 사이트에서 올려주는 사전답안을 보고 어느 정도의 점수가 나왔을지 확인했다. 나는 이때 62~64점 정도가 나와서 합격이겠거니 했지만... 그래도 확실히 합격을 받아야 안심할 수 있을 것 같았다.

한 방에 합격

그래도 결국 원트 합격이라는 스스로의 쾌거를 이루고 정말 뿌듯했다. 그치만 다시 한번 이렇게 공부하라고 하면 다시는 못할 정도로... ㅜㅜ 길고 긴 과정이었지만 좋은 결과로 마무리하게 되어 스스로에게도 정말 뿌듯했다.

Ethers v6를 사용해보기

Fri, 12 Sep 2025 08:38:44 GMT

시작하기에 앞서...

이번 포스팅 내용은 Ethers 학습을 목적으로 간단히 진행한 프로젝트입니다. 2025 K-PaaS 공모전을 진행하면서 DID와 관련한 내용을 다루게 되었고 프론트 개발 과정 중에서 Ethers의 이해와 활용에 대한 이해도를 높이기 위해 진행하게 되었습니다.

DID의 직접적인 활용보다는 Ethers 사용과 학습에 중점을 두고 있습니다!

Ethers가 뭔데?

이더리움과 상호작용하는 라이브러리!

Ethers 공식 문서 https://docs.ethers.org/v6/

ethers.js 라이브러리는 Ethereum 블록체인 및 EVM(ecosystem)과 상호작용할 수 있게 해주는 완전하고 컴팩트한 라이브러리입니다. JavaScript/TypeScript에서 이더리움과 안전하게 상호작용할 수 있게 도와주는 기능을 합니다. 다시 말해, ethers.js 라이브러리는 Ethereum 블록체인 및 EVM(ecosystem)과 상호작용할 수 있게 해주는 라이브러리입니다.

지갑 연결
트랜잭션 전송
스마트 계약 실행
블록체인 데이터 조회 등

때문에 DApp, 지갑, 기타 블록체인 읽기/쓰기 작업용으로 자주 쓰이고 있습니다.

그럼 이더리움은 뭐야?

https://ethereum.org/ko/what-is-ethereum/

이더리움은 탈중앙화된 스마트 계약 플랫폼이자 블록체인 네트워크입니다. 간단하게는 개발 시 블록체인을 활용할 수 있도록 환경 제공을 비롯한 다양한 기능을 포함하는 '플랫폼'입니다.

Ethers는 어떻게 동작해?

Ethers v6의 공식 문서의 내용에 따르면 아래의 순서에 따라 동작합니다.

Provider 연결
Signer 획득
Contract 연결(Optional)
읽기/쓰기 작업 실행

이때 Ethers의 동작 과정에 사용되는 용어에 대한 설명은 다음과 같습니다.

Provider: 블록체인과 연결, 읽기 작업 수행 (getBalance, getBlockNumber, etc.)
Signer: 사용자의 개인 키를 보유, 트랜잭션에 서명함
Contract: 스마트 계약 객체, ABI + 주소로 생성됨
Utils: formatEther, parseUnits, keccak256, toUtf8Bytes 등 유틸 함수
Wallet: 로컬 키페어를 가진 지갑 객체 (ex. new Wallet(privateKey))

그럼 Ethers를 사용해 어떤 프로젝트를 할 수 있어?

구상한 프로젝트 주제

이번 주제에서 메인으로 고려해야 할 것은 아래의 두 가지였습니다.

Ethers.js의 주요 기능: 스마트컨트랙트 연결, 지갑 연결, 송금, 블록/트랜잭션 조회 등
프론트엔드와의 상호작용: 버튼, 폼, 상태관리, 뷰 업데이트

따라서 위 내용을 같이 고려했을 때 '지갑 연결 + 잔액 조회 + 송금 DApp'을 주제로 결정했습니다.

개발 환경

개발환경은 다음과 같습니다.

Node: ≥ 18 (LTS 권장)
패키지 매니저: npm 또는 pnpm
프레임워크: Next.js 14 (App Router)
언어: TypeScript
UI: 기본 스타일
Web3: ethers@^6
지갑: MetaMask

메타마스크 설치

이번 프로젝트의 지갑으로는 메타마스크를 사용하기 때문에, 프로젝트 개발 전에 미리 설치를 해야 합니다.

메타마스크가 뭐야?

메타마스크는 사용자가 블록체인 애플리케이션뿐만 아니라 디지털 신원과 디지털 자산에 안전하게 접근할 수 있도록 지원하는 자기 수탁형 암호화폐 지갑 앱입니다. 사용자는 MetaMask를 통해 Web3 상의 분산형 애플리케이션(디앱)과 상호작용하고, 암호화폐 포트폴리오를 관리하며, NFT를 민팅하는 등 다양한 기능을 이용할 수 있습니다. 또한, 안전한 로그인, 키 저장소, 토큰 지갑 등의 기능을 제공합니다.

출처: https://metamask.io/ko/download

다시 말해, 이더리움(Ethereum) 및 이더리움 기반 블록체인 네트워크(예: Polygon, BNB Smart Chain 등)에 연결된 디지털 암호화폐 지갑을 말합니다.

메타마스크 설치는 어떻게 해?

메타마스크는 웹 브라우저에서 설치해서 사용하거나 모바일 앱으로 사용 가능합니다. 메타마스크를 사용할 수 있는 웹 브라우저는 Chrome, Firefox, Brave, Microsoft Edge이며, 저는 크롬에서 진행했습니다.

크롬에서 메타마스크 설치를 위해서는 크롬 확장프로그램으로 설치하면 되며, 아래 링크를 통해 설치가 가능합니다. https://chromewebstore.google.com/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn?utm_source=chatgpt.com 설치 후 회원가입을 하면 되는데, 과정이 간단하므로 메타마스크에서 제시하는대로만 회원가입 하면 됩니다.

‼️추후 개발 서버를 열어서 테스트 할 때, 메타마스크가 설치된 크롬에서 열어야 테스트가 정상적으로 동작합니다.‼️

프로젝트 설치

프로젝트 기본 환경 설치를 우선 진행했습니다. 저는 /K-PaaS/ 폴더 아래에 이번 프로젝트의 폴더를 생성하고자 했습니다.

이를 위해 우선 /K-Paas/ 폴더를 기준으로 cmd를 열고, 아래의 명령어를 순차적으로 진행했습니다.

1) 'dapp-wallet'이라는 이름의 프로젝트 생성

# 프로젝트 생성
npx create-next-app@latest dapp-wallet --ts --eslint

2) 생성한 프로젝트 폴더로 이동

cd dapp-wallet

3) ethers 라이브러리 다운로드

# web3 라이브러리
npm i ethers

4) 환경 옵션 설정

Tailwind CSS 사용 X
/src/ 디렉토리 사용
App Router 사용
Turbopack 사용 X → 기존의 webpack 사용
alias 사용 X

파일 구조

이번 프로젝트의 디렉토리 구조는 다음과 같습니다.

dapp-wallet/
├─ src/
│  ├─ app/
│  │  ├─ layout.tsx
│  │  └─ page.tsx
│  ├─ components/
│  │  ├─ ConnectButton.tsx
│  │  ├─ AccountPanel.tsx
│  │  └─ SendEthForm.tsx
│  ├─ lib/
│  │  └─ ethereum.ts
│  └─ styles/
│     └─ globals.css
├─ .env.local            # (옵션) 별도 RPC 사용 시
├─ package.json
└─ tsconfig.json

※ 기본 동작은 MetaMask의 BrowserProvider 하나로 충분합니다. (읽기/쓰기 모두 가능) 퍼블릭 RPC를 따로 쓰고 싶다면 .env.local에 키를 넣고 JsonRpcProvider를 보조로 붙여도 됩니다.

코드 작성

tsconfig.json 수정

앞서 디렉토리를 설치할 때 /src/ 디렉토리를 사용한다고 설정을 했기 때문에, tsconfig.json에 아래의 코드를 추가해야 합니다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

깃허브 코드

https://github.com/onion-0/Wallet-DApp.git

[강의] 한 입 크기로 잘라먹는 Next.js #10

Mon, 01 Sep 2025 09:59:04 GMT

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOop98SToIvyP4ZLiwetJfX_FMn0dbu097kRsUWsuX9BOUxCY1Ihi 위 내용을 바탕으로 강의를 수강하며 정리하였습니다.

최적화와 배포

1. 이미지 최적화

1) 이미지 최적화...?

웹페이지에서 평균적으로 58%의 용량을 차지하는 것은 이미지 = 용량의 관점에서만 보자면 웹페이지의 절반 이상이 거의 다 이미지로만 구성

Next.js에서는 대부분의 최적화 기법들이 자체적으로 다 제공이 되고 있음

이미지라는 컴포넌트를 활용하면 이미지 최적화 기법들이 모두 자동으로 적용

이미지를 불러올 때의 문제점

JPEG 형식으로 불러오기 : 나쁜 건 아지미나 되도록이면 WebP나 AVIF 등 JPEG보다 훨씬 더 경량화된 이미지 포맷으로 불러오는 것이 좋다
현재 화면에 렌더링 될 필요가 없는 이미지까지 한번에 불러오고 있음
불러오고 있는 이미지들의 사이즈가 실제로 화면에 나타날 사이즈보다 훨씬 더 큼

2) 실습을 위한 환경 준비

vscode로 열기 vscode에서 .../onebite-next/ 폴더로 열기
터미널에서 section08 폴더 생성 vscode에서 /onebite-next/section09/ 폴더 생성
파일 옮기기 /onebite-next/section08 폴더에 있는 코드 중 아래 사진에 해당하는 코드만 선택하여 /onebite-next/section09 폴더로 옮기기

필요한 모듈 다운로드 생성된 /section09/ 폴더로 vscode에서 다시 열기 → vscode 터미널을 열어서 npm i 명령어 실행
개발 모드로 넥스트 앱 실행 생성된 /section09/ 폴더로 vscode에서 다시 열기 → vscode의 터미널 열기 → npm run dev 명령어 실행 → http://localhost:3000/ 로 이동하면 확인 가능 → (종료 시에는) Ctrl+D나 Ctrl+C 입력
백엔드 서버 열기 vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start 명령어 실행

3) 실습

이미지 최적화 진행

/src/components/book-item.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section09/chapter01/src/components/book-item.tsx
원하는 도메인으로부터 불러오는 이미지는 안전하다는 설정 추가: /next.config.ts 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section09/chapter01/next.config.ts 이때 추가하는 값은 images 안에 삽입되며, book-item.tsx 코드 수정 후 실행했을 때 콘솔에 나타나는 에러 메시지의 도메인을 삽입하면 됨
/src/app/book/[id]/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section09/chapter01/src/app/book/%5Bid%5D/page.tsx

2. 검색 엔진 최적화 (SEO)

1) 검색 엔진 최적화...?

검색엔진을 가지고 있는 포털 사이트들에서 우리가 제작한 서비스에 어떠한 페이지들이 있고 이 페이지에는 어떠한 정보들이 있는지 포털 사이트에서 더 잘 수집해 갈 수 있도록 설정하여, 결과적으로는 우리의 서비스가 검색 결과에 더 잘 노출이 되도록 설정하는 기술

= 우리의 서비스가 검색 결과에 더 잘 노출이 되도록 설정하는 기술

2) 검색 엔진 최적화 방법

Sitemap 설정
RSS 발행
시멘틱 태그 설정
메타 데이터 설정

등등... 많이 있음

현재 강의에서는 페이지별 메타 테이더 설정하는 방법에 대해 알아보기

3) 실습 진행을 위한 환경 세팅

vscode로 section09 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

4) 실습

수업 자료로 올려주신 이미지 파일을 /public/ 폴더 내로 이동

인덱스 페이지의 메타 데이터 설정하기: /src/app/(with-searchbar)/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section09/chapter02/src/app/(with-searchbar)/page.tsx

export const metadata: Metadata = {
  title: "한입 북스",
  description: "한입 북스에 등록된 도서를 만나보세요",
  openGraph: {
    title: "한입 북스",
    description: "한입 북스에 등록된 도서를 만나보세요",
    images: ["/thumbnail.png"],
  },
};

메타 데이터 설정: /src/app/(with-searchbar)/search/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section09/chapter02/src/app/(with-searchbar)/search/page.tsx ▼ 동적 매개변수를 사용하여 메타 데이터 내보내기

export async function generateMetadata({ searchParams }: Props): Promise {
  const { q } = await searchParams;
  return {
    title: `${q} : 한입북스 검색`,
    description: `${q} 검색 결과입니다`,
    openGraph: {
      title: `${q} : 한입북스 검색`,
      description: `${q} 검색 결과입니다`,
      images: ["/thumbnail.png"],
    },
  };
}

메타 데이터 설정: /src/app/book/[id]/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section09/chapter02/src/app/book/%5Bid%5D/page.tsx
파비콘 설정하기
- 기존에 있던 /src/app/favicon.ico 파일 삭제하기
- 올려주신 자료에 있던 favicon.ico 파일(/public/ 내에 있던 파일)을 /src/app/ 하위로 이동

3. 배포하기

1) 배포를 위한 기본 설정

Vercel 사이트(https://vercel.com/)에서 회원가입 하기 → 나는 github으로 연동
vscode의 터미널에서 Vercel에 명령어 한번만으로 Next.js 앱을 빌드할 수 있는 도구 설치 npm install -g vercel 실행
vscode의 터미널에서 Vercel에 로그인 → github에 갖다대서 enter 누르고 진행
배포를 위해, vscode의 터미널에서 vercel 명령어 입력 → 현재 프로젝트 폴더를 배포할 거냐는 질문에 대해 y 입력 → 어떤 scope를 선택해서 배포할 거냐는 질문에 뜨는 프로젝트를 선택하고 엔터 입력 → 기존에 존재하는 프로젝트에 연결할 거냐는 질문에 n 입력 → 새로 생성할 프로젝트 이름은 뭐냐는 질문에 onebite-books-app 으로 입력 → 코드가 위치할 디렉토리 위치는 어디냐는 질문에 자동으로 설정된 기본값 그대로 하기 위해 바로 엔터 누르기 → 자동으로 설정된 옵션들을 바꾸고 싶냐는 질문에 n 입력 → 추가 프로젝트 옵션을 바꾸고 싶냐는 질문에 n 입력 → 배포 진행중 → 배포 진행 완료 후 뜨는 링크를 통해 들어가면 확인 가능
이때, 백엔드 서버는 안 열려 있기 때문에 DB에서 데이터를 불러오지 못하고 있음 → /onebite-books-server/로 새 창을 하나 열어서 vscode 터미널을 새로 열기 → 터미널에서 vercel 입력 → 현재 프로젝트 폴더를 배포할 거냐는 질문에 대해 y 입력 → 어떤 scope를 선택해서 배포할 거냐는 질문에 뜨는 프로젝트를 선택하고 엔터 입력 → 기존에 존재하는 프로젝트에 연결할 거냐는 질문에 n 입력 → 새로 생성할 프로젝트 이름은 뭐냐는 질문에 기본값으로 설정된 걸로 진행을 위해 엔터 입력 → 코드가 위치할 디렉토리 위치는 어디냐는 질문에 자동으로 설정된 기본값 그대로 하기 위해 바로 엔터 누르기 → 바로 배포 작업 진행 → 배포 완료
백엔드 서버 도메인 확인 후 코드 수정 → vercel에서 배포한 백엔드 서버(onebite-books-server)에 들어가서 Production Deployment에서 'Domains' 값을 복사 → vercel에서 배포한 onebite-books-app에 들어가서 settings 탭에서 Environment Variables 탭에서 새로운 환경변수 추가 (Key는 아래 사진과 동일하게 설정, Value는 복사한 값 붙여넣고 https:// 추가)
수정사항을 반영하기 위한 재배포 진행 → vscode에서 section2/를 기준으로 폴더 열고 터미널 열기 → 즉시 프로덕션 모드로 배포하기 위해 vercel --prod 명령어 실행 → 배포 진행 후 완료

4. 배포 후 최적화

1) 실습 진행을 위한 환경 세팅

vscode로 section09 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 서버 열기
vscode로 onebite-books-server 폴더 열기 → vscode 터미널을 열어서 npm run start로 백엔드 서버 열기

2) 실습

인덱스 페이지를 static 페이지로 재설정: /src/app/(with-searchbar)/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section09/chapter04/src/app/(with-searchbar)/page.tsx
/src/app/(with-searchbar)/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section09/chapter04/src/app/(with-searchbar)/page.tsx
/src/app/book/[id]/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section09/chapter04/src/app/book/%5Bid%5D/page.tsx
vercel에서 onebite-books-app 프로젝트의 Settings 탭에서 Functions 탭에 'Function Region' 메뉴에서의 위치를 아래와 같이 수정

[강의] 한 입 크기로 잘라먹는 Next.js #9

Sat, 30 Aug 2025 13:49:23 GMT

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOop98SToIvyP4ZLiwetJfX_FMn0dbu097kRsUWsuX9BOUxCY1Ihi 위 내용을 바탕으로 강의를 수강하며 정리하였습니다.

고급 라우팅 패턴

1. 패럴렐 라우트(Parallel Route)

1) 패럴렐 라우트(Parallel Route)

패럴렐 라우트(Parallel Route) = 병렬 라우트

하나의 화면 안에 여러 개의 페이지를 병렬로 함께 렌더링 시켜주는 패턴
하나의 화면 안에 Sidebar 페이지와 Feed 페이지를 함께 렌더링 시켜주는 패턴 (이때의 '페이지'는 page.tsx 파일에 작성되는 코드를 지칭)

패럴렐 라우트를 위해서는 슬롯 생성 필요

이때 슬롯이란 이름 앞에 골뱅이 기호가 붙은 폴더로, 병렬로 렌더링이 될 하나의 페이지 컴포넌트를 보관하는 역할
슬롯의 개수에는 제한 X
슬롯 안에 새로운 페이지 추가도 가능

패럴렐 라우트 공식문서 https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering

2) 실습을 위한 환경 준비

vscode로 열기 vscode에서 .../onebite-next/ 폴더로 열기
터미널에서 section08 폴더 생성 vscode에서 /onebite-next/section08/ 폴더 생성
파일 옮기기 /onebite-next/section07 폴더에 있는 코드 중 아래 사진에 해당하는 코드만 선택하여 /onebite-next/section08 폴더로 옮기기

필요한 모듈 다운로드 생성된 /section08/ 폴더로 vscode에서 다시 열기 → vscode 터미널을 열어서 npm i 명령어 실행
개발 모드로 넥스트 앱 실행 생성된 /section08/ 폴더로 vscode에서 다시 열기 → vscode의 터미널 열기 → npm run dev 명령어 실행 → http://localhost:3000/ 로 이동하면 확인 가능 → (종료 시에는) Ctrl+D나 Ctrl+C 입력
백엔드 서버 열기 vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start 명령어 실행

3) 실습

개발 시 의도하지 않은 방색대로 동작한다면 개발 모드 중단 후 .next 폴더를 삭제하고 다시 가동해보기

새 폴더 생성: /src/app/parallel/ 폴더 생성
새 파일 생성: /src/app/parallel/page.tsx 파일 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter01/src/app/parallel/page.tsx
parallel 라우트 생성을 위해서는 슬롯 생성 필요: /src/app/parallel/%40sidebar/page.tsx 폴더+파일 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter01/src/app/parallel/%40sidebar/page.tsx
레이아웃 컴포넌트 수정: /src/app/parallel/layout.tsx 코드 생성
슬롯 새로 생성: /src/app/parallel/@feed/page.tsx https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter01/src/app/parallel/%40feed/page.tsx
슬롯에 페이지 생성: /src/app/parallel/@feed/setting/page.tsx https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter01/src/app/parallel/%40feed/setting/page.tsx
레이아웃 컴포넌트 수정: /src/app/parallel/layout.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter01/src/app/parallel/layout.tsx
슬롯별로 현재 렌더링할 페이지가 없을 때 대신 렌더링할 default 페이지 생성: /src/app/parallel/@sidebar/default.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter01/src/app/parallel/%40sidebar/default.tsx
슬롯별로 현재 렌더링할 페이지가 없을 때 대신 렌더링할 default 페이지 생성: /src/app/parallel/default.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter01/src/app/parallel/default.tsx

2. 인터셉팅 라우트(Inntercepting Route)

1) 인터셉팅 라우트(Inntercepting Route)

인터셉팅 라우트 공식 문서 https://nextjs.org/docs/app/api-reference/file-conventions/intercepting-routes

사용자가 특정 경로로 접속해서 새로운 페이지를 요청할 때 그 요청을 가로채서 원래 렌더링 돼야 하는 페이지가 아닌 우리가 원하는 어떠한 페이지를 대신 렌더링하도록 설정하는 라우팅 패턴
사용자가 동일한 경로에 접속하게 되더라도 특정 조건을 만족하게 되면 그때에는 원래 페이지가 아닌 다른 페이지를 렌더링 하도록 설정하는 기술

인터셉팅 라우트를 동작시키는 조건

Next.js에서 고정적으로 정해둠 : 초기 접속 요청이 아닐 때에만 인터셉팅 라우트가 동작하도록 설정 : 사용자가 초기 접속 요청이 아닌 클라이언트 사이드 렌더링 방식으로 접속을 하게 되었을 때에만 동작

2) 실습 진행을 위한 환경 세팅

vscode로 section08 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

3) 실습

사용자가 도서 아이템을 클릭해서 북페이지로 이동하게 될 때 화면 내 모달 형태로 피드 위에 바로 나타나도록 생성

북 폴더 아래에 page.tsx를 인터셉팅 할 수 있는 페이지 생성: /src/app/(.)book/[id]/page.tsx 폴더 + 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter02/src/app/(.)book/%5Bid%5D/page.tsx
모달 형태로 상세 페이지 렌더링을 위해 모달 컴포넌트 생성: /src/components/modal.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter02/src/components/modal.tsx
모달 컴포넌트를 브라우저에 배치: /src/app/layout.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter02/src/app/layout.tsx
모달 컴포넌트의 css 코드 생성: /src/components/modal.module.css 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter02/src/components/modal.module.css

3. 패럴렐 & 인터셉팅 라우트

1) 실습 진행을 위한 환경 세팅

vscode로 section08 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

2) 실습

다시 수강

[강의] 한 입 크기로 잘라먹는 Next.js #8

Wed, 27 Aug 2025 17:31:34 GMT

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOop98SToIvyP4ZLiwetJfX_FMn0dbu097kRsUWsuX9BOUxCY1Ihi 위 내용을 바탕으로 강의를 수강하며 정리하였습니다.

서버 액션

1. 서버 액션을 소개합니다

1) 서버 액션(Server Action)이란?

브라우저에서 호출할 수 있는 서버에서 실행되는 비동기 함수
클라이언트인 브라우저에서 특정 폼의 제출 이벤트가 발생했을 때 서버에서만 실행되는 함수를 브라우저가 직접 호출하면서 데이터까지 폼 데이터 형식으로 전달할 수 있게 해주는 기능 = 클라이언트인 브라우저 측에서 특정 폼, 특정 양식의 제출이 발생했을 때 서버 측에서만 실행되는 어떠한 함수를 실행시켜주는 기능
함수의 최상단에 useServer라는 지시자를 붙임 → 브라우저가 아닌 서버에서만 실행이 되는 서버 액션으로 설정

2) 실습을 위한 환경 준비

vscode로 열기 vscode에서 .../onebite-next/ 폴더로 열기
터미널에서 section07 폴더 생성 vscode에서 /onebite-next/section07/ 폴더 생성
파일 옮기기 /onebite-next/section06 폴더에 있는 코드 중 아래 사진에 해당하는 코드만 선택하여 /onebite-next/section07 폴더로 옮기기

필요한 모듈 다운로드 생성된 /section07/ 폴더로 vscode에서 다시 열기 → vscode 터미널을 열어서 npm i 명령어 실행
개발 모드로 넥스트 앱 실행 생성된 /section07/ 폴더로 vscode에서 다시 열기 → vscode의 터미널 열기 → npm run dev 명령어 실행 → http://localhost:3000/ 로 이동하면 확인 가능 → (종료 시에는) Ctrl+D나 Ctrl+C 입력
백엔드 서버 열기 vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start 명령어 실행

3) 실습

서버 액션을 위한 브라우저의 폼 생성: /src/app/book/[id]/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section07/chapter01/src/app/book/%5Bid%5D/page.tsx
서버 액션을 위해 생성한 브라우저의 폼의 디자인 수정: /src/app/book/[id]/page.module.css 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section07/chapter01/src/app/book/%5Bid%5D/page.module.css

2. 리뷰 추가 기능 구현하기 (with 서버액션)

1) 실습 진행을 위한 환경 세팅

vscode로 section07 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

2) 실습

백엔드 서버에서 제공하는 리뷰와 관련된 API 기능들을 빠르게 이용해보기

api 호출: /src/app/book/[id]/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section07/chapter02/src/app/book/%5Bid%5D/page.tsx
가독성을 위해 서버 액션을 별도의 파일로 분리: /src/actions/create-review.action.ts 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section07/chapter02/src/actions/create-review.action.ts

3. 리뷰 조회 기능 구현하기 (with 서버액션)

1) 실습 진행을 위한 환경 세팅

vscode로 section07 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

2) 실습

도서의 리뷰들을 불러오는 기능 구현: /src/app/book/[id]/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section07/chapter03/src/app/book/%5Bid%5D/page.tsx
하나의 리뷰를 렌더링 할 리뷰 아이템 컴포넌트 생성: /src/components/review-item.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section07/chapter03/src/components/review-item.tsx
리뷰 아이템 컴포넌트의 css 코드 생성: /src/components/review-item.module.css 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section07/chapter03/src/components/review-item.module.css
컴포넌트를 불러와서 렌더링 하도록 수정: /src/app/book/[id]/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section07/chapter03/src/app/book/%5Bid%5D/page.tsx
ReviewEditor 컴포넌트를 따로 분리: /src/components/review-editor.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section07/chapter03/src/components/review-editor.tsx
ReviewEditor 컴포넌트의 css 코드 생성: /src/components/review-editor.module.css 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section07/chapter03/src/components/review-editor.module.css

4. 리뷰 재검증 구현하기

1) 실습 진행을 위한 환경 세팅

vscode로 section07 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

2) 실습

지금까지는 사용자가 리뷰를 작성했을 때 브라우저를 한번 새로고침 해줬어야지만 자신이 작성한 리뷰 확인이 가능했음 → 리뷰가 등록하자마자 바로 등록되도록 수정 필요

리뷰가 등록하자마자 바로 등록되도록 수정: /src/actions/create-review.action.ts 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section08/chapter04/src/actions/create-review.action.ts → 이때 RevalidatePath 메서드를 사용하면 데이터 캐시 + 풀 라우트 캐시까지 함께 삭제

3) 동작 과정

5. 다양한 재검증 방식 살펴보기

1) 재검증 방식 5가지

(기존과 동일) 해당하는 페이지만 깔끔하게 재검등하도록 동작 : 두 번째 인수는 생략하고 첫 번째 인수로 특정 페이지의 주소만 명시
특정 경로의 모든 동적 페이지를 재검증 : RevalidatePath() 메서드 호출할 때, 첫 번째 인수로 폴더의 경로를 적고 두 번째 인수로 문자열로 "page"로 작성 → 첫 번째 경로와 같은 동적 페이지들이 전부 재검증
특정 레이아웃을 갖는 모든 페이지를 재검증 : RevalidatePath() 메서드 호출할 때, 첫 번째 인수로 폴더의 경로를 적고 두 번째 인수로 문자열로 "layout"로 작성 → 첫 번째 경로와 같은 레이아웃 페이지들이 전부 재검증
모든 페이지 재검증 : RevalidatePath() 메서드 호출할 때, 첫 번째 인수로 /를 적고 두 번째 인수로 문자열로 "layout"로 작성 → 모든 페이지들이 전부 재검증
태그 값을 기준으로 데이터 캐시 재검증

2) 실습 진행을 위한 환경 세팅

vscode로 section07 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

3) 실습

/src/actions/create-review.action.ts 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section07/chapter05/src/actions/create-review.action.ts

6. 클라이언트 컴포넌트에서의 서버액션

다시 들어보기

0) useActionState

리액트 19버전부터 추가되는 완전 최신의 리액트 훅 폼 태그의 상태를 굉장히 쉽게 핸들링할 수 있도록 도와주는 여러가지 기능 보유

첫 번째 인수: 핸들링하려는 폼에 액션 함수 삽입
두 번째 함수: 폼의 상태의 초기값

1) 실습 진행을 위한 환경 세팅

vscode로 section07 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

2) 실습

중복 제출 방지 등을 위한 코드 수정

src/components/review-editor.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section07/chapter06/src/components/review-editor.tsx

7. 리뷰 삭제 기능 구현하기

다시 듣기

1) 실습 진행을 위한 환경 세팅

vscode로 section07 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

2) 실습

리뷰 아이템들에 있는 삭제하기 버튼을 클릭하면 하나의 리뷰를 데이터베이스로부터 삭제하는 기능 생성 ▶ 서버 액션을 통해 구현

/src/components/review-item.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section07/chapter07/src/components/review-item.tsx
/src/components/review-item-delete-button.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section07/chapter07/src/components/review-item-delete-button.tsx
/src/actions/delete-review.action.ts 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section07/chapter07/src/actions/delete-review.action.ts

[강의] 한 입 크기로 잘라먹는 Next.js #7

Sun, 24 Aug 2025 17:35:31 GMT

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOop98SToIvyP4ZLiwetJfX_FMn0dbu097kRsUWsuX9BOUxCY1Ihi 위 내용을 바탕으로 강의를 수강하며 정리하였습니다.

스트리밍과 에러핸들링

1. 스트리밍이란?

1) 스트리밍(Streaming)

스트리밍(Streaming)

큰 용량의 동영상을 아주 빠른 속도로 시청할 수 있게 해줌
서버에서 클라이언트로 데이터를 넘겨줄 때 데이터의 크기가 너무 크거나 데이터를 준비하는데 걸리는 시간이 오래 걸리게 되어서 데이터를 빠르게 전송해주기 어려울 것 같을 때, 데이터를 여러 개의 조각으로 잘게 쪼갠 다음 쪼개진 작은 용량의 데이터들을 하나하나씩 클라이언트에게 전송하는 기술 = 데이터가 다 불러와지지 않은 상태에서도 현재까지 전달 받은 데이터에 접근은 가능하기 때문에 결과적으로 사용자에게는 긴 로딩 없이 서비스 제공 가능

Next.js의 스트리밍

Next.js는 스트리밍을 웹 서비스에서도 누릴 수 있게 HTMl 페이지를 스트리밍하는 기능을 자체적으로 제공
사용자가 특정 페이지에 접속했을 때 렌더링이 오래 걸리지 않는 컴포넌트들을 먼저 화면에 보여주고, 렌더링이 오래 걸릴 것으로 예상되는 컴포넌트들은 대체 UI를 화면에 보여주고 있다가 서버 측에서 컴포넌트의 렌더링이 완료가 되면 그때 뒤늦게 렌더링이 완료된 컴포넌트들만 따로 전달해서 컨텐츠를 보여주는 방식으로 제공

2) 스트리밍은 언제 사용할까?

Next.js의 스트리밍은 Dynamic 페이지에 자주 활용 Next.js의 Dynamic 페이지들은 Next.js 서버에서 빌드타임에 생성되지 않기 때문에 풀라우트 캐시에는 저장 X

▼ 이런 상황에서

▼ 스트리밍을 통해 이렇게 제공 가능

2. 스트리밍 (1) 페이지 스트리밍 적용하기

1) 실습을 위한 환경 준비

vscode로 열기 vscode에서 .../onebite-next/ 폴더로 열기
터미널에서 section06 폴더 생성 vscode에서 /onebite-next/section06/ 폴더 생성
파일 옮기기 /onebite-next/section05 폴더에 있는 코드 중 아래 사진에 해당하는 코드만 선택하여 /onebite-next/section06 폴더로 옮기기

필요한 모듈 다운로드 생성된 /section06/ 폴더로 vscode에서 다시 열기 → vscode 터미널을 열어서 npm i 명령어 실행
개발 모드로 넥스트 앱 실행 생성된 /section06/ 폴더로 vscode에서 다시 열기 → vscode의 터미널 열기 → npm run dev 명령어 실행 → http://localhost:3000/ 로 이동하면 확인 가능 → (종료 시에는) Ctrl+D나 Ctrl+C 입력
백엔드 서버 열기 vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start 명령어 실행

2) 실습

스트리밍 기능 구현: /src/app/(with-searchbar)/search/loading.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section06/chapter02/src/app/(with-searchbar)/search/loading.tsx
딜레이 구현을 위해: /src/util/delay.ts 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section06/chapter02/src/util/delay.ts
딜레이 구현을 위해: /src/app/(with-searchbar)/search/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section06/chapter02/src/app/(with-searchbar)/search/page.tsx

3) 스트리밍 코드

loading.tsx로 설정한 로딩 시 실행되는 코드는 동일한 경로에 있는 컴포넌트만 스트리밍이 되도록 설정하는 게 아니라, 경로 아래에 있는 모든 페이지 컴포넌트들이 다 스트리밍이 되도록 설정
loading.tsx 파일이 스트리밍하도록 설정하는 페이지 컴포넌트는 모든 페이지 컴포넌트는 아니고 async라는 키워드가 붙어서 비동기로 작동하도록 설정된 페이지 컴포넌트에만 스트리밍을 제공
loading.tsx 파일은 무조건 page.tsx 코드, 즉 페이지 컴포넌트에만 스트리밍을 적용할 수 있음
loading.tsx 파일로 설정된 스트리밍은 브라우저에서 쿼리 스트링이 변경될 때에는 틜거링 되지 않는다

3. 스트리밍 (2) 컴포넌트 스트리밍

1) loading vs. Suspense

loading.tsx : 로딩 컴포넌트는 무조건 페이지 단위로만 스트리밍 적용 가능 → 일반적인 컴포넌트들에는 스트리밍 설정 X
Suspense : 컴포넌트별로 세밀하게 스트리밍 적용 : Suspense 컴포넌트로 비동기 컴포넌트를 감싸주면 해당 컴포넌트를 스트리밍하도록 설정해서 미완성 상태, 즉 로딩 상태로 남겨둠
```
    Loading ...}>
      
    
```
: 쿼리 스트링만 변경되었을 경우 로딩 상태가 다시 표시되지 않는 문제가 발생하지만, 해결도 가능 : 페이지 내에서 여러 개의 비동기 컴포넌트들을 동시다발적으로 스트리밍할 때 굉장히 유용 ⭐⭐⭐⭐⭐

2) 실습 진행을 위한 환경 세팅

vscode로 section06 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

3) 실습

Suspense 맛보기

loading.tsx 코드 삭제
페이지 컴포넌트 분리 + Suspense 사용 : /src/app/(with-searchbar)/search/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section06/chapter03/src/app/(with-searchbar)/search/page.tsx

Suspense로 하나의 페이지 내에서 여러 개의 비동기 컴포넌트들을 동시다발적으로 스트리밍 시 동작 확인

/src/app/(with-searchbar)/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section06/chapter03/src/app/(with-searchbar)/page.tsx

4. 스켈레톤(Skeleton) UI 적용하기

1) 스켈레톤(Skeleton) UI

스켈레톤 = 뼈대 스켈레톤 UI = 뼈대 역할을 하는 UI

페이지에 일부 컨텐츠가 로딩이 되는 동안 실제 컨텐츠 대신에 컨텐츠와 비슷하게 생긴 박스 형태의 실루엣 정도만 미리 보여주는 것
필수적인 기능은 아니나, 사용자의 입장에서는 완성도 측면에서 필요할 수 있음
React Loading Skeleton이라는 자동으로 스켈레촌 UI를 만들어주는 라이브러리 존재하니 필요하면 사용 가능

▼ Ex. 유튜브의 스켈레톤 UI

2) 실습 진행을 위한 환경 세팅

vscode로 section06 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

3) 실습

스켈레톤 컴포넌트 생성: src/components/skeleton/book-item-skeleton.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section06/chapter04/src/components/skeleton/book-item-skeleton.tsx
스켈레톤 컴포넌트 적용: /src/app/(with-searchbar)/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section06/chapter04/src/app/(with-searchbar)/page.tsx
스켈레톤 컴포넌트의 스타일 파일 생성: src/components/skeleton/book-item-skeleton.module.css 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section06/chapter04/src/components/skeleton/book-item-skeleton.module.css
스켈레톤 컴포넌트들을 리스트로 렌더링 해주는 컴포넌트 생성: src/components/skeleton/book-list-skeleton.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section06/chapter04/src/components/skeleton/book-list-skeleton.tsx
생성한 스켈레톤을 검색 페이지에도 적용: /src/app/(with-searchbar)/search/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section06/chapter04/src/app/(with-searchbar)/search/page.tsx

5. 에러 핸들링 (error.tsx)

1) 에러 핸들링 (error.tsx)

Next.js는 특정 경로에서 발생한 모든 오류들을 한꺼번에 처리할 수 있는 아주 편리한 에러 핸들링 기능을 제공

에러문 출력을 위해 try-catch문을 사용하는 대신, 에러를 처리하고 싶은 페이지 컴포넌트의 파일과 같은 위치에 에러를 처리할 파일을 하나 생성: error.tsx 코드 생성 → 이때 에러 파일은 useClient라는 지시자를 통해 클라이언트 컴포넌트로 설정하는 것이 필수 ⭐ → 해당 에러 파일과 같은 경로에 있거나 하위 경로에 있는 페이지에서 오류가 발생하게 되면 에러 컴포넌트가 페이지 컴포넌트 대신 화면에 출력
에러 컴포넌트에서 제공하는 props
- error : 에러 객체 확인
- reset : 함수 : 에러가 발생한 페이지를 복구하기 위해서 다시 한번 컴포넌트들을 렌더링 시켜보는 기능을 가지고 있는 함수 : 어떠한 매개변수도 전달받지 않으며 어떠한 값도 반환하지 않은 void 타입의 리턴을 하는 함수 : 브라우저(클라이언트) 측에서 현재 서버로부터 전달받은 데이터를 이용해서 화면을 다시 한번 렌더링 해보기만 하는 메서드 = 서버 컴포넌트를 재실행하는 것은 아님 : 에러 상태를 초기화하고 컴포넌트들을 다시 렌더링 → refresh() 메서드로 서버 컴포넌트를 다시 불러와서 리렌더링 한다고 해도 클라이언트 컴포넌트인 에러 상태가 사라지지 않기 때문에, reset()도 그 이후에 필수적으로 사용 필요
error.tsx 파일은 동일한 경로에 있는 인덱스 페이지 + 하위 경로에 있는 모든 페이지에 다 동일하게 적용

2) 실습 진행을 위한 환경 세팅

vscode로 section06 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
(에러 확인을 위해) 백엔드 서버는 구동 X

3) 실습

에러를 처리하는 파일 생성: /src/app/(with-searchbar)/error.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section06/chapter05/src/app/(with-searchbar)/error.tsx
백엔드 서버 가동: vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start로 백엔드 서버 열기
여전히 발생하는 오류 제거를 위해 error.tsx 코드 수정 가능
- 강제 전체 렌더링
- 오류가 발생한 부분만 리렌더링: refresh()로 현재 페이지에 필요한 서버 컴포넌트들을 다시 불러옴

[강의] 한 입 크기로 잘라먹는 Next.js #6

Sun, 17 Aug 2025 09:05:06 GMT

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOop98SToIvyP4ZLiwetJfX_FMn0dbu097kRsUWsuX9BOUxCY1Ihi 위 내용을 바탕으로 강의를 수강하며 정리하였습니다.

페이지 캐싱

1. 풀 라우트 캐시 (1)

1) 풀 라우트 캐시(Full Route Cache)

Next 서버 측에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능 = 빌드 타임에 정적으로 미리 생성이 되어서 풀 라우트 캐시에 보관

2) 풀 라우트 캐시가 시행되는 페이지는?

Next.js 앱에서 만들어 둔 모든 페이지는 자동으로 나뉨

정적인 static 페이지 ← 여기에 풀 라우트 캐시 wjrdyd
동적인 dynamic 페이지

▼ 그렇다면 Next.js 앱에서는 static 페이지와 dynamic 페이지를 어떻게 구분할까?

Dynamic 페이지를 구분하는 기준
- 특정 페이지가 접속 요청을 받을 때마다 매번 변화가 생기거나 데이터가 달라질 경우 → (서버 컴포넌트에서) 캐시되지 않는 Data Fetching을 사용할 경우 → (서버 컴포넌트에서) 동적 함수(쿠키, 헤더, 쿼리스트링)을 사용하는 컴포넌트가 있을 때
Static 페이지를 구분하는 기준
- Dynamic 페이지가 아니면 모두 Static 페이지가 된다 (기본값)

3) 풀 라우트 캐시도 Revalidate 가능

빌드타임에 생성해서 보관해둔 페이지를 특정 시간을 주기로 재생성, 즉 갱신하는 것도 가능

2. 풀 라우트 캐시 (2)

1) 실습을 위한 환경 준비

vscode로 열기 vscode에서 .../onebite-next/ 폴더로 열기
터미널에서 section05 폴더 생성 vscode에서 /onebite-next/section05/ 폴더 생성
파일 옮기기 /onebite-next/section04 폴더에 있는 코드 중 아래 사진에 해당하는 코드만 선택하여 /onebite-next/section05 폴더로 옮기기

필요한 모듈 다운로드 생성된 /section05/ 폴더로 vscode에서 다시 열기 → vscode 터미널을 열어서 npm i 명령어 실행
개발 모드로 넥스트 앱 실행 생성된 /section05/ 폴더로 vscode에서 다시 열기 → vscode의 터미널 열기 → npm run dev 명령어 실행 → http://localhost:3000/ 로 이동하면 확인 가능 → (종료 시에는) Ctrl+D나 Ctrl+C 입력
백엔드 서버 열기 vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start 명령어 실행

2) 실습

개발 서버 구동할 때 생성되는 오류 해결: /src/app/(with-component)/layout.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section05/chapter02/src/app/(with-searchbar)/layout.tsx
static 페이지로 수정 가능한 컴포넌트들 수정
- /src/app/layout.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section05/chapter02/src/app/layout.tsx
- /src/app/(with-searchbar)/layout.tsx 코드는 수정할 거 없음
- /src/app/(with-searchbar)/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section05/chapter02/src/app/(with-searchbar)/page.tsx

=> index 페이지가 static 페이지로 잘 설정됐는지 확인

vscode 터미널에 npm run build 명령어로 실행해서
생성된 /section05/.next/server/app/index.html의 코드를 통해 확인 가능

3. 풀 라우트 캐시 (3): 동적 경로에 적용하기

1) 실습 진행을 위한 환경 세팅

vscode로 section05 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

2) 실습

static 페이지로 수정 가능한 컴포넌트들 수정
- /src/app/(with-searchbar)/search/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section05/chapter03/src/app/(with-searchbar)/search/page.tsx → 원래 해당 페이지는 동적으로 동작하기 때문에 static 페이지로 수정하지 않아도 되지만, 풀 라우트 캐시 적용을 위해 수정하고 싶다면 위 코드와 같이 수정 진행
- /src/app/book/[id]/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section05/chapter03/src/app/book/%5Bid%5D/page.tsx → URl 파라미터에 값을 명시할 때는 문자열만!!

4. 라우트 세그먼트 옵션

라우트 세그먼트 옵션 관련 공식 문서 https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering

export const dynamic 옵션: 특정 페이지의 유형을 강제로 static 또는 dynamic 페이지로 설정해주는 옵션
- export const dynamic = "auto"; 아무것도 강제하지 않는 옵션 / 코드에 따라 페이지의 유형을 자동으로 설정
- export const dynamic = "force-dynamic"; 페이지를 강제로 dynamic 페이지로 강제하는 옵션
  - 특별한 상황이 아니면 권장되지 않음
- export const dynamic = "force-static"; 페이지를 강제로 static 페이지로 강제하는 옵션
  - 해당 옵션은 dynamic 페이지에 적용할 경우 기능이 제대로 동작하지 않음
- export const dynamic = "error"; 페이지를 강제로 static 페이지로 설정하되, static으로 설정하면 안되는 기능이 있다면 빌드 오류를 발생시키는 옵션

5. 클라이언트 라우터 캐시

1) 클라이언트 라우터 캐시

클라이언트인 브라우저에 저장되는 캐시 페이지 이동을 효율적으로 진행하기 위해 페이지의 일부 데이터를 보관 중복된 레이아웃은 브라우저 측의 캐시에 저장, 중복되지 않은 페이지 등만 따로 불러오게 설정 가능 새로고침이 되거나 아예 탭을 껐다가 다시 접속하는 경우에는 동작하지 않음

▼ 풀 라우트 캐시 진행 과정

▼ 이때 중복 발생

▼ 클라이언트 라우터 캐시 전체 진행 과정

2) 실습 진행을 위한 환경 세팅

vscode로 section05 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

3) 실습

/src/app/(with-searchbar)/layout.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section05/chapter05/src/app/(with-searchbar)/layout.tsx

[강의] 한 입 크기로 잘라먹는 Next.js #5

Fri, 15 Aug 2025 07:38:05 GMT

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOop98SToIvyP4ZLiwetJfX_FMn0dbu097kRsUWsuX9BOUxCY1Ihi 위 내용을 바탕으로 강의를 수강하며 정리하였습니다.

데이터 페칭

App Router의 데이터 페칭

1. 앱 라우터의 데이터 페칭

1) Page Router의 데이터 페칭

서버 컴포넌트라는 개념이 없고, 모든 컴포넌트가 전부 클라이언트 컴포넌트로써 동작함

▼ 개발자가 직접 아래와 같이 경우를 나누어 개발해야 했음

2) App Router의 데이터 페칭

▼ App Router의 서버 컴포넌트 구조

3) 실습을 위한 환경 준비

vscode로 열기 vscode에서 .../onebite-next/ 폴더로 열기
터미널에서 section04 폴더 생성 vscode에서 /onebite-next/section04 폴더 생성
파일 옮기기 /onebite-next/section03 폴더에 있는 코드 중 아래 사진에 해당하는 코드만 선택하여 /onebite-next/section04 폴더로 옮기기

필요한 모듈 다운로드 생성된 /section04/ 폴더로 vscode에서 다시 열기 → vscode 터미널을 열어서 npm i 명령어 실행
개발 모드로 넥스트 앱 실행 생성된 /section04/ 폴더로 vscode에서 다시 열기 → vscode의 터미널 열기 → npm run dev 명령어 실행 → http://localhost:3000/ 로 이동하면 확인 가능 → (종료 시에는) Ctrl+D나 Ctrl+C 입력
백엔드 서버 열기 vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start 명령어 실행

4) 실습

/src/app/(with-searchbar)/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section04/chapter01/src/app/(with-searchbar)/page.tsx
- 로직에 따라 컴포넌트를 분리해서 생성

API 주소를 환경 변수로써 등록한 후 필요한 파일에서 불러다가 쓰도록 수정: /section04/.env 코드 생성

NEXT_PUBLIC_API_SERVER_URL=http://localhost:12345  //NEXT_PUBLIC_ 접두사를 붙이지 않으면 Next.js가 자동으로 해당 환경 변수를 서버 측에서만 활용할 수 있게 프라이빗으로 설정해버림

/src/app/(with-searchbar)/search/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section04/chapter01/src/app/(with-searchbar)/search/page.tsx
/src/app/book/[id]/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section04/chapter01/src/book/[id]/page.tsx

2. 데이터 캐시

1) 데이터 캐시

fetch 메서드를 활용해 불러온 데이터를 next 서버에 보관하는 기능 영구적으로 데이터를 보관하거나 특정 시간을 주기로 갱신 시키는 것도 가능 불필요한 데이터 요청의 수를 줄여서 웹 서비스의 성능을 크게 개선할 수 있음

▼ 예시

fetch() 메서드를 필수로 사용해야만 가능함

2) 데이터 캐시 옵션

no-store 옵션 - next.js 15 버전 이상부터는 따로 설정해주지 않아도 기본값으로 no-store 옵션이 설정됨

force-cache 옵션

revalidate 옵션

next tag 옵션 - On-Demand ISR과 같은 방식

3) 실습 진행을 위한 환경 세팅

vscode로 section04 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

4) 실습

`no-store` 옵션 설정해보기

/src/app/(with-searchbar)/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section04/chapter02/src/app/(with-searchbar)/page.tsx
데이터 패칭이 발생할 때마다 로그 출력하도록 설정: /section04/next.config.mjs 코드 수정
```
import type { NextConfig } from "next";
```

const nextConfig: NextConfig = { logging: {fetches: {fullUrl: true,},}, };

export default nextConfig;

```

`force-cache` 옵션 설정해보기

/src/app/(with-searchbar)/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section04/chapter02/src/app/(with-searchbar)/page.tsx

`revalidate` 옵션 설정해보기

/src/app/(with-searchbar)/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section04/chapter02/src/app/(with-searchbar)/page.tsx

3. 리퀘스트 메모이제이션(Request Memoization)

1) 리퀘스트 메모이제이션(Request Memoization)

"요청을 기억한다" 하나의 페이지를 서버 측에서 렌더링하는 과정에서, 레이아웃 컴포넌트나 페이지 컴포넌트처럼 하나의 페이지를 이루고 있는 여러 개의 컴포넌트에서 발생하는 다양한 API 요청들 중에 중복적으로 발생하는 요청들을 캐싱해서 단 한 번만 요청할 수 있도록 (중복된 요청을 다시 발송하지 않을 수 있도록) 자동으로 데이터 패칭을 최적화 해주는 기능

▼ 리퀘스트 메모이제이션 vs. 데이터 캐시

중복된 API 요청은 안 보내면 그만인데, 굳이 리퀘스트 메모이제이션 기능을 제공하는 이유는 뭘까? → App Router에서 React Server Component의 도입으로 데이터를 패칭하는 패턴이 변화했기 때문 = 서로 다른 컴포넌트에서 동일한 데이터를 필요로 하는 예외적인 경우가 생길 수밖에 없음

2) 실습 진행을 위한 환경 세팅

vscode로 section04 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
vscode에서 새 창을 열고 /onebite-books-server/ 폴더로 열기 → vscode 터미널을 열고 npm run start로 백엔드 서버 열기

3) 실습

/src/app/layout.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section04/chapter03/src/app/layout.tsx

[강의] 한 입 크기로 잘라먹는 Next.js #4

Thu, 14 Aug 2025 07:40:05 GMT

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOop98SToIvyP4ZLiwetJfX_FMn0dbu097kRsUWsuX9BOUxCY1Ihi 위 내용을 바탕으로 강의를 수강하며 정리하였습니다.

App Router 시작하기

1. App Router 시작하기

1) App Router

Next.js 13 버전에 새롭게 추가된 라우터 기존의 Page Router를 완전히 대체

변경된 사항

레이아웃 설정 방식 변경
페이지 라우팅 설정 방식 변경
데이터 페칭 방법 변경
React 18 신규 기능 추가

변경되지 않는 사항

네비게이팅
프리페칭
사전 렌더링

2) 실습을 위한 환경 준비

vscode로 열기 vscode에서 .../onebite-next/ 폴더로 열기
터미널에서 section3 폴더 생성 vscode에서 터미널을 열어서 npx create-next-app@14 section03 명령어 실행 → Ok to proceed에서 y 입력 → 타입스크립트를 사용할 거냐는 질문에 Yes 선택 후 엔터 → ESLint를 사용할 거냐는 질문에 Yes 선택 후 엔터 → Tailwind CSS를 사용할 거냐는 질문에 No 선택 후 엔터 → src/ 디렉토리를 사용할 거냐는 질문에 Yes 선택 후 엔터 → App Router를 사용할 거냐는 질문에 Yes 선택 후 엔터 → import alias를 사용할 거냐는 질문에 No 선택 후 엔터

import alias: 임포트 문을 사용할 때 절대 경로를 사용해서 값을 불러올 수 있게 하는 그러한 기능

npx 명령어
- node-package-execute
- npmjs.com에 실제로 올라가 있는 등록되어 있는 라이브러리들의 최신 버전의 노드 패키지를 다운로드 없이 바로 실행
create-next-app 명령어
- Next.js 공식 문서에서 안내하고 있는 새로운 Next.App을 생성하는 노드.js 패키지
@14 명렁어
- 현재 설치하려는 Next App을 14 버전으로 설치하겠다는 뜻
- 현재 가장 최신 버전과는 약간 차이가 있지만, 페이지 라우터에 존재하는 모든 기능들은 14 버전에서 안정적으로 모두 다 사용 가능

개발 모드로 넥스트 앱 실행 생성된 /section03/ 폴더로 vscode에서 다시 열기 → vscode의 터미널 열기 → npm run dev 명령어 실행 → http://localhost:3000/ 로 이동하면 확인 가능 → (종료 시에는) Ctrl+D나 Ctrl+C 입력

.eslintrc.json 파일명을 eslint.config.mjs로 바꾸고 코드는 아래와 같이 수정하기

import { dirname } from "path";
import { fileURLToPath } from "url";
import { FlatCompat } from "@eslint/eslintrc";

const filename = fileURLToPath(import.meta.url); const __dirname = dirname(filename);

const compat = new FlatCompat({ baseDirectory: __dirname, });

const eslintConfig = [ ...compat.extends("next/core-web-vitals", "next/typescript"), { // 이 부분이 추가됩니다! rules: { "@typescript-eslint/no-unused-vars": "warn", "@typescript-eslint/no-explicit-any": "off", }, }, ];

export default eslintConfig;

```

2. 페이지 라우팅 설정하기

1) App Router 버전의 페이지 라우팅

Page Router 버전의 페이지 라우팅과 방식이 크게 다르지 않음 → 라우팅이 자동 설정된다는 점은 두 방식 모두 동일

Page Router 버전의 페이지 라우터에서는... → /src/pages/ 아래에 있는 파일명이나 폴더명이 페이지의 이름이 되었음

App Router 버전의 페이지 라우터에서는... → /src/app/ 아래에서 page.tsx라는 파일명을 갖는 파일만 페이지가 됨

→ 동적 경로는...

2) 진행할 프로젝트

page 라우터에서 진행했던 '한입 북스 프로젝트'를 그대로 진행

3) 실습 진행을 위한 환경 세팅

vscode로 section03 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기
src/app/global.css 코드 전체 삭제
src/app/page.module.css 코드 전체 삭제
src/app/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section03/chapter02/src/app/page.tsx

4) 실습 진행

검색 페이지 생성: /src/app/search/page.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section03/chapter02/src/app/search/page.tsx
- 쿼리 스트링을 위한 코드 추가
- 페이지에서 내보낼 내용 작성
하나의 도서 아이템을 상세히 조회하는 북페이지 생성: src/app/book/[id]/page.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section03/chapter02/src/app/book/%5Bid%5D/page.tsx
- 동적 경로 라우팅을 설정할 때에는 이와 같이 설정하면 됨
- url 파라미터 값을 해당 페이지에서 활용하는 코드 추가
- 만약 url 파라미터 값을 여러 개 하고 싶다면 page router에서 실행한 것과 동일하게 /[id]/ 폴더명을 수정하면 됨

추가 사항

App Router에서는 쿼리 스트링이나 URL 파라미터와 같은 경로상에 포함되는 값들은 페이지 컴포넌트에게 모두 props로써 전달

서버 컴포넌트의 경우에는 서버 측에서 사전 렌더링을 위해 딱 한 번 실행이 되기 때문에 async 키워드를 붙일 수 있음

3. 레이아웃 설정하기

1) 레이아웃 설정

2) 실습 진행을 위한 환경 세팅

vscode로 section03 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기

3) 실습

/src/app/layout.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section03/chapter03/src/app/layout.tsx
/src/app/(with-searchbar)/layout.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section03/chapter03/src/app/(with-searchbar)/layout.tsx
/src/app/page.module.css 파일과 /src/app/page.tsx 파일을 /src/app/(with-searchbar)/ 폴더 내로 이동

추가 사항

/src/app/layout.tsx

모든 페이지에 다 동일하게 적용이 되는 가장 기초적인 레이아웃
HTML 페이지의 기초 틀을 유지하도록 만들어줌

layout.tsx 코드에서는 page/tsx가 어디 위치에 배치할 지 명시해줘야 함!! → layout.tsx 코드에서 {children}이라는 프롭스를 꼭 전달 받아야 함

특정 페이지들에만 적용되는 공통 레이아웃 적용을 위해서는 라우트 그룹(Route Group) 기능 사용 가능 → /src/app/ 폴더 밑에 새로운 폴더를 생성하는데, 이때 폴더의 이름은 ()로 감싸주기 → 라우트 그룹은 경로 상에는 아무런 영향을 미치지 않음

4. 리액트 서버 컴포넌트 이해하기

1) 리액트 서버 컴포넌트 등장 배경

상호작용이 있는 컴포넌트와 상호작용이 없는 컴포넌트가 섞여 있을 때, 상호작용이 있는 컴포넌트만 수화(Hydration)하면 되는데... Page Router에서는 한 페이지에 속해있기만 한다면 상호작용 여부와 상관 없이 Hydration을 전부 진행해서 TTI까지 늦어지게 됨

그렇다면?

상호작용이 없는 컴포넌트들은 Hydration이 필요가 없기 때문에, 상호작용이 있는 컴포넌트만 구분해서 Hydration을 진행하면 됨 상호작용이 없는 컴포넌트들은 사전 렌더링 때 한 번만 불러오면 됨

2) 리액트 서버 컴포넌트(React Server Component)

React 18v부터 새롭게 추가된, 새로운 유형의 컴포넌트
서버측에서만 실행되는 컴포넌트 (브라우저에서는 실행 X)

▼ 사전 렌더링 시에는 모든 컴포넌트를 불러옴

▼ 수화를 위해 컴포넌트를 불러올 때에는, 상호작용이 있는 컴포넌트들만 구분해서 불러옴

서버 컴포넌트 = 서버에서만 실행되는 컴포넌트 (상호작용이 없는 컴포넌트)
클라이언트 컴포넌트 = 일반적인 리액트 컴포넌트 (상호작용이 없는 컴포넌트)

=> Next.js의 공식 문서에서는 페이지의 대부분은 서버 컴포넌트로 구성할 것을 권장하며, 클라이언트 컴포넌트는 꼭 필요한 경우에만 사용할 것

2) 실습 진행을 위한 환경 세팅

vscode로 section03 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기

3) 실습

/src/app/(with-searchbar)/searchbar.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section03/chapter04/app/(with-searchbar)/searchbar.tsx
- search bar만 클라이언트 컴포넌트로 별개로 작성을 위해 파일 새로 생성
- 클라이언트 컴포넌트로 제작 (상태값 보관, 이벤트 핸들러 필요)

추가 사항

App Router에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트로 동작

서버 컴포넌트에서는 원래 서버에서 할 수 있었던 보안에 민감한 작업들이나 데이터를 패칭해 오는 기능 등의 다양한 작업들을 진행할 수 있게 됨 = 클라이언트 컴포넌트에서는 해당 동작이 불가능 = 클라이언트 컴포넌트에서는 가능한 동작을 서버 컴포넌트에서는 동작 불가능 (Ex. useEffect())

링크는 HTMl의 고유 기능이기 때문에 JS 기능을 활용하는 상호작용은 아니어서, 링크로 이동하는 기능만 포함되어 있다면 해당 컴포넌트는 서버 컴포넌트!

5. 리액트 서버 컴포넌트 주의사항

1) 서버 컴포넌트에는 브라우저에서 실행될 코드가 포함되면 안된다

▼ 불가능!

2) 클라이언트 컴포넌트에는 클라이언트에서만 실행되지 않는다

서버 컴포넌트 = 서버 측에서만 실행되는 것
클라이언트 컴포넌트 = 클라이언트 + 서버 측에서 모두 실행되는 것

3) 클라이언트 컴포넌트에서 서버 컴포넌트를 import 할 수 없다

▼ 불가능!

▼ 왜 불가능하지?

▼ 그럼 이런 경우에서 Next.js는 어떻게 동작하지?

실습으로 확인해보기

src/app/(with-searchbar)/client-component.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section03/chapter05/app/(with-searchbar)/client-component.tsx
src/app/(with-searchbar)/server-component.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section03/chapter05/app/(with-searchbar)/server-component.tsx
src/app/(with-searchbar)/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section03/chapter05/app/(with-searchbar)/page.tsx

추가 사항

만약 어쩔 수 없이 클라이언트 컴포넌트가 서버 컴포넌트를 반드시 자식으로 둬야 하는 경우가 된다면, 그럴 때에는 서버 컴포넌트를 클라이언트 컴포넌트에서 children props로 받아서 렌더링을 시켜주기

4) 서버 컴포넌트에서 클라이언트 컴포넌트에게 직렬화 되지 않는 Props는 전달 불가능하다

직렬화(Serialization)

객체, 배열, 클래스 등의 복잡한 구조의 데이터를 네트워크 상으로 전송하기 위해 아주 단순한 형태(문자열, Byte)로 변환하는 것
예시

그런데, JS 함수는 직렬화가 불가능 = 서버 컴포넌트에서 클라이언트 컴포넌트로 향하는 Props가 될 수 없음

사전 렌더링 과정 진행 중에...

서버 컴포넌트가 실행되면 바로 HTML 태그가 실행되는 것이 아니라, RSC 페이로드라는 JSON과 비슷한 형태의 문자열이 생성
특정 서버 컴포넌트가 자신의 자식인 클라이언트 컴포넌트에게 함수 형태의 값을 props로 전달하고 있다면, 함수값 또한 함께 직렬화가 되어서 RSC 페이로드에 포함이 되어야 하는데 그게 불가능! => 런타임 에러 발생!!

RSC Payload

React Server Component의 순수한 데이터(결과물)
React Server Component를 직렬화 한 결과
RSC Payload에는 서버 컴포넌트의 모든 데이터가 포함
- 서버 컴포넌트의 렌더링 결과
- 연결된 클라이언트 컴포넌트의 위치
- 클라이언트 컴포넌트에게 전달하는 Props 값
예시

6. 네비게이팅

실습 부분만 다시 듣기

1) 네비게이팅

네비게이팅(Navigating) = 페이지 이동을 의미

페이지 이동은 Client Side Rendering 방식으로 처리 = Page Router 버전과 동일한 방식

App Router에서는 Server Component가 추가되어 방식이 살짝 변경됨 (비슷하긴 하지만...)

기존에는 JS Bundle(클라이언트 컴포넌트)만 미리 전달되었지만, App Router에서는 서버 컴포넌트까지 같이 전달

2) 실습 진행을 위한 환경 세팅

vscode로 section03 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 모드 서버 열기

3) 실습

모든 페이지에 다 똑같이 렌더링 되는 글로벌 내비게이션 바 생성 → 루트 레이아웃에 생성하면 됨

/src/app/layout.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section03/chapter06/src/app/layout.tsx
/src/app/(with-searchbar)/search/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section03/chapter06/src/app/(with-searchbar)/search/page.tsx
/src/app/(with-searchbar)/page.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section03/chapter06/src/app/(with-searchbar)/page.tsx
/src/omponents/ 폴더 생성 후 client-component.tsx, server-components.tsx, serachbar.tsx 코드를 해당 폴더로 이동
/src/components/searchbar.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section03/chapter06/src/components/searchbar.tsx

7. 한입북스 UI 구현하기

수업 자료로 올려주신 /src/ 코드를 바탕으로 코드 리뷰 진행

코드 리뷰 필요하면 다시 듣기

[강의] 한 입 크기로 잘라먹는 Next.js #3. (2)

Wed, 13 Aug 2025 11:22:06 GMT

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOop98SToIvyP4ZLiwetJfX_FMn0dbu097kRsUWsuX9BOUxCY1Ihi 위 내용을 바탕으로 강의를 수강하며 정리하였습니다.

Page Router 핵심 정리

10. 사전 렌더링과 데이터 페칭

1) 데이터 패칭...?

Next.js 앱에서 백엔드 서버로부터 데이터를 불러오는 것

리액트 앱에서는...

불러온 데이터를 보관할 State 생성
데이터 페칭 함수 생성
컴포넌트 마운트 시점에 fetchData 호출
데이터 로딩중일 때의 예외 처리

이 과정은 초기 접속 요청부터 데이터 로딩까지 오랜 시간이 소요

▼ 백엔드 서버로부터 현재 페이지에 필요한 데이터를 미리 불러오도록 설정 가능

▼ React App의 데이터 페칭 vs. Next App의 데이터 페칭

Next.js에서 제공하는 사전 렌더링 방식

서버사이드 렌더링(SSR)
- 가장 기본적인 사전 렌더링 방식
- 요청이 들어올 때마다 사전 렌더링 진행
정적 사이트 생성(SSG)
- 바로 위에서 살펴본 사전 렌더링 방식
- 빌드 타임에 미리 페이지를 사전 렌더링 해 둠
증분 정적 재생성(ISR)
- (향후 다룰 예정...)

11. SSR #1. 소개 및 실습

1) SSR(Server Side Rendering)

가장 기본적인 사전 렌더링 방식 요청이 들어올 때마다 사전 렌더링 진행 → 페이지 내부의 데이터를 항상 최신으로 유지 가능 데이터 요청이 늦어질 경우 그 뒤에 동작하는 모든 과정도 같이 느려짐

SSR 공식 문서 https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering

2) 실습 진행을 위한 환경 세팅

vscode로 section02 폴더 열기 → vscode 터미널을 열어서 npm run dev로 서버 열기

3) SSR 방식으로 동작하도록 수정

/src/pages/index.tsx 페이지가 SSR 방식으로 동작하도록 코드 수정

index.tsx의 Home() 컴포넌트보다 먼저 실행되어 컴포넌트에 필요한 데이터를 불러오는 함수 정의 ‼️해당 함수의 리턴값은 props라는 객체 프로퍼티를 포함하는 단 하나의 객체여야만 함 ‼️서버 측에서만 실행되는 함수! → console.log() 함수가 있어도 vscode의 터미널에서만 확인 가능
해당 함수로부터 props 데이터를 전달 받는 페이지 컴포넌트의 props 타입은 어떻게 정의해야 하지? InferGetServerSidePropsType이라는 Next.js에서 제공하는 내장 타입 : props를 전달해주는 함수의 반환값 타입을 자동으로 추론해주는 기능을 보유
코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter11/src/pages/index.tsx

서버에서 window.location을 실행하면?

window가 Undefined가 되어버려서, 결국 Undefined.location을 호출하는 게 되어버림

브라우저 측에서만 실행되는 코드 작성을 하고 싶다면?

(여러 방법이 있음)
가장 쉬운 방법은? useEffect를 이용하는 것

12. SSR #2. 실습

다시 듣기

1) 실습 진행을 위한 환경 세팅

vscode로 section02 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 서버 열기
vscode로 onebite-books-server 폴더 열기 → vscode 터미널을 열어서 npm run start로 백엔드 서버 열기

2) API 호출을 담당할 함수 생성

/src/lib/ 폴더 새로 생성
모든 도서를 불러오는 함수 생성: /src/lib/fetch-books.ts 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter12/src/lib/fetch-books.ts
추천도서 목록 생성: src/lib/fetch-random-books.ts 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter12/src/lib/fetch-random-books.ts
/src/pages/index.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter12/src/pages/index.tsx
/src/lib/fetch-one-books.ts 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter12/src/lib/fetch-one-book.ts

13. SSG #1. 소개

SSG

SSR 방식의 단점을 해결하는 새로운 사전 렌더링 방식 명령어로 빌드할 때, 즉 빌드 타임에 미리 페이지를 사전 렌더링 → 페이지를 딱 한 번만 생성 사전 렌더링에 많은 시간이 소요되는 페이지이더라도 사용자의 요청에는 매우 빠른 속도로 응답 가능 빌드 타임 이후에는 페이지를 새롭게 사전 렌더링 하지 않기 때문에, 최신 데이터를 반영하기에는 어려움 → 정적 페이지에 적합

14. SSG #2. 정적 경로에 적용하기

1) 실습 진행을 위한 환경 세팅

vscode로 section02 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 서버 열기
vscode로 onebite-books-server 폴더 열기 → vscode 터미널을 열어서 npm run start로 백엔드 서버 열기

2) SSG 동작하도록 수정

/src/pages/index.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter14/src/pages/index.tsx
개발 서버를 열었을 경우, 수정이 있을 때마다 사전 렌더링 방식에 상관 없이 바로바로 다시 사전 렌더링 진행 → 프로덕션 서버에서 열어서 확인 가능 → 따로 사전 렌더링 방식을 설정하지 않았을 경우 SSG 방식으로 자동으로 실행
/src/pages/search/index.tsx 코드 수정 SSG 방식에는 쿼리 스트링 값을 꺼내오는 방법은 사용 불가능 (= 검색 결과를 서버로부터 불러오는 동작은 수행 불가) → useEffect()를 통해 백엔드에 직접 요청해서 사용 가능 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter14/src/pages/search/index.tsx

15. SSG #3. 동적 경로에 적용하기

1) 실습 진행을 위한 환경 세팅

vscode로 section02 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 서버 열기
vscode로 onebite-books-server 폴더 열기 → vscode 터미널을 열어서 npm run start로 백엔드 서버 열기

2) SSG 동작하도록 수정

/src/pages/book/[id].tsx 코드 수정
동적 경로를 가진 페이지를 Next.js 서버 측에서 빌드타임에 SSG 방식으로 사전 렌더링하여 미리 생성해두기 위해서는... 선수 과정으로 해당 페이지에 어떠한 URL 파라미터들이 존재할 수 있는지, 그러므로 어떤 경로들이 존재할 수 있는지 설명하는 과정이 필수적으로 요구됨

16. SSG #4. 폴백옵션 설정하기

강의 다시 듣고 정리

1)

17. ISR #1. 소개 및 실습

1) ISR(Incremental Static Regeneration)

증분 정적 재생성 방식

SSG 방식으로 생성된 정적 페이지를 일정 시간을 주기로 다시 생성하는 기술
기존 SSG의 장점(매우 빠른 속도로 응답 가능) + 기존 SSR 장점(최신 데이터 반영 가능)

ISR 공식 문서 https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering

2) 실습 진행을 위한 환경 세팅

vscode로 section02 폴더 열기 → vscode 터미널을 열어서 npm run start로 프로덕션 서버 열기
vscode로 onebite-books-server 폴더 열기 → vscode 터미널을 열어서 npm run start로 백엔드 서버 열기

3) ISR 동작하도록 수정

/src/pages/index.tsx 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter17/src/pages/index.tsx

18. ISR #2. 주문형 재 검증(On-Demand-ISR)

1) 주문형 재 검증(On-Demand-ISR)

ISR의 한계

만약 시간과 관계 없이 사용자의 행동에 따라 데이터가 업데이트 되는 페이지가 있다면? → 기존의 ISR 방식은 사용하기가 어려움
만약 사용자의 수정은 하루 뒤에 일어났는데 웹사이트는 60초 단위로 갱신된다면? → 갱신될 필요가 없는 상황에서도 갱신이 이루어짐

주문형 재 검증

요청을 받을 때마다 페이지를 다시 생성하는 ISR 방식

2) 실습 진행을 위한 환경 세팅

vscode로 section02 폴더 열기 → vscode 터미널을 열어서 npm run start로 프로덕션 서버 열기
vscode로 onebite-books-server 폴더 열기 → vscode 터미널을 열어서 npm run start로 백엔드 서버 열기

3) ISR 동작하도록 수정

/src/pages/index.tsx 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter18/src/pages/index.tsx

19. SEO 설정하기

지금까지 제작한 한입북스 서비스를 실제로 배포하기 위해, 사전 준비 단계로 페이지 별로 다양한 메타 태그들을 설정해서 아주 기본적인 SEO를 설정하기 = 아주 기본적인 검색엔진 최적화

1) 실습 진행을 위한 환경 세팅

수업 자료로 올려주신 파일 다운로드 후 압축 해제 → 썸네일 파일과 파비콘 파일을 /public/ 폴더 아래에 삽입 https://github.com/onebite-nextjs/vod__onebite-next-codes/tree/main/section02/chapter19/public
vscode로 section02 폴더 열기 → vscode 터미널을 열어서 npm run dev로 개발 서버 열기

2) 페이지별 메타 태그를 설정해서 페이지별로 SEO 설정

/src/pages/index.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter19/src/pages/index.tsx
/src/pages/search/index.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter19/src/pages/search/index.tsx
/src/pages/book/[id].tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter19/src/pages/book/[id].tsx 페이지가 로딩 중인 상황이라도(fallback 상태일 지라도) 기본적인 메타 태그들은 설정되도록 코드를 짜야 함

20. 배포하기

나는 코드 다시 수정해서 재시도 해보기...

1) 배포

프론트엔드 어플리케이션을 배포할 때는 클라우드 서비스를 통해 배포하는 경우가 많음 → 파이어베이스, 넷니파이 등등...

Next.js는 보통 Vercel을 통해 배포함

2) 배포를 위한 기본 설정

Vercel 사이트(https://vercel.com/)에서 회원가입 하기 → 나는 github으로 연동
vscode의 터미널에서 Vercel에 명령어 한번만으로 Next.js 앱을 빌드할 수 있는 도구 설치 npm install -g vercel 실행
vscode의 터미널에서 Vercel에 로그인 → github에 갖다대서 enter 누르고 진행
배포를 위해, vscode의 터미널에서 vercel 명령어 입력 → 현재 프로젝트 폴더를 배포할 거냐는 질문에 대해 y 입력 → 어떤 scope를 선택해서 배포할 거냐는 질문에 뜨는 프로젝트를 선택하고 엔터 입력 → 기존에 존재하는 프로젝트에 연결할 거냐는 질문에 n 입력 → 새로 생성할 프로젝트 이름은 뭐냐는 질문에 onebite-books-page로 입력 → 코드가 위치할 디렉토리 위치는 어디냐는 질문에 자동으로 설정된 기본값 그대로 하기 위해 바로 엔터 누르기 → 자동으로 설정된 옵션들을 바꾸고 싶냐는 질문에 n 입력 → 추가 프로젝트 옵션을 바꾸고 싶냐는 질문에 n 입력 → 배포 진행중 → 배포 진행 완료 후 뜨는 링크를 통해 들어가면 확인 가능
이때, 백엔드 서버는 안 열려 있기 때문에 DB에서 데이터를 불러오지 못하고 있음 → /onebite-books-server/로 새 창을 하나 열어서 vscode 터미널을 새로 열기 → 터미널에서 vercel 입력 → 현재 프로젝트 폴더를 배포할 거냐는 질문에 대해 y 입력 → 어떤 scope를 선택해서 배포할 거냐는 질문에 뜨는 프로젝트를 선택하고 엔터 입력 → 기존에 존재하는 프로젝트에 연결할 거냐는 질문에 n 입력 → 새로 생성할 프로젝트 이름은 뭐냐는 질문에 기본값으로 설정된 걸로 진행을 위해 엔터 입력 → 코드가 위치할 디렉토리 위치는 어디냐는 질문에 자동으로 설정된 기본값 그대로 하기 위해 바로 엔터 누르기 → 바로 배포 작업 진행 → 배포 완료
백엔드 서버 도메인 확인 후 코드 수정 → vercel에서 배포한 백엔드 서버(onebite-books-server)에 들어가서 Production Deployment에서 'Domains' 값을 복사 → src/lib/ 아래에 있는 fetch 파일에 각각 백엔드 서버로부터 데이터를 불러오는 함수의 url을 수정
수정사항을 반영하기 위한 재배포 진행 → vscode에서 section2/를 기준으로 폴더 열고 터미널 열기 → 즉시 프로덕션 모드로 배포하기 위해 vercel --prod 명령어 실행 → 배포 진행 후 완료

21. Page Router 정리

1) Page Router의 장점

파일 시스템 기반의 간편한 페이지 라우팅 제공
- 정적 경로와 동적 경로 모두 손쉽게 라우팅 가능
다양한 방식의 사전 렌더링 제공
- 기존의 리액트 앱이 갖던 느린 FCP라는 단점을 효과적으로 해결
- 방식: SSR, SSG, ISR

2) Page Router의 단점

페이지별 레이아웃 설정이 번거롭다
- 추후 App Router 버전에서는 파일 하나만 배치하는 것만으로도 페이지별 레이아웃 설정 가능
데이터 페칭이 데이터 컴포넌트에 집중된다
불필요한 컴포넌트들도 JS Bundle에 포함된다

[강의] 한 입 크기로 잘라먹는 Next.js #3. (1)

Tue, 12 Aug 2025 03:40:09 GMT

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%ED%81%AC%EA%B8%B0-nextjs?srsltid=AfmBOop98SToIvyP4ZLiwetJfX_FMn0dbu097kRsUWsuX9BOUxCY1Ihi 위 내용을 바탕으로 강의를 수강하며 정리하였습니다.

Page Router 핵심 정리

1. Page Router를 소개합니다

1) Page Router

현재 많은 기업에서 사용되고 있는 안정적인 라우터 React Router처럼 페이지 라우팅 기능 제공

Pages라는 이름의 폴더를 기준으로 페이지를 라우팅

Pages 이름의 폴더 아래에 JS 파일이 있다면 파일의 경로와 이름에 따라 페이지 라우팅 제공
파일명 기반의 페이지 라우팅 가능
폴더명 기반의 페이지 라우팅도 가능
동적 경로를 갖는 페이지의 라우팅도 간단히 설정 가능 : 파일명을 대괄호([])로 묵어주게 되면 자동으로 동적 경로로 인식하여 매핑 가능 > 동적 경로(Dynamic Routes): 경로 상에 어떠한 가변적인 값을 포함하고 있는 경로

2) Page Router 버전의 Next App 생성하기

a. 디렉토리 생성 및 실행

원하는 위치에 프로젝트 폴더 생성 나의 폴더 위치: .../onebite-next/
vscode로 열기 vscode를 열어서 생성한 폴더 열기
터미널에서 section2 폴더 생성 vscode에서 터미널을 열어서 npx create-next-app@14 section02 명령어 실행 → Ok to proceed에서 y 입력 → 타입스크립트를 사용할 거냐는 질문에 Yes 선택 후 엔터 → ESLint를 사용할 거냐는 질문에 Yes 선택 후 엔터 → Tailwind CSS를 사용할 거냐는 질문에 No 선택 후 엔터 → src/ 디렉토리를 사용할 거냐는 질문에 Yes 선택 후 엔터 → App Router를 사용할 거냐는 질문에 No 선택 후 엔터 → import alias를 사용할 거냐는 질문에 No 선택 후 엔터

import alias: 임포트 문을 사용할 때 절대 경로를 사용해서 값을 불러올 수 있게 하는 그러한 기능

npx 명령어
- node-package-execute
- npmjs.com에 실제로 올라가 있는 등록되어 있는 라이브러리들의 최신 버전의 노드 패키지를 다운로드 없이 바로 실행
create-next-app 명령어
- Next.js 공식 문서에서 안내하고 있는 새로운 Next.App을 생성하는 노드.js 패키지
@14 명렁어
- 현재 설치하려는 Next App을 14 버전으로 설치하겠다는 뜻
- 현재 가장 최신 버전과는 약간 차이가 있지만, 페이지 라우터에 존재하는 모든 기능들은 14 버전에서 안정적으로 모두 다 사용 가능

개발 모드로 넥스트 앱 실행 생성된 section02 폴더로 vscode에서 다시 열기 → vscode의 터미널 열기 → npm run dev 명령어 실행 → http://localhost:3000/ 로 이동하면 확인 가능 → (종료 시에는) Ctrl+D나 Ctrl+C 입력

b. pages 폴더 살펴보기

Pages 폴더의 index.tsx 확인 Home 컴포넌트가 사용되고 있는 것을 확인 가능
/src/pages/test.tsx 파일 새로 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter01/src/pages/test.tsx → http://localhost:3000/test 로 이동하면 화면에 TEST가 출력되는 것을 확인 가능
Pages 폴더의 _app.tsx, _document.tsx 확인 Pages 폴더 밑에 있긴 하지만 페이지 역할을 하는 파일은 아님 Next.js 앱의 모든 페이지에 공통적으로 적용될 로직이나 공통적으로 적용될 레이아웃 또는 데이터를 다루기 위해 필요한 파일

_app.tsx
- 리액트에서의 App 컴포넌트와 동일한 역할
- 모든 컴포넌트들의 부모 컴포넌트 역할
- 모든 페이지 역할을 하는 컴포넌트들의 부모 컴포넌트 역할 수행
- 아래 코드에서 Component 매개변수: 현재 페이지 역할을 할 컴포넌트를 받음 pageProps 매개변수: Component 매개변수에게 전달될 페이지의 프롭스들을 모두 객체로 보관한 것
```
export default function App({ Component, pageProps }: AppProps) {
return (
  <>
    글로벌 헤더
    
  
);
}
```
_document.tsx
- 모든 페이지에 공통적으로 적용되어야 하는 Next.js 앱의 HTML 코드를 설정하는 컴포넌트
- 리액트 앱의 index.html과 비슷한 역할

next.config.mjs 파일 넥스트 앱의 설정을 관리하는 파일 기본적으로 reatStrictMode가 true로 켜져 있는데, false로 수정 (실습시 디버깅 용이함을 위해)
```
/** @type {import('next').NextConfig} */
const nextConfig = {
 reactStrictMode: false,
};

export default nextConfig;
```

2. 페이지 라우팅 설정하기

1) 앞으로 구현할 프로젝트

한입 북스(Onebite Books) 프로젝트

Index 페이지
- 인덱스 경로(/)에 해당하는 페이지
- 등록된 도서의 리스트를 볼 수 있음
Search 페이지
- 서치 경로(/search)에 해당하는 페이지
- 제목, 저자 별로 검색 결과를 볼 수 있음
Book 페이지
- /book/{book_id} 경로의 페이지
- 특정 도서의 상세 정보 확인 가능

2) 실습 진행을 위한 환경 세팅

vscode로 section02 폴더 열기 → vscode 터미널을 열어서 npm run dev로 서버 열기
src/pages/index.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter02/src/pages/index.tsx
src/styles/global.css 코드 수정 전부 삭제
src/styles/Home.module.css 코드 파일 삭제

3) 검색을 위한 페이지 생성

src/pages/search/index.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter02/src/pages/search/index.tsx

+ 쿼리 스트링 설정

경로의 끝에 물음표와 함께 명시되는 값이므로 페이지 경로 자체에는 영향을 주지 않음 = 폴더 구조를 따로 변경해야 하지는 않음
단, 사용을 위해서는 파일의 최상단에 useRouter라는 훅을 Next Router라는 패키지로부터 불러오면 됨 import { useRouter } from "next/router";
Next.js는 전달한 쿼리 스트링을 읽는 과정 중에서 컴포넌트를 한 번 더 렌더링 함 → 한 번 더 렌더링 할 때 쿼리 스트링을 읽어옴
쿼리 스트링을 읽는 방법 const { q } = router.query; const { id } = router.query;

4) 상세한 정보 조회를 위한 페이지 생성

북 페이지는 가변적인 값을 포함하는 동적 경로를 사용 → url 파라미터를 사용해서 동적 경로를 갖는 페이지 생성
src/pages/book/[[...id]].tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter02/src/pages/book/%5B%5B...id%5D%5D.tsx
- 이때 코드를 [...idx].tsx라고 설정해두면 실제 웹에서 http://localhost:3000/book/123/123/123/123 과 같이 접속하게 될 경우, 모든 id에 다 대응할 수 있음 = 이런 코드를 Catch All Segment라고 부름
- 이때 파일명을 [[...idx]]tsx라고 설정해두면 실제 웹에서 http://localhost:3000/book 과 같이 접속하게 될 경우에도 404 에러가 뜨지 않고 접속 가능 = 이런 코드를 Optional Catch All Segment라고 부름

5) 존재하지 않는 경로로 접속했을 때 트는 페이지 생성

src/pages/404.tsx 코드 생성 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter02/src/pages/404.tsx

3. 네비게이팅

Key Point: 어떻게 하면 클라이언트 사이드 렌더링 방식으로 페이지를 이동시킬 수 있는가?

1) 실습 진행을 위한 환경 세팅

vscode로 section02 폴더 열기 → vscode 터미널을 열어서 npm run dev로 서버 열기

2) 네비게이션 바 생성

src/pages/_app.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter03/src/pages/_app.tsx
Next.js 앱에서는 링크를 만들 때 태그보다 자체적으로 제공하는 링크 컴포넌트를 이용하는 것이 훨씬 좋음
- 태그는 클라이언트 사이드 렌더링 방식 = 페이지를 이동시키는 게 아닌 일반적인 방식으로 서버에게 새로운 페이지를 매번 다시 요청 = 비교적 느린 방식

4. 프리페칭(Pre-Fetching)

1) Pre-Fetching...?

"사전에 미리 불러온다"

Next.js의 프리페칭

현재 사용자가 보고 있는 페이지 내에서 이동할 가능성이 있는 모든 페이지들을 사전에 미리 불러놓는 기능
사용자들이 다른 페이지로 이동할 때, 페이지 이동을 매운 빠른 속도로 지체 없이 처리해주기 위한 것

▼ 아래의 동작 과정은 현재 페이지에 대해서만 동작하는 것

▼ 최종 동작 과정

웹에서 프리패칭 확인 방법

F12 - 네트워크를 통해 페이지를 이동시키면 불러오는 JS 코드들을 확인 가능

2) 실습 진행을 위한 환경 세팅

vscode로 section02 폴더 열기 → vscode 터미널을 열어서 npm run build로 서버 열기
npm run dev로 개발 모드를 가동해놓고 있을 때에는 프리패칭 동작 X → 프리패칭 동작을 확인하려면 빌드에서 실행하는 프로덕션 모드로 실행 시켜야 함

3) 링크 컴포넌트가 아니어도 프리패칭 가능하도록 수정

/src/pages/_app.tsx 코드에서와 같이 컴포넌트로 명시된 경로가 아니라면 프리패칭이 이루어지지 않음

그렇다면 어떻게 해야 하는가? → 앱 컴포넌트가 화면에 마운트 되었을 때, 라우터 객체의 특정 메서드를 통해 프로그래메틱하게 테스트 페이지를 프리매칭 하도록 코드 작성하면 됨

/src/pages/_app.tsx 코드 수정 https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter04/src/pages/_app.tsx

4) 프리패칭이 자동으로 가능하더라도 기능하지 않도록 수정

▼ 아래와 같이 수정하면 됨


    search

5. API Routes

1) API Routes...?

Next.js에서 API를 구축할 수 있게 해주는 기능

API Routes 공식 문서 https://nextjs.org/docs/pages/building-your-application/routing/api-routes

사실상 자주 사용되는 기능은 아니기 때문에... 우선 있다 정도로만 알고 있기

2) 실습 진행을 위한 환경 세팅

vscode로 section02 폴더 열기 → vscode 터미널을 열어서 npm run dev로 서버 열기

3) API 동작 폴더 확인

/src/pages/api/ 아래에서 동작하는 파일은...
- 웹페이지가 아닌 API 라우터로써, 즉 API 응답을 정의하는 파일로써 자동으로 설정
- API의 경로는 폴더 구조에 맞춰서 갖게 됨

4) 자체 API 제작

/src/pages/api/time.ts 코드 생성
- 현재 시간을 반환하는 API
- https://github.com/onebite-nextjs/vod__onebite-next-codes/blob/main/section02/chapter05/src/pages/api/time.ts

6. 스타일링

1) 실습 진행을 위한 환경 세팅

vscode로 section02 폴더 열기 → vscode 터미널을 열어서 npm run dev로 서버 열기

2) Next.js 앱의 스타일링

리액트의 컴포넌트 스타일을 설정하는 과정과 동일
앱 컴포넌트가 아니라면 css 파일을 그대로 불러오는 것은 제한
WHY?* css 충돌 방지를 위해
그렇다면 css는 어떻게 불러와야 할까? → Next.js가 기본적으로 제공하는 CSS 모듈 기능 활용 가능 : 기존의 css 파일을 마치 모듈처럼 사용할 수 있도록 돕는 기능 : CSS 파일에 작성해둔 클래스 네임들이 다른 css 파일과 중복되지 않도록 자동으로 클래스 네임들을 유니크한 이름으로 파일마다 변환시켜주는 기능

3) 스타일링 설정

/src/pages/index.tsx 파일의 컴포넌트 스타일 지정
- 인라인 스타일로 지정 : index.tsx에서 직접