-

나머지 매개변수(rest parameter) (...args)정의 :함수의 매개변수 목록에서 ‘나머지’ 인자들을 하나의 배열로 모아주는 문법ES6(ECMAScript 2015) 부터 도이타입 : 배열...rest ← rest 파라미터rest는 배열(type) 형태로 전달됨// [문법]function funcName(고정매개변수, ...rest) { // 함수 본문}function showInfo(name, age, ...skills) { console.log(name); // 'Jisoo' console.log(age); // 25 console.log(skills); // ['HTML', 'CSS', 'JS']}showInfo('Jisoo', 25, 'HTML', 'CSS', 'JS')..

스코프 (Scope)변수에 접근할 수 있는 범위를 의미종류설명전역 스코프함수 바깥에서 선언된 변수. 전체 코드에서 접근 가능함수 스코프함수 안에서 선언된 변수. 함수 내부에서만 접근 가능블록 스코프 (let, const){} 블록 내부에서 선언된 변수는 블록 안에서만 유효let a = 10; // 전역 스코프function test() { let b = 20; // 함수 스코프 if (true) { let c = 30; // 블록 스코프 console.log(a, b, c); // ✅ 가능 } console.log(c); // ❌ ReferenceError: c is not defined}test();console.log(b); // ❌ ReferenceError: b is not de..

레티나(Retina) 디스플레이 정의 : 애플(Apple)이 정의한 고해상도 디스플레이 브랜드명레티나 기준 : PPI(Pixels Per Inch), 즉 1인치당 픽셀 수가 약 300 이상, 사람이 일반적인 거리(약 30~40cm)에서 볼 때 픽셀 단위가 눈에 보이지 않을 정도면 레티나라고 함레티나 디스플레이를 고려한 퍼블리싱UI 개발 시 직접 레티나 디스플레이를 조작하진 않지만,이 디스플레이 환경을 고려해 퍼블리싱 대응 작업을 해야 함1. 고해상도 이미지 대응 (srcset, @2x, SVG) [Responsive] 반응형 이미지 - 레티나(Retina) 이미지레티나(retina) 이미지정의 : 고해상도 디스플레이(DPR 2 이상)에서 깨지지 않도록 더 높은 해상도로 준비한 이미지ex) 고해상도 디스..

레티나(retina) 이미지정의 : 고해상도 디스플레이(DPR 2 이상)에서 깨지지 않도록 더 높은 해상도로 준비한 이미지ex) 고해상도 디스플레이 (DPR 2~3) - 같은 CSS 크기 (100px × 100px)지만, 실제 화면은 200px × 200px 이상의 픽셀로 그려짐 - 그런데 이미지가 여전히 100px × 100px이면 픽셀 늘림 → 흐릿하게 보임(깨짐) → 2배, 3배 크기의 이미지를 준비해두면, 브라우저가 고해상도 디바이스에서 자동으로 고화질 이미지를 사용해서 선명하게 보여줌..svg 이미지는 해상도에 무관하게 선명(벡터이기 때문에), 아이콘 등은 가능하면 SVG로 대체하는 게 좋음사진이나 배경 이미지처럼 비트맵인 경우만 레티나 대응 필요 레티나 이미지 구현 방법1. ..

디바이스 해상도정의 : 디바이스 화면을 구성하는 실제 픽셀(pixel)의 수웹 퍼블리싱 작업에서는 CSS 해상도(뷰포트)를 기준으로 작업디바이스 해상도 기본 개념 물리적 해상도 (Physical Resolution, 실제 해상도) 바이스 화면에 실제로 존재하는 픽셀의 수예: 아이폰 13 Pro → 1170 x 2532 (물리 픽셀) CSS 해상도 / 논리 해상도 (CSS Resolution, Logical Resolution)웹 브라우저에서 인식하는 해상도디바이스 픽셀을 CSS 픽셀로 변환한 값window.innerWidth, width: 100vw 등에서 이 값을 기준으로 레이아웃이 잡힘예: 위 아이폰의 CSS 해상도는 390 x 844[ 아이폰 화면 전체 (물리 해상도 1170px) ] └─── 웹 ..

뷰포트(viewport)정의 : 사용자의 브라우저 화면에서 실제로 웹사이트가 보여지는 영역을 의미디바이스가 아무리 크더라도, 웹사이트가 보이는 건 뷰포트 크기 기준meta vieport : 뷰포트를 디바이스 너비에 맞추는 설명디바이스 픽셀이 아니라 웹이 계산에 사용하는 단위(=CSS 픽셀)로 측정됨 뷰포트 설정 방법 HTML 에 필수로 들어가는 메타태그속성설명width=device-width뷰포트 너비를 디바이스 화면 너비에 맞춤initial-scale=1.0페이지 처음 로딩 시의 줌 배율 (100%)maximum-scale=1.0최대 확대 배율 제한user-scalable=no사용자가 확대/축소 못하게 막음왜 를 꼭 설정해야 할까?※ 실제로 뷰포트 미 설정 시 발생하는 문제는 개발자 도구가 아닌 디바..

재귀 호출 (Recursion)정의 : 함수 안에서 자기 자신을 다시 호출하는 것을 의미사용 상황 : 문제가 자기 자신을 포함한 형태일 때→ 예: 트리 구조 탐색, 디렉토리 구조, 수학적 계산(피보나치, 팩토리얼 등)재귀 함수의 호출 핵심종료 조건 (Base case) : 종료 조건이 없다면, 함수는 무한히 자기 자신을 호출하다가 ❗️"Maximum call stack size exceeded" 오류가 발생 (스택 오버플로우)자기 자신 호출 (Recursive call) : 문제를 더 작은 문제로 줄여 다시 호출재귀 함수 구조의 기본function 함수명(매개변수) { if (종료 조건) { return 결과; } return 함수명(다음 값); // 자기 자신을 다시 호출}재귀..

기명 함수 (Named Function) 이름이 있는 함수function() 뒤에 이름이 있는 함수 ⇒ function 함수명()함수 선언식은 기본적으로 기명함수 디버깅할 때 스택 트레이스에 함수 이름이 찍히고, 함수 내부에서 재귀 호출도 가능해서 오류 찾기와 복잡한 로직 작성에 유리특징특징설명디버깅하기 쉬움에러 스택 트레이스에 함수 이름이 명확히 표시됨재귀 호출 가능함수 내부에서 자기 이름으로 자신을 호출할 수 있음명확한 의도 표현 가능함수가 무엇을 하는지 이름만 보고 알 수 있음 function greet() { console.log("Hello!");}익명 함수 (Anonymous Function) 이름이 없는 함수, function() 뒤에 이름이 없는 함수 ⇒ function()보통 함수 ..

엄격 모드정의 : "use strict" 지시어를 사용하여 코드 실행을 더 엄격하게 만드는 자바스크립트 기능실수를 더 빠르게 잡아냄구문 오류를 강하게 체크암묵적인 동작 금지 → 개발자가 의도하지 않은 버그 예방엄격모드 사용 방법"use strict"는 반드시 파일 또는 함수의 맨 앞에 와야 함!전체 스크립트에 적용"use strict";x = 10; // ❌ ReferenceError: x is not defined함수 단위로 적용function myFunc() { "use strict"; y = 5; // ❌ ReferenceError: y is not defined} 엄격 모드에서 달라지는 주요 동작 비교상황느슨한 모드(기본)엄격 모드선언 없이 변수 사용x = 3 가능❌ ReferenceError..

함수의 종류함수의 종류는 함수가 어떤 역할을 하거나, 어떤 방식으로 동작하는지에 따라 분류일반 함수가장 기본적인 함수로, 특정 작업을 수행하기 위해 선언하는 함수.function 키워드로 선언함.호출될 때마다 함수 내부 코드가 실행됨매개변수를 받고, 값을 반환할 수 있음this 바인딩은 호출하는 방식에 따라 달라짐 (객체 메서드로 호출하면 객체, 일반 호출 시 전역 객체 또는 undefined).// [문법]function 함수명(매개변수1, 매개변수2) { // 실행할 코드 return 값; // 선택적}// 호출 예시함수명(값1, 값2);function greet() { console.log('안녕!');}greet(); // 함수 호출즉시 실행 함수선언하자마자 바로 실행되는 함수.주로 변수의..