● 이론0_ Rest_Client
○ 사용 목적 :
- 쉽고 편리하게 API의 동작 여부를 테스트 할수 있도록 하는 VSCode의 확장 프로그램
○ 설치:
- Vscode 접속 후, 왼쪽 4번째 탭의 확장프로그램을 누르고, "REST Client" 검색 후, 설치하면 된다.
○ 사용 방법 :
- 테스트를 위한 모의 데이터와 서버를 제공해 주는 JSON Placeholder 서비스를 이용해 볼게요.
| HTTP Method | 엔드포인트 | 기능 | CRUD |
| GET | /posts | 게시물 데이터 전체 조회 | Read |
| POST | /posts | 새로운 게시물 생성 | Create |
| PATCH | /posts/id | 특정 게시물 부분 수정 | Update |
| PUT | /posts/id | 특정 게시물 전체 수정 | Update |
| DELETE | /posts/id | 특정 게시물 삭제 | Delete |
해당 API를 사용해서 Rest Client를 사용해 볼게요.
①. GET 요청해보기
- 순서1_ 프로젝트 폴더에 [example.http] 파일 생성 후, 해당 파일 내용에 아래와 같은 내용 기재
GET https://jsonplaceholder.typicode.com/posts HTTP/1.1
- 순서2_ 작성 후, 위의 "Send Request" 링크 클릭하면, HTTP 요청이 보내진다.
누르면, 상태코드 : "200 OK" 와 다른 데이터들을 조회할 수 있다.
①. POST요청해보기
- 순서1_ 프로젝트 폴더에 생성해놨던, [example.http] 파일에 아래와 같은 내용 기재
GET https://jsonplaceholder.typicode.com/posts
###
POST https://jsonplaceholder.typicode.com/posts
Content-Type: application/json;
{
"userId": 11,
"title": "Lorem Ipsum",
"body": "Lorem Ipsum is simply dummy text of the printing and typesetting industry"
}※POST 요청을 위해 2가지의 메시지를 적어야 한다,
- JSON 방식의 데이터를 보낸다는 표시 :
Content-Type: application/json;- 생성할 데이터 한개의 형식 //예시로 영화제목 , 영화 내용 짧은 요약
{
"userId": 11,
"title": "Lorem Ipsum",
"body": "Lorem Ipsum is simply dummy text of the printing and typesetting industry"
}약속1_POST를 위한 2가지의 메시지는 "공백"으로 구분하기 때문에, 꼭 한칸 띄어서 작성해야한다.
약속2_ 요청사이에는 무조건 ###을 사용해서 요청을 구분해 줘야 한다는 점
- 순서2_ 내용 위에 "Send Request"를 누르면 마찬가지로 상태코드(201 응답)와 데이터 내용을 알 수 있다.
● 이론1_ Next.js 프로젝트 만들기
○ 기본 셋팅 : Vscode , Node.js
○ 과정 :
▶순서1_ 프로젝트를 생성할 폴더를 생성한 후, 터미널창을 열어서, 아래와 같은 명령어를 기재한다.
npx create-next-app .
▶순서2_ 입력후, 아래와 같이 선택사항들이 출력되고, 사진과 같이 선택한다.
▶순서3_ 프로젝트 생성후, [package.json] 파일에 탭을 하면, "scripts" 속성의 값들을 보이는 데, 이것들은 프로젝트 기능에 대한 명령어들이다.
터미널창을 열어서, 개발 서버를 여는 명령어를 입력해본다. //아래의 명령어 기재
npm run dev아래와 같이, 서버가 열렸다는 것을 알리는 메시지들이 출력
▶순서4_ 터미널에 위에 빨간색으로 밑줄 친 , 로컬 주소 사이트를 Ctri + 왼쪽 마우스 클릭으로 접속해본다.
▶순서5_ [pages]폴더 내에 index.js 편집 //싹다 지워서 아래의 코드로 수정 :
export default function Home() {
return <h1>안녕 씹새야?</h1>;
}
▶순서6_ 터미널창에서, 서버 종료(Ctrl + C) + y입력 후에, 파일 정리
- api 폴더 삭제
- public 폴더 삭제
- style 폴더 삭제
- _document.js 코드 수정 : Html 태그의 lang 속성을 "ko"로 수정 //우리나라 korea라는 뜻이라고 얼핏 들었던거 같음
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="ko">
<Head />
<body>
<Main />
<NextScript />
</body>
</Html>
);
}'CodeIt_Sprint > Next.js API 만들기' 카테고리의 다른 글
| (5)MonggoDB 셋팅(작성중) (0) | 2025.01.04 |
|---|---|
| (4)API라우터의 함수 파라미터 중 하나인 Response의 구성 : status, send //이번 테마는 시발 무슨소린질 모르겠음 (2) | 2025.01.04 |
| (3)API라우터의 함수 파라미터 중 하나인 Request의 구성 : Params, queryString, cookies, body, method (0) | 2025.01.04 |
| (2)기본Request해보기 (0) | 2025.01.03 |
