웹 페이지 웹 페이지는 HTML, CSS, Javascript 세가지 언어로 구성되어 있다. HTML 을 구조 CSS 은 시각 Javascript 는 기능을 담당한다. 브라우저 웹 페이지를 그려주는 도구 크롬, 사파리 등이 있다. 공통적으로 HTML, CSS, Javascript 만을 인식할 수 있다. HTML HyperTextMarkupLanguage 본질은 사용자 간의 소통을 위해 정해진 약속이다. 웹 페이지에 문서를 작성하는데 정해진 약속 태그를 통해 웹 페이지에 보여질 내용을 나타낸다. 태그 태그란? 하나의 약속된 명령어이며, 고유한 기능을 가지고 있다. + 내용 + 로 구성된 한줄을 HTML Element (요소) 라고 부른다. 안에 들어간 문법에 따라 고유의 기능을 가지고 있다. 꾸며주는 태그..
Auto Rename Tag : HTML 태그 수정 시 시작태그와 종료태그를 자동으로 함께 수정해 주는 모듈 Code Spell Checker : 사전에 없거나 자주 사용되지 않는 단어가 사용되면 경고해 주는 모듈 Error lens : 문제가 있는 부분을 직관적으로 알려주는 모듈 Live Server : html을 작성할 때 변경된 점을 바로 확인할 수 있도록 도와주는 모듈
Cache-Control (확실한 캐시 무효화 응답) Cache-Contorl: no-cache, no-store, must-revalidate Pragma: no-cache HTTP 1.0 하위 호환
Cache-Control Cache-Control: public 응답이 public 캐시에 저장되어도 됨 private 응답이 해당 사용자만을 위한 것임. private 캐시에 저장해야 함(default) s-maxage 프록시 캐시에만 적용되는 max-age Age: 60 (HTTP 헤더) origin 서버에서 응답 후 프록시 캐시 내에 머문 시간 (초0
캐시 제어 헤더 Cache-Control: 캐시 제어, 캐시 지시어(directives) max-age : 캐시 유효 시간, 초 단위 no-cache : 데이터는 캐시해도 되지만, 항상 origin 서버에 검증하고 사용 no-store : 데이터에 민감한 정보가 있으므로 저장하면 안됨 Pragma: 캐시 제어 (하위 호환) no-cahche HTTP 1.0 하위 호환 Expires: 캐시 유효 기간(하위 호환) 캐시 만료일을 정확한 날짜로 지정 검증 헤더와 조건부 요청 헤더 검증 헤더 (Validator) ETag: "v1.0" Last-Modified: Thum 04 Jun GMT 조건부 요청 헤더 If-Match, If-None-Match: ETag 값 사용 If-Modified-Since, If-U..
캐시 시간 초과시, 다시 네트워크 다운로드가 발생한다. 해결 : 검증 헤더와 조건부 요청 브라우저 개발자 도구에서 Status의 색깔이 연한 것은 cache해서 불러온 것. 검증 헤더와 조건부 요청 검증 헤더 캐시 데이터와 서버 데이터가 같은지 검증하는 데이터 Last-Modified, ETag 조건부 요청 헤더 검증 헤더로 조건에 따른 분기 If-Modified-Since : Last-Modified 사용 If-None-Match : ETag 사용 조건이 만족하면 200 OK 조건이 만족하지 않으면 304 Not Modified ETag, If-None-Match ETag, If-None-Match 정리 진짜 단순하게 ETag만 서버에 보내서 같으면 유지, 다르면 다시 받는다. 캐시 제어 로직을 서버에..
header-field = field-name ":" OWS field-value OWS field-name은 대소문자 구분이 없음 HTTP 표준 1999년 RFC2616 -> 폐기됨 General 헤더 : 메시지 전체에 적용되는 정보. Connection: close Request 헤더 : 요청 정보. User-Agent Response 헤더 : 응답 정보. Server Entity 헤더 : 엔티티 바디 정보. Content-Type, Content-Length 엔티티 헤더는 엔티티 본문의 데이터를 해석할 수 있는 정보 제공 2014년 RFC7230~7235 등장 Entity -> Representation(표현) Representation = representation Metadata + Repres..
상태 코드 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 1xx (Informational) : 요청이 수신되어 처리중 2xx (Successful) : 요청 정상 처리 3xx (Redirection) : 요청을 완료하려면 추가 행동이 필요 4xx (Client Error) : 클라이언트 오류, 잘못된 문법 등으로 서버가 요청을 수행할 수 없음 5xx (Server Error) : 서버 오류, 서버가 정상 요청을 처리하지 못함 2xx (Successful) 클라이언트의 요청을 성공적으로 처리 200 OK 201 Created 클라이언트가 요청했을 때, 서버에서 리소스를 등록한다. POST로 등록했을때 202 Accepted 요청이 접수되었으나, 아직 처리가 완료되지 않았음 배치 처리 같은 ..
HTTP API - 컬렉션 POST 기반 등록 예) 회원 관리 API 제공 HTTP API - 스토어 PUT 기반 등록 예) 정적 컨텐츠 관리, 원격 파일 관리 HTML FORM 사용 웹 페이지 회원 관리 GET, POST만 지원 (제약) 회원 관리 시스템 API 설계 - POST 기반 등록 회원 목록 조회 : /members -> GET 회원 등록 : /members -> POST 회원 조회 : /members/{id} -> GET 회원 수정 : /members/{id} -> PATCH(부분 변경), PUT(게시글 덮어쓰기), POST 회원 삭제 : /members/{id} -> DELETE POST - 신규 자원 등록 특징 클라이언트는 등록될 리소스의 URI를 모른다. 회원 등록 /members ->..
