728x90 300x250 SMALL javascript26 GSAP와 ScrollTrigger로 부드러운 스크롤 애니메이션 만들기 GSAP란?GSAP는 자바스크립트를 기반으로 한 애니메이션 라이브러리이다. 고성능, 간편한 API, 다양한 애니메이션 효과를 제공하며, 많은 웹사이트에서 사용되고 있다.ScrollTrigger란?ScrollTrigger는 GSAP의 플러그인으로, 스크롤 위치를 기반으로 애니메이션을 트리거할 수 있다.이를 통해 스크롤에 따라 애니메이션이 자연스럽게 동작하도록 설정할 수 있다. 1. 기본 html 구조Section 1Section 2Section 3Section 4 위의 html 코드는 4개의 섹션을 생성하는 구조이다. 각 섹션은 100vh(뷰포트 높이)를 차지하며, 페이지를 스크롤하면서 애니메이션을 적용할 대상이 된다.2. CSS 스타일링.section { height: 100vh; display: f.. 2025. 3. 17. Node.js란? 설치 및 설정 방법! Node.js는 Chrome V8 JavaScript 엔진을 기반으로 한 서버 사이드 런 타임이다.기존의 브라우저 환경에서만 사용되던 JavaScript를 서버에서도 실행할 수 있게 만들어졌다. Node.js의 주요 특징비동기 & 이벤트 기반싱글 스레드 아키텍처npm(Node Package Manager)을 통한 수많은 라이브러리 활용 가능Node.js 설치 방법(Window 기준)Node.js 공식 사이트에서 LTS 버전 다운로드설치 후 node -v와 npm -v로 정상 설치 확인간단한 Node.js 코드 실행console.log("Hello, Node.js!"); 2025. 3. 15. ES6 모듈 시스템 : import/export를 활용한 최신 개발 방법 ES6 모듈이란?ES6 모듈 시스템은 JavaScript 파일을 독립적인 모듈로 나누어 관리할 수 있도록 해주는 기능이다.즉, 코드를 여러 개의 파일로 나눠서 필요할 때만 불러오는 방식 기존에는 script태그를 여러 개 추가하거나, require.js, CommonJS등을 사용했지만, ES6부터는 표준을 내장된 import / export 문법을 사용할 수 있다. ES6 모듈의 기본 문법1) 모듈에서 export 하기// math.jsexport function add(a, b) { return a + b;}export const PI = 3.14; 2) import 해서 사용하기// main.jsimport { add, PI } from "./math.js";console.log(add(2, 3)).. 2025. 3. 13. 템플릿 리터럴 심화! 태그드 vs 언태그드 차이점 태그드 탬플릿 이란?태그 함수를 사용하여 템플릿 리터럴을 커스터마이즈할 수 있다.백틱 앞에 함수 이름(태그 함수)을 붙여서 템플릿 리터럴을 처리한다.태그함수는 템플릿 리터럴을 입력받아 직접 조작하거나 결과를 반환한다.문법tagFunction`문자열 템플릿`; 예제function myTag(strings, ...values) { console.log(strings); // 문자열 배열 console.log(values); // 삽입된 값들 return "Processed Template";}const name = "Alice";const age = 30;const result = myTag`My name is ${name}, and I am ${age} years old.`;console.log(r.. 2025. 2. 26. 이전 1 2 3 4 ··· 7 다음 728x90 반응형 LIST