#TIL(error)_REST API와 Postman 오류에 대하여

 

# 들어가기에 앞서 REST API란 무엇인가?

REST API는 Representatioal State Transfer Application Programming Interface의 약자로, 네트워크를 통해 다른 시스템이 서로 통신할 수 있도록 하는 소프트웨어 인터페이스를 말합니다. REST API는웹 기술의 일환으로, HTTP 프로토콜을 통해 자원을 접근하고 조작하기 위한 표준을 제공합니다. 

 

REST API는 주로 HTTP 메서드(GET, POST, PUT, DELETE 등)를 이용하여 데이터를 요청하고 응답하는 방식으로 작동합니다. 각 요청은 엔드포인트(Endpoint)라고 불리는 특정 URL을 통해 수행되며, JSON이나 XML과 같은 데이터 형식으로 정보를 주고 받습니다. 

---

# REST API 테스트를 위한 대표적인 4가지 도구

1. Postman

가장 인기 있는 API 개발 및 테스트 도구 중 하나로, 사용자가 API요청을 생성하고 테스트하며, 응답을 확인할 수 있도록 도와줍니다. 

2. Insomnia

Postman과 유사한 기능을 제공하는 REST API 테스트 및 디버깅 도구입니다. 다양한 플랫폼에서 사용할 수 있습니다. 

3. Swagger(OpenAPI)

API 디자인, 빌드, 문서화 및 테스트를 위한 프레임 워크로, OpenAPI Specification을 사용하여 RESTful API를 설계하고 테스트하는데 도움을 줍니다. 

4. cURL

명령 줄 도구로, 다양한 프로토콜을 지원하며 REST API를 테스트하고 디버깅하는데 사용됩니다. 

 

REST API를 테스트하는데 사용되는 도구들은 각각의 특징과 장단점을 가지고 있습니다. 개발자들은 자신의 작업 흐름과 선호도에 따라 선택하면 됩니다. 

 

저는 Postman을 사용하는데 비교적 사용하기 쉽고, 다양한 기능을 제공해서 API를 테스트하고 디버깅 하는데  매우 유용한 것 같습니다.

---

# API TEST 전 준비 과정 (넘기시면 됩니다.)

**기본 세팅 init 및 패키지 다운

# yarn 프로젝트를 초기화합니다. yarn init -y
# express, prisma, @prisma/client 라이브러리를 설치합니다. yarn add express prisma @prisma/client
# nodemon 라이브러리를 DevDependency로 설치합니다. yarn add -D nodemon(package.json>Script에서 dev 설정까지)
# 설치한 prisma를 초기화 하여, prisma를 사용할 수 있는 구조를 생성합니다. npx prisma init

 

---

**기본 세팅 app.js 작성

---

**기본 세팅 post.router.js 작성

---

**.env 설정 

---

**schema.prisma 작성

---

** node_modules > .prisma > client > indexedDB.d.ts 확인

---

# Postman을 사용하여 API TEST 중 발생한 문제

** yarn run dev로 서버 먼저 켜주기 

---

** 왼쪽 상단에 Collections 클릭 >  Collections 우클릭 > Add request 선택 > New Request 생성

---

** HTTP POST메소드를 사용하여  localhost:3017/api/posts 값을 주고 Body > raw > JSON  선택 후에 JSON 형태로 작성 > Send 클릭

---

** JSON형태로 결과 값이 나오기를 기대했지만 실패 > VSCode 확인(SyntaxError:Unexpected token t in JSON at position 3 발생) 

---

**오류가 난 원인과 해결 방법

우선 `SyntaxError:Unexpected token t in JSON at position` 오류가 난다면 두 가지 문제 중 하나입니다.  
1. JSON 형태가 아닐때 오류가 발생 >> 문제가 있는 부분을 찾아서 JSON 형태로 바꾸면 쉽게 해결됩니다.
2. JSON 형태인데 오류가 발생 >> JSON 데이터가 넘어올 때 넘겨 오는 과정 중 문제가 발생했다는 뜻입니다. 

---

**원래는 다른 블로그에서처럼 이렇게 작동해야 정상입니다. 그러나 아래 방법이 작동하지 않기 때문에 저는 대체 방법을 사용하겠습니다. 

<출처: https://python-programming-diary.tistory.com/175>

---

** Postman 설정을 변경

Body 메뉴에서 기존에 JSON 형식으로 작성했던 내용을 x-www-form-urlencoded 형식으로 변경합니다. 이를 위해 Body 메뉴 안에서 x-www-form-urlencoded 옵션을 선택하고, key-value 형태로 데이터를 작성합니다.

---

** VSCode로 돌아가서 app.js 에 코드 한 줄을 추가해줍니다. 

app.use(express.urlencoded({ extended: false }));

 

 

이 코드는 HTTP POST 요청에서 application/x-www-form-urlencoded 형식으로 전송된 데이터를 해석하고, 이를 JavaScript 객체로 변환합니다. extended: false 옵션은 내장된 querystring 라이브러리를 사용하여 데이터를 해석하는데, 이 옵션을 true로 설정하면 좀 더 복잡한 데이터 형태를 해석할 수 있지만, 보안상의 이유로 false로 설정하는 것이 권장됩니다.

 

일반적으로 폼(form)을 통해 전송된 데이터는 URL-encoded 형식으로 전송됩니다. 예를 들어, HTML 폼에서 method="POST"로 데이터를 서버로 보내면, 기본적으로 application/x-www-form-urlencoded 형식으로 데이터가 전송됩니다.

 

이러한 데이터를 Express 앱에서 사용하려면 해당 데이터를 파싱하여 JavaScript 객체로 변환해야 합니다.

따라서 express.urlencoded({ extended: false })를 사용하여 URL-encoded 데이터를 해석하고, req.body를 통해 해당 데이터에 액세스할 수 있도록 설정하는 것이 중요합니다. req.body에는 POST 요청으로 전송된 데이터가 JavaScript 객체로 저장됩니다.

---

** VSCode에서 서버를 다시 offon 하고 Postman으로 넘어와 Send를 보냅니다. 

 

 

Postman에서 Send 클릭시 정상적으로 작동하는 것을 확인 할 수 있습니다.

---