루비온레일즈 API 서버 - 1) 인터넷 구조에 대한 대략적인 이해

멋쟁이사자처럼2학기

인터넷 구조에 대한 대략적인 이해서강대멋사박정현

Rails를 배웠다…프론트엔드, 백엔드, 서버가 뭔지 알았다

그런데 앱하고는 어떻게 연동하지?다른 언어 개발자랑은 어떻게 협업하지?

따로 만드는 건가?

안드로이드 iOS 웹


JAVA Swift Javascript


JAVA Swift Javascript프론트엔드



백엔드

서버컴퓨터



백엔드 서버어플리케이션



백엔드 서버어플리케이션

데이터베이스



백엔드서버어플리케이션

웹

Javascript프론트엔드

백엔드

레일즈에서 백엔드 / 프론트엔드어떻게 상호작용 했더라?

웹


백엔드

<%= @post %>

@post = Post.find(1)

프론트엔드

백엔드

요청 응답

일반적으로는…

프론트엔드

백엔드

HTTP 통신으로 JSON을 주고 받는다

웹


백엔드

<%= @post %>

@post = Post.find(1)

프론트엔드

백엔드

웹

Javascript

프론트엔드

백엔드

HTTP 통신으로 JSON을 주고 받는다

프론트(클라이언트)에서 요청을 보내면백엔드(서버)에서 응답하는 방식

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(프로토콜 방식)

요청을 보내고자 하는 서버 컴퓨터 주소

첫번째 / 두번째 매개변수(파라미터)

이 값들을 서버에 보낸다!인터넷 주소창에 치는게 아니라실제로 서버 컴퓨터에 요청을 보낸다고 생각!






MethodHTTP 요청 방식의 종류

GET, POST, PUT, DELETE …






서버에 있는 데이터


서버에 요청을 보낼 때 지켜야 하는 포멧!

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": “[email protected]","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": “[email protected]","password":"123123", "name": "정현", "joinType": "email“

}

프론트엔드 백엔드

요청

응답

Header

Body

Header

Body

응답코드 (성공여부 코드) 등

JSON 형식의 데이터

Q&A

Engineering

루비온레일즈 API 서버 - 1) 인터넷 구조에 대한 대략적인 이해