프론트엔드17 [브라우저 렌더링] 초 간단 요약 1. HTML 파싱 (Parsing)HTML 다운로드: 서버에서 HTML 파일을 다운로드합니다.DOM 생성: 브라우저는 HTML을 파싱하여 **Document Object Model (DOM)**을 생성합니다. DOM은 HTML 문서의 구조를 트리 형태로 표현합니다.2. CSS 파싱CSS 다운로드: 브라우저는 HTML 문서에서 참조된 CSS 파일을 다운로드합니다.CSSOM 생성: 브라우저는 CSS를 파싱하여 **CSS Object Model (CSSOM)**을 생성합니다. CSSOM은 스타일 규칙을 트리 형태로 표현합니다.3. Render Tree 생성스타일 적용: 브라우저는 DOM과 CSSOM을 결합하여 Render Tree를 생성합니다. Render Tree는 화면에 표시할 요소와 그 스타일을 포함합.. 2024. 8. 28. React Query의 처리중 상태 구분하기 React Query에서 isFetching, isLoading, isPending, isRefetching의 차이점과 활용법React Query는 서버 상태를 효율적으로 관리할 수 있는 강력한 라이브러리입니다. 서버에서 데이터를 가져오거나 캐싱하는 작업을 단순화해 주며, 이 과정에서 발생하는 다양한 상태를 쉽게 관리할 수 있도록 여러 상태 플래그를 제공합니다. 이번 글에서는 React Query의 중요한 상태 플래그인 isFetching, isLoading, isPending, isRefetching에 대해 자세히 알아보겠습니다. 1. isFetching: 데이터 갱신 상태를 확인isFetching은 쿼리가 백그라운드에서 데이터를 갱신 중인지 여부를 나타내는 플래그입니다. 예를 들어, 이미 캐시된 데이.. 2024. 8. 16. ty vs got: 어떤 라이브러리를 선택할까? 자바스크립트에서 ty 라이브러리와 got 라이브러리는 모두 HTTP 요청을 처리하는 데 사용될 수 있는 도구들입니다. 하지만 이 두 라이브러리는 목적과 기능 면에서 차이가 있습니다. 이번 블로그 글에서는 ty와 got의 주요 기능, 사용 사례, 장단점을 비교하여 어떤 상황에서 어떤 라이브러리를 사용하는 것이 좋을지에 대해 알아보겠습니다.1. ty 라이브러리란?개요ty는 주로 API와의 상호작용을 위한 라이브러리로, 특히 TypeScript 개발자들을 위한 라이브러리입니다. ty는 TypeScript의 타입 시스템을 최대한 활용하여 안전한 API 호출을 가능하게 합니다. API와의 통신 과정에서 타입 안전성을 유지하며, 자동으로 타입을 추론해주는 기능이 특징입니다. 주요 기능타입 안전성: API 요청과 응.. 2024. 8. 12. HTML의 a 태그 가이드 a 태그란?a 태그는 앵커(anchor) 태그라고도 불리며, 주로 하이퍼링크를 생성하는 데 사용됩니다.이 태그를 사용하면 사용자가 한 웹 페이지에서 다른 웹 페이지로, 또는 같은 페이지 내의 다른 위치로 쉽게 이동할 수 있습니다.기본 문법a 태그의 기본 문법은 다음과 같습니다:링크 텍스트 여기서 href 속성은 하이퍼링크의 목적지 URL을 지정하고, "링크 텍스트"는 사용자가 클릭할 수 있는 텍스트입니다.예제1. 외부 웹사이트로 링크:Example 사이트로 이동2. 같은 사이트 내의 다른 페이지로 링크:About 페이지로 이동 3. 같은 페이지 내의 다른 위치로 링크섹션 1섹션 1으로 이동 속성a 태그에는 href 외에도 여러 가지 유용한 속성이 있습니다:target: 링크를 열 때 브라우저의 동작을 지.. 2024. 8. 6. React에서 비동기작업을 컴포넌트 로딩 전에 하면 useEffect를 사용하지 않아도 될 것 같은데, 왜 useEffect를 사용해서 처리하는걸까 ? useEffect?우선 useEffect가 어떤 역할을 하는지부터 알아보겠습니다.useEffect는 React에서 사이드 이펙트를 처리하기 위해 사용하는 훅입니다. 사이드 이펙트는 데이터 패칭, DOM 업데이트, 타이머 설정 등과 같이 컴포넌트의 렌더링과는 직접적으로 관련이 없는 작업들을 말합니다. useEffect의 주요 역할은 다음과 같습니다:컴포넌트 마운트 및 업데이트 시 작업 수행컴포넌트 언마운트 및 업데이트 시 작업 수행: 컴포넌트가 언마운트될 때나 업데이트 전에 이전 사이드 이펙트를 정리(cleanup)하는 작업을 수행합니다.종속성 배열: 두 번째 인자로 전달하는 배열을 통해 전달된 변수의 배열값이 변경될 때마다 실행하여, 사이드이펙트를 관리할 수 있습니다.React에서 초기에 데이터를 셋팅하.. 2024. 7. 22. ReactJS와 타입스크립트를 함께 사용하는 이유 소개 ReactJS와 TypeScript는 현대적인 프론트엔드 개발에서 매우 인기 있는 기술입니다. ReactJS는 사용자 인터페이스를 구축하기 위한 강력한 라이브러리이고, TypeScript는 자바스크립트에 정적 타입을 추가하여 개발자의 생산성을 향상시키고 버그를 줄이는 데 도움을 줍니다. 이 블로그 포스트에서는 ReactJS와 TypeScript를 함께 사용하는 이유에 대해 자세히 알아보겠습니다. 1. 정적 타이핑 ReactJS와 TypeScript를 함께 사용하면 정적 타입 검사를 통해 코드의 안정성을 높일 수 있습니다. TypeScript는 변수, 함수, 컴포넌트 등에 타입을 명시하여 개발자가 의도한 대로 코드가 작동하는지 사전에 확인할 수 있습니다. 이는 개발자가 실수로 발생할 수 있는 버그를 .. 2023. 6. 28. 아직도 이거 모르니? React의 힘 useState 동작원리! 소개 React는 사용자 인터페이스를 구축하기 위해 사용되는 인기있는 JavaScript 라이브러리입니다. React의 주요 기능 중 하나는 useState 훅을 사용하여 상태를 관리할 수 있는 능력입니다. 이 블로그 포스트에서는 useState의 작동 방식에 대해 자세히 알아보고 React 개발에서의 힘을 탐구해보겠습니다. 1. useState란? useState는 React의 내장 훅으로, 함수형 컴포넌트에서 상태를 가질 수 있게 해줍니다. 이는 클래스 컴포넌트에서의 setState 메서드를 대체하는 역할을 합니다. useState를 사용하면 함수형 컴포넌트 내에서 상태 변수를 선언하고 업데이트할 수 있습니다. 2. useState 사용 방법 useState를 사용하기 위해서는 react 패키지에서 .. 2023. 6. 23. Typescript와 함께 알아보는 Context API 사용방법 소개 Context API는 React 애플리케이션에서 상태를 전역적으로 관리하기 위한 도구입니다. 이 기능은 컴포넌트 간에 데이터를 공유하고 전달하는 데 사용됩니다. 이번 블로그 포스트에서는 Typescript와 함께 Context API를 사용하는 방법에 대해 자세히 알아보겠습니다. 본문 1. Context API란? Context API는 React의 공식 상태 관리 도구로, 컴포넌트 트리 전체에서 데이터를 공유할 수 있게 해줍니다. 이를 통해 중첩된 컴포넌트 간에 데이터를 전달하는 것이 간편해집니다. 2. Context API의 주요 개념 Context API를 사용하기 위해 알아야 할 주요 개념은 다음과 같습니다: Context: 데이터를 공유하기 위한 컨테이너 역할을 하는 객체입니다. Prov.. 2023. 6. 23. IIFE(즉시 실행 함수 표현식) 즉시실행 함수 표현식 일반적으로 함수는 선언 후에 실행하도록 되어있다. function a() { console.log("a"); } a(); 즉시실행 함수 표현식은 함수의 선언과 동시에 실행하도록 하는 표현식이다. (function a() { alert("a"); })(); 이 표현식의 등장은 이전 포스트에서 다룬 'var'로 선언한 변수와 관련이 있다. 'var'는 블록 스코프가 아니기 때문에, var를 블록 스코프를 가질 수 있도록 방법을 고안하다가 IIFE가 등장했다. 2021/01/11 - [FrontEnd/Java Script] - 호이스팅이란? 즉시실행함수는 선언할때 괄호로 감싸서 (function a(){...})와 같은 형태로 만든다. 자바스크립트에서는 function 이라는 키워드를 만.. 2021. 1. 11. 이전 1 2 다음 반응형
