1. 페이지네이션 구현페이지네이션은 전체 데이터를 한 번에 불러오는 것이 아니라,페이지 단위로 나누어 데이터를 조회하고 이동하는 방식이다.무한 스크롤과 달리 사용자가 명시적으로 페이지를 이동한다는 특징이 있다. 구현은 크게 두 가지로 나눠서 진행했다.페이지 상태 관리페이지 단위 데이터 조회1.1 페이지 상태 관리현재 페이지를 기준으로 데이터를 조회해야 하기 때문에, 컴포넌트에서 페이지 상태를 먼저 정의해야 한다.const [page, setPage] = useState(0);또한 페이지당 데이터 개수를 상수로 정의한다.const PAGE_SIZE = 10;1.2 데이터 조회 (useQuery)페이지네이션에서는 useInfiniteQuery가 아니라 useQuery + page 상태를 사용한다.다음 훅을 ..

1. 무한 스크롤 구현 무한 스크롤은 사용자가 페이지를 계속 내려도 추가 콘텐츠를 이어서 불러오는 방식이다.구현은 크게 두 가지로 나눠서 진행했다.스크롤 하단 감지데이터 추가 로딩1.1 스크롤 하단 감지페이지 최하단에 감지용 `div`를 두고, 해당 요소가 화면에 보일 때를 기준으로 다음 데이터를 요청한다.이때 Intersection Observer를 사용하면 스크롤 이벤트를 직접 처리하지 않고도특정 요소가 화면에 들어왔는지 여부를 효율적으로 감지할 수 있다.React에서는 `react-intersection-observer`를 사용하면 쉽게 구현할 수 있다.npm i react-intersection-observerreact-intersection-observer에서 제공하는 `useInView` 훅을..

1. 구현 목표OpenAI와 Tanstack Query를 활용해사용자가 입력한 정보를 기반으로, 맞춤형 면접 질문을 생성해주는 기능을 구현했다.기능1)카테고리, 보유 기술, 그리고 다루고 싶은 주제를 입력하면 해당 내용을 반영한 맞춤형 질문이 생성된다.기능2)생성된 질문을 바탕으로, AI 면접관과 실제 인터뷰처럼 대화를 이어갈 수 있도록 한다.생각보다 구현 자체는 어렵지 않았지만, 요청 흐름과 상태를 어떻게 나눌지 정리하는 과정이 까다로웠다.2. OpenAI 설정2.1 OpenAI API KEY 발급OpenAI API를 사용하기 위해 API Key를 먼저 발급한다. https://platform.openai.com/api-keys에 접속한 뒤,우측 상단의 `Create new secret key` 버튼을..

1. 왜 slug가 필요한가?기존 URL의 문제점기존에는 게시글을 UUID 기반 URL로 접근했다.이 방식은 기능적으로는 문제가 없지만, 주소가 지나치게 길고 어떤 내용의 글인지 바로 파악하기 어렵다.또한 검색 엔진 입장에서도 의미 없는 문자열이기 때문에 SEO 측면에서도 불리하다.`slug` 을 활용해 개선이를 개선하기 위해 URL에 `slug`를 활용한다.질문 상세 페이지를 `app/question/[idx]/[slug]/page.tsx` 구조로 구성하면, URL을 다음과 같이 노출할 수 있다.`slug`를 사용하니 주소만 봐도 어떤 질문인지 바로 알 수 있고,제목에 포함된 키워드가 URL에 그대로 드러나 SEO에도 유리하다. 또한 실제 내부 식별자인 UUID를 URL에 노출하지 않기 때문에, 구조..

1. 들어가며구현하고자 하는 페이지는 입력 항목이 매우 많아 스크롤이 길어지는 문제가 있다.따라서 스크롤 위치를 실시간으로 감지하고, 클릭 시 해당 위치로 이동하는 Scroll Spy 목차를 도입하기로 했다. 스크롤 위치를 기준으로 활성 섹션을 판단하기 위해 IntersectionObserver를 사용하면,별도의 스크롤 이벤트 처리 없이 동기화를 구현할 수 있다. Intersection Observer API - Web API | MDNIntersection Observer API는 다음과 같은 상황이 발생했을 때 호출되는 콜백 함수를 구성할 수 있습니다. 대상 요소는 기기의 뷰포트 또는 특정 요소와 교차합니다. 특정 요소는 Intersection Observer API의developer.mozilla...

이번 포스팅에서는 Prettier를 기준 포맷터로 설정하고, TailwindCSS를 사용하고 있기 때문에 Tailwind 전용 플러그인까지 함께 적용하는 방법을 알아보자.1. Prettier1.1 Prettier란?Prettier는 설정 옵션을 최소화하고, 정해진 규칙에 따라 코드를 강제로 변환한다.prettier 공식 문서Prettier의 장점시간 절약: 코드를 작성할 때 서식에 신경 쓰지 않고 막 써도 저장 시점에 자동으로 예쁘게 바뀐다.팀 스타일 통합: 팀원 모두가 같은 설정을 공유하면,누가 코드를 수정해도 스타일이 변하지 않아 Git Diff(변경 사항 확인)가 깔끔해진다.1.2 Prettier 설치1. VSCode에 Prettier 확장 프로그램 설치CLI로도 Prettier를 실행할 수는 있지..

1. 들어가며사용자가 현재 사용 중인 페이지를 직관적으로 파악하기 위해 Header Active Link 처리를 구현해 보자.2. App Router에서 현재 경로 가져오기Next.js App Router는 현재 경로를 문자열로 반환하는 `usePathname` 훅을 제공한다. import { usePathname } from "next/navigation";const pathname = usePathname(); 이 훅과 JS 메서드 `startsWith`를 사용하면 Header 메뉴의 활성 여부를 판단할 수 있다. App Router의 라우팅에 대한 자세한 내용은 여기에서 자세히 확인할 수 있다.3. usePathname와 startsWith로 Active Link 판별하기`startsWith`는 ..

1. 개발 환경 세팅1.1 프로젝트 생성Next.js 최신 버전을 설치합니다.npm create next-app@latest .1.2 스타일링 설정Tailwind CSS와 Prettier 설정을 마친 후, UI 컴포넌트 라이브러리인 shadcn/ui를 추가합니다.🔗 [Tailwind] Tailwind CSS 설치 및 플러그인 추천🔗 [shadcn/ui] Tailwind 기반 디자인 시스템 shadcn/ui 사용하기2. 레이아웃 및 UI 구성시맨틱 태그를 활용하여 웹 표준을 지키는 구조적인 레이아웃을 잡습니다. 퍼블리싱이 번거로운 경우, 미리 준비된 layout 브랜치를 clone하여 활용할 수 있습니다.git clone -b layout https://github.com/MyNameSieun/Next..

1. 배포하기 (Deploy to Vercel)Next.js 프로젝트는 Vercel로 배포하는 것이 가장 쉽다.Vercel은 Next.js 제작사이므로 빌드 감지와 CDN, 함수 실행 환경까지 기본 제공해 빠르게 배포할 수 있다. Vercel: Build and deploy the best web experiences with the AI Cloud – VercelVercel gives developers the frameworks, workflows, and infrastructure to build a faster, more personalized web.vercel.com GitHub와 CLI 방식을 모두 사용하여 배포를 진행할 것이다. 프론트는 GitHub와 연동하여 배포를 진행하고, 백엔드는 G..

1. 이미지 최적화웹페이지에서 평균적으로 많은 용량을 차지하는 요소는 이미지이다.이미지는 평균적으로 웹페이지의 용량의 58%나 차지한다.따라서 이미지 최적화하는 것은 매우 중요하다. 1.1 기존 문제점아래와 같은 일반적인 `` 태그를 사용하는 경우, 여러 가지 비효율이 발생한다.1. 이미지 파일이 JPEG 등 용량이 큰 포맷으로 제공됨2. 화면에 보이지 않는 이미지까지 한 번에 로드됨3. 실제 렌더링 크기보다 더 큰 사이즈의 이미지를 불필요하게 불러옴1.2 Image 컴포넌트 사용Next.js는 기본적으로 이미지 최적화 기능을 내장하고 있다.`` 대신 `` 컴포넌트를 사용하면 된다.import Image from "next/image";`Image` 컴포넌트는 아래와 같은 최적화 기능을 자동으로 제공한다..

1. 패럴렐 라우트 (Parallel Route)⚠️ 패럴렐 라우트가 적용이 안될 때페럴렐 라우트를 실습하기에 앞서, 개발 중 페럴렐 라우트가 적용되지 않을 수 있다. 이는 next.js의 버그이므로개발모드 종료 후 `.next` 폴더 삭제한 뒤, 다시 개발모드 실행하면 대부분 해결된다.1.1 패럴렐(병렬) 라우트란?Parallel Route(병렬 라우트)는 동일한 레이아웃 안에서 여러 페이지를 동시에 혹은 조건부로 렌더링 할 수 있는 기능이다.보통 대시보드, 피드 화면 등처럼 여러 콘텐츠 영역을 동시에 표시해야 하는 동적인 페이지에서 사용된다.예를 들어, 대시보드 페이지는, Parallel Routes를 사용하여 `team` 및 `analytics` 페이지를 동시에 렌더링 할 수 있다:1.2 Paral..

이정환 님의 [ 한 입 크기로 잘라먹는 Next.js ↗ ]를 수강한 후 정리한 글입니다. 1. 서버 액션 (Server Action)1.1 서버 액션이란?서버 액션(Server Action) 은 브라우저에서 직접 호출할 수 있는 서버에서 실행되는 비동기 함수 이다.기존처럼 별도의 API 엔드포인트를 만들 필요 없이 단순히 함수 하나만 작성해도 서버 작업을 실행할 수 있다.📘 Next.js 한글 문서 정의“폼 제출이나 데이터 수정(생성, 업데이트, 삭제)을 처리하기 위해 서버에서 실행되는 함수로, 클라이언트 컴포넌트에서도 호출할 수 있습니다.”왜 서버 액션을 사용할까?서버 코드가 클라이언트에 노출되지 않아 보안이 강화된다.DB 접근·데이터 수정 등 서버 전용 로직을 수행하면서 별도의 API 파일을 만들..

1. 기존의 에러 처리 방식일반적으로 React 프로젝트에서는`fetch()` 구문마다 `try-catch` 블록을 추가해 에러를 개별적으로 처리한다. 하지만 이렇게 되면 모든 API 호출마다 중복된 코드가 생기고, 에러 처리가 컴포넌트마다 흩어져 관리가 어렵다. Next.js는 이를 개선하기 위해 라우트 단위 에러 핸들링 시스템을 제공한다.특정 경로에서 발생하는 모든 오류를 한꺼번에 처리할 수 있다.2. error.tsx 파일로 라우트 단위 에러 처리Next.js에서는 특정 폴더(라우트) 내에서 오류가 발생했을 때,해당 폴더에 `error.tsx` 파일이 존재하면 그 컴포넌트가 대신 렌더링 된다.// app/(with-searchbar)/error.tsx"use client";const Error =..

1. 스켈레톤 UI1.1 스켈레톤 UI란?실제 콘텐츠가 로딩되기 전, 사용자에게 화면이 로드 중임을 알려주기 위해보여주는 '뼈대' 형태의 사용자 인터페이스를 의미한다.즉, 스켈레톤 UI(Skeleton UI)는 이름 그대로 “뼈대” 역할을 하는 UI이다. 대표적인 예시는 YouTube의 로딩 화면이다. 영상 썸네일과 텍스트 영역의 자리를 회색 박스로 표시해 두어, 사용자는 곧 어떤 콘텐츠가 나타날지 시각적으로 예측할 수 있다.이렇게 스켈레톤 UI를 적용하면 사용자에게는 컨텐츠가 끝났을 때 나의 눈앞에 나타나게 될 것인지 예상할 수 있도록 만들어 줄 수 있어 직관적인 사용자 경험(UX)을 제공할 수 있다. React Loading Skeleton 이라는 자동으로 스켈레톤 UI를 만들어주는 라이브러리를 사용..

이정환 님의 [ 한 입 크기로 잘라먹는 Next.js ↗ ]를 수강한 후 정리한 글입니다. 1. 스트리밍(Streaming)1.1 스트리밍이란?스트리밍(Streaming)은 큰 데이터를 한 번에 전송하지 않고, 여러 조각으로 나누어 순차적으로 전송하는 기술이다.스트리밍의 대표적인 예시로는 OTT 서비스가 있다. OTT 서비스는 대용량 영상 파일을 빠른 속도로 시청하는 기능을 제공한다.이를 가능하게 해주는 것이 바로 스트리밍이다. 서버가 클라이언트로 데이터를 전송할 때 데이터 크기가 너무 크거나, 서버 측에서 데이터를 준비하는 시간이 오래 걸릴 경우,데이터를 여러 청크(chunk) 단위로 나누어 순차적으로 보내면사용자는 모든 데이터가 완전히 도착하지 않아도 지금까지 받은 부분을 먼저 볼 수 있다.모든 데이..

이정환 님의 [ 한 입 크기로 잘라먹는 Next.js ↗ ]를 수강한 후 정리한 글입니다. 1. 클라이언트 라우터 캐시1.1 클라이언트 라우터 캐시란?클라이언트 라우터 캐시란, 그 이름 그대로 브라우저(클라이언트)에 저장되는 캐시를 말한다.Next.js 앱에서 페이지 간 이동을 더 효율적으로 처리하기 위해,공통된 레이아웃이나 컴포넌트 데이터를 브라우저에 보관해두는 기술이다.1.2 기존 문제점: 중복된 데이터 요청인덱스 페이지: 정적 페이지(Static Page)라고 가정→ 먼저 풀 라우트 캐시(Full Route Cache) 에서 확인 후→ 존재하면 캐시된 데이터를 바로 반환서치 페이지: 동적 페이지(Dynamic Page)라고 가정→ 풀 라우트 캐시를 건너뛰고→ 매번 새로운 페이지를 생성해 브라우저로 ..

이정환 님의 [ 한 입 크기로 잘라먹는 Next.js ↗ ]를 수강한 후 정리한 글입니다. 1. 라우트 세그먼트 옵션이 필요한 이유이전 포스팅에서 풀 라우트 캐시를 적용하기 위해서는 특정 페이지 내의 모든 컴포넌트가 동적 함수를 사용하고 있는지,혹은 캐싱되지 않는 데이터 페칭을 하고 있는지 하나하나 확인해야 했다.하지만 프로젝트가 커질수록 컴포넌트의 개수도 많아지고 의존 관계도 복잡해지기 때문에,모든 컴포넌트를 일일이 검증하는 것은 현실적으로 매우 어려운 작업이 된다.이런 상황에서 사용하는 것이 바로 라우트 세그먼트 옵션이다.이 옵션을 통해 각 페이지의 캐싱, revalidate 주기, 정적/동적 여부 등을 직접 강제로 설정할 수 있다.2. 라우트 세그먼트 옵션이란?라우트 세그먼트 옵션이란, 특정 페이지..

이정환 님의 [ 한 입 크기로 잘라먹는 Next.js ↗ ]를 수강한 후 정리한 글입니다. 1. 풀 라우트 캐시 개념과 작동 원리1.1 풀 라우트 캐시란?Next 서버 측에서 빌드 타임에 특정 페이지의 렌더링 결과를 캐싱하는 기능이다.Page Router의 SSG 방식과 유사하게, 빌드 타임에 페이지를 정적으로 만들어 두고,요청이 들어오면 캐시에 저장된 HTML 페이지를 그대로 응답한다. 즉, 페이지 단위 캐싱 기능이다.서버에서 사전 렌더링이 완료되면, 그 결과가 풀 라우트 캐시(Full Route Cache)라는 이름으로 서버 측에 미리 저장된다. 이 덕분에 브라우저 요청이 들어왔을 때 빠르게 캐시 된 페이지가 반환된다.1.2 풀 라우트 캐시와 SSG/ISRNext.js App Router는 기본적으로..

1. App Router의 데이터 페칭1.1 기존 Page Router의 데이터 페칭 방식기존 Page Router에서는 오직 서버 측에서만 실행되는 특수 함수를 통해 데이터를 가져왔다.SSR (서버 사이드 렌더링)export async function getServerSideProps(){ return {props :{...}}}SSG (정적 사이트 생성)export async function getStaticProps(){ return {props :{...}}}Dynamic SSG (동적 경로에 대한 정적 페이지 생성)export async function getStaticPaths(){ return {paths : [...], fallback :...}}이 함수들은 모두 서버 환경에서 데이터..

URL 환경 변수의 필요성URL 주소 변경 시에도 코드 수정 필요 X일반적으로 API 요청을 보낼 때 다음과 같이 URL을 코드에 직접 작성하곤 한다.fetch("http://localhost:12345/book")이렇게 하면 URL 주소 변경 시 모든 컴포넌트 파일을 찾아가며 하드코딩된 URL을 일일이 수정해야 한다.하지만 환경 변수를 사용하면 코드 수정 없이 `.env` 파일의 값만 바꾸면 되기 때문에 유연하게 관리할 수 있다.fetch(`${process.env.NEXT_PUBLIC_API_URL}/book`);서버 주소를 분리해 관리프로젝트에는 개발 환경과 배포 환경의 주소가 다를 경우 매번 코드를 수정해야 한다.예를 들어 로컬에서는 `http://localhost:12345/book`,배포 시에..

1. App Router 렌더링 구조App Router는 `app/` 디렉토리의 파일 구조에 따라 UI가 계층적으로 렌더링된다.`page.tsx`와 `layout.tsx`는 각 라우트의 렌더링 계층을 구성하는 핵심 파일이다.두 파일은 “어디까지 유지되고, 어디서부터 새로 렌더링될지”를 결정한다.layout.tsx ↓page.tsx파일 역할 유지 범위 렌더링 시점용도page.tsx개별 페이지 콘텐츠해당 경로이동 시 새로 렌더링페이지 UIlayout.tsx공통 UI 구조하위 경로 전체유지됨 (리렌더링 안됨)Header, Footer, Navigation2. page.tsx - 실제 페이지 콘텐츠`page.tsx`는 해당 경로의 메인 UI를 렌더링하는 페이지 컴포넌트다.Next.js는 `page.tsx`라..

1. App Router 렌더링 동작 원리1.1 App Router의 렌더링 구조App Router 버전의 Next.js도 초기 요청 시에는 SSR로 렌더링 되고, 이후 CSR 방식으로 네비게이팅(페이지 이동) 처리한다.즉, 초기 요청 후에는 브라우저 내부에서 라우팅이 처리되어페이지 전체를 새로 요청하지 않고 필요한 데이터만 가져온다.1.2 Page Router과 핵심 차이점App Router에서는 단순히 JS 번들만 전달되지 않는다.App Router에서는 단순히 JS 번들만 전달되지 않는다.서버 컴포넌트의 실행 결과물인 RSC Payload가 JS 번들과 함께 브라우저로 전달된다.이것이 page router과 가장 큰 차이점이다.Router전달되는 데이터Page RouterJS 번들만App Route..

1. React Server Component1.1 React Server Component란?React 18부터 새롭게 도입된 기능으로, 상호작용이 없는 컴포넌트를 서버에서만 실행하도록 하는 구조다.브라우저에서는 실행되지 않으며, JS 번들에 포함되지 않는다.즉, 서버에서 한 번만 실행되고 하이드레이션 과정도 없다.상호작용이 없는 컴포넌트(=서버 컴포넌트)를 JS 번들에서 제외하여서버 측에서 처리하여 렌더링 성능과 초기 로딩 속도를 개선한다.1.2 서버컴포넌트의 등장 배경Page Router 기반의 기존 Next.js에서는 모든 컴포넌트가 자바스크립트 번들에 포함되어 브라우저로 전달되었다.하지만 실제로는 정적인 컴포넌트도 존재하며, 이들은 하이드레이션이 필요하지 않다.예를 들어,정적인 페이지의 경우 빌..

1. static routingReact에서 Routing을 구현하기 위해 react-router-dom 패키지를 설치하고 세팅을 했지만,next.js에서는 static routing을 제공하기 때문에, 세팅을 할 필요 없이 폴더를 기반으로 실행이 가능하다.app 폴더 밑에 test 폴더를 새로 만들고 그 안에 page.tsx 파일을 만들어보자// app/test/page.tsx// 페이지 컴포넌트 생성시 컨벤션 : 경로에 따른 이름 + Pageconst TestPage = () => { return TestPage 입니다.;};export default TestPage;브라우저에서 접근하면 폴더 기반의 라우팅이 되는 것을 확인할 수 있다!http://localhost:3000/a/b/c 경로로 접근했..

이정환 님의 [ 한 입 크기로 잘라먹는 Next.js ↗ ]를 수강한 후 정리한 글입니다.1. App router vs Pages route1.1 Next.js의 버전의 주요 분기점Next.js를 채택할 때 주요한 의사결정은"App router, Pages router 둘 중 어떤 router을 사용할 것인가?"에 있다.Pages router는 page 폴더를 기준으로 라우팅이 된다.app router는 app 폴더 밑에 폴더명을 기반으로 자동 라우팅이 된다.1.2 app router와 pages router의 사용app router와 pages router 어떤 것을 사용해야 할까?공식 홈페이지에서는 app router를 사용하라고 제시하고 있다.Pages Router에서는 직접 캐싱을 구현해야 했지만..

이정환 님의 [ 한 입 크기로 잘라먹는 Next.js ↗ ]를 수강한 후 정리한 글입니다. 1. SEO 설정1.1 meta 태그 설정하기Next.js에서는 페이지 단위로 `` 컴포넌트를 통해 메타 태그를 설정할 수 있다.반드시 `next/head`에서 import 해야 한다.import Head from "next/head"; // ✅import { Head } from "next/document"; // ❌예시 – 홈 페이지const Home = ({ allBooks, recomendBooks,}: InferGetStaticPropsType) => { return ( 한 입 북스 {/* 썸네일 설정 */} ..

이정환 님의 [ 한 입 크기로 잘라먹는 Next.js ↗ ]를 수강한 후 정리한 글입니다.1. SSR 구현하기1.1 getServerSideProps()를 선언해 SSR로 변경하기Next.js에서는 페이지 파일 상단에`getServerSideProps`라는 함수를 선언하면 해당 페이지가 자동으로 SSR 모드로 동작한다.// pages/search/index.tsxexport const getServerSideProps = () => {};이 함수는 페이지 컴포넌트보다 먼저 실행되어,페이지 렌더링에 필요한 데이터를 서버에서 미리 불러오는 역할을 한다.즉 이제부터는 index 페이지는 SSR 방식으로 사전 렌더링이 이루어지게 되는 것이다. 이 함수는 반드시 다음 형태의 객체를 반환해야 한다return { ..

이정환 님의 [ 한 입 크기로 잘라먹는 Next.js ↗ ]를 수강한 후 정리한 글입니다. 1. 사전 렌더링과 데이터페칭이제부터는 각 페이지에 필요한 다양한 형태의 데이터들을 백엔드 서버로부터 불러와 동적으로 렌더링 할 것이다.백엔드 서버로부터 실제로 데이터를 불러오는 데이터 패칭 기능을 살펴보자.1.1 기존 React에서의 데이터 패칭의 한계React에서는 보통 다음과 같이 `useEffect`를 이용해 데이터를 불러온다.import { useEffect, useState } from "react";const Page = () => { // 1️⃣ 서버에서 가져온 데이터를 저장할 상태 생성 const [data, setData] = useState(null); // 2️⃣ 비동기로 데이터 요청하는..

1. 스타일링 (Styling)Next.js에서의 스타일링 설정은 React에서와 거의 동일한 방식으로 적용된다.즉, 인라인 스타일, CSS 파일, CSS 모듈 등 다양한 방법을 사용할 수 있다.1.1 인라인 스타일가장 간단한 방식은 HTML 요소에 직접 style 속성을 지정하는 것이다.index 인라인 스타일은 코드 작성이 간단하지만, 스타일링할 요소가 많아질수록 가독성이 떨어진다.따라서 보통은 CSS 파일을 별도로 만들어 분리하는 방식을 사용한다.1.2 CSS 파일 import 시 주의점React에서는 보통 각 페이지마다 개별적인 CSS 파일을 import 해서 사용한다.하지만 Next.js에서는 다른 페이지에 작성된 CSS 코드와 충돌할 위험이 있기 때문에,_app.tsx 컴포넌트를 제외하고는 C..

이정환 님의 [ 한 입 크기로 잘라먹는 Next.js ↗ ]를 수강한 후 정리한 글입니다. 1. API Routes란?API Routes란 Next.js 앱 내부에서 API 서버 역할을 수행할 수 있도록 해주는 기능이다.이 기능을 이용하면, 별도의 백엔드 서버를 구축하지 않고도브라우저의 요청을 받아 데이터베이스와 통신하거나, JSON 데이터를 응답하는 API를 직접 만들 수 있다.즉, Next.js 프로젝트 안에서 프론트엔드와 간단한 백엔드(API 서버)를 동시에 구현할 수 있다.(이 API Routes라는 기능은 왠만해선 잘 안 쓴다고 한다.)2. 기본 구조 살펴보기Next.js 프로젝트 안에는 기본적으로 `src/api` 폴더가 존재하며,그 안에는 `hello.ts` 파일이 포함되어 있다. 이 파일이..