Virtual Dom

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

• format_list_bulleted WEB
• · 2024. 9. 4.
• textsms

Polling/Long-Polling/SSE/Web Socket

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

• format_list_bulleted WEB
• · 2024. 8. 27.
• textsms

Nginx

👀 Web Server와 WAS 차이 - Web Server : 정적인 컨텐츠(HTML, CSS, JS)를 제공하는 서버HTTP 프로토콜을 기반정적 컨텐츠 제공 -> WAS를 거치지 않고 바로 제공동적 컨텐츠 제공을 위한 요청 전달 -> WAS에 클라이언트 요청을 전달하고, WAS에서 처리한 결과를 클라이언트에게 전달ex) Apache, Nginx - WAS(Web Application Server) : 동적인 컨텐츠를 처리하고 제공하는 서버HTTP 프로토콜 기반DB 조회 및 다양한 로직이 필요한 동적인 컨텐츠를 제공프로그램 실행 환경 및 DB 접속 기능 제공ex) Tomcat 🤔 웹 서버의 기능은 WAS에서도 처리 가능한데, 둘을 구분하는 이유는? 사용하는 '목적'이 다르다.정적인 컨텐츠는 웹 서버..

• format_list_bulleted WEB
• · 2024. 8. 21.
• textsms

SEO 최적화

👀 SEO란?Search Engine Optimization의 약자로 검색 엔진 최적화를 의미한다.웹 사이트를 검색 엔진 상위에 노출되도록 개선하는 것이다. 🤔 왜 SEO를 해야 할까?잠재 고객 증가웹 사이트가 검색 결과의 상위에 노출되면 자연스럽게 방문하는 고객이 증가한다.타겟 고객 접근특정 키워드를 검색 했다는 것은 이미 해당 제품이나 서비스에 관심이 있다는 것이다.👀 SEO vs SEMSEO는 검색 엔진 최적화, SEM(Search Engine Marketing)은 검색 엔진 마케팅을 의미한다. 🤔 SEM이란?검색을 했을 때, 상단에 위치하는 광고 게시물들이 SEM을 이용한 것이다. 🤔 SEM과 SEM 차이점SEO는 시간을 투자해야하지만, SEM은 적은 시간으로 트래픽을 모을 수 있다.SE..

• format_list_bulleted WEB
• · 2024. 8. 20.
• textsms

webpack vs vite

👀 모듈? 모듈 번들러?모듈이란 분리된 파일을 의미한다. 웹 사이트를 만들고 배포를 하면 사용자들이 브라우저를 통해 웹 사이트에 접근한다.이 때, 브라우저는 사용자에게 UI를 보여주기 위해 서버에 자원을 요청한다.모듈을 계속해서 분리하면 그만큼 브라우저에서 서버로 요청하는 파일의 개수가 증가하게 되는데,이는 네트워크 비용 증가와 페이지 로딩 시간을 증가시켜 사용자 경험에 안좋다.=> 브라우저에서 서버로 요청하는 http 개수를 줄이는 작업이 필요하다. 번들링 : 개발할 때는 모듈을 분리해서 개발하고, 배포하기 전에 모듈들을 하나로 묶어주는 작업모듈 번들러 : 번들링 작업을 해주는 툴  따라서 모듈 번들러를 사용해서파일 개수를 줄여, http 요청을 줄이는 동시에 로딩 속도도 줄일 수 있고JS 압축, C..

• format_list_bulleted WEB
• · 2024. 8. 14.
• textsms

Debounce와 Throttle

Debounce와 Throttle은 이벤트나 함수 호출의 빈도를 줄여서 성능을 최적화 시키기 위해 사용되는 개념들이다.검색하는 상황을 예시로 들어보자.한 글자 입력시 마다 요청을 보내는 것보다, 입력 중간중간 특정 시점이나 입력이 끝난 후 요청을 보낸다면 api 호출의 수가 줄어들게 된다.이 때, Throttle은 특정 시점에 api를 호출하는 것이고 Debounce는 입력이 끝난 후에 api를 호출하는 것이다.👀 Debounce연이어 발생한 이벤트를 하나의 그룹으로 묶어서 처리하는 방식이다.주로 처음이나 마지막으로 실행된 함수를 처리하는 방식으로 사용한다. 요청이 들어오고 일정 시간이 지난 후에 요청을 수행한다.일정 시간 안에 같은 요청이 추가로 들어오면 이전 요청은 취소된다. 이벤트를 실행하는 기점..

• format_list_bulleted WEB
• · 2024. 8. 2.
• textsms