FE
-
React의 State 업데이트 큐FE/React 2025. 10. 23. 14:13
🧑🏻💻React의 State 업데이트 큐(Queue)🚀 BatchReact는 state 업데이트를 하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다림 이를 통해 너무 많은 리렌더링이 발생하지 않고도 여러 컴포넌트에서 나온 다수의 state 변수를 업데이트 가능.하지만 이벤트 핸들러와 그 안에 있는 코드가 완료될 때까지 UI가 업데이트되지 않는다 따라서 React가 여러 상태 업데이트를 단일 리렌더링으로 그룹화하여 성능을 향상하는 것!! 🖥️ 예시 코드import { useState } from 'react';export default function Counter() { const [number, setNumber] = useState(0); return ( {nu..
-
UI 표현하기FE/React 2025. 10. 23. 14:07
React 는 사용자 인터페이스(UI)를 렌더링하기 위한 JS 라이브러리버튼, 텍스트, 이미지와 같은 작은 요소 로 구성React를 통해 작은 요소들을 재사용 가능하고 중첩할 수 있는 컴포넌트로 조합가능🧩 ComponentReact 애플리케이션은 컴포넌트라고 불리는 독립된 UI 조각들로 이루어짐 React 컴포넌트는 마크업을 얹을 수 있는 JavaScript 함수마크업, CSS, Javascript를 앱의 재사용 가능한 UI 요소인 사용자 정의 컴포넌트로 조합 ↗️ 컴포넌트 import / export컴포넌트의 가장 큰 장점은 재사용성이다.컴포넌트를 조합해 또 다른 컴포넌트를 만들 수 있다.컴포넌트를 이렇게 여러 번 중첩하면 다른 파일로 분리해야 하는 시점이 있다.분리를 하여 파일을 더 찾기 쉽고 재사..
-
React 개요FE/React 2025. 10. 23. 13:53
🧑🏻💻 React는 무엇인가Javascript 라이브러리로 Github 10만개가 넘는 별점을 가진 인기 있는 라이브러리중 하나React는 프레임워크가 아니다 ❌Facebook이 만든 오픈소스 프로젝트프런트엔드에서 사용자 인터페이스(UI)를 구축하는데 사용MVC 애플리케이션(Model-View-Controller)의 뷰 계층 ⭐ React에서 가장 중요한 측면사용자 인터페이스를 빠르고 효율적으로 구축하기 위해 사용자 정의 및 재사용 가능한 HTML 요소인 컴포넌트를 만들 수 있다.state 와 props 를 사용하여 데이터 저장 및 처리 방식을 간소화 ⚙️ 설정 및 설치 📌 React를 설정하는 2가지 방법정적 HTMLReact 앱 만들기 1️⃣ 정적 HTMLjQuery와 같은 라이브러리를 사용..
-
프론트엔드 빌드, 번들러FE 2025. 9. 22. 22:49
🔍 빌드빌드란 개발자가 작성한 소스코드를 브라우저가 실행가능한 형태로 변환하고 여러 파일을 하나 또는 소수의 파일로 묶어 최적화하는 과정입니다. 🤔 빌드가 왜 필요할까 1️⃣ 브라우저 호환성 문제 해결브라우저마다 지원하는 자바스크립트 문법이 다릅니다. const, async/await, Promise 같은 최신 문법(ES6+)은 구형 브라우저에서 동작하지 않기 때문에 실행 가능한 문법으로 변환을 해주어야 합니다.트랜스파일링(Transpiling) 을 통해 최신 코드를 구버전 문법으로 변환해줍니다. 2️⃣ 모듈 번들링 (Module Bundling)의존성이 있는 여러개의 파일들을 하나의 파일로 합쳐주는 역할 우리가 작성하는 코드는 보통 여러 개의 파일(모듈)로 나뉩니다.브라우저는 기본적으로 ES Mod..
-
History API 와 클라이언트 라우팅FE 2025. 9. 8. 23:07
🚀 SPASPA는 URL이 바뀔 때마다 새로운 페이지를 서버로 요청하지 않고 클라이언트 단에서 라우팅을 합니다.React, Svelte, Vue.js 같은 대부분의 프론트엔드 프레임워크를 사용할 때 이런 클라이언트 단 라우팅을 지원하는 라이브러리를 사용합니다.✅ 이런 라우팅 라이브러리는 내부적으로 자바스크립트의 History API를 사용하고 있습니다. 🧩 SPA에서 URL Routing이 필요한 이유 🤔 만약 URL Routing이 없다면?SPA에서는 실제 html 파일은 하나로여러 페이지를 돌아다녔지만 방문 기록이 없습니다.따라서 뒤로가기 / 앞으로 가기 등의 기능을 사용할 수 없습니다.본인이 보고 있는 페이지의 접근 방법을 알기 어렵습니다. 즉 SPA역시 우리가 알고 있는 웹페이지와 같은 사용..
-
DocumentFragment으로 DOM 조작하기FE 2025. 9. 8. 22:58
👻 DOM 트리에 노드를 추가createElement 와 appendChild 를 사용해서 DOM 트리에 노드를 추가할 수 있습니다.const container = document.createElement('div'); // 노드를 생성const content = document.createElement('div');container.appendChild(content); // DOM 트리에 추가⚠️ 문제점이렇게 직접 DOM에 접근하여 노드를 추가하게 되면 DOM에서 매번 reflow가 발생하여 문제가 발생합니다. 📖 reflow요소의 너비, 높이, 위치 등이 변경되어 render tree가 재생성특정 요소에서 reflow가 발생하면 주변 요소(부모, 자식, 형제)에도 영향을 주게 됩니다. 🔍 Do..
-
프론트엔드 아키텍처 구조 - MVC, MVVMFE 2025. 9. 2. 16:49
프론트엔드 개발에서 아키텍처를 설계하는 것은 애플리케이션의 유지보수성, 확장성 및 성능을 결정짓는 중요한 요소입니다.특히, 관심사의 분리는 프론트엔드 아키텍처를 설계할 때 기본적으로 고려해야 하는 원칙 중 하나입니다.예를 들어, 사용자 인터페이스(UI), 비즈니스 로직, 데이터 관리 등의 관심사를 분리함으로써 각각의 부분을 독립적으로 개발하고 테스트할 수 있습니다.1️⃣ MVC 패턴MVC 패턴은 애플리케이션을 모델(Model), 뷰(View), 컨트롤러(Controller)의 세 부분으로 분리하는 가장 일반적인 아키텍처 패턴 중 하나입니다. 🤖 구성 요소🧩 Model (모델)애플리케이션의 데이터와 비즈니스 로직을 관리데이터의 상태를 유지하고 데이터 처리 규칙을 정의 🧩 View (뷰)사용자에게 정보..
-
브라우저 이벤트FE/HTML 2025. 8. 26. 13:51
🔍 브라우저 이벤트란?브라우저에는 많은 이벤트가 발생합니다.사용자가 버튼을 클릭화면의 크기 조절화면 스크롤등등이처럼 사용자의 인터렉션(이벤트)가 발생하면 그에 해당하는 일을 등록해 처리할 수 있습니다.이벤트는 함수에 연결되어 이벤트가 발생하지 전에는 함수가 실행되지 않다가 이벤트가 발생되면 실행됩니다.이벤트 핸들러 🤖 이벤트 객체이벤트가 발생했을 때 브라우저가 자동으로 생성하여 이벤트 핸들러 함수에 전달하는 정보를 담은 객체입니다.여러 이벤트들의 공통적인 속성과 이벤트 종류에 따른 특정 속성, 메서드를 포함합니다.이벤트 객체는 이벤트가 발생한 요소, 이벤트 타입, 마우스 좌표, 키보드 입력 등 이벤트와 관련된 정보를 제공합니다.📌 주요 속성속성설명예시event.type이벤트의 종류‘click’, ‘..