springboot9 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. [Spring] CORS 설정 방법 | REST API와 프론트엔드 연결하기 프론트엔드에서 REST API를 호출하다 보면 CORS(Cross-Origin Resource Sharing) 문제를 만날 수 있다.특히 프론트엔드와 백엔드 서버가 서로 다른 주소에서 실행되는 개발 환경에서 자주 발생한다.1. CORS란?브라우저는 보안상의 이유로 다른 출처(Origin)의 서버에 요청하는 것을 기본적으로 제한한다.예를 들어 프론트엔드가 다음 주소에서 실행되고 있다고 가정한다.http://localhost:3000 백엔드 서버가 다음 주소에서 실행된다면http://localhost:8080 두 주소의 Origin이 다르기 때문에 브라우저에서 백엔드 API를 호출할 때 CORS 문제가 발생할 수 있다.이때 서버는 어떤 출처의 요청을 허용할 것인지 브라우저에게 알려줘야 한다.2. Spring.. 2026. 8. 19. [Spring] SpringDoc으로 REST API 문서 자동화하기 - Swagger UI 사용법 1. API 문서란?API 문서는 API를 어떻게 사용해야 하는지 설명하는 문서이다.프론트엔드 개발자나 다른 백엔드 개발자가 API를 사용할 때 다음과 같은 정보를 확인할 수 있도록 제공한다.어떤 URL로 요청하는지어떤 HTTP Method를 사용하는지어떤 데이터를 전달해야 하는지어떤 응답을 받는지요청 및 응답 데이터의 형식은 무엇인지2. SpringDoc이란?SpringDoc은 Spring Boot 프로젝트의 API 정보를 분석해서 OpenAPI 문서를 자동으로 생성해주는 라이브러리이다.내부적으로 Swagger를 활용하기 때문에 개발자가 API 정보를 일일이 문서로 작성하지 않아도 Swagger UI를 통해 API를 확인할 수 있다.의존성 추가build.gradle.kts에 다음 의존성을 추가한다.im.. 2026. 8. 14. [Spring] REST API 응답 처리하기 - @RequestBody와 ResponseEntity 1. @RequestBody로 JSON 데이터 받기REST API에서는 클라이언트가 요청 본문에 JSON 데이터를 담아 서버로 전달하는 경우가 많다.이때 @RequestBody를 사용하면 JSON 데이터를 Java 객체로 변환해서 받을 수 있다.@PostMappingpublic RsData write( @Valid @RequestBody PostWriteRequestBody reqBody) { Post post = postService.write(reqBody.title, reqBody.content); return new RsData( "201-1", "%d번 글이 성공적으로 작성되었습니다.".formatted(post.getId()), .. 2026. 8. 13. HTTP Method란? GET, POST, PUT, PATCH, DELETE 웹에서는 URL과 HTTP Method를 이용해 서버에 원하는 작업을 요청한다. REST API를 이해하기 위해서는 각 HTTP Method의 역할을 구분하는 것이 중요하다.1. HTTP Method웹이 발전하면서 단순한 조회와 데이터 생성뿐만 아니라 수정과 삭제도 필요해졌다. 이를 표현하기 위해 HTTP Method를 사용한다.Method용도예시GET조회@GetMapping("/api/v1/posts/1")POST생성@PostMapping("/api/v1/posts")PUT전체 수정@PutMapping("/api/v1/posts/1")PATCH일부 수정@PatchMapping("/api/v1/posts/1")DELETE삭제@DeleteMapping("/api/v1/posts/1")2. HTML과 HTT.. 2026. 8. 12. 이전 1 2 다음