난 오늘 아무짓도 안 했지만 몇 십만 원을 잃은 기분이 들었다. 8원에사서 9원에 판 코인이 오늘 90원까지 올라갔다. 5만원 익절하고 좋다고 실실 거리던 과거의 나를 떠올리며 '작은 행복에도 웃을 수 있는 나는 참 긍정적인 사람이구나' 생각하곤 아픈 배를 다잡았다.
Interaction With Server
3티어 아키텍쳐
출처: Codestates
HTTP(프로토콜)로 클라이언트와 서버간 통신
프로토콜: 클라이언트와 서버간 통신 약속
미국 스타벅스에 가서 한국말로 '아메리카노 한 잔 주세요!'라고 말하면 직원은 알아듣지 못 할 것이다.
미국에 가면 영어를 써야하듯 서버에 맞는 프로토콜로 대화를 해야한다.
바디랭기지라고 손짓 발짓 하면서 주문을 할 수도 있다.
이 또한 프로토콜 즉, 아메리카노를 주문 할 수 있는 하나의 방법에 속한다.
HTTP 특징
stateless(무상태성): 특정 상태를 저장하지 않음, 휘발성, 이전 요청 기억못함
모든 http 요청은 독립적이므로 서버는 클라이언트의 상태를 기억하지 못한다
휘발적이지 못하면 보안에 취약할 수 있음
connetionless(비연결성): 통신이 되려면 연결되어야 하는데 HTTP는 연결이 안 되어 있어도 데이터를 보내준다.
상대방의 상태를 미리 알고 있어야 한다 -> 연결성
상대방의 상태를 몰라도 된다 -> 비연결성
HTTP는 상대방 상태를 몰라도 되기 때문에 편리함
순서도 상관없다
통신 규칙-> API
배가 너무 고파서 아무 음식점처럼 보이는 곳으로 들어갔다.
근데 메뉴판도 없고 직원도 없다. 어떻게 뭘 시켜야 할지 전혀 감이 오지 않는다.
이렇게 메뉴판이 없으면 아무 주문을 할 수 없듯이
클라이언트와 서버간의 통신에도 메뉴판이 있어야 클라이언트가 서버에게 주문을 할 수 있다.
그걸 도와주는 역할을 API가 담당한다.
HTTP 요청 메서드
GET: 조회, 데이터를 받아옴
POST: 데이터를 전송
PUT: 데이터를 수정(전체)
DELETE: 특정 데이터 삭제
PATCH: 데이터를 수정(특정한 부분만)
MDN: https://developer.mozilla.org/ko/docs/Web/HTTP/Methods
HTTP 상태코드
200번대: 성공시 출력(성공적으로 받든, 성공적으로 보내든) (200, 201)
400번대: 클라이언트가 잘못 된 요청 (404)
500번대: 서버문제 (501, 504, 507)
MDN: https://developer.mozilla.org/ko/docs/Web/HTTP/Status
AJAX
페이지를 부분적으로 데이터를 변경
출처: Codestates
지메일이 세상을 지배하게 된 이유
https://sungmooncho.com/2012/12/04/gmail-and-ajax/
Browser Security
브라우저는 기본적으로 하나의 도메인을 받는 정책을 수용하고 있다.
CROS(Cross-Origin Resource Sharing)
예외적으로 다른 도메인을 허락
서로 다른 Origin간의 자원 교환
Origin = 출처
구성요소: 프로토콜(HTTP, HTTPS), 도메인(URL), 포트넘버(Gate)
왜 필요해?
한 페이지에서 여러 서버의 데이터를 받아오기 위해
Simple Request
단순 요청
PreFlighted Request
OPTIONS 메서드를 통해 먼저 다른 요청을 보내서 실제 요청을 전송하기 전에 안전한지 확인
XSS
input창에 악성코드를 주입하는 행위
JS와 같은 스크립트 코드를 삽입해 개발자가 고려하지 않은 기능이 작동하게 하는 공격
JS의 높은 가능성과
클라이언트가 서버를 신뢰하기 때문에 발생
CSRF
서버가 클라이언트를 신뢰하기 때문에 발생
그러뭍기
싱글턴 패턴
객체 하나로 전부 작업 수행
-> 어디서든 참조 가능
XSS 필터링
.replace(/</g, '<')
.replace(/>/g, '>')< > 기호를 인식만 다르게 필터링 해준다.
보여지는 건 똑같이 < > 이렇게 나온다.
g는 global의 약자
g안 써주면 < 기호 하나만 적용 됨 뒤에 안 됨
