전체 글

[GSAP] 애니메이션 사용법 (기초)

GSAP? GSAP은 "GreenSock Animation Platform"의 약자로, 웹 개발자들이 웹사이트나 앱에 다양한 종류의 애니메이션과 인터랙티브한 요소를 구현하는 데 사용하는 JavaScript 기반의 라이브러리입니다. GSAP는 웹 페이지의 요소를 부드럽게 움직이고 변화시키는 등 다양한 시각적 효과를 제공하기 위해 개발되었습니다. GSAP의 특징 간편한 사용: GSAP은 비교적 간단한 구문을 사용하여 다양한 애니메이션 효과를 만들 수 있도록 설계되었습니다. 이를 통해 개발자들은 복잡한 애니메이션을 비교적 쉽게 구현할 수 있습니다. 성능 최적화: GSAP은 성능을 중요시 여기며, 부드러운 애니메이션을 제공하기 위해 최적화되어 있습니다. 브라우저가 제공하는 기본 애니메이션 기능보다 더 나은 성능..

[딥다이브] 19장 프로토타입

1. 객체지향 프로그래밍 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 추상화 : 다양한 속성중 프로그래밍에 필요한 속성만 간추려 표현하는 것 객체 : 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조 객체지향 프로그래밍 독립적인 객체의 집합으로 프로그램을 표현하려는 프로그래밍 패러다임 객체의 상태를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작을 하나의 논리적인 단위로 묶어 생각 객체 -> 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조 프로퍼티 -> 객체의 상태 데이터 메서드 -> 동작 const circle = { radius: 5, // 반지름 // 원의 지름 getDiameter() { return 2 * radius; }, getPerim..

[딥다이브] 18장 함수와 일급객체

1. 일급 객체 일급 객체의 조건 (1) 무명의 리터럴로 생성할 수 었음. 런타임에 생성 가능 (2) 변수나 자료구조(객체,배열)에 저장 가능 (3) 함수의 매개변수에 전달 가능 (4) 함수의 반환값으로 사용 가능 // 1. 함수는 무명의 리터럴로 생성할 수 있음 // 2. 함수는 변수에 저장할 수 있음 // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당 됨 const increase = function(num) { return ++num; }; const decrease = function(num) { return --num; }; // 2. 함수는 객체에 저장할 수 있음 const auxs = { increase, decrease }; // 3. 함수의 매개변수에 전달..

[딥다이브] 17장 생성자 함수

1. Object 생성자 함수 생성자 함수? new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수 자바스크립트는 Object 생성자 함수 이외 String, Number, Function, Array, Date, RegExp, Promise 등의 빌트인 생성자 함수도 제공 // 빈 객체 생성 const person = new Object(); // 프로퍼티 추가 person.name = 'Lee'; person.sayHello = function () { console.log('HI! My name is ' + this.name); }; console.log(person) // {name: "Lee", sayHello: f} person.sayHello(); // Hi! My name is Le..

리액트에서 Element를 생성하는 법 (feat. Babel 사용 이유)

바벨(Babel)을 왜 사용할까? 자바스크립트 컴파일러 ES6 문법을 ES5로 변경해줌 새로운 문법이나 타입스크립트, JSX 언어들이 모든 브라우저 환경에서 동작할 수 있도록 호환성을 지켜주는 것 브라우저가 JSX 문법을 이해할수 있도록 변환 해주는 것. createElement() 사용하여 컴포넌트 생성 코드를 작성할 때 JSX 문법으로 편리하게 작성한 뒤 변환! 브라우저로 확인해보면 브라우저가 읽을 수 있게 바벨로 변환한 코드는 영역에 작성되어 있음 예시 (두개 다 동일) //JSX const element = ( Hello, world! ) //자바스크립트 createElemnet는 Web API const element = React.createElement( 'h1', { className: '..

[Challenge] 일주일간 이어폰으로 음악 듣지 않기 ❌

🔍 계기 청력이 나빠짐을 느낌. 공부하는데 주의력 분산이 빈번하게 발생하여 같은 내용을 다시 읽게 됨. TV도 게임도 최근 3주간 하지 않았으니 이 사태의 범인으로 'music is my life' 를 지목함 📅 기간 일주일 (2022년 4월 30일 ~ 2022년 5월 7일) 🤙 규칙 가사가 있는 음악은 일체 금한다. (가사 못알아 듣는 팝송도 금지) 실내 환경 내 과한 소음을 차단해야할 경우, 가사가 없는 음악을 '작은 불륨'으로 듣는다. 과한 금단 현상이 오는 경우, 뉴에이지 음악만 '작은 불륨'으로 한정적 허용 러닝할 경우만 가사 있는 음악 허용 🎁 보상 종료일자 한정 케이팝 들으면서 산책 가능 🚶‍♀️ 5만원치 사고 싶은 것 사기 (알아서) ✍️ 일지 1일차 스터디 카페로 이동하는 시간에 이어폰을..