Frontend

📌useRef? const ref = useRef(value) useRef는 저장공간 또는 DOM요소에 접근하기 위해 사용되는 React Hook이다. 여기서 Ref는 reference, 즉 참조를 뜻한다. 우리가 자바스크립트를 사용 할 때에는, 특정 DOM 을 선택하기 위해서 querySelector 등의 함수를 사용한다. React를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 필요하다. 그럴때 우리는 useRef라는 React Hook을 사용한다. 함수형 컴포넌트에서 useRef를 부르면 ref 오브젝트를 반환한다. ※ref오브젝트 { current : value } ref 오브젝트는 언제든 수정할 수 있다. 반환된 ref는 컴포넌트의 전 생애주기를 통해 유지가 된다. 컴포넌..

📌모달창 만들기 nextjs는 특별한 조치를 취하지 않으면 server component로 간주한다. 그래서 useState를 사용하려면 맨 위쪽에 "use client"; 코드를 추가해 client component로 만들어야 한다. "use client"; import { useState, useEffect, useRef } from "react"; import gsap from "gsap"; import Link from "next/link"; import "./modal.modul.css"; export default function Modal() { const [burgerClass, setBurgerClass] = useState("burger-bar unclicked"); const [isM..

css의 꽃!! animation을 정리해보쟈!!! 📌animation animation은 transition과 비슷하게 다수의 스타일을 전환하는 애니메이션을 적용한다. animation: doyi_bg 4.5s cubic-bezier(0.645, 0.045, 0.355, 1) 4s 1; 단축형식 : name | duration | timing-function | delay | iteration-count | direction name 은 필수 값이다. 순서들은 크게 상관 없으나, duration 과 delay 순서는 맞춰야 한다. @keyframes doyi_bg { 0% { opacity: 0; } 60% { opacity: 0; } 70% { opacity: 1; } } transition과 다른점..

이번에 새로 만들어진 animation효과이다! scoll내리면 나오는 효과 주고 싶어서 gsap랑 이것 저것 찾아보던 중 animation-timeline을 발견했다! 너무너무 간편하게 사용할 수 있다! 📌animation-timeline : scroll() animation-timeline:scroll(root block); () 안에는 기준이 되는 스크롤바를 적어주면 된다. 오른쪽 nearest -> 가장 가까운 부모 self -> 나 자신 root -> viewpoint 왼쪽 block - 세로 inline - 가로 📌animation-timeline : view() animation-timeline:view(root block); view()는 브라우저 전체 기준이 아닌 현재 보여지는 화면이 기..

GSAP는 무엇일까?! 내가 원하는 animation을 너무 자연스럽게 사용하고 있어서 정확히 알고 싶었다. 일단 ChatGPT에 검색해보았다!! GSAP(GreenSock Animation Platform) GSAP(GreenSock Animation Platform)은 강력하고 유연한 웹 애니메이션 라이브러리로, HTML, CSS, JavaScript를 사용하여 웹 페이지 및 앱에 동적인 애니메이션을 추가하는 데 사용됩니다. GSAP은 웹 개발자가 쉽게 사용하고 통제할 수 있는 다양한 애니메이션 기능을 제공합니다. 1. **크로스 브라우징:** - GSAP은 다양한 브라우저에서 일관된 애니메이션을 지원하며 크로스 브라우징 문제를 처리하는 데 용이합니다. 2. **간편한 사용법:** - GSAP은 직관..

background-image: linear-gradient() 이용하기 배경색 똑같이 2개로 나누어 지정하기 (그라데이션 효과) background-image: linear-gradient(to right, red, yellow); 요런 효과가 있었다니!! 이쁘다. 배경색 똑같이 2개로 나누어 지정하기 (그라데이션 효과x) background-image: linear-gradient(to right, red 50%, yellow 50%); 방향은 left, right, top, bottom 다 사용가능하다. % 또한 다양하게 적용이 가능하다 !

배열에 값을 추가하는 함수배열.push(변수) : 배열의 맨 끝에 값을 추가한다.배열.unshift(변수) : 배열의 맨 앞에 값을 추가한다.  배열에 값을 제거하는 함수배열.pop(변수) : 배열의 맨 끝에 값을 제거한다.배열.shift(변수) : 배열의 맨 앞에 값을 제거한다. 문자열.substring() : 특정 문자열을 잘라내여 반환string.substring(start, end) substr() 함수와 다른 점은 매개변수로 잘라내고 싶은 문자열의 start index와 last index를 전달한다는 것let str = "안녕하세요?"let first_char = str.substring(0, 1); //안let second_char = str.substring(1, 2); //녕let las..

✅Sort()함수란? sort 메서드는 배열의 요소를 정렬하는데 사용하는 함수이다. sort() 함수를 활용해서 문자와 숫자 모두 잘 정렬되는 것을 볼 수 있다. 하지만, Sort()는 기본적으로 유니코드값으로 정렬하기 때문에 예상과 다르게 출력될 수 있다. 그러므로 숫자를 정렬하려면 compareFunction 필요하다 ✅compareFunction compareFuction은 정렬 순서를 정의하는 함수로, 반환 값은 복사본이 만들어지지 않고 원 배열이 정렬됩니다. sort를 빼고 쓰면 다시 정렬되지 않은 상태로 돌아간다. Digit.sort((a, b) => a-b); //오름차순 Digit.sort((a, b) => b-a); //내림차순 위의 숫자를 정렬하기 위해 사용한 것이 compareFunc..