look-forest

이번 시간에는 CSR과 SSR이 무엇이고 어떤 장단점을 가졌는지 알아보겠다. SPA (Single Page Application) ▷ CSR 사용자가 한 페이지 내에서 머무르면서, 서버로부터 필요한 데이터만 받아와 부분적으로 갱신 ▷ 한 페이지로 여러 정보 표현 가능 부분적 갱신 by ajax html 문서 전체가 아니라 json과 같은 형식으로 필요한 정보만 받아올 수 있음 ▷ 동적으로 html 요소 생산, 업데이트 CSR (Client Side Rendering) HTML 결과를 자바스크립트를 사용해 웹 브라우저에서 동적으로 생성해서 적용 주로 동적인 화면에 사용, 웹 환경을 마치 앱 처럼 필요한 부분부분 변경할 수 있음 예) 구글 지도, Gmail, 구글 캘린더 관련기술: React, Vue.js ..

Server가 HTML을 전달하는 건 알고 있을 것이다. 그렇다면 모바일 앱이나 웹 프론트엔드는 어떻게 동작하는 것일까? 이번 시간에는 서버가 HTTP를 통해 무엇을 주고받는지 정리하겠다. 1. 정적 리소스 미리 만들어 둔 HTML, CSS, JS, 이미지, 영상 등을 제공한다. 2. 동적 리소스 서버가 HTML을 동적으로 바꿔서 전달한다. MVC와 템플릿 엔진 - MVC: Controller가 HTML 생성을 위한 뷰 템플릿(View)과 데이터(Model)를 지정 - 템플릿 엔진: 데이터(Model)를 받아 동적으로 HTML을 생성한다. (JSP, PHP, Thymeleaf 등) 3. HTTP API HTML이 아니라 데이터를 전달한다! (주로 JSON 형식 사용) HTTP API는 다양한 시스템에서 ..

이번 시간에는, 웹 서버와 웹 애플리케이션 서버는 무엇이고, 어떻게 다른지에 대해 알아보겠다. 그 후 웹 시스템이 어떻게 구성되는지도 살펴보겠다. HTTP 최근에는, 데이터를 주고받을 때 대부분 HTTP 프로토콜 기반으로 동작한다. 심지어 서버간에 데이터를 주고 받을 때도 대부분 HTTP를 사용한다. HTTP 메시지에 모든 것을 담아 전송한다. HTML, TEXT IMAGE, 음성, 영상, 파일 JSON, XML (API) Web Server와 WAS Web Server HTTP 기반으로 동작하며, 정적 리소스를 제공한다. (정적 HTML, CSS, JS, 이미지, 영상) 예) NGINX, APACHE Web Application Server (WAS) 프로그램 코드를 실행해서 애플리케이션 로직을 수행한..

이번 시간에는 캐시와 캐시 관련 헤더에 대해 알아보겠다. 캐시 기본 동작 캐시가 없으면.. 데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야 한다 인터넷 네트워크는 매우 느리고 비싸다 → 브라우저 로딩 속도가 느려진다 → 느린 사용자 경험 캐시를 도입하자! 1. 응답 메시지에 cache-control 필드를 추가 2. 응답 결과를 브라우저 캐시에 저장 3. 이후 요청은 브라우저 캐시에서 꺼내쓴다! 캐시 덕분에 캐시 가능 시간 동안 네트워크를 사용하지 않아도 된다!! 그런데 캐시 유효 시간이 초과하면, 서버를 통해 데이터를 다시 받아 캐시를 갱신한다 리소스는 바뀐 게 없는데, 굳이 이런 바보 같은 짓을 해야 할까? 검증 헤더와 조건부 요청 캐시 유효 시간 초과 시 캐시 유효 시간이 ..

앞서 HTTP 메시지는 Start line - Header - Body로 이루어진다고 했다. 2021.05.17 - [Web/HTTP] - HTTP 기본 HTTP 헤더에 들어갈 수 있는 표준 헤더 field가 참 많은데, 오늘은 가장 기본이 되는 것부터 알아보겠다. HTTP Header 개요 표현(Representation) 요청이나 응답에서 전달할 실제 데이터. 리소스를 표현한 것. 왜 표현이라 하는가? HTTP 메시지를 통해 전달할 데이터는 리소스를 HTML, JSON 등으로 '표현'한 것이므로. Representation = Representation Metadata + Representation Data HTTP Body 메시지 본문(message body)을 통해 Representation Da..

상태 코드란? 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능 1xx (Informational): 요청이 수신되어 처리중 (거의 사용되지 않는다) 2xx (Successful): 요청 정상 처리 3xx (Redirection): 요청을 완료하려면 추가 행동이 필요 4xx (Client Error): 클라이언트 오류, 잘못된 문법 등으로 서버가 요청을 수행할 수 없음 5xx (Server Error): 서버 오류, 서버가 정상 요청을 처리하지 못함 2xx (Successful) "클라이언트의 요청을 성공적으로 처리했다" 200 OK 201 Created "요청이 성공해서 새로운 리소스가 생성됐다" 생성된 리소스는 응답의 Location 헤더 필드로 식별 202 Accepted "요청이 접수되..

이번 시간에는, 실무에서 앞서 배운 HTTP 메서드를 어떻게 적용하면 좋을지 정리해보겠다. 클라이언트에서 서버로의 데이터 전송 방식 데이터 전달 방식은 크게 2가지 쿼리 파라미터를 통한 데이터 전송 GET / 주로 필터(검색어, 정렬 조건) 메시지 바디를 통한 데이터 전송 POST, PUT, PATCH / 회원 가입, 주문, 리소스 등록, 리소스 변경 데이터 전송의 4가지 CASE 정적 데이터 조회 응답 결과를 보통 정적리소스, HTML로 받을 때 사용 동적 데이터 조회 응답 결과를 보통 HTML로 받을 때 사용 HTML Form을 통한 데이터 전송 응답 결과를 보통 HTML로 받을 때 사용 HTTP API를 통한 데이터 전송 응답 결과로 HTML이 아닌 데이터를 전달 받음 쿼리 파라미터 데이터 전송 1..

다음과 같은 회원 정보 관리 API를 만든다고 가정해보자 회원 목록 조회 회원 조회 회원 등록 회원 수정 회원 삭제 API URI를 다음과 같이 설계했다. 기능 URI 회원 목록 조회 /read-member-list 회원 조회 /read-member-by-id 회원 등록 /create-member 회원 수정 /update-member 회원 삭제 /delete-member 이것은 좋은 URI 설계일까? 이번 시간에는 URI 설계 기준과 HTTP Method, 그리고 HTTP Method의 속성에 대해서 알아보겠다. URI 설계 기준 URI 설계 기준 = 1. 리소스 식별 2.URI 계층 구조 활용 1. URI(Uniform Resource Identifier)는 이름 그대로 리소스를 식별하는 목적이다. 따..