가수면

https://tanstack.com/query/latest/docs/react/guides/migrating-to-v5#callbacks-on-usequery-and-queryobserver-have-been-removed Migrating to TanStack Query v5 | TanStack Query Docs useQuery and friends used to have many overloads in TypeScript - different ways how the function can be invoked. Not only this was tough to maintain, type wise, it also required a runtime check to see which type the fir..

클라이언트 파트만 다룸 패키지 설치 npm install socket.io-client 1. 소켓 인스턴스를 참조할 ref를 생성한다. const socketRef = useRef(null); 2. 소켓 인스턴스 생성 / 연결 종료 인스턴스 생성 후 useEffect 클린업을 사용해 컴포넌트가 언마운트되면 연결 종료되도록 설정한다. useEffect(() => { socketRef.current = io("서버 주소"); return () => { if (socketRef.current) { socketRef.current.disconnect(); } }; }, []); 3. 이벤트 리스너 등록 서버에서 "서버와 맞춘 이벤트 이름" 이벤트를 받았을 때 호출될 콜백 함수를 등록한다. 아래 예시 코드는 채팅..

npm install zustand 사용법 저장소 만들기 import { create } from "zustand"; interface CookieState { cookie: number; increase: (by: number) => void; } const useCookieStore = create()((set) => ({ cookie: 0, increase: (by) => set((state) => ({ cookie: state.cookie + by })), }));

Classic, Inline, Balloon 등 공식 문서에서 제공하는 기본 빌더들이 있다. 해당 패키지를 설치한다. 예) npm install --save @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic 필요하다면 import를 이용해 에디터에 한국어 설정을 적용한다. 이후 간단하게 입력한 값을 확인해보는 로직 import React from "react"; import { CKEditor } from "@ckeditor/ckeditor5-react"; import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; import "@ckeditor/ckeditor5-build-classic/bui..

프로젝트에 적용할 에디터를 선별하는 과정에서 네이버 스마트 에디터를 구현한 것을 정리한다. 초기 로딩이 더 길어지는 것을 방지하기 위해 index.html에 스크립트를 추가해 구현하는 방법 대신 useEffect를 통해 특정 컴포넌트가 마운트될 때만 스크립트를 추가하고 언마운트 시 스크립트를 다시 제거하는 방법으로 구현하였다. import React, { useEffect, useRef } from "react";declare global { interface Window { nhn: any; }}const NaverEditor = () => { const TextRef = useRef(null); const oEditors = useRef({}); useEffect(() => { /..

https://www.sanity.io/docs/connect-your-content-to-next-js https://www.sanity.io/docs/js-client#multiple-mutations-in-a-transaction JavaScript Our JavaScript API client library www.sanity.io 그냥 진행하는 방식과 라이브러리 설치해 사용하는 방법이 있는데, 이번 글에선 라이브러리를 이용한 방법을 적는다. npm install @sanity/client 기본 설정 각 키는 아래에서 확인 가능함 (토큰은 생성할 때 확인 가능함) https://www.sanity.io/manage https://www.sanity.io/manage www.sanity.io exp..

npm i swr 전역 설정 'use client'; import { SWRConfig } from 'swr'; type Props = { children: React.ReactNode; }; export default function SWRConfigContext({ children }: Props) { return ( fetch(url).then((res) => res.json()), }} > {children} ); } 해당 컴포넌트를 provider로 사용하면 아래처럼 간단하게 api요청 함수를 사용할 수 있음 const { data, isLoading, error } = useSWR('/api/me'); mutate의 경우 mutate만 해줄 경우 해당 api 데이터로 요청이 가지만, 아래처럼 ..

이걸 내가 다시 만질 날이 올 줄이야... 기본 세팅 npm i mongodb import { MongoClient, ServerApiVersion } from "mongodb"; const uri = process.env.MOGO_DB_URI ?? ""; const client = new MongoClient(uri, { serverApi: { version: ServerApiVersion.v1,// MongoDB 서버 API 버전 strict: true,// 엄격 모드 deprecationErrors: true,// 오래된 버전이면 에러 뱉을 건지 }, }); 데이터 베이스에 접근 export async function GET() { const mongo = await client.connect();..

npm install next-auth 배포 시 주의할 점 환경 변수인 NEXTAUTH_URL 추가할 필요 없음 사용법 next 이전 버전 /pages/api/auth/[...nextauth].ts import NextAuth from "next-auth" export default NextAuth({ ... }) next 최신 버전 /app/api/auth/[...nextauth]/route.ts import NextAuth from "next-auth" const handler = NextAuth({ ... }) export { handler as GET, handler as POST } 공식문서에 따르면 Next 13.2 이상의 버전에 대응하기 위해 REST와 유사하게 요청을 처리하는 방법을 추가했..

https://www.sanity.io/docs/overview-introduction Welcome to Sanity's Documentation Here you'll find ways to get started, understand core concepts, and explore a variety of resources to help you get the most from Sanity. We also recommend joining our Slack community for help along the way. Sanity Studio was recently released in a new majo www.sanity.io headless CMS Content Lake안에 있는 데이터베이스를 사용하는데..

npm install nodemailer npm i --save-dev @types/node let transporter = nodemailer.createTransport({ host: "받는 사람 메일", port: 587, secure: false, // true일 경우 port 465로 수정 auth: { user: process.env.AUTH_USER,// 보내는 사람 아이디 pass: process.env.AUTH_PASS,// 보내는 사람 메일 비번 }, }); export async function sendEmail({ subject, from, message }: EmailData) { const mailData = { from, to: process.env.AUTH_USER, subj..

https://github.com/remarkjs/react-markdown GitHub - remarkjs/react-markdown: Markdown component for React Markdown component for React. Contribute to remarkjs/react-markdown development by creating an account on GitHub. github.com npm install react-markdown 사용법 적용할 컨텐츠를 감싸거나 import React from 'react' import ReactMarkdown from 'react-markdown' import ReactDom from 'react-dom' ReactDom.render(# He..

https://tailwindcss.com/docs/installation Installation - Tailwind CSS The simplest and fastest way to get up and running with Tailwind CSS from scratch is with the Tailwind CLI tool. tailwindcss.com next에서 src 경로 사용할 경우 /** @type {import('tailwindcss').Config} */ module.exports = { content: [ './app/**/*.{js,ts,jsx,tsx,mdx}', // Note the addition of the `app` directory. './pages/**/*.{js,ts,jsx,..

npm install framer-motion 애니메이션 scaleX: 가로 크기 transform-origin: 요소 변형의 원점을 설정 x: 가로 좌표 y: 세로 좌표 pathLength: 테두리 길이 (initial: 0, animate: 1로 설정해줄 경우 테두리가 서서히 그려짐) transtion type ㄴspring: 통통 튕김(x 또는 scale은 spring이 자동 적용 됨) ㄴtween: spring효과 없이 딱 멈춤(opacity 또는 color는 tween이 자동 적용 됨) ㄴmass: 무게감 bounce: type: "spring"일 때 튕김 정도(탄력), 0 ~ 1 사이값 damping: 반대힘. 0으로 설정하면 스프링이 무한정 진동 duration: 시작부터 끝까지 실행되는 시..

※ React 18 버전에서 StrictMode모드 삭제해야 적용됨 설치 npm i react-beautiful-dnd npm i --save-dev @types/react-beautiful-dnd 기본 형태 import React from "react"; import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd"; const Trello = () => { const onDragEnd = () => {}; return ( // droppableId는 string이어야 함 {(provided) => ( {(provided) => ( 🔥 one )} )} ); }; export default Trello; , children이 함수..

1. useQuery 두번째 인자로 요청하는 fetch함수에 signal을 실어서 보냄 export function useUser(): UseUser { const queryClient = useQueryClient(); const { data: user } = useQuery( queryKeys.user, ({ signal }) => getUser(user, signal), { initialData: getStoredUser, onSuccess: (received: User | null) => { if (!received) { clearStoredUser(); } else { setStoredUser(received); } }, }, ); 2.config에 signal을 추가 async function..

const queryClient = useQueryClient(); const { data: user } = useQuery(queryKeys.user, () => getUser(user)); 유저 정보를 가져오려고 할 때 useQuery로 불러오려고 하면 애초에 유저가 정의되지 않았기에 못 가져옴 function updateUser(newUser: User): void { queryClient.setQueryData(queryKeys.user, newUser); } 쿼리 클라이언트(캐시)에 로그인할 때 받아온 user 값을 저장해줌 function clearUser() { queryClient.setQueryData(queryKeys.user, null); } 로그아웃 시 클라이언트(캐시)에서 유저 키..

const initialUrl = "https://swapi.dev/api/people/"; const fetchUrl = async (url) => { const response = await fetch(url); return response.json(); }; . . . const { data, fetchNextPage, hasNextPage, isLoading, isFetching, isError, error } = useInfiniteQuery( ["sw-people"], ({ pageParam = initialUrl }) => fetchUrl(pageParam), { getNextPageParam: (lastPage) => lastPage.next || undefined, // hasNextPa..

설치 npm install recoil 기본 1. index에 RecoilRoot import하기 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement); root.render( ); 2. atoms.ts파일 생성 3. 데이터 설정하기 //const todos = useRecoilValue(todoState); (불러오고 싶을 때) //const setTodos = useSetRecoilState(todoState); (가공하고 싶은 때) //위의 두 개를 아래처럼 합칠 수 있음 const [todos, setTodos] = useRecoilState(todoState); selector 리덕스의 slice같은 기능..

설치 npm i react-helmet npm i --save-dev @types/react-helmet import { Helmet } from "react-helmet"; . . . return ( 쓰고싶은 말 파비콘 설정도 가능함