aotoyae

💡 jsx 에서 테이블을 만들어보자! title contents {todos.map((todo: Todo) => { return ( {todo.title} {todo.contents} ); })} 화면엔 잘 나오는데 에러가 떠서 🥲 찾아보니 HTML 에서의 table 은 tbody, thead 를 생략해도 tr/td, th 를 쓸 수 있지만 JSX 에선 반드시 tbody & thead 를 써줘야된다고 한다! DOM tree 가 잘 렌더되도록 더 안전하게 구분을 해 두는 것 같다. title contents {todos.map((todo: Todo) => { return ( {todo.title} {todo.contents} ); })} 🤤 🔗 https://velog.io/@dongdong98/React..

💡 Image 컴포넌트에서 만난 오류.. db.json "companyInfo": { "name": "aotoyae's todo-list", "desctiption": "Next-todo-list Project Copyright 2024. aotoyae all rights reserved.", "image": "https://i.namu.wiki/i/d1A_wD4kuLHmOOFqJdVlOXVt1TWA9NfNt_HA0CS0Y_N0zayUAX8olMuv7odG2FiDLDQZIRBqbPQwBSArXfEJlQ.webp" }, AboutPage.json import Image from 'next/image'; const AboutPage = async () => { const response = await fet..

💡 Next.js 에서 리액트 쿼리 사용하기! 리액트에서와 별반 다르지 않다! 우선 프로젝트를 만든 후에 ~ yarn add @tanstack/react-query app/provider.tsx 생성 'use client'; // ** 필수! 클라이언트 컴포넌트에서만 사용 가능하다! import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const QueryProvider = ({ children }: React.PropsWithChildren) => { const queryClient = new QueryClient(); return ( {children} ); }; export default QueryProvider; 🚨 l..