210204

🍎 오늘 한 일

✔️ CORS, Browser Security Model
네트워크와 관련된 개념들을 배웠는데, 처음 전송되는 도메인과 다른 도메인이 리소스 요청을 했을 때 CORS에 의해 요청된다는 것을 알게되었다. 간단한 흐름을 살펴보면, 서버는 요청에 대해 응답을 할 때 헤더의 Access-Control-Allow-Origin의 값으로 리소스 접근이 허용된 출처를 갖고 브라우저는 이후에 자기가 보낸 요청과 서버의 응답을 비교해 유효성을 판단하게 된다. 이런 CORS는 세가지 상황에 따라 동작하는 방식이 바뀐다.첫번째는 Preflight 요청인데, OPTIONS 메서드를 사용해 브라우저가 본격적인 요청을 보내기 전, 어떤 메서드를 사용할 수 있는지 파악하는 요청이다. 두번째는 일반적인 요청인 Simple Request, 마지막은 보안 강화를 위해 요청시 인증을 함께 보내는 Credentialed Request 이다. 추가로 클라이언트가 서버를 신뢰해 발생하는, 메세지에 스크립트 등을 포함해 보내는 XSS이슈, 그리고 서버가 사용자 인증정보를 있는 그대로 믿어버리는 바람에 발생하는 이슈인 CSRF 이슈에 대해서도 배웠다.

✔️ 채팅앱 - 클라이언트 부분 마무리 짓기
메세지를 보낼 때 관련 주제의 태그를 달아서 보낼 수 있는데, 원래 이부분을 input태그로 입력받아 태그를 직접 생성할 수 있게 만들었었다. 그런데 ID도 입력해야하다보니 채팅한번 치는데 너무 번거로운 것 같아 그냥 선택할 수 있도록 option 태그로 변경해주었다. 각 태그별로 메세지를 필터링해서 보게하는 기능이 있었는데 여기에 각 태그마다 몇개의 메세지가 있는 지 표시하는 부분도 추가해 주었다. 마진 문제도 해결하고 몇분전에 보낸 메시지인지 알 수 있도록 시간도 표기해주어 마무리 지었다.

🍎 기억할 것

✔️ MIME type
웹에서 파일의 확장자가 무엇인지 클라이언트에게 알려주는 등 문서의 타입 대한 정보를 알려주기 위해 정해둔 방법
(ex. image/png, application/json...)

✔️AJAX, JSON
Javascript 없던 시절 → XMLHttpRequest 로 HTML 조작(?)
Javascript 활발 이후 → JSON으로 Javascript로 DOM 조작 가능 (JSON은 Javascript 객체형식이니까 훨씬 다루기 편해짐..+다른 언어에서도 키, 값 갖는 객체형식은 매우 흔해서 여기저기서 공통으로 쓰기 좋음)

✔️ RESTFUL하다 = 누구나 딱보면 안다

✔️ 추가
POSTMAN에서 fetch 뿐만 아니라 XHR, jQuery 등 다양한 방식으로 요청을 보내는 방법을 확인해보았다.