일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 개발자 이력서
- aws s3
- 기획
- 구상
- 프론트엔드
- 개인 프로젝트
- 삶
- 대학졸업
- Next.js
- 계획
- MONGOOSE
- 공부
- s3 bucket
- 백엔드
- 회고
- 개발
- CSS
- TypeScript
- 캐플라이어
- 신입
- 신입 프론트엔드
- Javascript
- Next.js 13
- 개인프로젝트
- 이력서
- react
- 신입 개발자
- 신입 이력서
- Today
- Total
개발 마라톤
10/24 - RESTful API 고민하기 본문

RESTful API 고민하기
오늘은 이메일 중복 체크와 닉네임 중복 체크를 위해 새로 API를 작성하는 중이다.
API를 작성하려는데 RESTful API를 작성하기 위해 몇 가지 사이트를 참고했다.
[Network] REST란? REST API란? RESTful이란? - Heee's Development Blog
Step by step goes a long way.
gmlwjd9405.github.io
REST API 제대로 알고 사용하기 : NHN Cloud Meetup
REST API 제대로 알고 사용하기
meetup.nhncloud.com
해당 내용을 요약하면 다음과 같다.
REST API란?
REST API는 자원(URI), 행위(HTTP METHOD), 표현(JSON 등) 이 3가지로 구성되어있음.
자원을 이름을 구분하여 자원의 상태를 주고받는 모든 것을 의미한다.
특징은?
1. 서버 클라이언트 구조
- 자원 Server, 요청 Client.
- REST Server : API를 제공하고 로직 및 저장 책임
- Client : 사용자 인증, 세션 등을 관리 책임
2. 무상태
- Client의 context(세션, 쿠키)를 Server에서 다루지 않음.
- Server는 각각의 요청을 독립적으로 처리 (요청 연관 X)
3. 캐시처리가능
- 캐싱 기능 적용 가능
4. 계층화
- Client는 REST API 만 호출함
- REST Server은 다중 계층으로 구성 가능 (보안, 암호화, 인증 -> 비즈니스 로직 등의 계층_미들웨어)
5. Code-On-Demand(선택)
- Server에서 스크립트를 받아 Client에서 실행
6. 인터페이스 일관성
- URI로 지정한 자원에 대한 조작을 통일된 인터페이스로 수행.
- 특정 언어나 기술에 종속되지 않음.
요약하자면
REST Server는 직관적으로 자원에 대한 로직, 저장을 담당하고 API를 제공하며 독립적으로 처리한다.
Client는 API를 사용하여 자원 관리 외의 사용자 인증, 세션 등을 처리한다.
RESTful API 설계 규칙
/리소스명/리소스 ID/관계가 있는 다른 리소스명
1. 자원 표현
GET /members/1
DELETE /members/1
자원은 복수형이어야함.
행위가 URI에 표현되어서는 안됨. (http method, 행위 표현)
2. 유일한 값
GET /members/:id
경로 부분 중 변하는 부분은 유알한 값으로 대체한다.
3. 리소스간의 연관관계 표현
GET /members/:id/device 기본적으로 소유를 표현
GET /members/:id/likes/device 소유 외의 표현은 명시
4. 슬래시 (/)는 계층 관계를 나타냄
5. 마지막 문자에 슬래시(/)를 포함하지 않음
6. 언더바(_) 대신 하이픈(-) 사용
7. 소문자 사용
8. 확장자는 포함하지 않음
직접 작성해보기
나의 경우 회원가입 할 때 email과 name을 중복 체크하는 API가 새로 필요했다.
단순하게 `POST api/users/emailcheck` 정도로 작성해보려 했는데, emailcheck라는 행위가 포함되는 것 아니겠는가.
그래서 자원이나 연관관계 만으로 이메일 체크를 의미하는 URI를 만들 수 있을까 고민해보았는데,
아무래도 명시적으로 이를 표현하긴 어려울 것 같았다..
결론적으론 다음과 같은 URI를 사용하기로 결정했다.
API URI | 내용 |
GET api/users?email=[email] | 해당 이메일이 존재하는지 확인합니다. |
GET api/users?name=[name] | 해당 닉네임이 존재하는지 확인합니다. |
users를 생성하기 위해 체크하는 것이기 때문에,
추가적인 계층이나 자원, 연관관계를 표현할 이유는 없는 것 같았다.
따라서 email, name의 쿼리가 들어올 때 이를 인식하여 중복인지 체크하고 응답하는 API를 설계하도록 하였다.
Next.js 13 쿼리 파라미터 값 가져오기
[Next.js] 쿼리파라미터 값 가져오기(Next.js 13) (velog.io)
[Next.js] 쿼리파라미터 값 가져오기(Next.js 13)
Next.js 13 버전부터 달라진 App 라우터 살짝 맛보기 🦎
velog.io
const params = useSearchParams();
const emailParam = params.get('email');
useSearchParams()를 통해 반환 받은 객체의 get(key) 메소드를 통해 가져올 수 있다.
단, 이 메소드는 'use client' 를 사용한 Client Component에서만 사용 가능하다는 경고가 나타난다.
이 경고를 보면 이 함수는 프론트엔드 환경에서 사용하는 함수일 수도 있겠다 싶다.
백엔드 환경에서 쿼리 파라미터 값을 가져오는 방법은 다음과 같다.
How to read request body and query params in next 13's API with app router in route.ts file?
Did not found any solution here: https://nextjs.org/docs/app/api-reference/file-conventions/route.
stackoverflow.com
export async function GET(req){
const {searchParams} = new URL(req.url);
const param = searchParams.get("/*Your param key here*/");
}
new URL(req.url) 의 searchParams를 참조하여 쿼리 파라미터 값을 가져올 수 있다.
'--- Project --- > CharFlyer : 캐플라이어' 카테고리의 다른 글
10/31 - Server Component / Client Component 분할 (0) | 2023.10.31 |
---|---|
10/25 - Next.js 13 깔끔한 폴더 구조 (0) | 2023.10.25 |
10/23 - Mongoose Scheme 정규식, 조건 정의 (0) | 2023.10.24 |
10/20 - Next.js 13 비밀번호 암호화 (0) | 2023.10.20 |
10/19 - uuid 모듈 (1) | 2023.10.19 |