루비온레일즈 api 서버 - 1) 인터넷 구조에 대한 대략적인 이해
Post on 23-Jan-2018
55 Views
Preview:
TRANSCRIPT
멋쟁이사자처럼2학기
인터넷 구조에 대한 대략적인 이해서강대멋사박정현
Rails를 배웠다…프론트엔드, 백엔드, 서버가 뭔지 알았다
그런데 앱하고는 어떻게 연동하지?다른 언어 개발자랑은 어떻게 협업하지?
따로 만드는 건가?
안드로이드 iOS 웹
안드로이드 iOS 웹
JAVA Swift Javascript
안드로이드 iOS 웹
JAVA Swift Javascript프론트엔드
안드로이드 iOS 웹
JAVA Swift Javascript프론트엔드
백엔드
서버컴퓨터
안드로이드 iOS 웹
JAVA Swift Javascript프론트엔드
백엔드 서버어플리케이션
안드로이드 iOS 웹
JAVA Swift Javascript프론트엔드
백엔드 서버어플리케이션
데이터베이스
안드로이드 iOS 웹
JAVA Swift Javascript프론트엔드
백엔드서버어플리케이션
웹
Javascript프론트엔드
백엔드
레일즈에서 백엔드 / 프론트엔드어떻게 상호작용 했더라?
웹
Javascript프론트엔드
백엔드
<%= @post %>
@post = Post.find(1)
프론트엔드
백엔드
요청 응답
일반적으로는…
프론트엔드
백엔드
HTTP 통신으로 JSON을 주고 받는다
웹
Javascript프론트엔드
백엔드
<%= @post %>
@post = Post.find(1)
프론트엔드
백엔드
웹
Javascript
프론트엔드
백엔드
HTTP 통신으로 JSON을 주고 받는다
프론트(클라이언트)에서 요청을 보내면백엔드(서버)에서 응답하는 방식
HTTP 통신?
어디로 요청할거야?
HTTP 통신을 하려면…
어떤 방식으로 요청할거야?
무엇을 요청할거야?
어디로 요청할거야?
HTTP 통신을 하려면…
어떤 방식으로 요청할거야?
무엇을 요청할거야?
어디로 요청할거야?
HTTP 통신을 하려면…
URI요청을 보낼 주소
URI
http://www.example.com/post/123
URI
http://www.example.com/post/123요청 방식 HTTP(프로토콜 방식)
요청을 보내고자 하는 서버 컴퓨터 주소
첫번째 / 두번째 매개변수(파라미터)
이 값들을 서버에 보낸다!
URI
http://www.example.com/post/123요청 방식 HTTP(프로토콜 방식)
요청을 보내고자 하는 서버 컴퓨터 주소
첫번째 / 두번째 매개변수(파라미터)
이 값들을 서버에 보낸다!인터넷 주소창에 치는게 아니라실제로 서버 컴퓨터에 요청을 보낸다고 생각!
어디로 요청할거야?
HTTP 통신을 하려면…
어떤 방식으로 요청할거야?
무엇을 요청할거야?
어떤 방식으로 요청할거야?
MethodHTTP 요청 방식의 종류
GET, POST, PUT, DELETE …
어디로 요청할거야?
HTTP 통신을 하려면…
어떤 방식으로 요청할거야?
무엇을 요청할거야?
무엇을 요청할거야?
서버에 있는 데이터
무엇을 요청할거야?
서버에 요청을 보낼 때 지켜야 하는 포멧!
Header
Body
2단 도시락을 싸보자!
Header
Header
1 GET /cgi-bin/http_trace.pl HTTP/1.1\r\n2 ACCEPT_ENCODING: gzip,deflate,sdch\r\n3 CONNECTION: keep-alive\r\n4 ACCEPT: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8\r\n5 ACCEPT_CHARSET: windows-949,utf-8;q=0.7,*;q=0.3\r\n6 USER_AGENT: Mozilla/5.0 (X11; Linuxi686) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.24\r\n 7 ACCEPT_LANGUAGE: ko-KR,ko;q=0.8,en-US;q=0.6,en;q=0.4\rn8 HOST: www.joinc.co.kr\r\n9 \r\n
Header
요청에 대한 정보를 담는 부분
요청의 Method요청 URI
HTTP 프로토콜 버전 등등
+@ (커스터마이즈 가능)주로 API 비밀 키 등을 담아서 보냄!
Body
{"email": “example@example.com","password":"123123", "name": "정현", "joinType": "email“
}
Body
요청하는 데이터를 담는 부분
JSON 형식
( POST / PUT / PATCH 방식에서만 존재 )
서로 다른 언어끼리데이터를 주고 받는 방법 중 하나로
약속된 텍스트 형식을 의미한다.
JSON 이란?
서로 다른 언어끼리데이터를 주고 받는 방법 중 하나로
약속된 텍스트 형식을 의미한다.
JSON 이란?
JSON 이란?
루비 자바스크립트
Hash 형태의 데이터
{ key1 => “value” }
자바스크립트에는Hash 형태가 없는데…?
Java에도, Swift에도, 파이썬에도…
전송
JSON 이란?
루비 자바스크립트
JSON 등장!
JSON 이란?
다 내가 말하는 대로 데이터 형식을 바꿔!
{“key1”: “value1”,“key2”: “value2”
}
JSON 이란?
루비 자바스크립트
{ key1 => “value” } { “key1”: “value” } { key1: “value” }
Hash 형식 JSON 형식 Object 형식
JSON 이란?
루비
Hash 형식 JSON 형식
JSON 이란?
루비
Hash 형식 JSON 형식
Body
요청하는 데이터를 담는 부분
JSON 형식
( POST / PUT / PATCH 방식에서만 존재 )
Body
{"email": “example@example.com","password":"123123", "name": "정현", "joinType": "email“
}
프론트엔드 백엔드
요청
응답
Header
Body
Header
Body
응답코드 (성공여부 코드) 등
JSON 형식의 데이터
Q&A
top related