기초부터 완성까지 프론트엔드 - day5

Day 5

오늘 읽은 범위

• 9장 네트워크 통신
• 10장 프론트엔드 뉴스 게시판 만들기

책에서 기억하고 싶은 내용을 써보세요.

• HTTP (HyperText Transfet Protocol) : 하이퍼미디어 문서를 전송하기 위한 프로토콜

• 클라이언트 → 서버 : 요청 (request)
• 서버 → 클라이언트 : 응답 (response)
• http 통신은 상태(state)라는 개념이 존재하지 않음 (클라이언트와 서버가 연결되어 있지 않아 그 전에 처리된 요청과 응답이 통신에 영향을 주지 않고 각각 독립적으로 처리됨)
• https: http보다 보안이 강화됨

응답 상태코드

• 1xx (informational): 서버에서 요청을 수신했으며 현재 처리하고 있거나 정보를 알려 줄 필요가 없을 경우
• 2xx (success): 요청이 성공적으로 완료됨
• 3xx (Rdirection): 요청을 마치기 위해 다른 위치로 리다이렉션하는 것과 같이 추가로 동작을 취해줘야할 때
• 4xx (Client Error): 요청이 잘못된 구문이 포함되어 있거나 수행할 수 없는 경우 반환
  • 400 (Bad Request): 요청 오류. 잘못된 문법으로 인해 서버가 해당 응답을 이해할 수 없을 때
  • 401 (Unauthorized): 권한 없음. 요청 받기 위해서는 인증을 받아야 함
  • 403 (Forbidden): 접근이 금지될 떄 반환
  • 404 (Not Found): 서버가 요청 받은 리소스가 없을 때
• 5xx (Server Error): 서버가 유효한 요청을 수행하지 못했을 때 반환
  • 500 (Internal Server Error): 서버가 처리 방법을 모를 경우 발생
  • 502 (Bad Gateway): 게이트웨이나 프록시 작업 시 잘못된 응답을 수신
  • 503 (Service Unavailable): 서버가 요청을 처리할 준비가 되지 않은 경우. 서버에 과부하가 걸리거나 배포 도중 서비스가 중단 되는 상황 등

헤더 : 서버와 클라이언트 사이에서 body 외에 추가적인 정보를 교환하는 방식

쿠키 :

• 서버가 사용자의 웹 브라우저에 전송하는 작은 기록 정보 파일
• 공개된 정보로 보안에 취약하여 개인 정보나 보안상 중요한 정보를 담기에는 적합하지 않음
• 세션이 종료될 때 제거됨
• setCookie 쿠키를 만듬
• secure 속성을 사용할 경우 HTTPS로 통신하는 경우에만 쿠키가 전송됨
• HttpOnly 클라이언트 측에서 쿠키를 사용할 수 없게 됨 (자바스크립트를 사용하여 쿠키에 접근하는 것을 막음)
• 교차 출처 리소스 공유 (CORS): 브라우저의 보안을 위해 잠재적으로 위험이 있는 문서의 접근을 허용하지 않음 (프로토콜, 포트, 호스트가 같은 때 = 동일출처)

JSON (Javascript Object Notation)

• 자바스크립트의 객체 리터럴 작성법을 따름
• stringify(): JSON 문자열로 변환
• parse(): ECMAScript 객체로 변환

Ajax

페이지 이동 없이 빠르게 화면을 동적으로 변경할 수 있으며 초기에 수신해야하는 데이터의 양을 줄여 빠르게 로딩할 수 있음

XMLHttpRequest : 브라우저와 웹 서버간에 통신을 하여 리소스를 가져올 수 있는 API

Promise: ES2015에서 새롭게 도입됨, 비동기 처리 시점을 명확하게 표현

• new Promise((resolve, reject)=>{})
• 이행 (fullfiled)
• 거부 (rejected)
• 보류 (pending)
• then(): 첫번째 콜백함수: 이행되었을 때 결과, 두번째 콜백함수: 거부되었을 때 에러를 다루는 콜백
• catch(): 에러를 처리하는 메서드
• finally(): 이행, 거부와 상관없이 실행되는 메소드
• 체이닝 가능
• all(): 여러개의 Promise를 동시에 실행시키고 모든 Promise가 완료되면 결괏값을 배열로 반환
• allSettled: all()과 동일하지만, 반환값이 다름 {status:'fullfilled',value:result}, status:'rejected', reason: error 형태

async/await

• Promise의 체이닝이 길어지면 가독성이 떨어지는 것을 개선하기 위해 나옴 문법
• 에러 처리는 try...catch문을 사용
• catch(): 에러를 처리하는 메서드
• Promise.all()과 함께 사용할 수 있음

fetch()

• response 객체를 원하는 형태로 가공할 수 있음
  • text: 텍스트로 반환
  • json: json로 반환
  • formData: FormData 객체 형태로 반환
  • blob: Blob으로 반환
  • arrayBuffer: ArrayBuffer로 반환

별도의 미디어쿼리를 작성하지 않고 rem을 사용해 여러 장치에 대응하도록 함

오늘 읽은 소감은? 떠오르는 생각을 가볍게 적어보세요

open-api를 사용해서 프로젝트를 제작할 때 많은 400번대 오류들을 마주쳤었는데, 책을 읽으며 오류코드의 오류 내용을 정리할 수 있어서 좋았다. 항상 all() 메소드만 이용했었는데 응답의 status의 값에 따라 다른 처리를 해줘야 할 때 allSettled()를 사용해봐야겠다.