프로그래머가 되는 꿈

RESTful Routes URL 디자인 (5-3) 본문

프론트엔드 (Front-end)/React

RESTful Routes URL 디자인 (5-3)

AI박사 2026. 1. 16. 17:24

URL 디자인(의 한) 패턴이다.

HTTP Verb : 총 4가지

1. GET : "정보를 가져오는 것" 우리가 지금 사용한것/사용하고 있는것 // 우리가 지금까지 fetch해서 데이터 가져올 때 항상 쓴 명령

2. POST : 새로운 데이터를 만들때 쓴다. // 새로운 게시물을 생성할 때 사용

3. PUT : 기존의 데이터를 수정할 때 사용

4. DELETE: 데이터를 삭제하는 명령어

 

HTTP Verb + URL = URL 디자인이 더 깔끔하고 단순해진다.

 

1번째

전체 데이터를 보여주고 싶다

/subjects (GET)

/subjects = 고정(반드시 써야한다.)

 

4번째

만약에 하나의 아이템만 보여주고 싶다? EX.바지를 클릭하면 바지를 보여주고, 치마를 클릭하면 치마를 보여주고

/subjects/:id (GET)

: 이것은 파라미터라는 뜻

url에도 파라미터 값을 넘길 수 있다.

(함수에만 파라미터와 매개변수가 있을 것 같지만 url에도 파라미터 값이 존재한다.) 

:id =>  (여기에 들어가는 것은) 가변적인 값/변하는 값 - 1,2,3... 뭐를 입력하던지 아이디값으로 뒤에 입력만 해주면 [Show item with :id] id값을 가진 아이템 하나를 보여준다.! / '동적인 값을 입력해 줄 수 있다.'

 

실습에서 detail을 딱 하나 보여주 싶다면 4번째, 즉 /subjects/:id를 사용하면 된다.

detail한 아이템을 가지고 오고 싶다면 정확히 아이템의 값을 가져다가 뒤에 파라미터로 넣어주면 된다.

 

 

'프론트엔드 (Front-end) > React' 카테고리의 다른 글

useSearchParams (5-5)  (0) 2026.01.16
useParams (5-4)  (0) 2026.01.16
5-3  (0) 2026.01.16
5-2(Link,Navigate - 페이지 사이를 이동하는 방법)  (0) 2026.01.16
5-1  (0) 2026.01.16