본문 바로가기

웹 개발 (Frontend Developer)45

Virtual Dom에 대해 문서 객체 모델(DOM)은 HTML 및 XML 문서를 위한 프로그래밍 인터페이스입니다. DOM은 문서의 구조를 노드 트리로 표현하며, 스크립트가 문서의 내용과 구조에 접근하고 조작할 수 있는 방법을 제공합니다. 초기 렌더링 : 앱이 시작될 때, 전체 UI는 가상 DOM(Virtual DOM)으로 표현됩니다. React 요소가 생성되어 가상 구조로 렌더링 됩니다.상태와 Props 변경 : 앱 내에서 상태(state)와 props가 변경되면, React는 가상 DOM에서 해당되는 컴포넌트를 다시 렌더링 합니다.차이 비교 (Diff 알고리즘 사용) : React는 차이(diff)를 확인하기 위해 현재 가상 DOM과 이전 버전을 비교하는 diff 알고리즘을 사용합니다. 이 과정에서 두 버전 간의 차이점을 식별합.. 2024. 10. 10.
Client-side Rendering vs Server-side Rendering 클라이언트 사이드 렌더링(CSR)은 JavaScript를 사용하여 웹사이트나 애플리케이션을 브라우저에서 렌더링 하는 방식입니다. CSR에서는 콘텐츠의 처리 및 렌더링이 서버가 아닌 브라우저에서 이루어집니다.  서버는 페이지의 기본 HTML 컨테이너만 렌더링하고, 나머지 콘텐츠는 클라이언트에서 처리됩니다.CSR은 동적 콘텐츠가 많고 높은 수준의 인터랙티브 기능이 필요한 애플리케이션, 예를 들어 채팅 앱이나 소셜 미디어 플랫폼에 자주 사용됩니다. 또한, 단일 페이지 애플리케이션(SPA) 에도 적합합니다. 유저가 웹 페이지 요청 : 브라우저로부터 유저의 웹페이지 요청을 받습니다서버가 요청을 받습니다 : 서버로 GET 요청 발송서버가 CSS와 JavaScript 파일이 있는 링크를 HTML 페이지 통해 전달 :.. 2024. 10. 9.
Single Page Application (SPA) 싱글 페이지 애플리케이션은 웹 브라우저가 전체 페이지를 새로 로드하는 기본 방식 대신, 웹 서버로부터 새로운 데이터를 받아 현재 웹 페이지를 동적으로 다시 작성하는 웹사이트 또는 웹 애플리케이션입니다. 따라서 사용자는 서버에서 새로운 페이지를 로드하지 않고도 웹사이트를 사용할 수 있어, 성능이 향상되고 보다 인터랙티브한 경험을 얻을 수 있습니다.  반면 A 페이지를 만들면 A html 템플릿, B 페이지를 만들면 B html 템플릿 방식은 전통적인 웹 사이트를 만들 때 사용하는 Multi-Page Application 입니다.  동적 상호작용 : 전체 페이지를 다시 로드하지 않고 빈번한 사용자 상호작용이 필요한 애플리케이션의 경우실시간 업데이트 : 원활한 사용자 경험을 위해 실시간 응답성이 중요한 경우풍.. 2024. 10. 8.
React에 Node.js와 CRP 리액트 프로젝트를 만들기 위해서 Node.js와 NPM을 먼저 설치해야합니다.  크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임으로서, 웹 브라우저 환경이 아닌 것에서도 자바스크립트를 사용하여 연산 할 수 있습니다.  리액트 앱은 웹 브라우저에서 실행되는 코드여서 Node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는 데 주요 도구들이 Node.js를 사용하기 때문에 필요합니다. 이 때 사용하는 개발 도구는 바벨, 모듈화된 코드를 한 파일로 합치고 코드를 수정할 때 마다 웹 브라우저를 리로딩하는 등 여러 기능을 지닌 웹팩 등이 있습니다.  웹 페이지 빌드 과정 (중요 렌더링 경로 / Critical Rendering Path CRP)>브라우저가 서버에서 페이지에 대한 HTML 응답을 받고.. 2024. 10. 6.
리액트란 (React) 무엇인가? React는 사용자 인터페이스를 만들기 위한 Javascript 라이브러리입니다. 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용됩니다. 물론 React와 비슷한 역할을 하는 Angular나 Vue 가 존재하지만 이들은 라이브러리가 아닌 프레임워크입니다.  - 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것입니다. (프레임 워크 안에 다양한 라이브러리가 포함되어 있습니다). 저희가 작성한 소스 코드를 호출합니다.  - 라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것입니다. 소스 코드는 어떤한 기능을 구현하기 위해서 라이브러리를 호출하게 됩니다. 리액트가 라이브러리인 이유는 리액트는 전적으로 UI를 렌더링 하는 데 관여하기 때문입니다. 리액트는 라이브러리이지만, 다.. 2024. 10. 4.
IIFE (Immediately Invoked Function Expression) 즉시 실행 함수 표현 (IFFE)은 정의되자마자 즉시 실행 되는 함수입니다. 이들은 변수에 대한 로컬 스코프를 생성하여 전역 (Global) 스코프를 오염시키는 것을 방지하는 데 주로 사용됩니다.  즉시 실행 : IIFE 함수는 즉시 실행되어, 별도의 함수 호출 없이 함수 내의 코드가 실행되도록 보장합니다.캡슐화 : IIFE는 변수에 대한 개인적인 스코프를 생성하여 전역 스코프를 오염시키는 것을 방지하고, 코드의 다른 부분과의 충돌을 피할 수 있습니다.익명 또는 명명 가능 : IIFE는 익명 함수(이름 없이) 또는 명명된 함수(이름이 있는)로 정의할 수 있습니다. 익명 IIFE가 더 일반적이지만, 명명된 IIFE는 디버깅 시 유용할 수 있습니다.익명 IIFE는 message 변수를 캡슐화하여, 전역 스코.. 2024. 10. 1.

티스토리툴바