Frontend/Next.js3 Next.js 동적 라우팅과 useParams()로 URL 파라미터 가져오기 1. Next.js 동적 라우팅Next.js에서는 폴더 구조를 이용해 URL을 만들 수 있다.예를 들어 게시물 상세 페이지를 다음과 같이 만들 수 있다.app/└── posts/ ├── page.tsx └── [id]/ └── page.tsx이렇게 [id] 형태로 폴더를 만들면 id가 동적으로 변하는 URL 값이 된다.따라서 다음과 같은 URL을 사용할 수 있다./posts/1/posts/2/posts/3각 URL에서 1, 2, 3이 id에 해당한다./posts/1 ↑ id2. useParams()로 URL의 값 가져오기동적 라우팅에서 URL에 들어있는 값을 가져올 때 useParams()를 사용할 수 있다.'use client';import { useParam.. 2026. 8. 19. Next.js에서 REST API 호출하기 | fetch, async/await, useEffect 1. fetch로 API 호출하기프론트엔드에서 백엔드 API를 호출할 때 fetch()를 사용할 수 있다.fetch("http://localhost:8080/api/v1/posts") .then((res) => res.json()) .then((data) => { console.log(data); });fetch()는 서버에 요청을 보내고 Promise 객체를 반환한다.Promise는 쉽게 말하면 나중에 받을 결과를 나타내는 객체이다.따라서 API 응답을 바로 사용할 수 있는 것이 아니라, 비동기 작업이 완료된 후 결과를 받아야 한다. Promise의 작업이 완료됐을 때 실행할 코드를 .then()을 이용해 처리할 수 있다.첫 번째 .then()에서는 서버의 응답을 JSON .. 2026. 8. 19. Next.js 페이지와 Layout 정리 1. Next.js 페이지 컴포넌트Next.js에서는 page.tsx 파일이 페이지 역할을 한다.export default function Page() { return 안녕하세요.;}여기서 중요한 것은 함수 이름이 아니라 export default로 컴포넌트를 내보내는 것이다.따라서 함수 이름은 Page가 아니어도 된다.2. 폴더 구조와 URLNext.js에서는 폴더 구조가 URL 경로와 연결된다.app/├── page.tsx└── posts/ └── page.tsx다음과 같은 URL이 만들어진다./ → app/page.tsx/posts → app/posts/page.tsx 따라서 게시물 목록 페이지를 만들고 싶다면 posts 폴더를 만들고 그 안에 page.tsx를 작.. 2026. 8. 19. 이전 1 다음