본문 바로가기

웹(Web)

CSR(Client Side Rendering)과 SSR(Server Side Rendering)의 차이점 CSR(Client Side Rendering)과 SSR(Server Side Rendering)의 차이점 1. 브라우저 렌더링 브라우저가 서버로부터 요청해 받은 내용을 브라우저 화면(View)에 표시해주는 작업을 말한다. Chorme 같은 경우, 브라우저 엔진 내부에 렌더링 엔진(Blink)과 자바스크립트 엔진(V8) 이 존재한다. 렌더링 엔진에서는 HTML, CSS를 해석하고 비트맵 형식으로 웹 페이지를 화면에 그리는 역할을 하고, 자바스크립트 엔진에서는 자바스크립트 코드를 해석(*인터프리터)하고 실행하여 웹 페이지에 동적인 기능을 추가하고 상호작용 가능하게 한다.(자바스크립트=인터프리터, 타입스크립트=컴파일) *참조 : JavaScript는 인터프리터 언어? #00. JavaScript는 인터프리터.. 더보기
자바스크립트 엔진과 런타임 환경 1. 자바스크립트 엔진과 런타임 환경 자바스크립트 런타임이란? JavaScript가 구동되는 환경을 말한다. JavaScript의 런타임 환경으로는 웹 브라우저 또는 Node.js 환경이 있다. 우선 대표적인 웹 브라우저 Chome을 기준으로 브라우저의 구성과 자바스크립트 런타임 환경에 대해 알아보자. Chrome 브라우저는 Chromium이라는 브라우저 엔진을 기반으로 동작한다. 이 브라우저 엔진에는 Blink라는 렌더링 엔진이 탑재되어 있다. 이 Blink라는 렌더링 엔진 내부에는 V8이라는 자바스크립트 엔진을 내장하고 있으며, 자바스크립트 코드는 이런 브라우저 내부에 탑재된 V8 엔진을 통해 브라우저 환경에서 해석되고 실행되게 된다. 각 브라우저 마다 탑재되어 있는 렌더링 엔진과 자바스크립트 엔진은.. 더보기
모듈 시스템 require와 import의 차이 / commonJs와 ES6 / 웹팩 바벨 모듈 시스템 require와 import의 차이 💡둘다 모듈화를 위한 모듈 시스템입니다. require는 CommonJS 키워드이고, import는 ES6에서 새로 도입된 키워드입니다. 최근에는 ES6 모듈 시스템인 import가 많이 사용되고 있지만 모든 브라우저에서 호환되진 않기 때문에 Babel과 같이 ES6 문법을 이전 문법으로 트랜스파일링(Transpiling)해주는 도구가 있어야 import를 사용 가능합니다. 차이점으로는 1. CommonJs 모듈 방식으로는 전체 모듈을 다 불러오고, 불필요한 모듈이 로드되기도 하고 모듈 내에서 어떤 부분을 사용했는지도 확인할 수 없습니다. 이 때문에 ES6(ECMA2015)부터는 import 방식의 모듈 시스템을 사용합니다. import는 require과는.. 더보기
브라우저 저장소의 차이점(Local storage, Session storage, cookie) 브라우저 저장소의 종류 브라우저 저장소의 종류는 Cookie, WebStorage 두가지로 나눠지고, WebStorage는 LocalStorage와 SessionStorage로 이루어져 있다. 웹 스토리지(Web Storage) 데이터를 클라이언트에 저장하기 위해 만들어진 키-밸류 형식의 저장소. HTML5에 포함되어 있는 스펙으로 기존의 저장소로 사용되었던 Cookie의 몇가지 단점을 개선한 스펙이다.(키-밸류 페어로 저장됨, 매번 서버로 전송되지 않음) 쿠키(Cookie) 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 키-밸류 형식의 저장소 브라우저 저장소의 차이점 1. 웹 스토리지와 쿠키의 차이점 1) 쿠키 목적 : 쿠키는 서버와 클라이언트가 지속적으로 데이터 교환을 하기 위해 만들어.. 더보기
HTTP란 무엇인가? 1. HTTP란 ? 1. HTTP(Hyper Text Transfer Protocol) 💡 하이퍼텍스트 전송 프로토콜을 의미. 웹 상에서 클라이언트와-서버 간에 데이터 통신을 하기 위한 통신규약 입니다. 클라이언트가 브라우저를 통해서 어떠한 서비스를 URI로 서버에 요청(Request)하면, 서버에서는 해당 요청에 대한 결과를 응답(Response)하는 형태로 동작한다. HTTP/1.1, HTTP/2는 TCP 기반, HTTP/3는 UDP 기반 프로토콜이다. TCP 연결은 요청을 보내거나(혹은 여러 개의 요청) 응답을 받는데 사용된다. 클라이언트는 새 연결을 열거나, 기존 연결을 재사용하거나, 서버에 대한 여러 TCP 연결을 열 수 있다. 2. HTTP 메시지 구조 HTTP 메시지는 요청(Requests).. 더보기
브라우저의 구성 요소와 렌더링 과정 브라우저의 렌더링 원리 브라우저는 사용자 인터페이스, 브라우저 엔진, 렌더링 엔진, 네트워크, 자바스크립트 인터프리터, UI백엔드, 스토리지로 구성되어 있다. 브라우저가 화면을 렌더링 할 때, CRP(Critical Rendering Path) 라는 프로세스를 사용하며 다음 단계들로 이루어진다. (1) 브라우저 엔진이 사용자 인터페이스로부터 URI를 받아 캐시에서 자료를 찾는다. 사용자가 주소표시줄에 입력을 하는 순간, 브라우저 엔진이 주소 값에 해당하는 캐싱된 데이터가 있는지 캐시에서 찾아본다. (2) 렌더링 엔진이 브라우저 엔진 또는 네트워크로부터 자료를 받는다. - 캐싱된 자료가 있다면 브라우저 엔진으로부터 렌더링 엔진이 자료를 받아 HTML, CSS, image 등을 파싱한다. - 캐싱된 자료가 .. 더보기
REST API란 무엇인가? 1. REST의 등장 배경 1. REST의 등장 REST는 인터넷과 같이 복잡한 네트워크 통신이 등장함에 따라, 이를 관리하기 위한 지침으로 만들어졌다. 대부분의 비즈니스 애플리케이션은 다양한 태스크를 수행하기 위해 다른 내부 애플리케이션 및 서드 파티 애플리케이션과 통신해야 한다. 어플리케이션의 통합, 멀티 플랫폼 최근의 서버 프로그램은 다양한 브라우저와 안드로이드폰, 아이폰과 같은 모바일 디바이스에서도 통신을 할 수 있어야한다. 이러한 멀티 플랫폼에 대한 지원을 위해 서비스 자원에 대한 아키텍처를 세우고 이용하는 방법을 모색한 결과, REST에 관심을 가지게 되었다. 이 때 REST 기반 아키텍처를 사용하여 대규모의 고성능 통신을 안정적으로 지원할 수 있다. 쉽게 구현하고 수정할 수 있어 모든 API.. 더보기
[Web] URL과 도메인의 차이, URL의 구조 🙌 URL과 도메인의 차이 - 도메인(Domain) : 서버 이름은 도메인이나 IP주소로 입력 가능하다. 사용자가 매번 IP주소를 입력하기는 쉽지 않다. IP주소를 변환시켜 줄 네임 서버가 도메인을 뜻한다.IP 주소를 갖는 서버를 사용자가 쉽게 기억하고 찾을 수 있도록 만들어준 서비스다. - URL(Uniform Resource Locator)은 도메인을 포함한 경로이다. 사용자가 도메인 서버로 접속을 원할 때, 프로토콜 + 도메인 + 경로 등을 통합적으로 나타내는 주소이다. 예를 들어, https://www.naver.com 전체 주소는 URL이며, https는 프로토콜, www.naver.com은 도메인으로 분류할 수 있다. ✨ URL의 구조 URL은 보통 http또는 https와 같은 Protoco.. 더보기
728x90
반응형

티스토리툴바