CS (60) 썸네일형 리스트형 브라우저 렌더링 성능 최적화! Reflow vs Repaint 완전 정리 🖥️ 브라우저 렌더링 최적화: Reflow vs Repaint브라우저는 HTML, CSS, JavaScript를 해석해 화면에 출력하는데, 이 과정에서 화면을 다시 그리는 작업이 발생합니다.그중 Reflow(리플로우) 와 Repaint(리페인트) 는 성능에 큰 영향을 주는 렌더링 단계입니다. ✅ reflow란?브라우저가 페이지의 레이아웃을 다시 계산하는 과정예를 들어:DOM 구조 변경 (예: 요소 추가/삭제)CSS 스타일 변경 (예: 요소의 크기(width, height), 위치, 폰트 크기 변경)브라우저 창 크기 변경이런 일이 발생하면 브라우저는 다시 레이아웃을 계산하고, 이 과정에서 reflow가 발생합니다.이 과정은 모든 자식 요소와 관련된 부모 요소까지 영향을 주므로, 연쇄적으로 많은 요소에 .. 브라우저에 www.naver.com을 입력하면 무슨 일이 일어날까요? 🌐 브라우저에 www.naver.com을 입력하면 어떤 일이 일어날까요? 지긋지긋한 면접 질문 중 하나. 브라우저에 ~를 입력하면 무슨 일이 벌어질까요!!!!!!!!!!저만 골치아픈가요 🥲우리 모두가 매일같이 사용하는 웹 브라우저.그 주소창에 www.naver.com을 입력하면 어떤 일이 일어나는지, 내부 동작을 단계별로 정리해보았습니다.겉으로 보기엔 단순한 동작처럼 보이지만, 브라우저 내부에서는 꽤나 많은 일들이 벌어지고 있어요. 이 골치아픈 놈을 이제 해결해봅시다. 브라우저에 www.naver.com을 입력하면 벌어지는 일1️⃣ URL 파싱브라우저는 사용자가 입력한 주소를 URL 파싱으로 분석해 프로토콜, 호스트, 경로 등을 파악합니다.예를 들어 https://www.naver.com의 경우:프로.. 쿠키(Cookie) vs localStorage vs sessionStorage 제대로 알고 쓰기 웹 개발을 하다보면 사용자의 정보를 브라우저에 잠깐 저장해야 할 일이 많습니다. 예로 들어서, 로그인 상태 유지나 장바구니 정보 저장 같은 기능이 있죠.이때 서버에 요청하지 않고 브라우저에 데이터를 잠깐 저장해두는 기술이 바로 오늘의 주제, 웹 스토리지(Web Storage)인데요,오늘은 웹 스토리지가 무엇인지, 그리고 그 종류에 대해서도 자세히 알아보겠습니다. 💡 웹 스토리지가 뭐예요?웹 스토리지는 HTML5에서 새롭게 도입된 기능으로, 쿠키보다 훨씬 강력한 데이터 저장 방식입니다.JavaScript를 통해 브라우저(클라이언트)에 데이터를 저장하는 공간이에요.서버로 전송되지 않아서, 빠르고 가볍게 사용할 수 있어요. 📍 웹 스토리지의 특징브라우저 내에 저장됨 (클라이언트 저장소)서버로 자동 전송되.. 콜백은 왜 불편했을까? 자바스크립트 비동기의 발전 과정 한눈에 보기 📦 자바스크립트 비동기 처리 완전 정복: Callback → Promise → async/await자바스크립트를 배우다 보면 꼭 한 번은 부딪히는 개념이 있습니다.바로 비동기 처리. 그리고 그 핵심은 콜백(callback), 프라미스(Promise), async/await입니다.이 글에서는 비동기 처리 방식이 어떻게 발전해왔는지,왜 콜백만으로는 부족했는지, 그리고 async/await이 왜 깔끔한지 단계별로 정리해보겠습니다. ⏳ 비동기 처리가 필요한 이유자바스크립트는 단일 스레드 기반 언어예요.그래서 시간이 오래 걸리는 작업(예: 서버 요청, 파일 읽기 등)을 그대로 실행하면 전체가 멈춰버려요.이를 방지하기 위해 브라우저나 Node.js는 이런 작업을 비동기(Asynchronous)로 처리합니다... 동기? 비동기? 밥 먹고 카톡하면서 이해해보자 동기(Synchronous)와 비동기(Asynchronous)는 "코드가 실행되는 흐름(방식)"을 의미하는 기본 개념이에요.특히 자바스크립트(JavaScript)에서는 단일 스레드(single-threaded) 기반의 언어이기 때문에, 한 번에 하나의 작업만 할 수 있어요. 그래서 이 개념이 아주 중요합니다. 1. 동기(Synchronous)✔ 정의한 작업이 완전히 끝나야 다음 작업을 실행하는 방식자바스크립트는 기본적으로 동기적으로 실행됩니다.즉, 코드는 한 줄씩 순서대로 실행돼요. 📋 예시console.log('1');console.log('2');console.log('3');결과:123 ⚠️ 단점만약 한 작업이 오래 걸리면(예: 파일 읽기, API 요청 등)→ 그 작업이 끝날 때까지 다른 작업이 .. CORS 에러가 뭔데 자꾸 막는 건데? (프록시로 뚫자!) 프론트엔드 개발을 하다 보면 한 번쯤은 만나는 에러가 있습니다.Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy.처음엔 "이게 뭔데? 내가 뭘 잘못한 거지?" 싶고, 나중엔 "아 또 이거야…" 싶죠.오늘은 이 CORS 에러가 왜 발생하는지,또 이를 해결하는 프록시란 무엇인지,그리고 Next.js(App Router 기준)에서 이걸 프록시로 어떻게 해결할 수 있는지 찬찬히 정리해볼게요. 🧠 CORS란 뭐예요?CORS는 Cross-Origin Resource Sharing의 줄임말이에요.말 그대로 "다른 출처(origin)의 리소스를 브라우저가 공.. 이벤트 위임(Event Delegation)이란? 성능과 유지보수를 동시에 잡는 방법 ✨ 프론트엔드 필수 개념: 이벤트 위임과 이벤트 버블링 정리웹에서 리스트나 버튼 같은 반복적인 요소에 이벤트를 걸어야 할 때, 매번 하나하나 이벤트 리스너를 붙이는 것은 비효율적입니다. 이럴 때 사용할 수 있는 똑똑한 방법이 바로 이벤트 위임(Event Delegation)입니다.이번 글에서는 이벤트 위임이란 무엇인지, 이 개념이 가능한 이유인 이벤트 버블링(Event Bubbling)까지 함께 정리해보겠습니다. ✅ 이벤트 위임(Event Delegation)이란?이벤트 위임은 여러 자식 요소 각각에 이벤트 리스너를 다는 대신, 공통된 부모 요소에 하나의 이벤트 리스너를 등록해서 이벤트를 처리하는 방식입니다.즉, 부모가 자식의 이벤트를 '위임'받는 형태라고 볼 수 있습니다. 예를 들어 태그 안에 요소.. 클로저, 그냥 이 글 하나로 끝내자 (일급 객체 + 렉시컬 스코프 쉽게 정리) 🧠 클로저란 무엇인가요? (feat. 일급 객체, 렉시컬 스코프)자바스크립트를 공부하다 보면 "클로저"라는 개념을 자주 마주치게 됩니다. 처음엔 어렵게 느껴질 수 있지만, 클로저는 사실 기억력 좋은 함수예요. 이번 글에서는 클로저가 무엇인지, 왜 중요한지, 그리고 관련 개념인 일급 객체와 렉시컬 스코프까지 함께 정리해볼게요. 🔍 클로저란?클로저는 함수가 자신이 선언된 위치의 외부 변수(스코프)를 기억하고, 그 함수가 실행되는 시점에도 그 값을 사용할 수 있는 개념입니다.내부 함수가 외부 함수의 변수에 접근할 수 있도록 기억하는 능력을 가지고 있는 함수, 그것이 바로 클로저입니다. 📌 클로저 예시로 이해하기function outerFunction(outerVariable) { return func.. 이전 1 2 3 4 ··· 8 다음
