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

문제점따로 키체인을 설정한 적이 없는데 프로젝트를 실제 아이폰과 선으로 연결 후 빌드하려고 할 때, 키체인을 입력하라는 창이 팝업 해결방법맥북의 루트 비밀번호 입력후 '항상허용' 을 체크해줍니다.

1. DBMS (Database Management System)개념: 데이터베이스 관리 시스템(DBMS)은 데이터베이스를 생성, 관리, 조작할 수 있도록 하는 소프트웨어입니다.주요 기능: 데이터를 저장, 검색, 수정, 삭제하고 데이터 무결성과 보안을 유지합니다.예시: MySQL, PostgreSQL, Oracle, MongoDB, SQLite 등.특징:데이터의 효율적인 관리와 데이터 무결성을 유지하며, 동시성 제어와 백업 기능을 제공합니다.데이터 중복을 줄이고, 데이터의 일관성을 보장하여 애플리케이션 성능을 최적화합니다.2. RDBMS (Relational Database Management System)개념: 관계형 데이터베이스 관리 시스템(RDBMS)은 관계형 모델을 기반으로 데이터 간의 관계를 테..

데이터의 중복을 최소화하고 데이터 무결성을 유지하기 위해 데이터베이스 테이블을 구조화하는 과정 1차 정규화 (1NF: First Normal Form)목표: 각 열이 원자값(Atomic Value)만을 가지도록 테이블을 구성합니다.조건:모든 열은 원자적 값을 가져야 하며, 한 셀에 여러 개의 값이 들어가면 안 됩니다.테이블에 반복되는 그룹이 없어야 합니다.예시:학생 테이블이 학생의 여러 과목 점수를 하나의 셀에 입력한 경우(예: 과목 점수 90, 85, 78 등)는 1NF에 위배됩니다. 과목 점수는 각각 분리하여 입력해야 합니다. -- 비정규화된 테이블 (반복 그룹 포함)학생ID | 이름 | 과목 | 점수---------------------------------1 | 홍길동 | 수학..

데이터베이스 테이블에 대한 검색 동작 속도를 높여주는 자료구조인덱스의 장점빠른 검색 성능: 인덱스를 사용하면 데이터 검색 속도가 크게 향상되므로, 대규모 데이터베이스에서 성능이 중요한 조회 작업에서 유리합니다.정렬 및 집계 성능 향상: 인덱스가 설정된 열에 대해 정렬, 집계 등의 작업이 빨라집니다.고유성 보장: 유니크 인덱스를 통해 특정 열이 고유한 값을 가지도록 보장할 수 있습니다.인덱스의 단점추가 저장 공간 필요: 인덱스는 별도의 데이터 구조를 사용하여 저장되기 때문에 추가적인 저장 공간이 필요합니다.데이터 수정 시 성능 저하: 데이터를 삽입, 수정, 삭제할 때 인덱스도 업데이트되어야 하므로, 잦은 수정 작업이 필요한 열에 인덱스를 적용하면 성능이 저하될 수 있습니다.과도한 인덱스 사용 시 성능 저하..