Web 백엔드 (4) / API 만들기 - GET과 POST 방식(+Postman)

 

node.js 기본 사용방법을 익혔다면 직접 API를 만들어 볼 차례이다.

프론트엔드 공부할때보다 배우는 속도가 느리다는 것이 많이 체감된다.

내용이 생소하다보니 배우는 양이 많지 않아도 조금 버겁기도 하다.

많이 부딪혀보며 익숙해지자..!

작성된 모든 포스팅의 내용은 아래 강의를 듣고 배운 것들을 기반으로 한다.

 

 

 

클래스 101 [유료강좌]

개발자 사관학교 - [웹 개발자 단과반 2교시] MySQL, Node.js 백엔드 속성 실무!

https://class101.net/ko/products/5fac071c1105fb001383cd2a

[웹 개발자 단과반 2교시] MySQL, Node.js 백엔드 속성 실무! | 개발자 사관학교

 

 

 

 

 

 

 

CHAPTER 2: 본격! 백엔드 다루기, Node.js의 모든 것

[5. 직접 만들어보는 API, GET과 POST 방식]

 

서버개발에서 API란 직관적으로 주소를 뜻한다.

구체적으로는 사용자가 어떤 주소에 접속했을때,

어떤 결과값을 응답으로 클라이언트/프론트개발자에게 줄 것인지 그 규칙을 의미한다.

 

API는 GET과 POST방식, 기본적으로 두가지 방식으로 만들 수 있다.

우선 API가 어떻게 생겼는지, 간단하게 어떻게 만들 수 있는지 살펴보자.

 

 

다음은 프론트엔드 영화리뷰 사이트를 만들때 themoviedb에서 제공해주었던 api의 일부이다.

잘 들여다보면 딕셔너리 자료형에 배열과 또 다른 딕셔너리 값들이 섞인 복합적인 형태를 볼 수 있다.

이 api처럼 직접 아주 간단한 api를 만들어보자.

 

 

 

 

지난 시간에 만든 기본 웹페이지 주소에 접속하면 key와 value의 값으로 응답하도록 했다.

 

 

 

값은 잘 나오지만 아까 위에 api도 그렇고 뭔가 가독성이 부족해보인다.

chrome브라우저에 jsonview를 설치해 api파일을 읽을때의 가독성을 높여주었다.

간단히 chrome extension jsonview라고 검색하거나, 아래의 링크를 타고 들어가 다운받아준다.

 

https://chrome.google.com/webstore/detail/jsonview/gmegofmjomhknnokphhckolhcffdaihd

JSONView

chrome에 추가를 눌러준다.

 

 

 

마치 코드에디터처럼 깔끔하게 정돈된 api를 볼 수 있다. 

아직 양이 많지 않아 그 효과가 눈에 띄진 않지만 양이 늘어날수록 더 유용할 것 같다.

 

 

 

 

 

<API - GET 방식으로 구현해보기>

get방식은 웹페이지내에서 다음과 같이 작동한다.

 

사용자가 서버에 get방식으로 데이터를 요청할 때에는 ?로 get방식임을 알리고,

page=2 (페이지는 2번째)처럼 key와 value, 한쌍으로 원하는 데이터를 요청한다.

또한 &로 원하는 데이터를 추가로 요청할 수 있다.

 

 

서버에서는 사용자가 어떤 값을 요청해야 하는지 알야아한다.

내부적으로는 무엇을 요청하고 있는지 다음과 같이 받아올 수 있다.

 

 

 

 

 

무언가 요청에 관련된 내용은 req. 를 통해 가져올 수 있다.

query를 입력하고 (아마도 Jquery인듯 하다.) 콘솔창에 띄우도록 한다.

 

 

 

 

예를 들어 ?page=2라고 주소를 입력하였다. (= get방식이며 2번째 페이지를 요청)

 

 

 

 

 

{page: '2'} 라는 값이 출력되었다.

깊게 들어가보면 page라는 key값에 2라는 value값이 들어간 딕셔너리 변수가 출력되었다.

이 점을 이용해 조금 더 깔끔하게 원하는 내용을 출력할 수 있다.

 

 

 

 

 

page key값을 page라는 변수가 담도록 바꾼 후에 출력하였다.

 

 

 

 

 

깔끔하게 페이지 넘버만 출력되는 것을 볼 수 있다.

 

이와 같이 페이지 넘버를 받아온 후, res.send 부분에 서버에서 해당 페이지에  어떤 데이터를 보여줄지 정한다.

= 매우 간단하지만 기본이 되는 GET방식 서버의 작동 방식이 완성된다.

 

 

 

 

 

 

 

 

 

 

 

<API - GET 방식으로 구현해보기>

 

 

 

post방식은 위와 같이 만들 수 있다.

하지만 get방식처럼 주소에 들어가면 찾을 수 없는 페이지라고 나온다.

왜냐하면 post방식은 코드단에서만 확인이 가능하기 때문이다.

 

 

 

그렇다면 개발 도중에는 post방식을 어떻게 하면 테스트 해볼 수 있을까?

postman이라는 소프트웨어를 추가적으로 설치하면 테스트가 가능하다.

chrome extension postman 을 검색해 postman을 다운받아준다.

 

https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop

Postman

chrome에 추가를 눌러준다.

 

 

열려고 했더니 최신버전의 mac에서 구버전 chrome앱이 호환되지 않는다는 에러메시지가 나타난다.

무시하고 열기를 누르니 다행히 작동은 되는듯하다.

 

 

 

 

 

 

POST 타입으로 바꿔주고 주소를 입력한다.

그러면 console에 띄워주도록 했던 내용이 나온다.

이번에는 서버에 값을 넘겨줘보자.

 

 

 

 

 

 

값은 Body를 통해 넘겨주며 encoded 방식을 선택해준다.

key와 value값을 임의로 넘겨준다.

 

 

코드에는 아래와 같이 body 요청을 받아오도록 입력한다.

그리고 console에 나타나도록 해준다.

 

 

 

 

 

 

하지만 값이 undefined로 출력되지 않는다.

이유가 무엇일까?

프론트엔드 공부때 살펴봤듯이 post는 예민한 정보를 주고 받을때 사용된다.

때문에 코드를 추가하여 서버에서 볼 수 있도록 해줘야 한다.

 

 

 

 

 

app.js에 middleware로 json과 urlencoded를 추가하였다.

그러고나면 아래와 같이 알 수 없는 내용들이 나온다.

 

 

 

 

 

다시 postman으로 돌아가 send를 눌러준다.

 

 

 

 

 

그러면 값이 잘 넘어와 있는 것을 확인해볼 수 있다.

이와 같이 POST방식도 구현해보았다!

 

 

 

 

 

 

 

 

 

 

 

다음 시간에는 네이버 메인 화면처럼 예쁘게,

html과 css 내용들을 받아와 보여줄 수 있는 방법들을 익혀볼 것이다.

서버 공부를 하면 잠이 쏟아진다..

몸이 거부하는 느낌이지만 상황이 거부할 수가 없다.^^!!

재미를 붙일때까지 계속 공부해보자!

 

 

 

 

 

 

 

 

 

출처: 클래스101 / [웹 개발자  단과반 2교시] MySQL, Node.js 백엔드 속성 실무! - 개발자 사관학교