javascript13 [GSAP] GSAP(GreenSock Animation Platform) 라이브러리(애니메이션 구현) GSAP는 웹 애니메이션을 쉽게 구현할 수 있게 해주는 강력한 JavaScript 라이브러리이다. 복잡한 애니메이션을 간단하게 만들 수 있도록 도와주며, 성능이 뛰어나고 다양한 브라우저에서 호환된다. GSAP는 주로 다음과 같은 기능을 제공한다. https://gsap.com/ 1. 기본 개념GSAP는 애니메이션을 구현하기 위한 간단하고 직관적인 API를 제공한다. 타임라인, 트위너, 이징(easing) 등 다양한 기능을 통해 애니메이션을 세밀하게 조정할 수 있다. GSAP는 CSS 애니메이션보다 더 많은 제어를 가능하게 하며, 복잡한 애니메이션 시퀀스를 쉽게 구성할 수 있다. 2. GSAP 설치GSAP을 사용하기 위해서는 먼저 라이브러리를 설치해야 한다. 아래와 같은 방법으로 설치할 수 있다.npm을.. 2025. 2. 26. [JavaScript] JavaScript 구조 분해 할당(Destructuring Assignment) JavaScript의 구조 분해 할당은 배열이나 객체의 속성을 쉽게 추출해서 변수에 할당할 수 있는 문법이다. 이걸 사용하면 코드가 깔끔해지고, 반복적인 코드도 줄일 수 있다. 1. 배열 구조 분해 할당배열의 요소를 변수에 간편하게 할당할 수 있다.예제const fruits = ['사과', '바나나', '체리'];// 구조 분해 할당const [firstFruit, secondFruit] = fruits;console.log(firstFruit); // 출력: 사과console.log(secondFruit); // 출력: 바나나여기서 fruits 배열의 첫 번째와 두 번째 요소를 각각 firstFruit와 secondFruit에 할당한다. 이렇게 배열의 요소를 쉽게 뽑아낼 수 있다. 2. 기본값 설정구조.. 2025. 2. 25. [React] React 프로젝트 생성 후 최초 렌더링 과정 이해하기(Vite 설치) Vite를 통해 React 프로젝트를 설치 후 실행을 시키면 아래와 같은 화면을 만날 수 있다. 그리고 실제 생성된 폴더구조를 보면 다음과 같다 위 폴더 구조 안에서 저 최초 화면이 어떻게 렌더링 되는건지 간단히 정리해보려 한다. 전체 구조project-folder/├── src/│ ├── App.tsx│ ├── main.tsx│ ├── index.css│ ├── assets/│ │ ├── react.svg│ │ └── vite.svg├── index.html 1. index.html역할 : 이 파일은 웹 페이지의 기본 구조를 정의합니다. 브라우저가 처음 로드할 HTML임주요 내용: : React 애플리케이션이 이곳에 렌더링됨 : main.tsx 파일을 로드하여 React.. 2025. 2. 18. [vue] Vue에서 Slick 슬라이드가 새로고침 후만 적용되고, 페이지 이동 후에는 적용되지 않는 문제 해결하기 Vue에서 Slick 슬라이드가 새로고침 후만 적용되고, 페이지 이동 후에는 적용되지 않는 문제 해결하기 🔍 문제 상황Vue는 **SPA(Single Page Application, 단일 페이지 애플리케이션)**라서 페이지를 이동해도 전체 HTML이 새로고침되지 않고 필요한 부분만 변경됨.이 때문에 slick.js가 메인 페이지에서 최초 한 번만 실행되고, 다른 페이지로 이동 후 다시 돌아오면 슬라이드가 깨지는 문제가 발생했음. 💡 문제 원인slick.js는 페이지가 처음 로딩될 때 한 번만 실행되도록 되어 있음.Vue에서 다른 페이지로 이동 후 돌아오면 mounted()가 다시 실행되지 않음 → slick이 다시 초기화되지 않음.이로 인해 슬라이드가 풀려서 모든 배너가 펼쳐진 상태로 보이는 문제 발.. 2025. 2. 10. [vue] 특정 페이지에서만 특정 클래스 추가하기 vue 프로제트를 작업하다보니 content 영역에 대해서 메인 Home 페이지에서만 main 클래스를 추가해야 하는 상황이 발생했다. 방법) [ :class ] 속성을 활용하여 특정 페이지에서 특정 클래스 추가 .// src/router/index.jsimport { createRouter, createWebHistory } from 'vue-router'; // Vue 3에 맞게 변경import Home from '../views/MainHome'; // 변경된 Home 컴포넌트import newlyProduct from '../views/newlyProduct';const routes = [ { path: '/', name: 'MainHome', compone.. 2025. 2. 10. [vue] Vue 3 프로젝트에서 public/assets와 src/assets 폴더의 차이점 (chatGPT를 통한 정리내용)Vue 3 프로젝트에서 public/assets와 src/assets 폴더의 차이점1. public/assets 폴더public 폴더는 Vue 프로젝트에서 빌드 시 변환되지 않고 그대로 배포되는 정적 파일을 보관하는 곳입니다. 이 폴더에 있는 파일들은 브라우저에서 직접 접근할 수 있는 경로로 제공되며, 빌드 후에도 그대로 복사됩니다.예시 1: public/assets 폴더 사용하기public/assets 폴더에 logo.png라는 이미지 파일이 있다고 가정해 봅시다. 이 이미지를 Vue 컴포넌트에서 사용하려면 절대 경로로 접근해야 합니다. 이때 src="/assets/logo.png"와 같이 절대 경로를 사용해야 합니다.public 폴더 내의 파일들은 빌드 후에도 경로.. 2025. 2. 10. 이전 1 2 3 다음
