SBDB_뉴유 SBDB_뉴유

React 설정하기 React를 사용하는 데에는 많은 방법이 있지만, 여기서는 커맨드-라인 인터페이스(command-line interface; CLI) 툴인 create-react-app을 사용할 겁니다. 이 툴은 패키지를 설치하고 파일들을 생성하여 앞서 설명한 툴링들로 React 애플리케이션을 개발하는 과정을 신속히 처리합니다. 요구되는 것들 create-react-app을 사용하기 위해선 Node.js를 설치해야 합니다. LTS(오랜 기간 지원된; long-term support) 버전을 사용하는 것을 추천합니다. Node는 npm (the node package manager)와 npx (the node package runner)를 포함합니다. Node 대신에 Yarn package manage..

React React는 JSX(JavaScript와 XML)라는 HTML-in-JavaScript 문법을 사용합니다. HTML와 JavaScript에 익숙하다면 JSX를 배우는 것에 도움이 됩니다. 또한 애플리케이션에서 발생하는 버그가 JavaScript와 관련이 있는지 아니면 React의 구체적인 도메인과 관련이 있는지 수월하게 식별하는 것에 도움이 됩니다. React 알아보기 공식적인 태그라인에 따르면, React는 사용자 인터페이스를 만들기 위한 라이브러리입니다. React는 프레임워크가 아니고, 심지어 웹에만 사용할 수 있는 것도 아닙니다. React는 다른 라이브러리들과 함께 특정한 환경을 렌더링하는 데 사용됩니다. 가령, React Native는 모바일 애플리케이션을 만드는 데 사용될 수 있고..

날짜 메서드 getSeconds() 정의 및 사용법 getMonth() 날짜의 초(0~59)를 반환합니다. 구문 Date.getSeconds() 반환 값 숫자(날짜의 초(0 ~ 59)) 예시 const d = new Date("July 21, 1983 01:15:00"); let seconds = d.getSeconds(); //0

날짜 메서드 getMonth() 정의 및 사용법 getMonth() 날짜의 월(0~11)을 반환합니다. 1월 = 0, 2월 = 1, ... 구문 Date.getMonth() 반환 값 숫자(날짜의 월입니다(0 ~ 11)) 예시 const d = new Date("July 21, 1983 01:15:00"); let month = d.getMonth(); //8

날짜 메서드 getMinutes() 정의 및 사용법 getMinutes()날짜의 분(0~59)을 반환합니다. 구문 Date.getMinutes() 반환 값 숫자(날짜의 분(0 ~ 59) 예시 const d = new Date("July 21, 1983 01:15:00"); let minutes = d.getMinutes(); //15

날짜 메서드 getMilliseconds() 정의 및 사용법 getMilliseconds() 날짜의 밀리초(0~999)를 반환합니다. 구문 Date.getMilliseconds() 반환 값 숫자(날짜의 밀리초(0~999)입니다) 예시 const d = new Date("July 21, 1983 01:15:00"); let milliseconds = d.getMilliseconds(); //526

날짜 메서드 getHours() 정의 및 사용법 getHours() 날짜의 시간(0~23)을 반환합니다. 구문 Date.getHours() 반환 값 숫자(시간(0 ~ 23)) 예시 const d = new Date("July 21, 1983 01:15:00"); let hours = d.getHours(); //1

날짜 메서드 getFullYear() 정의 및 사용법 getFullYear() 날짜의 전체 연도(4자리)를 반환합니다. 구문 Date.getFullYear() 반환 값 숫자(날짜의 연도입니다.) 예시 const d = new Date("July 21, 1983 01:15:00"); let year = d.getFullYear(); //1983

날짜 메서드 getDay() 정의 및 사용법 getDay() 메서드는 날짜의 요일(0~6)을 반환합니다. 일요일 = 0, 월요일 = 1, ... 구문 Date.getDay() 반환 값 숫자(요일(0 ~ 6)) 예시 const d = new Date("July 21, 1983 01:15:00"); let day = d.getDay(); //4

날짜 메서드 getDate() 정의 및 사용법 getDate() 메서드는 날짜(1 ~ 31)를 반환합니다. 구문 Date.getDate() 반환 값 숫자(해당 월의 일(1 ~ 31)) 예시 const d = new Date("July 21, 1983 01:15:00"); let date = d.getDate(); //21

const mouseImg = document.querySelectorAll(".mouse__img") mouseImg.forEach((item) => { const imageWrap = item.querySelector(".img"); const imageWrapBounds = imageWrap.getBoundingClientRect(); let itemBounds = item.getBoundingClientRect(); const onMouseEnter = () => { gsap.set(imageWrap, {xPercent: -50, yPercent: 50, rotation: -15, scale: 0.3, opacity: 0}) gsap.to(imageWrap, {xPercent: -50, yPerc..

function mousemove(e){ let positionSlow = (e.pageX - (window.innerWidth/2)) * 0.1; let positionFast = (e.pageX - (window.innerWidth/2)) * 0.2; gsap.to(".spanSlow", {duration: 0.4, x: positionSlow}) gsap.to(".spanFast", {duration: 0.4, x: -positionFast}) gsap.to(".cursor", {duration: 0.3, left: e.pageX, top: e.pageY}) } document.addEventListener("mousemove", mousemove)