👨‍💻 Programming/WEB

1. 개요웹 애플리케이션이나 네트워크 통신 시스템을 설계할 때 "Stateless"와 "Stateful"이라는 개념이 등장합니다. 본 글에서는 Stateless와 Stateful의 개념, 장단점, 그리고 상태 연결 방식에 대해 설명합니다. 2. Stateful(상태유지)란?Stateful(상태 유지) 시스템은 클라이언트의 상태를 서버에서 유지하며, 연속적인 요청 간의 문맥을 기억할 수 있습니다.즉, 클라이언트가 서버에 요청할 때마다 이전 요청의 데이터를 유지한 채로 응답을 처리할 수 있습니다. Stateful 예시Stateful - 상태 유지고객: 이 노트북 얼마인가요?점원: 100만 원입니다. (노트북 상태 유지)고객: 2개 구매하겠습니다.점원: 200만원 입니다. 신용카드, 현금 중에 어떤 걸로 구매..

자바스크립트는 과거 간단한 웹 페이지에 스크립트를 추가하는 용도로 시작되었지만, 점차 대규모 웹 애플리케이션 개발로 확장되었습니다.이 과정에서 코드를 체계적으로 관리하기 위해 등장한 것이 모듈과 모듈 시스템입니다.하지만, 이렇게 나뉜 모듈들은 브라우저와 웹 서버 간의 과도한 HTTP 요청을 유발해 성능 저하를 가져오는 문제를 안고 있었습니다.이 문제를 해결하기 위해 등장한 것이 바로 모듈 번들러(Module Bundler)입니다.이 글에서는 모듈, 모듈 시스템, 그리고 이를 효과적으로 관리하기 위한 Webpack을 통해 번들링 과정을 알아보겠습니다.  모듈 시스템자바스크립트는 과거 간단한 웹페이지에 스크립트를 추가하는 용도로 시작했지만, 점차 복잡하고 대규모 웹 애플리케이션으로 확장되면서 코드 파일을 여..

DOMHTML 문서는 브라우저에 의해 파싱되어, 각 요소를 자바스크립트 객체로 변환한 DOM(Document Object Model) 트리 형태로 브라우저에 저장됩니다.이 DOM 트리는 브라우저의 렌더링 엔진에 의해 관리되며, 이를 기반으로 웹 페이지가 렌더링됩니다. 가상 돔(Virtual DOM)이 왜 등장했는가?가상 DOM의 등장 배경을 이해하기 위해서는 CSR(Client Side Rendering)과 SSR(Server Side Rendering)이라는 렌더링 방식을 먼저 이해해야 합니다. CSR vs SSRSSR (Server Side Rendering) 사용자의 요청에 따라, 웹(프론트) 서버가 최종 완성된 HTML을 생성하여 클라이언트에 전송합니다.각 페이지 요청마다 서버에서 HTML을 생성..

브라우저란?웹 브라우저는 인터넷의 많은 정보(HTML)를 보여주고 전송하는 소프트웨어 프로그램이다. 프런트엔드 개발자는 브라우저에 대해 제대로 알고 있어야한다. 브라우저를 통해 개발, 배포, 디버깅등을 하고, 최종 사용자들도 브라우저를 통해 웹 애플리케이션에 접속하기 때문이다.본 글은 사용자가 브라우저에 사이트 주소를 입력했을 때 페이지가 보여지는 그 원리를 브라우저 측면에서 가볍게 서술한다. 브라우저의 동작사용자가 웹 브라우저에 유튜브 주소를 입력하면, 웹브라우저는 해당 주소(유튜브 서버)에게 요청을 하여 유튜브의 HTML, CSS, JS등의 리소스 파일을 전송받는다. 이때 응답받는 파일은 bit stream(010101011)으로 표현되어 있다. 브라우저는 받은 bit stream을 인코딩하고 렌더링..