이머시브 4주차 3째날이 되었다.
오늘은 client server에대해서 배우는 시간을 가졌다.
HTTP와 AJAX에 대해서 배우고 ChatterBox Client 과제를 진행하면서 새롭게 알게된 사실을 블로깅해보며 다시한번 머릿속에 집어넣어 보자 !
🔥Today Lesson🔥
- Client Server Architecture
- HTTP
- Ajax
HTTP 🎡
HTTP란?
HTTP(Hyper Text Transfer Protocol)는 인터넷에서 데이터를 주고받을 수 있는 프로토콜 이다.
HTTP요청 메서드
HTTP요청은 클라이언트가 웹 서버에게 사용자 요청의 목적/종류를 알리는 수단이다. 대표적인 HTTP요청 메서드를 알아보자 !
1. GET: URL형식으로 웹 서버측 리소스를 요청 (조회할때 사용)
2. POST: 클라이언트에서 서버로 전달하고자하는 정보를 서버로 보냄
3. PUT: post와 같이 정보를 서버로 제출하는 것이나 보통 내용을 갱신할때 사용
4. DELETE: 클라이언트가 서버의 리소스를 삭제할때 사용
5. OPTION: 클라이언트가 서버에서 해당 URL이 어떤 메소드를 지원하는지 확인 할 때 사용
HTTP 상태코드
주로 사용되는 HTTP상태코드에 대해서 알아보자(mdn&위키백과 참고)
1xx (조건부 응답)
100(계속): 요청자는 요청을 계속해야 한다. 서버는 이 코드를 제공하여 요청의 첫 번째 부분을 받았으며 나머지를 기다리고 있음을 나타낸다.
2xx (성공)
200(성공): 서버가 요청을 제대로 처리했다는 뜻이다. 이는 주로 서버가 요청한 페이지를 제공했다는 의미로 쓰인다.
201(작성됨): 성공적으로 요청되었으며 서버가 새 리소스를 작성했다.
202(허용됨): 서버가 요청을 접수했지만 아직 처리하지 않았다.
203(신뢰할 수 없는 정보): 서버가 요청을 성공적으로 처리했지만 다른 소스에서 수신된 정보를 제공하고 있다.
204(콘텐츠 없음): 서버가 요청을 성공적으로 처리했지만 콘텐츠를 제공하지 않는다.
205(콘텐츠 재설정): 서버가 요청을 성공적으로 처리했지만 콘텐츠를 표시하지 않는다. 204 응답과 달리 이 응답은 요청자가 문서 보기를 재설정할 것을 요구한다(예: 새 입력을 위한 양식 비우기).
206(일부 콘텐츠): 서버가 GET 요청의 일부만 성공적으로 처리했다.
3xx (리다이렉션 완료)
300(여러 선택항목): 서버가 요청에 따라 여러 조치를 선택할 수 있다. 서버가 사용자 에이전트에 따라 수행할 작업을 선택하거나, 요청자가 선택할 수 있는 작업 목록을 제공한다.
301(영구 이동): 요청한 페이지를 새 위치로 영구적으로 이동했다. GET 또는 HEAD 요청에 대한 응답으로 이 응답을 표시하면 요청자가 자동으로 새 위치로 전달된다.
302(임시 이동): 현재 서버가 다른 위치의 페이지로 요청에 응답하고 있지만 요청자는 향후 요청 시 원래 위치를 계속 사용해야 한다.
303(기타 위치 보기): 요청자가 다른 위치에 별도의 GET 요청을 하여 응답을 검색할 경우 서버는 이 코드를 표시한다. HEAD 요청 이외의 모든 요청을 다른 위치로 자동으로 전달한다.
304(수정되지 않음): 마지막 요청 이후 요청한 페이지는 수정되지 않았다. 서버가 이 응답을 표시하면 페이지의 콘텐츠를 표시하지 않는다. 요청자가 마지막으로 페이지를 요청한 후 페이지가 변경되지 않으면 이 응답(If-Modified-Since HTTP 헤더라고 함)을 표시하도록 서버를 구성해야 한다.
305(프록시 사용): 요청자는 프록시를 사용하여 요청한 페이지만 액세스할 수 있다. 서버가 이 응답을 표시하면 요청자가 사용할 프록시를 가리키는 것이기도 하다.
307(임시 리다이렉션): 현재 서버가 다른 위치의 페이지로 요청에 응답하고 있지만 요청자는 향후 요청 시 원래 위치를 계속 사용해야 한다.
4xx (요청 오류)
400(잘못된 요청): 잘못된 문법 등으로 인해 클라이언트가 올바르지 못한 요청을 보내 서버가 요청을 이해할 수 없음을 의미합니다.
401(권한 없음): 인증되지 않은 사용자가 인증이 필요한 리소스를 요청하는 경우의 응답 입니다. 보통 로그인이 필요한 API를 비로그인 사용자가 호출했을 때 사용됩니다.
403(금지됨): 클라이언트가 콘텐츠에 접근할 권한을 가지고 있지 않음을 의미합니다. 401과 다른 점은 서버가 클라이언트가 누구인지 알고 있다는 것입니다. 보통 특정 IP나 국가가 차단되어 있는 사이트에 접속을 시도한 경우 사용됩니다.
404(찾을 수 없음): 요청한 리소스가 존재하지 않음을 의미합니다. 인증되지 않은 클라이언트로부터 리소스를 숨기기 위해 403 대신 이 응답을 전송하기도 합니다.
405(허용되지 않는 방법): 현재 리소스에 맞지 않는 메소드를 사용했음을 의미합니다. 예로는 GET 요청만 허용되는데 POST 요청을 한 경우의 응답입니다.
406(허용되지 않음): 알맞은 컨텐츠 타입이 없음을 의미합니다. 서버의 리소스가 클라이언트의 HTTP 헤더에 들어있는 Accept 필드에 명시된 콘텐츠 타입이 아닌 경우의 응답입니다.
408(요청 시간초과): 요청에 응답하는 시간이 너무 오래 걸림을 의미합니다.
409(충돌): 요청이 현재 서버의 상태와 충돌될 때의 응답입니다.
429(너무 많은 요청): 클라이언트가 지정된 시간에 너무 많은 요청을 보낸 경우의 응답입니다.
5xx (서버 오류)
500(내부 서버 오류): 서버에 오류가 발생하여 요청을 수행할 수 없다.
501(구현되지 않음): 서버에 요청을 수행할 수 있는 기능이 없다. 예를 들어 서버가 요청 메소드를 인식하지 못할 때 이 코드를 표시한다.
502(Bad Gateway, 불량 게이트웨이): 서버가 게이트웨이나 프록시 역할을 하고 있거나 또는 업스트림 서버에서 잘못된 응답을 받았다.
503(서비스를 사용할 수 없음): 서버가 오버로드되었거나 유지관리를 위해 다운되었기 때문에 현재 서버를 사용할 수 없다. 이는 대개 일시적인 상태이다.
504(게이트웨이 시간초과): 서버가 게이트웨이나 프록시 역할을 하고 있거나 또는 업스트림 서버에서 제때 요청을 받지 못했다.
AJAX 🎢
AJAX란?
AJAX는 자바스크립트의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. javaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이며 쉽게말해 자바스크립트를 통해서 서버에 데이터를 요청하는 것이다.
AJAX를 사용하는 이유
AJAX는 HTML 페이지 전체가 아닌 일부분만 갱신할 수 있도록 XMLHttpRequest객체를 통해 서버에 request한다. 이 경우, JSON이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다.
fetch api를 사용하여 AJAX통신을 가능하게 할수있다.
CORS 🎠
CORS란?
CORS는 Cross-Origin Resource Sharing의 약자로 W3C에서 서로 다른 Origin에서 리소스(Resource)를 공유할 수 있도록 하기 위해 내놓은 정책입니다. 서로 다른 Origin 이라는 것은 도메인 혹은 포트가 다르다는 것을 의미하므로 서로 다른 도메인 주소 사이에서 데이터(예를 들면 API요청, 응답)를 주고받을 수 있도록 하기 위한 정책이라고 할 수 있습니다.
CORS는 왜 필요한가?
만약 내가 서비스하고 있지 않은 사이트에서 세션을 요청해서 세션을 획득할 수 있다면 해당 사이트는 악의적으로 내 세션을 탈취하거나 다른 행동을 할 수 있습니다. 그래서 브라우저에서는 이러한 요청을 막습니다. 피싱사이트가 대표적인 공격 사례인데 이러한 것을 막고 내가 허용한 origin들만 요청할 수 있도록 하기 위해 필요합니다.
XSS공격
사이트 간 스크립팅으로 웹 앱에서 많이 나타나는 취약점의 하나이며, 웹 사이트의 관리자가 아닌 일반 유저가 웹 페이지에 악성 스크립트를 삽입할 수 있는 취약점이다.
XSS방지하는 방법
유저가 입력한 값 중에 HTML 코드로 인식될 수 있는 특수문자를 일반문자로 바꿔서 처리
웹 페이지를 출력할 때, HTML 코드로 인식될 수 있는 문자열(예를 들면 '<', '&' 등)을 일반 문자열로 바꿔서 출력하도록 하며, 유저가 입력한 값 뿐만 아니라 외부 시스템에서 온 데이터 등도 웹 페이지에 출력 대상이 되는 것이라면 반드시 처리해주는 것이 중요하다.
하루를 마치며👋
오늘 http와 ajax에 대해서 공부하고 스프린트 과제를 진행을 하였는데 어렵다는 생각밖에 들지 못했던거 같다... 꾸역꾸역 검색해보며 진행을 하긴 했는데 나중에는 페어와 서로 한마디도 없이 검색을 하기만 했던거 같다... 오늘 남은시간에 쫌 더 공부해서 내일은 과제 진행에 영향이 없도록 해야겠다 !
