웹 캐시란?캐시란 데이터에 빠르게 접근하기 위해 자주 사용되는 데이터나 값을 미리 복사해 놓는 임시 장소를 의미한다.웹 캐시란 브라우저가 서버에서 받아온 리소스를 특정 위치에 저장해 놓는 것이다.이후 요청을 하면, 해당 리소스가 있는지 확인하고 재사용하는 방법이다. 캐시는 Http 헤더의 Cache-Control로 설정할 수 있다. ⭐️ Cache-Control 옵션no-store : 캐시에 리소스를 저장하지 않는다.no-cache : 캐시 만료기간을 신경쓰지 않고 항상 서버에 리소스 재검사를 요청한다.must-revalidate : 캐시 만료기간이 지났을 때만 서버에 리소스 재검사를 요청한다.public : 해당 리소스를 캐시에 저장한다.private : 해당 리소스를 캐시에 저장하지 않는다. 개인정보..

웹뷰(Web View)란?프레임워크에 내장된 웹 브라우저 컴포넌트로 앱 내에서 웹 브라우저를 띄우는 것이다.앱을 벗어나지 않고 웹 브라우저를 띄운다는게 핵심이다.=> 앱에 내장되어 있는 브라우저 카카오톡으로 받은 링크에 접속하면 카카오톡 자체 브라우저를 통해 접근하는데, 이게 웹뷰를 사용한 것이다!앱 개발 방법- 웹앱HTML, CSS, JS로 개발앱과 유사한 경험을 제공하면서 웹 브라우저를 통해 접속하는 웹 페이지설치하는 방식 X - 네이티브 앱특정 플랫폼에 맞게 개발된 앱운영체제와 하드웨어의 기능을 모두 활용할 수 있음앱 스토어에서 설치해야 됨 - 하이브리드 앱웹앱과 네이티브 앱의 장점만 합친 기술앱의 화면이나 기능은 웹 기반으로 제작하고 겉모습은 네이티브 앱으로 패키징앱 스토어에서 설치해야 됨 웹뷰 ..

SWC(Speedy Web Compiler)란?Rust라는 언어로 제작되었고 컴파일과 번들링을 수행하는 빌드 툴이다.매우 빠른 JS 컴파일러로 기존 babel이 하던 일을 대체하였고,SWC는 컴파일러이지만 웹팩과 같은 JS 번들러의 기능도 제공한다.SWC는 단일 스레드에서는 Babel보다 20배 빠르고 , 4개 코어에서는 70배 빠르다. 컴파일 - 한 언어로 작성된 코드를 다른 언어의 코드로 변환(타입스크립트 파일을 자바스크립트 파일로 변환)트랜스파일 - 컴파일의 하위분류. 유사한 두 언어 사이에서 변환(JS 최신 문법을 구형 문법으로 변환)번들러 - 분리된 모듈을 하나의 모듈로 묶어줌(웹팩)Next.js의 SWC 도입Next.js에 SWC를 도입함으로써 Babel과 Terser를 대체하였다.Babel과..

❗️ JS는 싱글 스레드 JS는 싱글 스레드 기반으로 한 번에 한가지 작업만 처리할 수 있다.for (let i=0; i위와 같은 코드를 브라우저 콘솔 창에 실행시킨다면 브라우저가 먹통이 되는 경험을 할 수 있다.JS가 메인 스레드 하나만 가지기 때문이다.오래 걸리는 코드를 다른 스레드에서 실행시키면 문제가 해결되는데 이때 web worker를 사용한다.❗️ Web Worker?싱글 스레드로 동작하는 JS의 단점을 보완하기 위해 나온 기능이다.JS는 싱글 스레드로 동작하는데, 웹 브라우저는 멀티 스레딩을 지원한다.worker는 JS가 제공하는 기능이 아니라 브라우저에서 제공하는 기능이다.최신 브라우저는 대부분 web worker 기능을 지원한다. web worker는 메인 스레드가 아닌 별도의 스레드인 ..

❗️ DOM(Document Object Model)이란?브라우저가 HTML 코드를 해석해서 요소들을 트리 형태로 구조화 것HTML을 자바스크립트가 이해할 수 있도록 객체로 변환DOM은 JS를 사용해서 화면에 콘텐츠를 추가/수정/삭제하거나 이벤트를 처리할 수 있도록 인터페이스 제공❗️ Virtual DOM 등장 배경브라우저가 렌더링 되는 과정을 간단하게 알아보자.HTML과 CSS를 파싱하고 파싱된 결과인 DOM과 CSSOM 트리 생성DOM과 CSSOM 트리를 결합하여 Render 트리를 생성각 노드들의 실제 위치를 계산하는 layout 과정을 진행화면에 요소들을 그리는 painting 과정을 진행 예전에는 SSR 방식을 많이 사용했다.하지만 SPA가 등장하면서 CSR 방식이 사용되고,  DOM 트리를 즉..

❗️ 기존 HTTP 요청 방식웹은 HTTP 요청-응답 모델을 기반으로 동작클라이언트의 요청이 있을 시에만 서버가 데이터를 보낼 수 있음(단방향)비연결성 프로토콜(connectionless) -> 서버는 데이터를 보내고 연결을 끊음무상태 프로토콜(stateless) -> 클라이언트의 상태를 저장하지 않음❗️ Polling클라이언트가 정기적으로 서버에 http 요청을 계속 보내서 데이터를 전달 받는 방식서버는 보낼 데이터가 있든없든 바로 응답을 해줌서버의 상태 변화에 즉각적으로 반응하지 못함 => 요청을 보내는 주기가 정해져 있기 때문에 실시간으로 보낼 수 없음계속해서 요청을 보내기 때문에 트래픽을 낭비http 오버헤드가 발생함일정하게 갱신되는 서버 데이터의 경우에 유용하게 사용❗️ Long-Pollin..