CS/WEB & 네트워크7 [네트워크] Cross Origin Resource Sharing (CORS) Cross Origin Resource Sharing (CORS) 웹 개발에서 빠질 수 없는 개념인 Cross Origin Resource Sharing (CORS)를 알아보자. # Same Origin 정책 vs Cross Origin 정책 서버와 클라이언트는 HTTP로 통신한다. 이때, 특정한 정책 아래에서 요청을 주고 받게 되는데 그 정책에는 Same Origin 정책과 Cross Origin 정책이 있다. HTTP 요청이 무엇이냐에 따라 Same Origin 정책을 따르거나 Cross Origin 정책을 따르는 것이다. Origin이란 말 그대로 출처이다. 즉, HTTP 요청의 종류에 따라 같은 출처(Same Origin)만을 허용하거나 다른 출처(Cross Origin)도 허용하는 경우로 나뉜다.. 2023. 2. 10. [네트워크] HTTP HTTP # HTTP (Hyper Text Transfer Protocol) HTTP는 서버와 클라이언트가 서로 데이터를 주고받기 위해 사용되는 통신 규칙이다. 클라이언트는 서버에게 정보를 요청하고, 서버는 이에 응답한다. 이렇게 서로 데이터를 주고 받을 때는 일정한 규칙이 필요한데, 이 규칙이 바로 HTTP이다. HTTP에는 두 가지 특징이 있다. 1. 무상태성 (Stateless) 서버가 클라이언트의 상태를 보존하지 않는다. 로그인을 하고 난 뒤 마이페이지로 이동하는 상황을 가정해보자. 서버는 로그인을 한 사용자와 마이페이지로 이동하는 사용자가 같은 사용자인지 알지 못한다. 서버와 클라이언트는 계속해서 통신을 하지만 서버는 클라이언트가 누구인지 기억하지 못하기 때문이다. 따라서 클라이언트 쪽에서 서버.. 2023. 1. 8. [네트워크] REST API REST API # API(Application Programming Interface)란? 프로그램들이 서로 소통하는 방법이다. interface라는 단어는 정형화된 버튼이라고 이해할 수 있다. 예를 들어, 우리는 컴퓨터를 사용할 때 글자를 입력하고 싶다면 키보드를 사용하고, 클릭을 하고 싶다면 마우스를 사용한다. 이때 키보드와 마우스가 interface이다. 우리는 interface를 통해 컴퓨터와 소통하고 있는 것이다. API 단어 속의 interface도 같은 의미이다. 프로그램들이 서로 데이터를 주고 받기 위해서는 소통 방법이 필요하다. 프로그램들이 서로 소통을 하기 위한 지정된 형식, 그것을 바로 API라고 한다. # REST API 그렇다면 REST API란 무엇일까? API의 종류 중 하나.. 2022. 12. 11. [WEB] SPA, MPA와 CSR, SSR, SSG SPA, MPA와 CSR, SSR, SSG 1. SPA와 MPA 예전에는 웹 사이트를 만들 경우, 여러 페이지를 만들 때는 각각에 해당하는 html 파일을 만들었다. a페이지를 보여주기 위해서는 a.html을 만들고 b페이지를 보여주기 위해서는 b.html을 만든다. a페이지를 보다가 b페이지를 보고 싶으면 페이지를 새로 렌더링 했다. 이렇게 각 페이지에 해당하는 html을 다 따로 만들어서 페이지를 접속할 때마다 새로 렌더링해서 새로 html 페이지를 보여주는 전통적인 웹 페이지 방식, 이를 MPA(Multi Page Application)이라고 한다. 그러나 점차 웹 사이트의 규모가 커지고 데이터가 많아지면서 페이지를 바꿀 때마다 페이지를 새로 렌더링하면 속도가 느려지는 등의 문제가 생겼다. 따라서 .. 2022. 11. 29. [WEB] 브라우저 렌더링과 DOM 브라우저 렌더링과 DOM # 브라우저 렌더링 과정 우리는 웹 페이지를 어떻게 보게 되는가? 클라이언트가 서버에게 웹 페이지를 요청하면 서버는 그에 대한 응답으로 클라이언트에게 웹 페이지의 HTML, CSS, 자바스크립트로 구성된 텍스트 문서를 준다. 이 문서를 브라우저가 파싱(해석)하여 렌더링(시각적으로 출력)하는 과정을 거쳐 우리에게 보여지게 된다. 대략적인 과정은 다음과 같다. 1) 브라우저는 HTML, CSS, 자바스크립트 등 렌더링에 필요한 리소스를 서버에게 요청하고, 응답을 받는다. 2) 브라우저의 렌더링 엔진이 HTML을 파싱하여 DOM을 생성하고, CSS를 파싱하여 CSSOM을 생성한다. 3) DOM과 CSSOM을 결합하여 렌더 트리를 생성한다. 4) 브라우저의 자바스크립트 엔진이 자바스크립.. 2022. 11. 9. [WEB] 브라우저 저장소 브라우저 저장소 # 브라우저 저장소가 필요한 이유 웹은 HTTP 프로토콜로 통신한다. HTTP는 클라이언트-서버 간의 통신이 끝나면 상태 정보를 저장하지 않고 접속을 종료한다는 특징이 있다. 예를 들어, 로그인을 하고 난 뒤 마이페이지를 접속하려 할 때, 서버는 로그인을 한 사용자와 마이페이지에 접속하려는 사용자가 같은 사람인지 알지 못한다. 따라서 서버가 사용자를 식별하고 정보를 저장하기 위해 쿠키라는 기능이 도입되었다. # 쿠기 사용자의 브라우저에 저장되는 작은 크기의 문자열 정보이다. 웹 사이트를 사용하는 사용자의 정보를 저장한다. 서버와 데이터를 주고 받기 위한 용도로 사용되며, 만료시간을 지정할 수 있다. (그래서 로그인 창의 자동완성 기능, 공지사항 오늘 하루 보지 않기 기능 등에 이용된다.).. 2022. 11. 6. 이전 1 2 다음
