(2)기본Request해보기

● 이론0_ Next.js에서 기본 Request할때 파일 구조도

○ Default 파일 구조도 :

 

○ 앤드 포인트 만들기 :

- 용도 : 나중에 프로젝트 만들 떄, 짧은 주소 데이터를 다루는데 사용한다고 한다. //아직 뭔개소린지 모르겠음

▶순서1_ [pages] 폴더 안에 [api]폴더 만들고, 그 [api]폴더안에 [short-link.js] 파일 생성

▶순서2_[short-link.js] 파일에 코드 아래와 같이 함수 기재

export default function handler(request, response)
{
  response.send('안녕 API!');
}

★해석 :

- "파일 경로대로 /api => /short-links 의 경로로 Request가 들어올 시, 위에 적힌 함수가 실행된다"

- 함수의 두개의 매개인자 'request' , 'response' => 리퀘스트를 참조 또는 리스폰스를 보낼 수 있다.

 

○ 테스트 해보기 : 

위의 경로대로 리퀘스트를 해볼 떄, 함수가 잘 작동되면, 리퀘스트가 잘 전송된다는 의미

▶순서1_ 터미널창에 서버 실행 명령어 입력

npm run dev
//터미널 창에 서버 실행 명령어

 

▶순서2_ 맨 상위 프로젝트 내에 [request.http] 파일 생성, GET 리퀘스트 명령어 작성

GET http://localhost:3000/api/short-links
//명령어 + 로컬주소 + Pages내의 경로

 

▶순서3_ 위의 생기는 "Send Request"를 누르면, 오른쪽에 상태코드, 메시지 데이터 출력창이 뜬다.

○ 테스트 해보기2 : 다이나믹 라우팅 //이게뭐지?

▶순서1_ 아래와 같이 파일구조와 코드 작성

[pages]폴더 안에 [api]폴더 안에 [short-links]폴더 안에 [id].js , [index].js 생성

- [id].js

export default function handler(request, response) {
  response.send("안녕 다이나믹 라우팅!");
}

- index.js

export default function handler(request, response) {
  response.send("안녕 API!");
}

▶순서2_ [request.http]파일에 두개의 경로에 Request 보내는 명령어 작성

GET http://localhost:3000/api/short-links
//명령어 + 로컬주소 + Pages내의 경로

###

GET http://localhost:3000/api/short-links/123
//명령어 + 로컬주소 + Pages내의 경로 /+ id값

 

- 출력결과 :