쥰뎁

JavaScript에서 변수 호이스팅은 중요한 개념이며, 이때 var와 let/const는 서로 다르게 동작합니다.var의 호이스팅: undefined로 초기화var로 선언된 변수는 호이스팅되며, 실행 컨텍스트가 생성될 때 해당 변수는 메모리의 최상단으로 끌어올려져 (hoisting) undefined로 초기화됩니다. 이는 변수 선언이 코드 어디에 있든 간에 자바스크립트 엔진이 실행 컨텍스트의 생성 단계에서 미리 메모리에 할당하고 undefined 값을 부여하기 때문입니다.예시console.log(x); // undefinedvar x = 5;console.log(x); // 5실행 순서자바스크립트는 코드 실행 전 var x를 호이스팅하여 메모리에 등록하지만, 그 값은 할당되지 않고 undefined로 ..

실행 컨텍스트(Execution Context)란?실행 컨텍스트는 JavaScript 코드가 실행되는 환경입니다.코드가 실행될 때 변수, 함수, 객체가 어떻게 메모리에 할당되고, 그 순서는 어떻게 되는지를 결정하는 것이 실행 컨텍스트입니다.실행 컨텍스트의 종류JavaScript에는 두 가지 주요 실행 컨텍스트가 있습니다.글로벌 실행 컨텍스트(Global Execution Context): 자바스크립트가 처음 시작될 때 생성되는 전역 컨텍스트입니다. 브라우저에서는 window 객체가 글로벌 실행 컨텍스트의 일부입니다.함수 실행 컨텍스트(Function Execution Context): 함수가 호출될 때마다 생성되며, 각 함수는 고유한 실행 컨텍스트를 가집니다.실행 컨텍스트 생성 단계실행 컨텍스트는 코드가..

반응형 웹과 모바일 감지의 중요성웹 개발에서 반응형 웹 디자인은 이제 필수입니다. 데스크톱, 태블릿, 모바일 등 다양한 디바이스에 맞춘 최적화된 UI는 사용자 경험을 크게 향상하는 중요한 요소입니다.특히 모바일 사용자의 비율이 증가함에 따라, 화면 크기에 따라 레이아웃과 스타일을 동적으로 변경하는 기능은 더욱 필수적입니다.이 글에서는 React에서 미디어 쿼리를 활용해 Custom Hook을 만들어 모바일 디바이스를 감지하고, 스타일을 효율적으로 변경하는 useIsMobile 훅을 소개합니다.모바일을 감지하는 useIsMobile 훅먼저, 미디어 쿼리를 이용해 모바일 화면을 감지할 수 있습니다.이걸 React에서 쉽게 사용할 수 있도록 useIsMobile 훅을 만들겠습니다. 이 훅은 컨텍스트 API를 ..

Flutter에서 상태 관리는 애플리케이션 동작을 결정짓는 중요한 요소이다. GetX는 Flutter에서 상태 관리를 간단하고 효율적으로 할 수 있도록 도와주는 패키지임.* GetX 외에도 Bloc, Provider 등 여러 상태관리 라이브러리가 있음. 1. GetX란?GetX는 Flutter에서 종속성 주입(Dependency Injection), 상태 관리(State Management), 라우팅(Routing) 등을 쉽게 할 수 있도록 도와주는 패키지이다.GetX의 주요 장점은 코드가 간결해지면서도 강력한 기능을 제공하는 점. 2. GetX 상태 관리: 단순 상태 관리와 반응형 상태 관리GetX의 상태 관리는 크게 두 가지로 나뉨단순 상태 관리(Simple State Management): 상태를 ..

개요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..