일단 이번 스프린트의 목적
- 제공된 Chatterbox Server API 문서를 이용해서 클라이언트를 만들기.
- 클라이언트는 서버로부터 받아온 메시지들을 보여 줄 수 있어야하고, 내가 작성한 메시지를 서버에 보낼 수 있어야 한다.
- 클라이언트가 테스트에 통과할 수 있도록 만들자.
- XSS 공격을 어떻게 막을 수 있는지 생각해보자.
~ Client Server Architecture(2 티어 아키텍쳐)의 관점~
일단 간단하게, 쇼핑몰 어플이 하나가 있으면, 그 어플을 구성하는 요소 중..
- 클라이언트 : 리소스를 사용하는 어플.
- 서버 : 리소스가 존재하는 곳.
우선 기본적으로 서버와 클라이언트는 요청-응답을 서로 주고받는 관계이다.
가 되겠다.
Client Server Architecture(2 티어 아키텍쳐)
: 리소스를 사용하는 앱과 리소스 존재영역을 구분하는 것.
|클라이언트|(=> 프론트엔드 영역)
: 서버에게 정보를 요청하여, 리소스를 사용하는 앱
- 결제기능
- 상품조회기능
- 기타 등등..
ex) 웹사이트(웹 앱)/스마트폰,태블릿용 앱/데스크탑 앱
👆 👆 👆
🌍인터넷🌍
|서버|(=> 백엔드 영역)
: 리소스가 존재하여,클라이언트 측에 응답을 전달하는 곳.
- 상품목록
ex) 웹 서버/파일 서버/메일 서버/DB서버
Q. 언제 사용되죠?
=> 초기의 인터넷 서비스, 즉 단순 html문서 같은 전송이 2계층이었다.
=> N계층이 2계층을 완전히 대체하는게 아니라서 FTP나 텔넷은 아직도 2계층이라고 한다. 흠 그 이유는 아마 직접 db서버와 통신하는 구조이기 때문에 그렇지 않을까 싶음. 헬데에 묻기.
N-tier architecture(보통 3 티어 아키텍쳐를 말함)
: 2 티어 아키텍쳐에 실제로 리소스를 저장하는 공간인 데이터베이스까지 추가된 형태. 2계층 구조의 한계를 극복하기 위해 3개 이상의 노드를 네트워크 상에서 구성함.
|클라이언트|(=> 프론트엔드 영역)
: 서버에게 정보를 요청하여, 리소스를 사용하는 앱
- 결제기능
- 상품조회기능
- 기타 등등..
ex) 웹사이트(웹 앱)/스마트폰,태블릿용 앱/데스크탑 앱
👆 👆 👆
🌍인터넷🌍
|서버|(=> 백엔드 영역)
: 리소스를 클라이언트 측에 응답을 전달하는 곳.
- 상품목록노출
- 사용자 인증
ex) 웹 서버/파일 서버/메일 서버/DB서버
|DB|(=> 백엔드 영역)
: 리소스 저장 공간
- 상품목록저장
ex) DB 저장소. *일종의 서버로 볼수 있다고 함.
Q. 언제 사용되죠?
=> 2계층 구조가 한계가 있을때! 즉 재사용성, 유지보수성, 보안등을 강화하기 위해 사용된다.
*자세한 설명은 이후 database sprint를 진행할때 그 계층들을
자세히 공부할 생각이다.
~이번 Chatterbox-Client 스프린트에서 사용한 프로토콜~
👉 HTTP(hypertext transfer protocol)
: 서버와 클라이언트의 통신을 위한 규약.
- UNIX의 기본 프로토콜로 사용되었고, 현재는 인터넷 범용 프로토콜로 사용되고있다.
👉 속성
1). stateless(무상태)
: 앞의 요청에 대한 컨텍스트를 안가지기때문에,
뒤의 요청을 별개로 생각해서 응답을 undefined하게 보냄.
2). connectionless(비연결성)
: 한번의요청엔 한번의응답을! 응답이후에는 연결끊김.
http의 각 요청은 모두 '독립'적이다.
~주요 프로토콜~
OSI 7 layers
- 응용계층
프로토콜 설명 --------------------------------------------------------- HTTP 웹에서 html, json등의 정보를 주고받는 프로토콜 HTTPS http에서 보안이 강화된 프로토콜 FTP 파일 전송 프로토콜 SMTP 메일을 전송하기위한 프로토콜 SSH CLI환경의 원격 컴퓨터에 접속하기위한 프로토콜 RDP window계열의 원격컴퓨터에 접속위한 프로토콜 websocket 실시간 통신, push등을 지원하는 프로토콜
- 전송계층
프로토콜 설명 ---------------------------------------------------------- TCP http, ftp 통신 등의 근간이 되는, 인터넷 프로토콜 UDP (양방향의 TCP와는 다르게) 단방향으로 작동하는 훨씬 더 단순하고 빠르지만, 신뢰성은 낮은 인터넷 프로토콜
API(application programming interface)
: 서버가 클라이언트에게 리소스를 잘 활용할수있도록, 인터페이스를 제공해주는것.
앱이 요청할수있고, 프로그래밍 가능한 인터페이스이다.
즉, 메뉴판처럼 잘 짜여져서 클라이언트가 요청을 잘 할수있게 해야한단거다.
HTTP API 디자인을 잘하는 방법
👍 BEST PRACTICE ↓ ex) 사용자 관리 api
요청 URL 디자인 사용하는 메소드 ----------------------------------------------------------- 모든 사용자 조회 /users GET(read) 새 사용자 추가 /users POST(create) 1번 사용자 정보 갱신 /users/1 PUT(update) or PATCH 1번 사용자 정보 삭제 /users/1 DELETE(delete) 1번 사용자 정보 조회 /users/1 GET(read)
origin 형식
: 끝에 '?'와 쿼리 문자열이 붙는 절대 경로.
이는 가장 일반적인 형식이며, GET, POST, HEAD, OPTIONS 메서드와 함께 사용
ex)
POST / HTTP 1.1
GET /background.png HTTP/1.0
HEAD /test.html?query=alibaba HTTP/1.1
OPTIONS /anypage.html HTTP/1.0
asterisk 형식
: OPTIONS와 함께 별표('*') 하나로 간단하게 서버 전체를 나타냅니다.
ex)
OPTIONS * HTTP/1.1
absolute 형식: 완전한 URL 형식입니다. 프록시에 연결하는 경우 대부분 GET과 함께 사용됩니다.
ex)
GET http://developer.mozilla.org/en-US/docs/Web/HTTP/Messages HTTP/1.1
AJAX
[BEFORE]
태그를 이용해 페이지전환하고 응답하여, 필요한 부분 뿐만이 아닌 '페이지 전부를 다시 렌더링'하게 되어(깜빡임현상) 불필요한 시간과 자원 소모..... 비효율적이었음.[AFTER]
컨텐트를 누르면, 서버응답에따라 동적으로 페이지의 구성요소를
'부분적으로(그 컨텐츠만) 변경'해야함.
=> Dynamic Web Page의 등장.
1) 서버와 자유롭게 통신하며 데이터를 받아오고,
=> 이는 XMLHttpRequest(XHR)를 사용.
2) 페이지 깜빡임현상 없이, seamless하게 동작하는, 애플리케이션 다운 web app의 등장인것임.
=> 부분 렌더링을 위해 js와 dom을 사용
=> 위 1,2를 합친것이 바로 ajax !(asynchronous Javascript and XML(json형식데이터) )
[BEFORE 01]Using XHR
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://52.78.213.9:3000/messages');
//요청의 상태변화를 추적함.
xhr.onreadystatechange = function(){
if(xhr.readystate !== 4){
return;
}
//readystate 4: 완료
if(xhr.status === 200){
//status 200: 성공일때
console.log(xhr.responseText); //서버로부터 온 응답
}else{
console.log('에러: ',xhr.status); //요청 도중 에러 발생했을때
}
}
xhr.send(); //요청 전송
[BEFORE 02]Using XHR(using jQuery) : 01때보다 가독성 ↑
$.get('http://52.78.213.9:3000/messages',function(response){
//response : 서버로부터 온 응답
})
[BEFORE 03] 그래, 보다 쓰기 쉬운 표준 API를 개발하자! -> fetch API
fetch('http://52.78.213.9:3000/messages')
.then(function(response){
return response.json(); //우리가 사용가능하게 json형태로 변환을 시키고
})
.then(function(json){
//json 형태로 전달받은 서버로부터 응답. 스프린트에선,
//응답받은 이 응답객체를 dom으로 건드려서
//필요한 컨텐츠부분을 렌더링시키면 되는거임.
})*fetch로 post요청을 하는 자세한 방법을 알고싶다면 강의의 레퍼런스 참고
- WHY WE USE FETCH()?
fetch API : 네트워크 통신을 포함한 리소스 취득을 위해 인터페이스가 정의되어있다.
XMLHttpRequest와 같은 비슷한 API가 존재하긴 한데,
이 API는 '좀더 강력하고 유연한 조작이 가능'하다!!
fetch 뜻 자체는 가져오다 란 뜻이다. 그니까 서버자원을 가져오는 펀션인거고 ㅇㅇ
~이번 스프린트의 웹 아키텍쳐는?~
-----------------------------------------
fetch()
클라이언트 ----> 서버
<-----
리소스(서버자원)
-----------------------------------------
0203_ socrative & session
- 𝐐. 웹 아키텍쳐 전반을 간단히 설명하고자 합니다. 다음 문장에서 빈 칸에 들어갈 키워드를 알맞게 나열하면?
클라이언트는 인터넷에 연결된 사용자의 디바이스, 또는 웹에 접근할 수 있는 소프트웨어를 뜻한다.
대표적인 예로 [ A ] 가 있는데, [ A ] 는 HTML, CSS, JavaScript 등으로 작성된 코드를 내부 엔진으로 해독하여 사용자가 쉽게 이해할 수 있는 형태의 컨텐츠로 보여주는 역할을 한다.
서버는 클라이언트가 어떤 자원을 요청하면 해당 요청을 적절하게 처리하는 역할을 한다.
클라이언트는 서버의 자원을 어떻게 사용할 수 있는지 명시해 둔 인터페이스 [ B ] 에 따라 요청을 전송한다.
이렇게 클라이언트와 서버가 서로 요청과 응답을 주고받을 수 있는 것은 [ C ] 라는 통신 규약 덕분이다.
정답 : 브라우저, api, http
api 는 클라이언트에서 요청하면 적절하게 서버의 자원을 가져다 쓸 수 있는 메뉴판 같은 거다. 상호작용을 하는 도구이다.
상호작용을 하는 주체는 클라이언트와 서버이다.
- 𝐐. 클라이언트-서버 모델에서, 클라이언트와 서버의 역할에 대한 다음의 설명 중 틀린 것은?
A. 서버: 웹 브라우저를 통해 원하는 정보를 요청한다.𝗫 ——->>> 클라이언트가 맞다.
B. 클라이언트: 유저와의 전반적인 상호작용을 담당한다.
C. 서버: 클라이언트의 요청에 따라 적절한 응답을 되돌려 준다.
D. 클라이언트: 서버로부터 받은 응답에 따라 다른 화면을 표시한다.
정답 A
- 𝐐. AJAX에 대한 다음 설명 중 옳지 않은 것은?
A. AJAX 도입 전에는 XMLHttpRequest를 이용하여 정적으로 페이지 랜더링을 했다.𝗫 - 정적이 아니라 동적으로 가 맞다.
B. AJAX를 통해 클라이언트는 필요한 데이터만 서버를 통해 비동기적으로 받고, 페이지의 일부만 동적으로 업데이트 할 수 있다.
C. 비동기적인 웹앱 제작을 위한 웹 개발 기법이다.
D. Fetch API를 통해 AJAX 요청을 보낼 수 있다.
정답 A
AJAX는 사실 Fetch(혹은 XMLHttpRequest) + DOM + 비동기 이런걸 그냥 다 짬뽕한 용어라고 한다. 따로따로 분리해서 생각하는게 좋다고 함.
AJAX 는 JS 를 사용한 비동기 통신, 클라와 서버간에 데이터를 주고받는 기술이다.
AJAX가 없었다면 검색어 자동완성 추천은 거의 불가능했을 거라고 했음.
AJAX 라는 용어보다 SPA 라는 용어를 더 잘 사용한다.
에어비엔비 사이트 나 구글 검색창에 뭔가 입력할 때 그 부분만 렌더링이 되어 나타난다는 것을 확인할 수 있다.
https://sungmooncho.com/2012/12/04/gmail-and-ajax/
- 𝐐. 다음 중 fetch, XMLHttpRequest, jQuery ajax 메소드의 공통점은 무엇일까요?
A. 클라이언트 측에서, 서버에 자원을 요청하고 받아 오기 위해 사용하는 API다.O
B. 메소드 체이닝 방식을 통해 사용할 수 있어 가독성이 좋다. - fetch, jquery ajax 에만 해당됨
C. 웹 API로서 별도의 라이브러리 설치 없이 사용 가능하다. - jquery ajax 는 라이브러리를 설치하고 사용 가능하다.
메소드 체이닝의 예시 - 고차 함수
- 𝐐. fetch API를 사용하여 http://codestates.com/에 get 요청을 보내고, 받은 response의 body를 json 형태로 바꾸어 콘솔에 출력하려 합니다. 빈 칸에 들어갈 내용을 순서대로 채워 주세요.
web4
정답 : res.json(), then, catch
~질문들~
서버는 JSON 으로 변형된 객체만 해석할 수 잇는건가요? JSON 외에도 XMLhttp 등등 이 있지만 대체로 제이슨이 많다.
일반 객체를 서버가 해석하게 하기 위해서는 JSON.stringyfy() 가 필요하다!
HTTP 참조 링크.
https://developer.mozilla.org/ko/docs/Web/HTTP/Messages
Fetch 내의 url 주소는 api 를 제공? 하는 주소에 한해서만 해당된다!
http 는 편지지 양식 같은 것 (request, response 를 담아서)
fetch 에서 get 요청은 생략해서 할 수 있다.
근데 나머지는 post 나 이런 아이들은 써줘야 한다네? 이건 모질라 사이트 fetch 에서 찾아볼 수 있었다.
- 프론트엔드 개발자:
사용자가 눈으로 보고,
ui를 클릭 또는 터치하는등의 상호작용을 할수있는 앱을 주로 개발.
- 백엔드 개발자:
사용자 눈에 보이진 않지만,
상품정보를 api로 노출한다던지, 로그인/로그아웃, 권한 관리 등의 사용자 인증을 주로 다루는 개발자.
db등의 시스템 설계까지 도맡아 하는 경우도 많음.
