서버 요청하기

서버와 클라이언트

  • 요청하는 주체: 클라이언트
  • 요청에 따른 응답을 주는 서버

날씨 앱

(클라이언트)

날씨 api 서버

서울 날씨 보내줘

서울 날씨는 27도야 

서버에게 요청하기

  • 일반적으로 서버에게 HTTP (URL) 요청 후, 응답을 처리
  • 응답은 다양한 형태로 받을 수 있음 (JSON, HTML, plain text 등등)

날씨 api 서버

/weather?q=Seoul

{ “tempature”: 27 }

날씨 앱

(클라이언트)

HTTP 요청은 fetch API로

날씨 api 서버

/weather?q=Seoul

{ “tempature”: 27 }

날씨 앱

(클라이언트)

fetch('http://서버주소/weather?q=Seoul')
.then(function(resp) {
  // 응답 형식에 따라 resp.text() 가 될 수도 있다
  return resp.json();
})
.then(function(json) {
  console.log(json); // { tempature: 27 }
});

날씨 API 사용

https://openweathermap.org/API

API 사용시 유의할 점

  • API는 공짜가 아닙니다
    • 서비스 제공자로부터 권한을 받아야 한다
  • 그러므로 API Key는 암호처럼 취급되어야 합니다

서버에 기록할 수도 있나요?

  • HTTP 요청을 GET이 아닌 POST를 이용
  • 내용(payload)와 함께 전달
  • 예제
    • 게시판에 새로운 글을 쓰고자 할 때
    • 아이디와 비밀번호로 로그인을 하고자 할 때

서버에 기록할 수도 있나요?

서버

성공적으로 작성했어!

{ id: 123 } 

(보통 새로운 글의 id를 반환합니다)

클라이언트

게시판에 새로운 글을 쓰고 싶어!

방법은: POST

주소는: /posts

내용은: { ‘userId’: 1, ’title’: 제목, ‘body’: 내용}

서버

성공적으로 작성했어!

{ id: 123 } 

(보통 새로운 글의 id를 반환합니다)

클라이언트

게시판에 새로운 글을 쓰고 싶어!

방법은: POST

주소는: /posts

내용은: { userId: 1, ‘title’: 제목, ‘body’: 내용}

let newPost = {
  "userId": 1,
  "title": "새 글을 써봤습니다",
  "body": "안녕하세요?"
}

fetch('http://서버주소/posts', {
  method: 'POST',
  body: JSON.stringify(newPost)
}).then(function(resp) {
  return resp.json();
}).then(function(json) {
  console.log(json); // { id: 123 }
});

다양한 API를 이용해보고 싶어요

직접 API 서버를 개발해보고 싶어요

서버 개발과 관련된 환경을 배웁시다 - node.js (JavaScript)

END

Made with Slides.com