Ch.Covelope

1. 크리티컬 렌더링 패스 (Critical Rendering Path) 핵심 개념브라우저가 HTML, CSS, JavaScript를 받아서 화면에 픽셀을 그리기까지의 필수 단계들입니다. 이 경로가 짧고 빠를수록 초기 로딩 속도가 빨라집니다. 🎯 6단계 프로세스1. HTML 파싱 → DOM 생성브라우저가 HTML을 위에서 아래로 읽으면서 DOM 트리를 만듭니다 태그를 만나면 파싱이 멈춥니다 (파서 블로킹)이게 스크립트를 body 끝에 두는 이유입니다2. CSS 파싱 → CSSOM 생성CSS 파일을 파싱해서 CSSOM 트리를 만듭니다CSS는 렌더링 차단 리소스입니다 (CSSOM 완성 전까지 렌더링 안됨)화면에 아무것도 안 보이는 이유가 여기 있습니다3. DOM + CSSOM → 렌더 트리 생성실제로 화면..

JavaScript btoa(), atob(), 한글 인코딩 , 디코딩 - encodeURIComponent 활용법📌언제 필요할까?JavaScript에서 한글을 Base64로 인코딩하다가 오류를 만난 개발자btoa() 함수에서 "Failed to execute 'btoa'" 에러를 경험한 분한글 문자열을 안전하게 Base64로 변환하고 싶은 분encodeURIComponent의 정확한 동작 원리가 궁금한 분🚨 문제 상황: btoa() 한글 인코딩 오류JavaScript에서 한글 문자열을 Base64로 인코딩하려고 할 때, 다음과 같은 오류를 만나게 됩니다:// ❌ 오류 발생 코드const korean = "한글입니다";const encoded = btoa(korean); // Uncaught DO..

JavaScript[generator] - 제너레이터와 비동기 제너레이터  소개: 왜 제너레이터를 알아야 할까요? 제너레이터는 단순한 함수가 아닙니다. 실행을 일시 중지했다가 재개할 수 있는 특별한 함수로, 복잡한 비동기 흐름 제어부터 메모리 효율적인 데이터 처리까지 다양한 상황에서 강력한 솔루션을 제공합니다.이 글에서는 제너레이터의 기본 개념부터 실제 프로덕션 환경에서의 활용 패턴까지 실용적인 예제와 함께 살펴보겠습니다. 목차제너레이터 기본 개념제너레이터 활용 패턴비동기 제너레이터 이해하기실무 활용 사례성능 고려사항과 최적화결론제너레이터 기본 개념제너레이터란 무엇인가?제너레이터는 함수의 실행을 중간에 멈추고 재개할 수 있는 특별한 함수입니다. 일반 함수와는 달리, 제너레이터는 yield 키워드를 사용해..

목차들어가며: 자바스크립트 모듈의 필요성모듈 시스템의 역사CommonJS: 작동 방식과 특징ES Modules: 작동 방식과 특징CommonJS와 ES Modules 비교실제 구현 사례와 코드 예시호환성 문제와 트러블슈팅모범 사례결론들어가며: 자바스크립트 모듈의 필요성웹 개발 생태계가 점점 복잡해짐에 따라, 코드를 구조화하고 관리하는 방법이 중요해졌습니다. 초기 자바스크립트는 모듈 시스템 없이 모든 코드가 전역 네임스페이스를 공유했습니다. 이는 대규모 애플리케이션에서 여러 문제를 야기했습니다:전역 변수 충돌: 다른 스크립트에서 동일한 이름의 변수나 함수를 사용할 때 충돌 발생의존성 관리 어려움: 스크립트 간의 의존 관계를 명확히 표현하기 어려움코드 재사용성 저하: 모듈화 없이는 코드 조각을 쉽게 재사용하..

자바스크립트 함수에 대해서 아는대로 설명해주세요. 목차함수란 무엇인가?함수 선언 방식함수의 매개변수와 반환값화살표 함수클로저(Closure)고차 함수실제 활용 사례함수 관련 트러블슈팅자바스크립트 함수의 베스트 프랙티스결론함수란 무엇인가?자바스크립트에서 함수는 일급 객체(First-class Object)입니다. 이게 무슨 말일까요? 간단히 말해, 함수는 다른 변수처럼 취급될 수 있다는 뜻입니다. 변수에 할당할 수 있고, 다른 함수의 인자로 전달하거나, 함수에서 반환할 수도 있죠.함수는 특정 작업을 수행하는 코드 블록으로, 재사용 가능하며 프로그램의 구조화와 모듈화에 핵심적인 역할을 합니다. 자바스크립트 애플리케이션에서 함수는 단순히 작업을 수행하는 것을 넘어 다양한 패턴과 기법의 기반이 됩니다.// 기본..

JavaScript 배열 기초 정리: 핵심 개념부터 유용한 메서드까지안녕하세요! 오늘은 자바스크립트에서 가장 많이 사용되는 데이터 구조 중 하나인 배열(Array)에 대해 심도 있게 다뤄보려고 합니다. 웹 개발을 하다 보면 배열을 다루지 않는 날이 없을 정도로 자주 사용하게 되는데, 이 강력한 도구를 제대로 이해하고 활용한다면 코드의 품질과 성능이 크게 향상될 수 있습니다.이 글에서는 자바스크립트 배열의 기본 개념부터 시작해 실무에서 바로 활용할 수 있는 다양한 메서드, 최신 ES6+ 문법을 활용한 테크닉등을 다룰 예정입니다. 목차자바스크립트 배열 기초배열 생성 방법기본 배열 메서드ES6+ 배열 메서드배열과 함수형 프로그래밍배열 성능 최적화실무 응용 사례마무리 자바스크립트 배열 기초 자바스크립트의 배열은..

TypeScript로 견고한 코드 작성하기: 타입의 힘을 활용한 모던 개발 가이드1. TypeScript란 무엇인가?1.1 TypeScript의 탄생 배경과 역사JavaScript는 웹 개발의 핵심 언어로 자리잡았지만, 대규모 애플리케이션 개발에서 여러 한계점을 보였습니다. 이러한 문제들을 해결하기 위해 Microsoft의 Anders Hejlsberg(C# 설계자)가 주도하여 2012년 TypeScript를 개발했습니다.이러한 문제를 해결하기 위해 Microsoft는 2012년 TypeScript를 발표했습니다.타입 시스템의 부재JavaScript는 동적 타입 언어이기 때문에 런타임에서만 타입 오류를 발견할 수 있었습니다이는 버그 발견이 늦어지고, 코드 품질 관리가 어려워지는 원인이 되었습니다대규모 개..

JavaScript 클로저와 React Hooks의 동작 원리 이해하기프론트엔드 개발을 하다 보면 클로저(Closure)라는 개념을 자주 마주치게 됩니다. 특히 React Hooks를 사용할 때 클로저는 핵심적인 역할을 합니다. 하지만 많은 개발자들이 클로저의 개념을 어렵게 느끼고, React Hooks와의 관계를 명확히 이해하지 못하고 있습니다.이 글에서는 클로저의 기본 개념부터 시작해서, React Hooks가 어떻게 클로저를 활용하는지 상세히 알아보겠습니다.목차클로저란 무엇인가?클로저의 동작 원리클로저가 중요한 이유React에서의 클로저React Hooks와 클로저의 관계실제 사용 사례와 주의점클로저란 무엇인가?클로저는 함수가 자신이 생성될 당시의 환경을 기억하는 현상을 말합니다. 조금 더 전문적으..

안녕하세요! 오늘은 React와 JavaScript 애플리케이션에서 발생하는 메모리 누수 문제를 깊이 있게 다뤄보겠습니다. 실제 프로젝트에서 마주칠 수 있는 다양한 시나리오와 해결 방법을 함께 알아보겠습니다.목차메모리 누수의 이해React에서 발생하는 메모리 누수 패턴JavaScript 런타임에서의 메모리 누수성능 최적화 전략1. 메모리 누수의 이해1.1 메모리 관리 기본 원리JavaScript의 메모리 관리는 가비지 컬렉션(Garbage Collection)을 통해 자동으로 이루어집니다. 하지만 특정 상황에서는 이 메커니즘이 제대로 작동하지 않을 수 있습니다. 가비지 컬렉션(Garbage Collection)의 이해가비지 컬렉션이란? 메모리에 있는 '쓰레기'를 치우는 청소부라고 생각하면 쉽습니다. 여기..

JavaScript를 배우면서 가장 어려운 개념을 꼽으라면 단연 프로토타입, this, 그리고 실행 컨텍스트라고 말할 수 있을 거 같습니다. 우연히 좋은 내용에 글을 보고 이해한 내용을 정리하도록 하겠습니다.목차1. 프로토타입과 클래스의 근본적 차이1.1 클래스 기반의 철학적 배경1.2 프로토타입 기반의 철학적 배경1.3 프로토타입의 핵심 특징1.4 프로토타입의 실제 구현 메커니즘1.5 가족 유사성의 실제 구현1.6 컨텍스트(맥락)에 따른 의미 변화1.7 프로토타입과 인스턴스 수준의 수정1.8 위임(Delegation)의 실제 동작1.9 동적 확장의 장점과 단점2. 자바스크립트의 실행 컨텍스트와 렉시컬 환경2.1 실행 컨텍스트의 구조2.2 렉시컬 스코프와 스코프 체인2.3 실행 컨텍스트와 렉시컬 환경의 ..

호출 스택, 실행 프로세스 복습 하기  호출 스택(call stack), 콜백 큐(callback queue), 이벤트 루프(event loop)  자바스크립트 코드가 실행되고 자바스크립트 엔진은 각각의 함수 호출을 호출 스택에 추가, call stack 에 푸시(push) 되고 , 실행이 완료되면 stack 에서 팝(pop)된다.    호출스택(call stack) 함수의 호출을 기록 하는 자료 구조 만약 함수가 동기적일 경우 해당 연산이 완료될 때까지 다른 모든 작업은 대기하게 된다.  JS 엔진은 단일 스레드로 동작하기 때문에 한 번에 하나의 작업만 처리한다.   만약 함수가 비동기적일 경우 예를 들어 setTimeout 또는 fetch,promise 등 해당 연산은 백그라운에서 처리되는데해당 함수..

자바스크립트 엔진(javascript engine) JavaScript 엔진은 JavaScript 코드를 해석하고 실행하는 역할을 담당. 주요 JavaScript 엔진에는 V8(Chrome 및 Node.js에서 사용), SpiderMonkey(Firefox에서 사용), JavaScriptCore(Safari에서 사용), Chakra(이전 버전의 Microsoft Edge에서 사용)가 포함. 주요 역할파서 (Parser): 자바스크립트 코드를 읽고 추상 구문 트리(Abstract Syntax Tree, AST)로 변환하는 역할을 한다. AST는 코드의 구조를 표현하며, 엔진은 이를 분석하여 실행에 필요한 정보를 추출한다.인터프리터 (Interpreter): 변환된 AST를 실행 가능한 명령어로 해석..

state. - 현재 컴포넌트에 렌더링에 영향을 미치는 객체 형태의 데이터 props. - 상위 컴포넌트에서 하위 컴포넌트로 객체 형태의 데이터를 전달 (읽기 전용) state 또는 props 업데이트 시 리렌더링된다. 리액트(react) 데이터 흐름 리액트는 기본적으로 단방향 데이터 흐름을 지닌다. 일반적으로 상위 컴포넌트에서 가진 데이터를 하위 컴포넌트로 props 객체를 통해서 전달하는데 이를 props drilling 이라고 한다. 하지만 함수를 통해서 하위 컴포넌트의 데이터를 상위 컴포넌트로 전달받아서 사용할 수도 있는데 상태 끌어올리기 state lifting 이라고 부른다. 예제 - 어떻게 전달되고 끌어 올려지는지 만 보면 된다. //App.js import NewExpense from '...

OOP - 객체지향 개념 정리 캡슐화 데이터와 데이터를 활용하는 함수를 캡슐 혹은 컨테이너 안에 두는 것을 의미하는데 이 경우 캡슐은 class를 의미한다. (함수와 데이터가 개념적으로 연관되어 있으면 캡슐화를 사용해서 코드를 개선할 수 있다.) 장점은 코드가 구조화되고 함수나 메서드가 인수를 취할 필요도 없다. (this키워드로 데이터에 직접 액세스 할 수 있기 때문) 캡슐화를 사용하여 표시할 클래스의 속성과 숨길 속성을 선택할 수 있다. 캡슐화는 어떻게 클래스 정보에 접근 혹은 수정하는지를 결정하는 권한을 제공한다. 캡슐화는 데이터 그리고 class 안에 있는 해당 데이터를 이용하는 함수를 잘 정리하는 방법론 상속 코드를 더 작은 단위로, class로 쪼개고 재사용할 수 있다. 클래스를 extends..

ES6 JavaScript - 요약 let & const Arrow Function Export & Imports Classes Spread & Rest Operator Destructuring Promises Default parameters Template Literals let & const let과 const 는 기본적으로 var 를 대체한다. 함수 스코프와 재선언 재할당이 가능한 var는 중복 선언이 가능하기 때문에 위에서 해당 변수를 선언하고 아래서 실수로 다시 사용할 경우 예상하지 못하는 전혀 다른 결과를 나타낼 수 있다. 그리고 함수 레벨 스코프로 인해서 for문을 예로 들면 for문이 함수 내부가 아닌 외부에서 돌아갈 경우 전역 변수로 역할을 하기 때문에 이 또한 예상치 못한 결과를 나올..