JavaScript 함수의 모든 것: 선언식, 화살표 함수, this, 실행 컨텍스트까지
자바스크립트(JavaScript)에서 함수는 가장 핵심적인 개념 중 하나입니다. 단순히 코드를 묶는 것이 아니라, 클로저, 스코프, this 바인딩, 실행 컨텍스트 등과도 밀접한 연관이 있습니다. 특히 ES6 이후 도입된 화살표 함수(Arrow Function)는 문법이 간결할 뿐 아니라 this 바인딩 방식에서도 중요한 차이를 가지며, 면접에서도 자주 출제되는 주제입니다. 이 글에서는 함수의 정의부터 function 선언식과 화살표 함수의 차이, 실행 컨텍스트와 this, 그리고 실무와 면접 대응 전략까지 학습 흐름에 맞춰 정리합니다.JavaScript에서 함수란 무엇인가?함수는 하나의 작업을 수행하는 코드의 묶음입니다. 자바스크립트에서 함수는 일급 객체(first-class object)이기 때문에 ..
2025. 5. 6.
반응형 웹을 위한 CSS 단위 가이드: px, em, rem부터 dvh까지
CSS 단위는 웹 페이지의 구성 요소의 크기, 간격, 위치를 정의하는 데 필수적인 요소입니다. 특히 반응형 웹에서는 다양한 화면 크기와 환경에 따라 적절한 단위를 선택하는 것이 사용자 경험을 좌우합니다. 이 글에서는 기본 픽셀 단위부터 상대 단위(em, rem), 뷰포트 단위(vw, vh), 그리고 최신 동적 단위(dvh, svh, lvh 등)까지 CSS의 주요 단위를 체계적으로 정리합니다. 각각의 단위가 어떤 상황에서 적합한지, 실무와 면접에서 어떤 기준으로 설명하고 선택해야 하는지를 모두 다룹니다.CSS 단위란? 종류와 분류 체계CSS 단위는 요소의 길이, 크기, 위치, 여백 등을 표현하기 위한 수단입니다. 주로 다음과 같이 분류됩니다:절대 단위: 실제 물리적인 크기를 기준으로 고정된 값 (예: px..
2025. 5. 5.
웹 스토리지의 모든 것: 저장 방식, 비교, 실무 활용과 면접 전략
웹 스토리지는 클라이언트 측에서 데이터를 저장할 수 있는 다양한 기술을 의미하며, 사용자 경험을 향상시키고 서버 요청을 줄이는 데 중요한 역할을 합니다. 오늘날 대부분의 웹 애플리케이션에서는 localStorage, sessionStorage, Cookie뿐 아니라, 대용량 및 구조화 데이터를 위한 IndexedDB까지 활용됩니다. 이 네 가지 방식은 기능, 보안, 저장 방식, 브라우저 처리 방식에서 각각 다른 특성을 가지고 있으며, 실무와 면접 모두에서 명확한 이해가 필요합니다.웹 스토리지란 무엇인가? (개념과 기술 진화)웹 스토리지(Web Storage)는 브라우저가 클라이언트 측에서 데이터를 저장할 수 있도록 제공하는 기능입니다. 대표적인 저장 방식은 다음과 같습니다:localStorage: 브라우..
2025. 5. 4.
