반응형 javascript29 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 48 (구조 분해 할당, 기본 매개변수, 향상된 객체 리터럴, 나머지 매개변수와 전개 구문) 목차구조 분해 할당기본 매개변수향상된 객체 리터럴나머지 매개변수와 전개 구문오늘 하루를 돌아보며 구조 분해 할당구조 분해 할당은 객체나 배열의 구조를 분해해서 변수에 할당하는 구문이다. 객체 구조 분해 할당객체에서 값을 가져오려면 변수를 선언하고 해당 변수에 값을 할당해야 한다. 객체를 구조 분해 할당하려면 중괄호({})를 사용한다. 이 구문을 사용하면 한 줄에 여러 변수를 선언하고 할당할 수 있다. 이때 변수 이름은 키 이름과 동일해야 한다.const jeemin = { name: '박지민', age: 27,}// const name = jeemin.name// const age = jeemin.ageconst { name, age } = jeeminconsole.log(name) // '박지민'.. 2025. 7. 3. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 47 (3항 연산자 식, 논리 연산자 식, 함수의 빠른 반환, 템플릿 리터럴) 목차3항 연산자 식논리 연산자 식함수의 빠른 반환템플릿 리터럴오늘 하루를 돌아보며 3항 연산자 식3항 연산자 식은 세 부분으로 구성되어있다.조건(condition)조건이 참인 경우 실행될 명령(?)조건이 거짓인 경우 실행될 명령(:)조건 ? console.log('조건이 참입니다.') : console.log('조건이 거짓입니다.')// 코드를 개행하여 여러 줄로 구성하는 방법 1조건 ? console.log('조건이 참입니다.') : console.log('조건이 거짓입니다.')// 코드를 개행하여 여러 줄로 구성하는 방법 2조건 ? console.log('조건이 참입니다.') : console.log('조건이 거짓입니다.') 3항 연산자 식은 필요하다면 중첩하여 사용할 수 있다. 다만, 3중.. 2025. 7. 2. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 46 (GSAP 시작하기, 이징, 스태거, 타임라인, 컨트롤 & 콜백, 애니메이션 디버깅) 목차GSAP 시작하기GSAP 이징(Easing)GSAP 스태거(Stagger)GSAP 타임라인(Timeline)GSAP 컨트롤 & 콜백(Control & Callback)GSAP 애니메이션 디버깅오늘 하루를 돌아보며 GSAP 시작하기순수 웹 기술인 웹 애니메이션 API를 사용하는 대신, 강력한 애니메이션 라이브러리를 사용할 수 있다. GSAP(GreenSock Animation Platform)은 애니메이션 라이브러리 중 하나다. 여러 라이브러리가 있지만, 이번 수업에서는 GSAP 라이브러리를 학습한다. GSAP을 사용하기 위해서는 HTML 파일에 라이브러리를 추가해야 한다. GSAP을 이용하여 적용한 싱글 애니메이션을 트윈(Tween)이라고 한다. 트윈 애니메이션에 대한 정보를 포함하는 메서드.. 2025. 7. 1. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 45 (웹 애니메이션 - CSS 트랜지션, CSS 애니메이션, JavaScript 애니메이션) 목차웹 애니메이션1. CSS 트랜지션2. CSS 애니메이션3. JavaScript 애니메이션오늘 하루를 돌아보며 웹 애니메이션웹 애니메이션을 만드는 방법은 다음과 같다.CSS 트랜지션(Transition, 전환)CSS 애니메이션(Animation)JavaScript 애니메이션(Animation) 1. CSS 트랜지션CSS 트랜지션(Transition)은 속성 값이 다른 값으로 전환될 때 발생(트리거, trigger)한다.CSS 방식 트리거: 가상 클래스(:hover, :focus, :active)에 자주 사용JavaScript 방식 트리거: 클래스를 추가/제거하거나 style 속성으로 CSS를 변경 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 17 (그리드 레이아웃, CSS 애니메이션)목차그리드 .. 2025. 6. 30. 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 44 (이벤트 전파, 이벤트 트리거 시퀀스, 이벤트 전파 방지, 이벤트 위임, 이벤트 리스너 제거) 목차이벤트 전파(Event Propagation)이벤트 트리거 시퀀스이벤트 전파 방지이벤트 위임(Event Delegation)이벤트 리스너 제거오늘 하루를 돌아보며 이벤트 전파(Event Propagation)이벤트가 발생하면 다음의 세 가지 단계가 순차적으로 발생하는데, 이것을 이벤트 전파(Event Propagation)라고 한다.캡처링 단계(Capturing phase)타겟 단계(Target phase)버블링 단계(Bubbling phase) 1. 캡처링 단계(Capturing Phase)JavaScript는 window → document → event target에 도달할 때까지 이벤트를 전파한다. 이벤트 리스너의 콜백에 세 번째 인수로 불리언 값을 제공하면 캡처링 단계를 수신할 수 있다.d.. 2025. 6. 30. 이전 1 2 3 4 5 6 다음 반응형
