코딩병원

Frontend/Javascript

[Javascript] 이벤트 루프 도대체 어떻게 돌아가는 걸까? (완전 정복)

자바스크립트는 싱글 스레드 언어입니다. 개발 공부를 하다 보면 귀에 딱지가 앉도록 듣는 말입니다. 그런데 이상하지 않나요? 싱글 스레드는 '손이 하나'라는 뜻인데, 어떻게 우리는 웹사이트에서 데이터를 불러오면서 동시에 애니메이션을 보고, 버튼도 클릭할 수 있는 걸까요? 이 마법 같은 동시성의 비밀, 이벤트 루프(Event Loop)를 아주 상세하게 뜯어보겠습니다.1. 등장인물 소개: 런타임 4대장자바스크립트가 돌아가는 환경(브라우저)은 거대한 공장과 같습니다. 이 공장에는 4가지 핵심 구역이 있습니다.JS Engine (Call Stack)역할: 실제 코드를 실행하는 작업대특징: 싱글 스레드이므로 작업대가 딱 하나입니다. 한 번에 한 가지 일만 처리할 수 있습니다. (LIFO: 나중에 들어온게 먼저 나감..

2026. 1. 24.

Frontend/Javascript

[Javascript] 구글이 싫어하는 CLS(Cumulative Layout Shift) 공략하기

기사를 읽고 있는데 갑자기 텍스트가 훅 내려가서 읽던 줄을 놓치거나, '취소' 버튼을 누르려던 찰나에 위에 이미지가 로딩되면서 버튼이 밀려나고 실수로 '결제' 버튼을 눌러버리는 경험. 다들 한 번쯤 있으시죠? 이 끔찍한 사용자 경험의 이름이 바로 CLS(누적 레이아웃 이동)입니다. 오늘은 웹사이트 '화면 깨짐 3대장'의 마지막 보스, CLS를 완벽하게 공략해 봅니다.1. CLS (Cumulative Layout Shift)가 도대체 뭔가요?CLS는 쉽게 말해 "사용자가 예상치 못한 시점에 웹 페이지의 요소들이 얼마나 덜컥거리며 위치를 바꾸는지"를 점수로 매긴 것입니다. 웹페이지는 리소스(이미지, 폰트, 광고 스크립트 등)를 비동기적으로 다운로드합니다. 브라우저가 "아, 여기엔 이따가 이미지가 들어올 거야..

2026. 1. 11.

Frontend/Javascript

[Javascript] FOUC, Flash Of Unstyled Content 완전 정복

웹사이트에 접속했을 때, 아주 짧은 순간 동안 레이아웃이 깨져 보이거나 기본 폰트(굴림, Times New Roman 등)로 내용이 보였다가 갑자기 정상적인 디자인으로 '탁'하고 바뀌는 경험, 해보신 적 있나요? 개발자나 디자이너 입장에서는 등골이 서늘해지는 이 순간, 바로 FOUC 현상입니다. 오늘은 웹 사용자 경험(UX)을 해치는 주범 중 하나인 FOUC가 도대체 왜 발생하며, 어떻게 하면 깔끔하게 해결할 수 있는지 '기가 막히게' 정리해 드립니다.1. FOUC란 무엇인가요?FOUC: Flash Of Unstyled Content. 이름 그대로 해석하면 스타일이 입혀지지 않은 콘텐츠가 순간적으로 번쩍하고 나타나는 현상을 말합니다. 웹 브라우저는 우리가 작성한 HTML(뼈대)과 CSS(디자인)를 읽어서..

2026. 1. 4.

Frontend/Javascript

[Javacsript] <script>의 async와 defer, 차이점 완벽 정리 (feat. 렌더링 성능 최적화)

프론트엔드 개발자 면접 단골 질문이자, 웹 성능 최적화의 가장 기초가 되는 1. 브라우저는 HTML 파싱을 즉시 중단(Block)합니다.2. 스크립트를 다운로드하고 실행합니다.3. 실행이 끝나면 다시 HTML 파싱을 재개합니다. 만약 스크립트 파일이 무겁거나 인터넷이 느리다면, 사용자는 그 시간 동안 하얗게 멈춘 화면만 보게 됩니다. 이것이 바로 우리가 피해야 할 Render Blocking 입니다. 2. 한 눈에 보는 동작 방식이 문제를 해결하기 위해 등장한 것이 async와 defer입니다. 두 속성 모두 HTML 파싱과 스크립트 다운로드를 병렬(Parellel)로 처리하지만, 실행 시점에서 결정적인 차이가 있습니다. 아래 이미지를 참고해주세요. 1) - 다운로드: HTML 파싱과 동시에 진행..

2026. 1. 3.

Frontend/Javascript

ESLint와 Prettier로 코드 자동 정렬 설정 with Airbnb

코드를 저장할 때 자동으로 정렬하거나 포맷팅해주는 기능을 적용하려면 ESLint와 Prettier를 함께 사용해야 합니다. 이번 글에서는 Next.js와 TypeScript 프로젝트에 ESLint와 Prettier를 설정하는 방법에 대해 작성해보겠습니다.1. ESLint 및 Prettier 설치먼저 필요한 패키지들을 설치합니다.npm info "eslint-config-airbnb@latest" peerDependencies;2. Prettier 설정 파일 생성프로젝트 루트에 .prettierrc 파일을 생성하여 Prettier 설정을 추가합니다.{ "endOfLine": "lf", "singleQuote": true, "semi": true, "useTabs": false, "tabWidth"..

2024. 8. 10.

Frontend/Javascript

[Javascript] 코드 품질을 높이는 방법

코드 품질을 높이는 것은 개발 과정에서 매우 중요하고 기본적인 원칙들이 존재합니다. 무조건 따라야 하는 것은 아니지만, 품질이 좋은 코드는 유지보수가 쉽고 버그가 적게 발생하며 향후 기능 추가나 변경이 용이합니다. 따라서 이번 글에서는 코드 품질을 높이는 방법과 이유에 대해서 포스팅하겠습니다. [고품질 코드 작성은 일정을 지연시키는가?] 단기적으로 보면 고품질 코드를 작성하는 데 시간이 더 걸릴 수 있습니다. 하지만 한 번 사용하고 버릴 시스템이 아닌 좀 더 중요한 소프트웨어를 개발하고 있다면, 일반적으로 고품질 코드를 작성하는 것이 중장기적으로는 개발 시간을 단축해 줍니다. 코드 품질을 고려하지 않고 먼저 떠오르는 대로 코딩하면 처음에는 시간을 절약할 수 있습니다. 그러나 이런 코드는 머지않아 취약하고..

2024. 2. 25.

Frontend/Javascript

[Javascript] Prototype과 Class의 개념과 차이

이번 글에서는 프로토타입과 클래스에 대해 다루어 보려고 합니다. 프로토타입은 ES6 이전부터 나왔고, 클래스는 ES6에서 도입되었습니다. 프로토타입과 클래스가 무엇이며 어떠한 차이를 갖고 있는지 간단한 코드들을 보면서 확인하겠습니다. [Prototype] 자바스크립트 프로토타입(Prototype)은 자바스크립트 객체 지향 프로그래밍에서 객체 상속과 프로퍼티 공유를 구현하는 데 사용되는 중요한 개념입니다. 모든 객체는 프로토타입을 가지며, 이를 통해 다른 객체의 프로퍼티와 메서드를 상속하고 공유할 수 있습니다. 프로토타입은 객체 간의 연쇄적인 상속을 가능하게 합니다. 객체가 다른 객체의 프로퍼티나 메서드를 참조할 때, 프로토타입 체인을 통해 상위 객체(부모 객체)로부터 프로퍼티나 메서드를 찾습니다. 이러한..

2024. 1. 27.

Frontend/Javascript

[Javascript] Cookies, Session And Web Storage의 차이점

쿠키(Cookies), 세션(Session), 그리고 웹 스토리지(Web Storage)는 모두 웹 개발에서 데이터를 저장하고 관리하는 데 사용되는 기술이지만, 각각의 특징과 작동 방식이 다릅니다. 간단한 예제를 보면서 이들의 차이를 설명하겠습니다. 쿠키 세션 웹 스토리지 저장 위치 클라이언트 서버 클라이언트 데이터 저장 방식 키-값 쌍 형태의 작은 텍스트 파일 서버 측에 사용자 세션 데이터를 저장하고, 클라이언트는 세션 ID를 사용하여 서버의 데이터에 접근 키-값 쌍으로 데이터를 저장하며, 로컬 스토리지와 세션 스토리지 두 가지 유형 존재 데이터 전송 모든 HTTP 요청과 함께 서버로 자동으로 전송 세션 ID가 클라이언트로 전송되지만, 세션 데이터는 서버에 저장되므로 클라이언트와 서버간의 통신을 통해 ..

2024. 1. 20.

Frontend/Javascript

[Javascript] 불변성이란?

자바스크립트는 동적 타입 언어로, 변수에 저장되는 데이터의 타입은 런타임에 동적으로 결정됩니다. 자바스크립트의 데이터 타입은 크게 두 가지 범주로 나눌 수 있습니다. 원시 데이터 타입(Primitive Data Types)과 참조 데이터 타입(Reference Data Types)입니다. 자바스크립트에서 원시타입은 불변하고 참조타입은 가변적입니다. 자바스크립트에서 불변성은 "변하지 아니하는 성질", 말 그대로 바뀌지 않는다는 뜻이며 이 개념은 함수형 프로그래밍에서 중요하게 여겨지는 개념 중 하나입니다. 원시타입 참조 타입 Number Array String Object Boolean Function Undefined Date Nul RegExp Symbol Map, Set ... [원시타입] let a ..

2023. 12. 23.

Frontend/Javascript

[Javascript] Function Declaration과 Function Expression의 차이

JavaScript에서 함수를 정의하는 방법에는 함수 선언형(Function Declaration)과 함수 표현식(Function Expression) 두 가지가 있습니다. 함수 선언형 (Function Declaration) 함수 선언형은 함수 이름과 함수 본문으로 구성됩니다. 함수 선언은 전역 스코프 또는 함수 스코프에서 사용할 수 있으며, 호이스팅(hoisting)이 발생합니다. 이는 함수를 선언하기 전에 호출해도 오류가 발생하지 않는다는 것을 의미합니다. 함수 선언형은 함수 이름이 필수이며, 함수 표현식과 달리 이름을 가지고 있기 때문에 재귀적인 함수 호출에 유용합니다. function greet(name) { console.log(`Hello, ${name}!`); } greet('Star');..

2023. 12. 9.

Frontend/Javascript

[Javascript] 브라우저 렌더링 과정

프론트엔드 기술 면접 1순위로 등장하는 질문이 있습니다. "주소창에 www.google.com을 입력하고 엔터를 치면 어떤 일이 일어나나요?" 네트워크 과정을 지나 브라우저가 HTML 데이터를 받아온 순간부터, 사용자의 눈에 실제 화면이 보이기까지의 과정을 CRP(Critical Rendering Path)라고 합니다. 이 과정을 이해하는 것은 단순히 면접을 통과하기 위함이 아닙니다. 웹 성능 최적화의 출발점이 바로 이 메커니즘을 이해하는 데 있기 때문입니다. 왜 내 사이트의 애니메이션이 버벅거리는지, 왜 초기 로딩이 느린지 알고 싶다면 이 과정을 반드시 파악해야 합니다. 이번 글에서는 브라우저가 어떻게 텍스트 덩어리인 코드를 화려한 픽셀 화면으로 바꿔내는지, 단계별로 상세히 알아보고 최적화 포인트까..

2023. 12. 1.

Frontend/Javascript

[Javascript] 런타임 작동 방식

이번 글에서는 Javascript 런타임에 대하여 알아보겠습니다. Javascript 런타임은 Javascript가 구동되는 환경을 말합니다. 즉, Javascript 런타임은 Javascript 코드를 해석하고 실행하며, 필요한 리소스와 API를 제공하여 코드가 다양한 작업을 수행할 수 있게 합니다. Javascript 런타임 구성 요소는 다음과 같습니다. 1. 엔진 Javascript 코드를 실행하는 핵심 구성 요소입니다. 가장 유명한 Javascript 엔진 중 하나는 구글의 *V8엔진으로, Chrome과 Node.js에서 사용됩니다. 브라우저마다 다른 엔진을 사용할 수 있으며 Edge, IE는 Chakra라는 엔진을 사용하고 있습니다. 이러한 엔진은 Javascript 코드를 해석하고 실행하는 역..

2023. 11. 25.

Frontend/Javascript

[Javascript] 클로저(Closure)란?

클로저란? 클로저는 함수가 다른 함수 안에서 정의되고, 그 함수의 외부 변수에 접근할 수 있는 것 - 함수 내 함수 클로저는 함수 내부에 정의된 함수입니다. 이 함수는 외부 함수의 스코프에 접근할 수 있습니다. - 외부 변수 접근 클로저는 외부 함수(자신포함)의 변수나 매개변수에 접근할 수 있으며, 그 값을 읽거나 변경할 수 있습니다. - 스코프 유지 외부 함수가 실행을 완료하더라도 클로저 함수는 여전히 외부 함수의 스코프 정보를 유지합니다. 이것은 클로저 함수가 외부 함수의 변수에 계속 접근할 수 있는 이유입니다. 예시 위의 개념으로만 보면 이해가 잘 안 될 수 있으니 예제를 통해 자세히 살펴보도록 하겠습니다. function outer() { let outerVar = '저는 외부 변수입니다.'; f..

2023. 11. 19.

Frontend/Javascript

[Javascript] 웹 접근성을 높이는 방법

웹 표준과 웹 접근성은 서로 보완적이며, 함께 고려되면 더 나은 웹 경험을 제공할 수 있습니다. 개발자들과 디자이너들은 표준을 준수하고 웹 접근성을 고려하여 웹 사이트를 개발하는 것이 좋습니다. 이번 글에서는 웹 표준과 웹 접근성과 웹 접근성을 높이는 방법에 대하여 알아보겠습니다. [웹 표준이란?] 웹 사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격을 말합니다. 반드시 지켜야 하는 것은 아니지만 표준을 따르면 다양한 브라우저와 호환하게 해 주고 개발자들은 일관된 규칙과 구조를 활용하여 빠르게 웹 페이지를 개발할 수 있습니다. 그리고 검색엔진에 노출이 잘 될 확률이 높아집니다. [웹 접근성이란?] 웹 애플리케이션에 대한 모든 사용자, 특히 장애를 가진 사용자들이 동등하게 접근하고 이해할 수 있도록..

2023. 11. 17.

Frontend/Javascript

[Javascript] Execution Context란?

1. Execution Context란? Execution Context(실행 컨텍스트)는 실행 문맥이라고도 합니다. Execution Context는 굉장히 추상적인 개념인데요. 자바스크립트 코드가 실행될 때 생성되는 환경 및 실행에 필요한 정보를 관리하는 중요한 개념입니다. 자바스크립트 엔진은 코드를 실행할 때 현재 실행 중인 컨텍스트를 추적하며, 이 컨텍스트에는 코드가 실행되는 동안 필요한 데이터와 정보가 저장됩니다. 이번 글을 통해 Execution Context에 대해 자세히 알아보도록 하겠습니다. 2. Execution Context 종류 컨텍스트는 두 개 이상의 종류가 있고, 종류마다 특정 조건에 생성이 됩니다. 전역 실행 컨텍스트 가장 기본이 되는 실행 컨텍스트 입니다. 자바스크립트 코드가..

2023. 11. 10.

Frontend/Javascript

[Javascript] Callback, Promise 그리고 async/await의 차이점

Callback, Promise, 그리고 async/await은 모두 JavaScript에서 비동기 작업을 다루는 방식입니다. 이번 글에서는 각각의 차이점에 대해 포스팅해 보겠습니다. 비동기 작업을 다루기 전에 동기와 비동기의 차이점부터 작성하였으니 참고해 주세요. 1. Synchronous, Asynchronous - 동기 (Synchronous) 동기 작업은 순차적으로 진행되며, 하나의 작업이 완료될 때까지 다음 작업이 시작하지 않습니다. 동기 코드는 작업이 순서대로 진행되기 때문에 간단하게 이해할 수 있고, 디버깅하기 쉽습니다. 하나의 작업이 끝날 때까지 다른 작업을 수행하지 않기 때문에 성능 문제가 발생할 수 있습니다. 특히 긴 시간이 걸리는 작업은 애플리케이션을 블록 시킬 수 있습니다. - 비동..

2023. 10. 29.

Frontend/Javascript

[Javascript] Generator(제너레이터) 사용법 및 예제

[Generator란?] Generator Function는 사용자의 요구에 따라 다른 시간 간격으로 여러 값을 반환할 수 있고 내부 상태도 관리할 수 있습니다. 단 한 번의 실행으로 함수의 끝까지 혹은 return까지 실행이 완료되는 일반 함수와는 달리, Generator 함수는 사용자의 요구에 따라 일시적으로 정지될 수도 있고, 다시 시작될 수도 있습니다. 또한 Generator 함수의 반환으로는 Generator가 반환됩니다. 함수에서 값을 여러 번에 걸쳐서 반환하는 것은 불가능합니다. 따라서 이 함수는 호출할 때마다 무조건 1을 반환하게 됩니다. function returnFunc() { return 1; return 2; return 3; return 4; return 5; } 하지만 제너레이터..

2022. 7. 31.

Frontend/Javascript

[Javascript] BOM이란?

브라우저 객체 모델(BOM)이란? Javascript를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있습니다. 이때 사용할 수 있는 객체 모델이 바로 브라우저 객체 모델(BOM, Browser Object Model)입니다. 브라우저 객체 모델(BOM)은 문서 객체 모델(DOM)과는 달리 W3C의 표준 객체 모델은 아닙니다. 하지만 이 모델은 Javascript가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 방법을 제공해 줍니다. 자바스크립트에서는 이러한 BOM 모델의 객체들을 전역 객체로 사용할 수 있습니다. Browser 객체 window 모든 객체가 소속된 객체이며, 브라우저 창을 의미합니다. document 현재문서에 대한 정보를 갖고 있는 객체입니다. histo..

2022. 6. 25.