-

arguments정의 : 함수 내부에서 사용할 수 있는, 호출 시 전달된 모든 인자(argument)를 담고 있는 유사 배열 객체함수 내부에 자동으로 생성됨함수가 호출될 때 전달된 모든 인자들을 순서대로 담고 있음유사 배열 객체(array-like object)즉, 인덱스(0, 1, 2, ...)로 접근 가능하고 .length 프로퍼티도 있지만, 배열 메서드(ex. .map(), .forEach())는 없음주요 특징특징설명인덱스 접근 가능arguments[0], arguments[1] 등으로 인자에 접근 가능.length 프로퍼티함수에 전달된 인자 개수를 알 수 있음배열 메서드 없음arguments는 배열이 아니어서 .map(), .filter() 같은 메서드 사용 불가함수 선언과 상관없이 존재모든 일반..

화살표 함수와 일반함수의 this 비교일반 함수는 호출 방식에 따라 this가 달라짐.화살표 함수는 정의된 위치의 this를 그대로 가짐.따라서 화살표 함수는 보통 this를 고정해서 사용하고 싶을 때 사용일반 함수에서의 this일반 함수 안에서 this는 함수를 호출한 주체(객체)를 가리킴그래서 호출 방식에 따라 this가 달라짐예를 들어, 객체의 메서드로 호출하면 그 객체를 가리키고, 그냥 함수로 호출하면 전역 객체(또는 엄격 모드면 undefined)를 가리킴const obj = { name: "철수", sayName: function() { console.log(this.name); }};obj.sayName(); // 철수 (obj가 this)const fn = obj.sayNam..

콜백 함수 (Callback Function)다른 함수의 인자로 전달되어, 특정 작업이 끝난 후 호출되는 함수비동기 처리나 이벤트 처리에 많이 사용됨.자바스크립트는 기본적으로 비동기 방식이 많아서, 어떤 작업이 끝난 뒤에 무언가를 하고 싶을 때 그 작업이 끝났을 때 실행할 함수를 미리 넘겨주는 것호출되는 시점이 비동기 작업 완료 이후임문제점: 콜백 지옥 (Callback Hell)콜백을 여러 번 중첩해서 사용하면 코드가 복잡해지고 가독성이 떨어짐 → 이 문제를 해결하려고 프로미스(Promise)나 async/await가 등장// [문법 - 함수를이자로 전달하는 형태]function 함수이름(콜백함수) { // 작업 후 콜백 호출 콜백함수();}기본적인 콜백 함수 구조/* 함수A : 콜백 함수를 받을 ..

clamp() 최소값과 최대값 사이에서, 주어진 선호값을 제한하여 반환하는 함수주어진 값이 최소값 이상, 최대값 이하가 되도록 자동으로 제한유동성과 안정성을 동시에 주는 함수반응형 디자인에서 폰트, 여백, 요소 크기 조절에 자주 사용됨구성/* [문법] */css속성명:clamp(최소값, 선호값, 최대값);최소값(min) → 절대 넘지 말아야 할 하한선선호값(preferred) → 브라우저가 먼저 시도하는 값 (대개 뷰포트 기반 단위 사용)최대값(max) → 절대 넘지 말아야 할 상한선동작 방식브라우저가 선호값을 계산그 값이 최소값보다 작으면 → 최소값 사용그 값이 최대값보다 크면 → 최대값 사용아니면 → 선호값 그대로 사용html {font-size:62.5%}/*최소값(1.6rem)이 16px (예: ..

상대 단위반응형 퍼블리싱에서 상대 단위는 화면 크기나 부모 요소, 루트 요소를 기준으로 크기를 조절하는 단위고정 단위(px)보다 유연하게 반응하기 때문에 다양한 기기 환경에서 필수로 사용rem (Root EM)기준html 요소(font-size)를 기준으로 배수 계산1rem = html font-size특징부모 요소 영향 없음 → 전역 일관성 유지전역 폰트 크기 조정 시 전체 UI가 비례 변경주 사용처 : 폰트크기, 간격, 그리드장점예측 가능, 유지보수 편리반응형에서 @media로 html font-size만 변경하면 전체 UI 크기 자동 조정접근성 측면에서도 브라우저 확대/축소와 자연스럽게 연동됨주의사항html font-size 설정이 중요 (기본 브라우저 html font-size:16px 보통 62..

전개 연산자(Spread Operator) ... 문법을 사용해 배열, 객체, 문자열 등 반복 가능한(iterable) 값의 요소를 개별적으로 펼쳐서 전달하는 ES6 문법사용위치 : 함수 호출, 배열, 객체 리터럴 등에서 사용* iterable : 배열, 문자열, 객체 등 반복 가능한 값 또는 펼칠 수 있는 값을의미const arr = [1, 2, 3];console.log(...arr); // 1 2 3✓ 배열/객체 펼쳐서 낱개로 만듦주요 사용 패턴배열 복사 (얕은 복사)원본 배열 변경 없이 복사 (얕은 복사)// [문법]const 새배열 = [...기존배열];const original = [1, 2, 3];const copy = [...original];console.log(copy); // [1..

브레이크포인트(beakpoint) 화면 크기에 따라 레이아웃이나 스타일을 전환하는 기준점을 의미 브레이크포인트 설정 기준 1. 디자인 기반실제 UI/디자인 시안을 기준으로 설계디자인 시안이 모바일/태블릿/PC/대형 PC로 나눠져 있을 경우 각 시점의 크기를 브레이크포인트로 사용2. 콘텐츠 기반콘텐츠가 줄 바꿈 되거나 깨지는 지점을 기준으로 브레이크포인트 설정좀 더 유연하고 사용자 중심의 접근 방식장점: 디바이스 의존도↓ / 유연성↑단점: 반복되는 테스트와 수정 필요3. 디바이스 기준 + 콘텐츠 기준 혼합가장 많이 쓰이는 실무 전략우선 기기 기준으로 rough 한 breakpoints 설정하고,특정 컴포넌트에서 깨지거나 이상해지는 부분만 콘텐츠 기준으로 미세 조정기기별 브레이크포인트 기기해상도 기준 (wi..

미디어 쿼리(media query)CSS3에서 도입된 기능으로, 브라우저의 환경(뷰포트 크기, 디바이스 해상도, 방향 등)에 따라 조건에 따라 스타일을 적용주로 화면 크기에 따라 레이아웃을 바꾸는 데 사용기본 문법/* [문법] */@media media-type and (media-feature) { /* 조건을 만족할 때 적용될 스타일 */}media-type (미디어 유형)미디어 유형설명all모든 장치에 적용 (기본값)screen화면 기반 장치 (모니터, 스마트폰 등)print인쇄 또는 인쇄 미리보기 시 적용speech스크린리더용 장치media-feature (미디어 특성)미디어 특성설명width, height뷰포트의 너비 / 높이min-width, max-width최소 / 최대 너비 조건orie..

모바일 퍼스트(Mobile First) 모바일 기기에서의 화면을 기준으로 스타일을 작성하고, 점점 넓은 화면(태블릿, 데스크탑)을 위한 스타일을 미디어쿼리로 추가하는 방식장점모바일 사용자 비중이 높은 현재, 실제 사용 환경에 맞는 전략모바일 성능 제약을 고려해 필수 스타일만 먼저 로딩, 성능 향상점진적 향상(Progressive Enhancement): 기본 기능에서 점점 향상시켜 나가는 전략과 맞물림단점데스크탑 중심의 디자인을 먼저 받은 경우, 작업자에게 익숙하지 않을 수 있음복잡한 UI가 많은 데스크탑을 나중에 고려할 경우, 스타일 구조가 복잡해질 수 있음/* 기본 스타일: 모바일 기준 */.container { font-size: 14px; padding: 16px;}/* 화면이 768px 이상..

반응형 디자인 (Responsive)브라우저나 기기의 화면 크기에 따라 유동적으로 콘텐츠와 레이아웃이 변화하는 웹 디자인 방식.특징하나의 CSS 파일에서 media query를 사용해 다양한 해상도에 대응flex, grid, %, vw, rem 등 유동 단위 사용화면 크기가 조금씩 바뀌어도 자연스럽게 레이아웃이 적응장점유지보수 쉽고, 장기적인 프로젝트에 적합다양한 해상도와 디바이스에 자동 대응새로운 디바이스가 생겨도 레이아웃이 깨지지 않음단점설계가 복잡하고 디자이너와의 협업이 중요초기 개발 시간이 오래 걸릴 수 있음적합한 상황블로그, 쇼핑몰, 기업 홈페이지 등 모든 디바이스에서 접근 가능한 서비스다양한 디바이스 (PC/모바일/태블릿/폴더블 등)에서 동일한 콘텐츠 제공콘텐츠가 중심이 되는 웹사이트 (예: ..