1. socket.io 설치하기npm install socket.io socket.io-client 2. Next.js API Route에 Socket.io 서버 설정: pages/api/socket.ts를 생성하여 Socket.io 서버를 설정합니다.import { Server as IOServer, Socket } from "socket.io";import { NextApiRequest, NextApiResponse } from "next";import { Server as HTTPServer } from "http";import { connectDB } from "@/util/database";import { getServerSession } from "next-auth";import { authO..

1. $ 연산자의 주요 분류1.1 쿼리 연산자 ($로 시작): 데이터 검색에 사용됩니다. 조건을 정의하거나 특정 기준에 맞는 문서를 찾을 때 사용합니다.연산자설명$eq특정 값과 같은 문서를 찾음 (equal)$ne특정 값과 같지 않은 문서를 찾음 (not equal)$gt, $gte값이 특정 값보다 크거나 같음 (greater than, greater than or equal)$lt, $lte값이 특정 값보다 작거나 같음 (less than, less than or equal)$in배열에 포함된 값 중 하나와 일치하는 문서를 찾음$nin배열에 포함되지 않은 값을 가진 문서를 찾음$exists특정 필드의 존재 여부 확인$regex정규 표현식과 일치하는 문서를 찾음$size배열 필드의 크기가 특정 값과 같은..

1. Redux 환경 설정1-1. Redux Toolkit 설치npm install @reduxjs/toolkit react-redux1-2. Redux Store 생성: 프로젝트 루트에 store 폴더를 생성하고, store.ts 파일을 만듭니다.// store/store.tsimport { configureStore } from "@reduxjs/toolkit";import friendsReducer from "./friendsSlice"import chatReducer from "./chatSlice"const store = configureStore({ //Redux Toolkit에서 제공하는 스토어 생성 함수 reducer: { //configureStore에 객체 형태로 전달하여, 스토어에서..

1. 문제가 있던 코드 ( /api/auth/[...nextauth].js )import { MongoDBAdapter } from "@next-auth/mongodb-adapter";import NextAuth, { AuthOptions } from "next-auth";import GithubProvider from "next-auth/providers/github";import GoogleProvider from "next-auth/providers/google";import DiscordProvider from "next-auth/providers/discord";import CredentialsProvider from "next-auth/providers/credentials";import { ..

1. next-auth 라이브러리 다운로드 받고 데이터베이스 설정하기1-1. next-auth 라이브러리 다운로드우선 NextAuth 패키지를 설치해야 합니다. 터미널에서 아래 명령어를 실행하세요: npm install next-auth 또는 yarn을 사용한다면:yarn add next-auth 1-2. mongodb 데이터베이스 설치 및 설정하기MongoDB와 NextAuth를 연결하려면, 아래 패키지를 추가로 설치해야 합니다:npm install mongodb @next-auth/mongodb-adapter 또는 yarn을 사용한다면:yarn add mongodb @next-auth/mongodb-adapter 1-3. mongodb 페이지에서 데이터베이스 생성 및 콜렉션 생성하기 - 제가 사용..

0. Intro 프로젝트 계획 변동 원래 계획은 였습니다.  중앙에 Lottie 가 애니메이션으로 동작하고 주변에 3D 모델링된 별들이 고정된 위치에서 줌인 - 줌아웃 정도의 애니메이션만 동작할 예정이었죠.. 하지만 실제 React-Three-Fiber 로 개발하다보니, 별들만 3D모델링을 하는게 쉽지 않았습니다. 같은 Canvas 에 모델들을 넣기 위해서 지구도 3D 모델 즉, Gltf 포맷으로 넣기로 계획을 수정하였습니다. 1. 지구와 별들 리소스 구하기 및 프로젝트에 추가하기별 리소스 구하는 방법은 https://choi-hee-yeon.tistory.com/232 [Next.js] React-Three-fiber 을 사용하여 3D 모델 프로젝트에 추가 및 애니메이션 적용하기1. 3D 모델 구하기 ..

1. 3D 모델 구하기 (gltf)우선 3D 모델을 구하기 위해서 저는 https://lumalabs.ai/genie?view=preview Luma AI - GenieA 3d generative foundation modellumalabs.ai를 사용했습니다!  1-1. 원하는 모델을 입력하기1-2. 원하는 모델을 선택하여 다운로드하기  다운로드할때, gltf 형식으로 합니다. 웹에 제일 적절한 포맷입니다.   GLTF와 기타 포맷 비교포맷크기성능 최적화호환성 주요 특징GLTF작음매우 높음웹 표준 지원경량, 스트리밍 지원, PBR 렌더링 지원OBJ큼낮음제한적오래된 포맷, 텍스처 포함 불가FBX큼중간제한적애니메이션 지원, 폐쇄적 포맷COLLADA큼중간제한적XML 기반, 파일 크기 크고 느림  2. Nex..

저는 '네이버' 이메일을 이용하기로 했습니다. 목적: 저의 포트폴리오에 이메일주소, 제목, 내용을 쓸 수 있는 칸을 두고 누군가가 저에게 이메일을 보낼 수 있도록 합니다. 1. 네이버에서 SMTP 앱 생성 및 비밀번호 생성- 네이버 웹사이트에서 프로필 설정 버튼을 클릭합니다.- 내 프로필 옆에 있는 보안설정 버튼을 클릭합니다.- 알림을 받길 원하는 디바이스를 클릭하고 다음을 클릭합니다.- 2단계 인증을 허용하고, 관리를 클릭합니다.- 종류를 선택하거나 직접입력합니다.- 비밀번호 생성하기 버튼을 클릭하여 3번의 비밀번호 확인에서 생성된 비밀번호를 확인합니다. 2. Next.js 를 통해 클라이언트 코드 작성'use client';import React, { useState, useEffect } from ..

width: 30vw; /* 너비는 뷰포트의 30% */ aspect-ratio: 3 / 4; /* 너비 : 높이 = 3 : 4 */를 하면 너비와 높이가 비율에 맞게 줄어들었다가 늘어납니다.

기본화면에서는 min-height: 500px;이다가 화면의 너비가 1191px보다 작아질경우 해당 속성을 초기값으로 돌리기 위해 unset 을 사용했습니다.