자바스크립트 호이스팅 (Hoisting) 호이스팅(Hoisting) 은 자바스크립트가 코드를 실행하기 전에 변수와 함수 선언을 코드의 최상단으로 끌어올리는 것처럼 동작하는 특징을 말합니다. 이로 인해, 선언된 위치보다 상단에서 변수를 참조할 수 있는 것처럼 보이는 현상이 발생합니다. 변수 호이스팅 호이스팅은 선언만 끌어올리고, 값 할당은 끌어...

React가 화면을 그릴 때는 단순히 한 번에 모든 걸 처리하지 않는다. 렌더링 과정은 두 단계로 나뉘며, 이 구조 덕분에 React는 빠르고 유연하게 동작한다. 바로 render phase와 commit phase이다. 🧩 Render Phase: 변화된 UI를 “계산”하는 단계 먼저 render phase는 “무엇이 바뀌었는가?”...

리액트의 Strict Mode에 대해서 설명해주세요 ! StrictMode는 리액트에서 개발 중에 발생할 수 있는 잠재적인 문제를 사전에 감지하고 예방하기 위한 도구입니다. 1. 오래된 코드와 비권장 API 감지 리액트에서는 이제 사용하지 않는 메서드들이 있습니다. componentWillMount() componentWillReceive...

인터넷 창에 www.google.com를 입력하면 무슨 일이 일어나는지 설명해주세요 ! 1. DNS 조회 (도메인 이름 → IP 주소) 사람이 기억하기 좋은 주소 : www.google.com 컴퓨터가 이해하는 주소 : 142.250.206.36 (IP 주소) 사용자가 www.google.com을 입력하면, 브라우저는 먼저 이 도메인 ...

브라우저 렌더링 파이프라인에 대해서 설명해주세요 ! 웹 페이지가 화면에 보이기까지는 여러 단계를 거칩니다. 이 과정을 브라우저 렌더링 파이프라인이라고 부르며, 크게 6단계로 나눌 수 있습니다. 1. DOM 생성 (문서 구조 만들기) HTML 파싱 : 브라우저는 HTML파일을 파싱하여 DOM을 생성 DOM(Document O...

성능 최적화를 위해 적용할 수 있는 방법 리액트 애플리케이션이 커질수록 성능 저하가 발생하기 쉽다. 이런 경우, 불필요한 리렌더링을 줄이고 렌더링 비용을 최적화하기 위한 다양한 방법을 적용할 수 있다. 이번 글에서는 대표적인 성능 최적화 기법인 메모이제이션(memoization), 함수/값 최적화 훅, 코드 스플리팅(code splitting) 에 ...

🧩 Controlled Component란? Controlled Component(제어 컴포넌트)는 입력 요소의 값(value)을 리액트의 상태(state)로 관리하는 컴포넌트이다. 즉, 입력 값의 주도권이 DOM이 아닌 리액트에 있다. 리액트의 상태가 입력 요소의 값을 결정하고, 사용자가 입력을 변경하면 onChange 이벤트를 통해 상태를 업...

리액트의 props와 state에 대해서 설명해주세요 ! props props는 부모 컴포넌트가 자식 컴포넌트에 전달하는 데이터입니다. 읽기 전용으로, 자식 컴포넌트는 props를 수정할 수 없습니다. function ChildComponent(props) { props.name = "LeeYeeun"; // 오류 발생 가능 re...

이벤트 루프(Event Loop)란? 자바스크립트의 이벤트 루프는 싱글 스레드 기반 언어임에도 비동기 처리를 가능하게 하는 핵심 메커니즘이다. 즉, 한 번에 하나의 작업만 처리할 수 있는 자바스크립트가 동시에 여러 일을 하는 것처럼 보이게 만드는 비밀 ! 자바스크립트의 실행 구조 자바스크립트 엔진은 크게 세 가지 구성요소로 나뉜다. ...

✅ 오늘의 목표 GPT-4.1-mini Function Calling으로 가족결합 할인 계산 기능 구현 프론트 React + 백엔드 Express 기반 챗봇 서비스 구축 결합 할인 금액 계산 로직 모듈화 및 Function Schema 설계 🧩 문제 상황 / 배경 LG U+ 요금제에 대한 상담/추천 기능을 챗봇 형태로 제공...