쥰뎁

개요사용자가 URL을 입력하여 엔터를 눌렀을 때 브라우저가 페이지를 로드하는 과정에 대해서 공부하고 글로 남기려고 한다. 브라우저 동작 원리1. URL 파싱 및 DNS 조회URL 파싱브라우저는 사용자가 입력한 URL을 파싱 하여 프로토콜, 호스트명, 경로, 쿼리 문자열 등으로 나눈다.예: `https://www.example.com/path?query=123`DNS 조회브라우저는 URL의 호스트명을 IP 주소로 변환하기 위해 DNS 서버에 요청을 보낸다.예: 'http://www.example.com → 93.184.216.34'* 파싱(Parsing): 특정 형식으로 구성된 데이터를 분석하고 그 의미를 이해하는 과정* DNS(Domain Name System): 도메인 이름을 IP 주소로 변환하여 주는..

개요React를 사용하여 개발을 했던 사람이라면 element 요소 내 className을 사용하는 것을 알 것이다.본인은 React에서는 class 대신에 className을 사용하는구나 정도로 이해했지만, 문득 "왜 그럴까?" 라는 의문이 생겨 찾아 공부하고 글을 남기려고 한다. JavaScript 예약어 충돌 회피'class'는 자바스크립트에서 예약어로 사용된다.클래스 정의에 사용되며, 이를 속성명으로 사용할 경우 혼란이 발생할 수 있다.따라서, JSX에서는 혼동을 피하기 위해 'class' 대신 'className'을 사용하여 CSS 클래스를 지정한다.React의 JSX 문법JSX는 자바스크립트 코드 안에서 XML을 사용하는 문법으로, XML과 자바스크립트가 혼합된 형태이다.JSX는 자바스크립트로..

Next.jsNext.js는 React 애플리케이션 개발을 위한 프레임워크로, 다양한 기능과 장점을 제공하여 개발자들이 더 효율적이고 성능 좋은 웹 애플리케이션을 만들 수 있도록 도와준다. 서버 사이드 렌더링(SSR, Server-Side Rendering)Next.js는 서버 사이드 렌더링을 쉽게 구현할 수 있도록 도와준다.서버 사이드 렌더링은 클라이언트 사이드 렌더링(CSR)에 비해 SEO(검색 엔진 최적화)에 유리하고, 초기 로딩 시간을 줄이는 장점이 있다.// pages/index.jsexport async function getServerSideProps() { const res = await fetch('https://api.example.com/data'); const data = awa..

RESTful API는 REST(Representational State Transfer) 아키텍처 스타일을 따르는 API를 의미한다.REST는 웹 서비스 디자인을 위한 아키텍처 원칙 및 패턴으로, 클라이언트와 서버 간의 상호 작용을 구조화된 방식으로 정의한다.RESTful API는 HTTP를 통해 데이터를 전송하며, 다음과 같은 특성을 가진다. REST의 핵심 개념자원(Resource)모든 것은 자원으로 표현된다.자원은 URI(Uniform Resource Identifier)로 식별된다.예: '/users', '/posts/1'HTTP 메서드자원에 대한 동작은 HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 정의된다.'GET': 자원의 조회'POST': 자원의 생성'PUT':..

생명주기(Lifecycle)생명주기(Lifecycle)는 특정 개체나 시스템이 존재하는 동안 거치는 여러 단계와 각 단계에서 수행되는 작업들을 말한다.소프트웨어 개발에서는 다양한 컴포넌트나 객체의 생명주기를 정의하여, 각 단계에서 어떤 작업이 수행되는지 명확히 함으로써 관리와 유지보수를 용이하게 한다.컴포넌트 생명주기특히 프론트엔드 개발에서, 컴포넌트 생명주기는 중요한 개념이다.대표적으로 React와 같은 라이브러리에서는 컴포넌트가 생성, 업데이트, 소멸되는 과정을 명확히 정의하여, 개발자가 적절한 타이밍에 필요한 작업을 수행할 수 있도록 한다.React 컴포넌트 생명주기React에서는 컴포넌트가 마운트, 업데이트, 언마운트되는 과정에서 다양한 생명주기 메서드를 제공한다.마운트(Mount): 컴포넌트가 ..

Virtual Dom(Virtual Document Object Model)Virtual Dom은 자바스크립트 객체로 메모리에 가상으로 존재하는 DOM 트리의 일종이다.실제 DOM의 경량화된 복사본이며, DOM 조작의 효율성을 높이기 위해 사용된다.이는 특히 React와 같은 현대적인 프런트엔드 라이브러리에서 널리 사용된다.실제 DOMDOM은 HTML 문서의 구조를 계층적(Tree)으로 표현한 모델이다.각 HTML 태그에는 DOM 트리의 노드로 표현되며, 웹 페이지의 내용을 변경하거나 조작하는 작업은 DOM을 통해 이루어진다.단점실제 DOM 조작은 비용이 많이 든다.DOM을 변경할 때마다 브라우저는 레이아웃, 페인트, 리플로우 등의 작업을 수행하며, 이는 성능에 큰 영향을 미칠 수 있다.Virtual D..

Promise와 Async자바스크립트에서 비동기 처리를 다루기 위한 두 가지 주요 패턴인 'Promise'와 'async/await'는 각각 고유한 특징과 사용 방법을 가지고 있다.이 두 패턴은 비동기 작업을 더 쉽게 관리할 수 있도록 도와주지만, 사용 방식과 코드의 가독성 측면에서 차이가 있다.Promise'Promise'는 비동기 작업의 완료 또는 실패를 처리하기 위한 객체이다.'Promise'는 비동기 작업이 완료된 후의 결과를 약속(promise)하고, 그 결과에 따라 'then' 또는 'catch' 메서드를 통해 처리할 수 있다.// Promise를 사용하는 예제function fetchData() { return new Promise((resolve, reject) => { set..