안녕하세요

구현 목표는 티스토리 컴포넌트 로딩 결과 미리보기 구현 단계 요약 1. 데이터를 불러 오는 중이라면 "로딩"을 렌더링한다. 2. 데이터가 있다면 "있음"을 렌더링한다. 3. 데이터가 없다면 "없음"을 렌더링한다. 구현 방법 1. 로딩 화면을 보여주는 컴포넌트를 만든다. const Spin = () => { return ( 로딩중입니다. ); }; export default Spin; 티스토리처럼 로딩 빙글이가 돌아가고, 아래에는 로딩중이라는 메시지를 읽을 수 있도록 했다. 2. 로딩 상태를 조절할 useLoading 커스텀 훅을 만든다. // useLoading.tsx import React, { useState, useEffect } from "react"; const useLoading = () =>..

Vercel에 배포하는 법 목차 1. vercel nextjs 링크 검색해서 접속 2. 배포 버튼 누르기 3. 레포지토리 선택하고 deploy 버튼 누르기 4. 배포환경 세팅하기 5. 환경변수 세팅하기 에러 해결 세가지 (1) MongoDB connection error: MongoTimeoutError: Server selection timed out => MongoDB IP 주소 허용이 안 된 것일 수 있으니까 Atlas 프로젝트로 가서 Network Access 에 0.0.0.0/0 IP 추가 해보기 (2) VM272:1 Uncaught (in promise) SyntaxError: Unexpected token '

게시물 좋아요 구현 방법 첫번째, 게시물에 좋아요를 클릭한 유저들을 저장한다. 두번째, 좋아요 collection을 만들어 유저들은 게시물별로 저장한다. ex) likes: ["유저1", "유저2", "유저3"] 좋아요 누를 사람이 많아지면 그때 나누는게 나을것 같다. mongodb free tier는 콜렉션 수에 제한이 있어서 많이 못 만들기 때문이다. 1) 좋아요를 누른 유저 목록에 현재 로그인한 유저가 포함되어 있는지 확인 ex) likes: ["유저1", "유저2", "유저3"] 포함되어있다 ? "하트" : "빈 하트" const [isLiked, setIsLiked] = useState(userEmail ? likes.includes(userEmail) : true); // 로그인 여부에 따라 ..

구현 순서 1. Link 태그를 이용하여 카테고리를 클릭하면 해당 url 로 이동하도록 합니다. 2. 라우터에서 searchParams를 전달받아 props로 전달합니다. 3. Props로 전달받은 데이터로 페이지에 카테고리 이름을 표시합니다. 4. 게시물 목록 api에 searchParams를 포함하여 GET 요청을 보냅니다. 5. DB에서 query로 검색한 게시물 목록을 반환합니다. 6. 게시물에 데이터를 전달합니다. 1. Link 태그를 이용하여 카테고리를 클릭하면 해당 url 로 이동하도록 합니다. return ( {subCategories.map((sub) => { const { _id, title } = sub; return ( - {title} ); })} ); pathname로 이동할 주..