-

객체 접근 객체 접근 방법1. 점 표기법(dot notation) 가장 흔히 사용하는 접근 방법키 이름이 유효한 식별자(identifier)이어야 가능사용 가능 : 문자(A-Z, a-z), _, $로 시작 가능 (ex) name, age, _id, $value ...)사용 불가 : 공백, 숫자로 시작, 특수문자 (ex) "full name", "123abc", "user-name"..)식별자로 사용할 수 없는 키를 사용할 때는 무조건 대괄호 [] 사용해야 객체 접근 가능장점: 코드 읽기 쉬움단점: 변수로 동적 접근 불가// [문법 - 값 접근]객체명.키명// [문법 - 메서드 호출]객체명.키명()console.log(person.name); // "Alice"person.greet(); ..

객체객체는 키(key)와 값(value)의 쌍으로 구성된 속성을 가진 데이터 타입키(key): 보통 문자열(String) 또는 심볼(Symbol)값(value): 숫자, 문자열, 불리언, 함수, 배열, 다른 객체 등 모든 자료형이 가능속성(property) : 키(key) + 값(value)의 쌍을 의미데이터를 {}로 감싸 객체를 정의데이터 타입의 제한이 없음키를 사용하여 데이터를 불러오거나 값을 변경할 수 있음const로 선언할 경우 객체 자체를 변경할 수는 없으나, 객체 안의 프로퍼티나 메서드는 변경이 가능객체의 키와 속성 값이 같을 경우 하나로 입력가능특징특징설명동적(Dynamic)객체는 생성 후에도 속성을 자유롭게 추가, 수정, 삭제할 수 있음참조 타입(Reference Type)객체는 메모리에 ..

ease애니메이션에서 속도의 변화를 조절하는 속성단순히 시작과 끝을 선형으로 움직이는 것보다는, 더 자연스럽거나 역동적인 움직임을 만들기 위해 사용선형(linear): 일정한 속도로 움직임이징(ease): 속도를 변화시켜 가속, 감속, 탄력 등을 표현// [문법]gsap.to(target, { ease: "속성" }); 주요 ease 종류Linear / None속도가 일정하게 유지되는 기본 형태특징: 가속이나 감속 없음, 꾸준히 움직임gsap.to(".box", { x: 300, duration: 2, ease: "linear" });power 계열가장 많이 사용되는 기본 ease.숫자가 클수록 가속/감속이 더 강함.종류설명특징power1약간의 가속/감속부드럽게 시작하거나 끝날 때power2중간 정도흔히..

GSAP 기본 구문 애니메이션에 대한 정보를 포함하는 메서드, 타겟, 그리고 vars 객체를 가지고 있음대상GSAP에 무엇을 애니메이션으로 만들고 대상document.querySelectorAll(), HTML 또는 SVG 대상의 경우 다음과 같은 선택자 사용 가능".class" 그리고. "#id". 또는 변수나 배열을 전달할 수도 있음// use a class or IDgsap.to(".box", { x: 200 });// a complex CSS selectorgsap.to("section > .box", { x: 200 });// a variablelet box = document.querySelector(".box");gsap.to(box, { x: 200 })// or even an Array..

1. GSAP 라이브러리 불러오기GSAP은 CDN 또는 NPM, Yarn을 통해 사용할 수 있음1) CDN 방식 (HTML에 바로 연결)별도 빌드 환경 없이 바로 사용 가능. 일반적으로 마감 본문 태그와 사용자 지정 GSAP 코드 앞에 GSAP 스크립트 태그를 붙이는 것이 가장 좋음 GSAP는 자주 업데이트가 되기 때문에 제일 최선 버전을 사용하는게 좋음 2) NPM 방식 (프로젝트 설치)React, Vue, Next.js 같은 프레임워크 프로젝트에서 많이 사용.npm install gsapimport gsap from "gsap";

GSAP (GreenSock Animation Platform) 정의 : 웹에서 애니메이션을 부드럽고 효율적으로 구현할 수 있는 자바스크립트 기반 애니메이션 라이브러리CSS 애니메이션이나 requestAnimationFrame을 직접 다루는 것보다 성능이 뛰어남복잡한 애니메이션을 직관적으로 제어할 수 있음 GSAP의 특징성능 최적화초당 60fps 애니메이션 유지가 가능하도록 최적화되어 있음구형 브라우저와도 호환성이 좋아서 안정적으로 동작.다양한 애니메이션 제어위치, 크기, 회전, 색상, 투명도 등 거의 모든 CSS 속성을 제어할 수 있음숫자 값이 들어가는 속성은 전부 애니메이션화가 가능.정교한 타이밍 제어delay, repeat, yoyo 같은 옵션으로 반복 애니메이션도 쉽게 작성할 수 있음Timelin..

유사배열유사배열은 배열과 비슷하게 생겼지만 진짜 배열은 아닌 객체즉, 배열처럼 인덱스(0, 1, 2...)와 length 프로퍼티가 있어서 배열처럼 접근할 수 있지만, 배열 메서드(Array.prototype 메서드)는 없는 객체특징인덱스로 요소에 접근 가능 (ex, obj[0], obj[1])length 속성 존재배열 고유 메서드(ex: push(), pop(), forEach())를 사용할 수 없음반복문 접근 가능(for, while)일반 객체이므로 배열 메서드를 바로 사용할 수 없음 Array.from() 또는 전개 연산자 ...로 배열로 변환 가능유사배열을 진짜 배열로 만들어야 배열 메서드를 쓸 수 있음Array.from() 함수나 [...obj] (이터러블인 경우)로 변환 가능반복문으로 접근 가..

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 : 콜백 함수를 받을 ..