IT개발/JS 관련12 [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 프로젝트에 prettier & eslint 설치하기 PrettierPrettier란?Prettier는 코드 포매터로, 소스 코드를 일관되게 포맷팅해주는 도구임. 여러 개발자들이 협업할 때 코드 스타일이 통일되지 않으면 가독성 이 떨어지고, 코드 리뷰가 복잡해질 수 있음. Prettier를 사용하면 다음과 같은 장점이 있음:일관성: 팀 내 모든 코드가 동일한 스타일로 포맷됨.생산성 향상: 코드 스타일에 대한 논의나 고민을 줄여줌.자동 포맷팅: 파일을 저장할 때 자동으로 포맷팅할 수 있어 편리함.https://prettier.io/docs/ What is Prettier? · PrettierPrettier is an opinionated code formatter with support for:prettier.io 설치 명령어Prettier를 설치하는 방법은.. 2025. 2. 18. [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 프로제트를 작업하다보니 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 다음
