내손으로는 css들이 뚝딱거리기에 라이브러리를 찾다가 Framer-motion 이 직관적이고 예제도 많아서 찍먹이라도 해보자 생각하고 글을 정리 보려고한다ㅎㅎ 설치하기 npm i framer-motion HTML 태그 앞에 motion 키워드를 붙여사용하며 motion키워드가 붙은 요소를 motion component라고 한다 import { motion } from "framer-motion" 자주쓰는 속성들 initial:애니메이션의 초기 상태를 정의, 컴포넌트가 처음 렌더링 될 때 적용되는 상태 animate:애니메이션을 시작하고 중간에 변화하는 상태를 정의 exit:애니메이션의 종료 상태를 정의, 요소가 화면에 사라질 때 적용되는 상태 transition:애니메이션 지속 시간 및 이징 함수등의 정..

전에는 너무 얕게만 라우터를 본거같아서 이번에는 좀더 세세하게 다루어 보고자한다 createBrowserRouter loaders, actions, fetchers등을 사용할 수 있다 동적 체이지에 적합 검색엔진 최적화 github-pages 배포가 까다로움 RouterProveder 어떤 Router 객체이든 Router 객체 RouterProvider에 등록되야한다 const router = createBrowserRouter([ { path: "/", element: , loader: rootLoader, children: [ { path: "team", element: , loader: teamLoader, }, ], }, ]); ReactDOM.createRoot(document.getEleme..

React 애플리케이션에서 전역적으로 알림 창을 띄우는 기능을 구현하기 위해 useContext 훅과 Material-UI(MUI) 라이브러리를 활용하는 방법을 사용하였다 여기서 Context 란? context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있게 해준다 createContext : context 객체를 생성한다. Provider : 생성한 context를 하위 컴포넌트에게 전달하는 역할을 한다. Consumer : context의 변화를 감시하는 컴포넌트이다. // 필요한 모듈 import import React, { createContext, useState, useContext } from "react"; import Snackbar..

input을 통해 이미지 업로드시, 이미지 선택 후 취소 버튼을 누르면 나는 오류였다 input에 걸려있는 함수는 그대로 작동을 하지만, 실제로 파일이 없기에 에러가 뜨는 실수였다 오류가나는 코드 const onChangeImage = (e) => { const reader = new FileReader(); const file = imgRef.current.files[0]; reader.readAsDataURL(file); reader.onloadend = () => { setImage(reader.result); }; if (e.target.files[0]) { //서버에 보내는 코드 const userImage = new FormData(); //백엔드에서 이미지를 어떻게 받고있는지 확인후 이름수정..