Frontend146 React-router-dom : loader 함수를 통한 URL 가져오기 loader 함수는 페이지가 렌더링되기 전에 데이터를 미리 로드하는 함수로, params와 request를 통해서 URL 파라미터 및 쿼리 문자열을 사용할 수 있다. loader 함수의 params의 경우에 리액트 라우터의 useParams과 같은 정보를 제공하지만, 웹 페이지가 렌더링이 되기 전에 데이터를 가지고 있다는 차이점이 있다. URL 가져오기 예시1. 다중 가변 인자 URL 경로 사용 예시 예시 : /category1/item1(1) App.jsx 에서 라우트 정의 및 load 함수 정의import { createBrowserRouter, RouterProvider } from "react-router-dom"import Root from "./pages/Root"import Home fro.. 2024. 10. 18. Vue: 템플릿 문법에 대해서 (2) 디렉티브Vue에서 사용되는 HTML 요소에 특별한 동작이나 기능을 부여하는데 사용되는 특수 속성이다.디렉티브설명v-text엘리먼트의 textContent를 업데이트 한다.v-html엘리먼트의 innerHTML을 업데이트 한다.v-show참-거짓을 기반으로 CSS 속성 중 display 를 전환한다. 초기 조건과 관계없이 항상 렌더링된다.v-if참-거짓에 따라 엘리먼트를 조건부로 렌더링한다.v-elsev-if 또는 v-else-if의 'else block'을 나타낸다. v-for엘리먼트 또는 템플릿 블록을 여러번 렌더링한다. v-on이벤트 리스너를 추가한다. ( 단축문법 : @ )v-bindHTML 요소의 속성을 Vue인스턴스의 데이터와 동적으로 바인딩한다. (단축문법 : : 혹은 . ) v-model양.. 2024. 10. 17. Vue: 템플릿 문법에 대해서 (1) Vue의 템플릿 문법은 HTML을 기반으로 하여, 데이터와 상호작용하며 동적으로 콘텐츠를 렌더링하는 역할을 한다. Vue 기본 문법createApp : Vue 애플리케이션을 시작하는 함수로, Vue 인스턴스를 생성한다. component data : 컴포넌트의 데이터를 반환하는 함수다. methods : 컴포넌트 인스턴스에 메서드를 추가한다. template : Vue 애플리케이션의 구조와 레이아웃을 정의한다. props : 부모 컴포넌트로부터 데이터를 전달받는다. mount : Vue 애플리케이션 인스턴스를 특정 DOM 요소에 연결하는 함수이다. 템플릿 문법데이터 바인딩이중 중괄호를 사용하여 데이터를 바인딩 할 수 있다. 이중 중괄호 안의 데이터는 해당 컴포넌트 인스턴스의 속성 값으로 대체된다. .. 2024. 10. 8. Vue : 시작하기 Vue.js - The Progressive JavaScript Framework | Vue.js Vue.jsVue.js - The Progressive JavaScript Frameworkvuejs.org Vue는 프론트앤드 프레임워크로 HTML, CSS, JavaScript를 기반으로 한 템플릿을 제공한다. Vue를 사용하는 방법은 크게 두 가지로 나눌 수 있다. CDN (Content Delivery Network) 스크립트 태그를 통해서 직접 Vue를 사용할 수 있다. Vue CLIVue.js기반의 프로젝트를 생성하고 관리하는데 사용되는 도구로, 복잡한 설정 없이도 기본적인 구조와 파일을 자동으로 생성해준다. 컴퓨터 환경 전역에 Vue CLI를 설치하여, 이후 Vue 프로젝트 생성 시에 간편한 .. 2024. 10. 8. Framer motion : useTime & useAnimate에 대해서 useTime렌더링 이후의 시간을 밀리초 단위로 업데이트하여 시간 기반의 애니메이션을 구현하는 데 유용하게 사용된다. 이를 통해 애니메이션의 속도나 변화를 시간에 따라 동적으로 조정할 수 있다.const time = useTime();import { motion, useTime, useTransform } from "framer-motion";export default function Comp07() { const time = useTime(); const rotate = useTransform( time, // 0초에서 2초는 0도에서 90도로 회전, 2초에서 4초는 90도에서 360도 회전 [0, 2000, 4000], [0, 90, 360.. 2024. 10. 6. Framer motion : Motion Value에 대해서 Motion value는 애니메이션과 UI 변화를 효율적으로 처리하는 것을 도와준다. Motion value는 애니메이션의 현재 상태를 추적하고 업데이트하는데 사용된다. Motion value의 경우 React 렌더 사이클 외부에서 동작하기 때문에 컴포넌트가 다시 렌더링 되지 않아도 애니메이션을 시작하고 중지할 수 있다. useMotionValue메서드설명get()motion value의 현재 상태를 반환set()motion value를 새로운 값으로 설정getVelocity()motion value의 현재 속도를 반환on(이벤트, 콜백함수)motion value에 이벤트 리스너를 추가stop()현재 활성화된 애니메이션 중지destroy()motion value의 값이 변경될 때 호출되는 콜백 함수 등.. 2024. 10. 6. 이전 1 2 3 4 5 ··· 25 다음