안녕하세요

목차 0. 적용 결과 1. 적용 방법 2. config, package.json 코드 예시 0. 적용 결과 적용 전 import Image from "next/image"; import styles from "./PostItem.module.scss"; import EditPostButton from "@/components/buttons/EditPostButton/EditPostButton"; import { sanitize } from "dompurify"; import DeletePostButton from "@/components/buttons/DeletePostButton/DeletePostButton"; import Comment from "../Comment/Comment"; import {..

구현 목표는 티스토리 컴포넌트 로딩 결과 미리보기 구현 단계 요약 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); // 로그인 여부에 따라 ..