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 을 사용했습니다.

const [maxDetailFontSize, setDetailMaxFontSize] = useState(12); const [minDetailFontSize, setDetailMinFontSize] = useState(5); const [windowWidth, setWindowWidth] = useState(window.innerWidth); AutoTextSize mode='oneline' maxFontSizePx={maxDetailFontSize} minFontSizePx={minDetailFontSize} key={windowWidth} // key 속성을 통해 강제로 리렌더링 유도 > {time}{t('atTime')} span style={{color:'#00FF62'}}>{name}sp..

다국어 지원 기능을 React 프로젝트에 추가하려면, 일반적으로 i18n(국제화)을 위한 라이브러리인 react-i18next를 사용합니다. 이를 통해 번역 파일을 관리하고, 여러 언어로 텍스트를 쉽게 변경할 수 있습니다. 아래는 다국어 지원을 위해 react-i18next를 설정하고 사용하는 방법입니다.1. 필요한 패키지 설치우선, 다국어 지원을 위해 필요한 패키지들을 설치해야 합니다.npm install i18next react-i18next i18next-browser-languagedetector2. i18next 설정 파일 생성i18n.js 파일을 생성하여 다국어 지원을 설정합니다. 여기서 번역 리소스를 정의하고, 브라우저 언어 감지 등을 설정할 수 있습니다.// src/i18n.jsimport..

position 속성은 CSS에서 요소의 위치를 지정하는 데 사용되며, 여러 값들이 있습니다. 각 값은 요소가 문서에서 어떻게 배치되는지를 결정합니다. 아래는 position 속성의 주요 값과 그 의미입니다:1. static (기본값)의미: 요소가 문서의 일반적인 흐름에 따라 배치됩니다. top, right, bottom, left, z-index 속성은 적용되지 않습니다.사용 예: 기본 레이아웃에서 요소를 특별히 조정할 필요가 없을 때 사용됩니다.2. relative의미: 요소가 일반적인 문서 흐름에 따라 배치되지만, top, right, bottom, left 속성을 사용해 요소의 위치를 조정할 수 있습니다. 원래 위치를 기준으로 이동하므로 원래 공간은 유지됩니다.사용 예: 작은 위치 조정이 필요할 ..