Next.js15 [Next.js]Next.js에서 framer-motion을 이용한 페이지 전환효과 추가하기 목차 framer-motion이란?https://github.com/framer/motion GitHub - framer/motion: Open source, production-ready animation and gesture library for ReactOpen source, production-ready animation and gesture library for React - framer/motiongithub.comFramer Motion은 React 애니메이션 라이브러리로, Next.js에서 페이지 전환 효과를 쉽게 구현할 수 있다.AnimatePresence와 motion.div를 사용하여 페이지 전환 애니메이션을 적용할 수 있다. 설치방법npm install framer-motion.. 2024. 5. 24. [Next.js, React] useState, useEffect 코드 컨벤션 목차 useState 상태 변수와 설정 함수의 명명상태 변수와 설정 함수는 의미 있는 이름을 사용한다.상태 변수는 단수형 명사, 설정 함수는 `set` 접두사를 사용한다.예 `const [count, setCount] = useState(0);`초기 값 설정상태 변수의 초기 값은 올바른 타입을 사용하여 명확하게 설정한다.예: `const [name, setName] = useState('');`상태 초기화 함수초기 상태를 계산하는 데 복잡한 로직이 필요하면 상태 초기화 함수를 사용한다.예: `const [value, setValue] = useState(() => computeInitialValue());`상태 그룹화관련된 상태 값은 객체로 그룹화하여 관리한다.const [formState, setFor.. 2024. 5. 23. Next.js + TypeScript + @reduxjs/toolkit 사용하기 < 2 / 2 > 개인기록 reduxToolKit 사용해보기아래 사진은 src/libs폴더입니다. 이중 예제에 사용하기좋은 counter를 이용해서 redux 를 사용해보려고합니다.counter.actions.ts// baseimport { createAction } from "@reduxjs/toolkit";// defaultexport const COUNTER = "counter";export const COUNTER_SLICE_NAME = `${COUNTER}Slice`;// actionconst INCREMENT = `${COUNTER}/increment`;const DECREMENT = `${COUNTER}/decrement`;const INCREMENT_BY_AMOUNT = `${COUNTER}/incrementByAm.. 2024. 5. 22. Next.js + TypeScript + @reduxjs/toolkit 사용하기 < 1 / 2 > 개인기록 목차 상태라이브러리인 redux를 Next.js + TypeScript에서 써보자 진행과정store.ts 생성 src/libs 위치에 store.ts파일을 생성해준다. 그리고 아래 코드처럼 작성을해준다.import { Action, configureStore, ThunkAction } from "@reduxjs/toolkit";import { counterReducer } from "./features/counter";import { authReducer } from "./features/auth/slices/auth.slice";export const makeStore = () => { return configureStore({ reducer: { counter.. 2024. 5. 22. Next.js 프로젝트를 bat파일로 실행하기(개인기록) 목차 왜 bat파일로 Next.js를 실행하려고 하나요?사용자는 웹이라는 형태에 익숙합니다. 하지만 웹에선 행동할수 있는 것에 제약이있습니다 어떠한 폴더에 내용을 저장하거나 자동화 브라우저를 열거나 등등 웹으로는 해당 행동들을 제어할 수가 없습니다. bat파일 구성@echo off:: 스크립트 위치를 기반으로 Node.js와 npm 경로 설정set NODE_PATH=%~dp0node\node.exeset NPM_PATH=%~dp0node\node_modules\npm\bin\npm-cli.js:: Next.js 애플리케이션 디렉토리로 이동 (현재 위치)cd %~dp0:: 필요한 패키지 설치echo Installing dependencies...%NODE_PATH% %NPM_PATH% install::.. 2024. 5. 15. 이전 1 2 다음
