Next.js8 [Next, vitest] Next.js에 vitest 적용해보기(기록용) 목차 개요next.js를 통해 개발을 하던 중 vitest를 사용해 테스팅을 해보고싶었다 그래서 처음부터 설정까지를 다시 복기하려고한다. 사용 버전nextjs : 15.0.3react : "^18" 설치https://nextjs.org/docs/app/building-your-application/testing/vitest Testing: Vitest | Next.jsLearn how to set up Vitest with Next.js for Unit Testing.nextjs.orgnext.js 15버전을 통해 개발할거기때문에 버전에맞는 공식문서에서 vitest를 어떻게 사용하라하는지 문서를 확인하였다. vitest.config.mts 파일 제작공식문서에선 해당 파일을 root에 만들라고한다.. 2024. 12. 4. [Next.js, socket.io] Next.js에서 socket.io 공식 사용하기 목차 Next.js에서 socket.io를 어떻게 활용할까?Next.js를 개발하던 도중 소켓 통신을 어떻게 할 수 있을까에 대한 생각을 했었다. 역시 웹개발이기 때문에 socket.io에서 공식으로 Next.js와 연결하는방법이 적혀있었다.https://socket.io/how-to/use-with-nextjs How to use with Next.js | Socket.IOThis guide shows how to use Socket.IO within a Next.js application.socket.io그래서 해당 링크를 기반으로 socket.io통신을 하려고한다. 세팅방법 Server.js파일 생성공식문서에 따르면 그냥 프로젝트 루트에 server.js파일을 만들어주면 된다고 한다.그래서 프.. 2024. 6. 7. [Next.js, styled-components] Next.js에 styled-components 설정하기 목차 Next.js에 styled-components를 적용해보자https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components Styling: CSS-in-JS | Next.jsUse CSS-in-JS libraries with Next.jsnextjs.orgNext.js 공식문서에 Styled Components를 적용하는 방법이 다루어져있다 세팅방법next.config.js 변경module.exports = { compiler: { styledComponents: true, },}next.config.js를 위처럼 compiler의 styledcomponents를 추가해준다. registry... 2024. 6. 7. [Next.js, TS,Zustand] 페이지 이동전 로딩효과 추가하기 목차 Next.js 14이상 app라우터에서 페이지 로딩효과 추가하기Next.js 에서 app라우터로 개발을 하는 도중 라우터 이동전 로딩효과를 주는게 필요하였습니다. 사용 버전react : ^18zustand : ^4.5.2next : 14.1.0 진행과정 loadingStore.ts 추가/src/store/loadingStore.ts파일을 만들어줍니다.import { create } from 'zustand';interface LoadingState { isLoading: boolean;}interface LoadingActions { setLoading: (loading: boolean) => void;}const useLoadingStore = create((set) => ({ isLoadi.. 2024. 5. 30. [Next.js,TS] 특정폴더에만 Eslint 적용하기 목차 왜 특정 폴더에만 Eslint를 적용하나요?기존 만들어진 프로젝트에서 airbnb세팅 이랑 여러 커스텀 eslintrc를 넣었을때 바꿔야 할 부분이 너무 많아서 도중 build가 안되는 현상이 일어났다.그당시 .eslintrc.json전체 규칙을 적용한 모습{ "extends": [ "next/core-web-vitals", "airbnb", "airbnb/hooks", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended" ], "plugins": ["@typescript-eslint", "prettier"], "parser": "@typescript-eslint/parser", "parse.. 2024. 5. 30. [Next.js, TypeScript] airbnb 및 커스텀 TS 세팅 목차 Next.js + TS 환경에서 airbnb형식 적용하기 설치방법npm install --save-dev eslint prettier eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-prettier eslint-config-prettier eslint-import-resolver-typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-airbnb-typescript --legacy-peer-deps .eslintrc.js.. 2024. 5. 29. [Next.js]웹 페이지 전환 효과를 주는 방법들 목차 웹 페이지 전환 효과를 주는 것들은 무엇이 있을까?Next.js에서 페이지 전환 효과를 구현하는 방법에는 여러 가지가 있다. 아래는 몇가지 대표적인 방법이다. Framer MotionFramer Motion은 React 애니메이션 라이브러리로, Next.js에서 페이지 전환 효과를 쉽게 구현할 수 있다.`AnimatePresence`와 `motion.div`를 사용하여 페이지 전환 애니메이션을 적용할 수 있다.// components/PageTransition.tsx'use client';import { usePathname } from 'next/navigation';import { AnimatePresence, motion } from 'framer-motion';import React from.. 2024. 5. 24. [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. 이전 1 다음
