반응형 javascript25 멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 49 (유용한 배열 메서드, 배열 리듀싱, 객체 속성 순환, 암묵적 객체 반환, 명령형 vs. 선언적 코드) 목차유용한 배열 메서드배열 리듀싱객체 속성 순환암묵적 객체 반환명령형 vs. 선언적 코드오늘 하루를 돌아보며 유용한 배열 메서드JavaScript의 유용한 기능 중 하나로 배열을 조작하는 데 도움이 되는 메서드들이 있다..findIndex(): 배열 객체에서 참(truthy)으로 평가되는 첫 번째 항목(item)의 인덱스(index)를 반환한다. 참으로 평가되는 항목이 없으면 -1을 반환한다..find(): 배열 객체에서 참으로 평가되는 첫 번째 항목(item)을 반환하고, 없으면 undefined를 반환한다..filter(): 배열 객체의 항목 중 참으로 평가되는 모든 항목을 걸러내어(filtering, 필터링) 새로운 배열을 반환한다. 없으면 빈 배열([])을 반환한다..map(): 배열의 각 항목을.. 2025. 7. 7. 멋쟁이사자처럼 프론트엔드 부트캠프 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. 이전 1 2 3 4 5 다음 반응형
