탐구하는 취르미

Vite에서 모듈들 간단하게 설치해서 사용하기, gsap 편입니다. https://greensock.com/gsap/ GSAP Timeline Tip: Understanding the Position Parameter The secret to building gorgeous sequences with precise timing is understanding the super-flexible "position" parameter which controls the placement of your tweens, labels, callbacks, pauses, and even neste greensock.com GSAP는 화려한 애니메이션을 옵션만 숙지한다면, 보다 쉽게 애니메이션을 구현할 수 있는 좋은 모듈입..

프로젝트 생성 초기 폴더 구조 Vite로 프로젝트 생성 시, 초기 폴더 구조입니다 1. SASS를 설치하기 npm i sass -D package.json 파일에 sass가 설치되어 있는 것을 확인할 수 있다 SCSS로 스타일을 작성할 것이므로, 필요 없는 css파일 삭제하고 scss 파일 추가하기 style.css style.scss touch style.scss 3. 필요 없는 파일들 삭제하고 main.js에 추가한 style.scss를 가져오기(import) javascript.svg counter.js public/vite.svg 4. 스타일 초기화를 위해 reset.scss를 추가하면서, 일부 폴더 구조를 변경했다 스타일 파일은 한 곳에 묶어두는 것이 좋다 main.js에 style.scss 경..

간단하게 Vite로 프로젝트 생성하는 방법에 대해서 알아보겠습니다. https://vitejs-kr.github.io/guide/ Vite Vite, 차세대 프런트엔드 개발 툴 vitejs-kr.github.io 선행 작업으로 node.js가 설치되어 있어야 합니다. 터미널을 오픈하세요. 1. npm으로 Vite 설치하기 npm create vite@latest Project name: 진행하고자 하는 프로젝트 폴더명 입력하기 ✔️ 각각의 옵션은 프로젝트 성향에 맞게 선택하기 Select a framework: Vanilla Select a variant: JavaScript cd 생성한_프로젝트_폴더명 npm install npm run dev #서버 띄우기 잠시 서버 종료 ctrl + c #서버 종료..

객체 안의 키(key)를 상수로 사용하고 싶을 때, 구조 분해 할당을 활용해 보자! const students = { apple: "애플", banana: "바나나", orange: "오렌지" } const { apple, banana, orange } = students; //키(key)값 만으로 호출할 수 있게 됨! console.log(apple); //애플 console.log(banana); //바나나 console.log(orange); //오렌지 배열은 인덱스(index)를 기준으로 구조 분해할 수 있다 const user = ["1", "2", "3"] const [ one, two, three ] = user; //즉 배열은 인덱스 기준으로 구조분해 할 수 있다 console.log(on..

구조 분해 할당 배열이나 객체의 속성을 해체하여 그 인덱스 혹은 키 값을 개별 변수(상수)에 담을 수 있도록 사용하는 Javascript 표현식 //const { 객체 내 key값 } = 객체명 //정해진 key값이 있기 때문에, { 객체 내 key값 }은 바꿀수 없다 const person = { age: 30, height: 175, hobby: "coding" } //⭐️ 구조 분해 할당, 객체 안의 key값이 각각 하나의 상수가 되는 것! const { age, height, hobby } = person console.log(age); //30 //import { key값 } from "경로/라이브러리명"과 연관지어 생각해 볼 수 있음! ⭐️ 중요 import { key값 } from "경로/라..

Math의 메소드 Math.ceil(x) : x보다 크거나 같은(이상) 수 중에서 가장 작은 정수를 반환 console.log(Math.ceil(1.5)); //2, 소숫점 이하를 올림 console.log(Math.ceil(1.9)); //2 Math.floor(x) : x보다 작거나 같은(이하) 수 중에서 가장 큰 정수를 반환 console.log(Math.floor(1.5)); //1, 소숫점 이하를 내림 console.log(Math.floor(1.9)); //1 Math.round(x) : x에서 가장 가까운 정수를 반환 console.log(Math.round(1.831)); //2 console.log(Math.round(1.15)); //1 console.log(Math.round(-10...