Next.js15 [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,React] PropsWithChildren, PropWithoutRef 목차 PropWithoutRef주요 개념 및 사용 예시 1. 기본 개념'PropsWithoutRef'는 제네릭 타입으로, 주어진 'props' 타입에서 'ref'속성을 제거한다. 이는 주로 고차 컴포넌트(HOC) 또는 전달 컴포넌트 (forwarding components)에서 사용된다. 2. 사용 예시a. 기본 사용 예시import React, { PropsWithoutRef, forwardRef, Ref } from 'react';interface MyComponentProps { name: string; age: number;}const MyComponent = forwardRef>( (props, ref) => { return ( Name: {props.n.. 2024. 6. 11. [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, React] TodoList 만들어보기 목차 폴더구조 Next.js를 사용하였으며 /todolist 경로 이동시 사용할 page.tsx와 containers/TodoList를 사용하였다. 파일 내용 /src/app/todolist/page.tsximport TodoList from '@/containers/TodoList/TodoList';export default function Page() { return ;} /todolist 경로에서 보여줄 컨테이너 /src/containers/TodoList/TodoList.styles.tsimport styled from 'styled-components';const StyledTodoList = styled.div` display: flex; flex-direction: column.. 2024. 6. 4. [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,TS,Three] 나의 3D캐릭터Three.js에 표출하기 - 개인기록 목차 사전 작업https://www.youtube.com/watch?v=1ZDjzJm3vPY&t=182s프로필용 캐릭터를만드는 방법은 위 유튜브에 적혀있다.언급된건 4개지만 사용하는건 PPM을제외한 아래 3개 사이트이다.Profile Pic Maker ⇢ https://pfpmaker.com/Ready Player Me ⇢ https://readyplayer.me/Blender ⇢ https://www.blender.org/download/Mixamo ⇢ https://www.mixamo.com/#/아바타 만들기위 유튜브를 참고해서 위 링크중 Ready Player Me 에서 아바타를 만들어서 .glb 형식으로 다운로드 해준다. Blender 다루기당시 blender 최신버전인 4.1버전을 다운로드하.. 2024. 5. 28. [React,Next] forwardRef사용하기 ( 개인기록 ) 목차 forwardRef는 무엇인가?'forwardRef'는 React에서 부모 컴포넌트가 자식 컴포넌트의 DOM 요소 또는 클래스 인스턴스에 'ref'를 전달할 수 있도록 해주는 고차 함수이다. 기본적으로 'ref'는 부모 컴포넌트가 자식 컴포넌트의 특정 DOM 요소에 접근할 수 있게 한다.하지만 일반적인 컴포넌트에서는 'ref'를 직접 전달할 수 없기 때문에 'forwardRef'를 사용하여 문제를 해결해야한다. 왜 'forwardRef'를 사용해야 하는가?React컴포넌트는 기본적으로 'ref'를 직접 전달받을 수 없다. 하지만 'forwaredRef'를 사용하면 부모 컴포넌트가 자식 컴포넌트의 특정 DOM 요소에 접근할 수 있게 된다. 이는 다음과 같은 경우에 유용하다.DOM 조작 : 특정 D.. 2024. 5. 27. [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. 이전 1 2 다음
