PROJECT MAIN TASK
-
몽고 DB 연결
1. 몽고 DB 설치 및 라이브러리 import 연결
2. 몽고 DB 클러스터 연결
3. 옵션 설정 및 변수 반환
-
해당 글 ID 찾아 수정하기
1. 수정 버튼 클릭 시 해당 글 ID URL 이동
2. 수정 시 서버 역할 js에 정보 전달
3. 조건 성립 (저자 동일, 공백 검사) 후 포스트
-
NEXTAUTH 로그인 구현
1. NEXTAUTH 설치, 구글 console 가입
2. authOption 객체 정의하기
3. NEXTAUTH 함수 호출, 내보내기
-
마우스에 따라 움직이는 큐브
1. 전체 아이콘 세트 png 설정
2. 개별 아이콘 background-position 변경
-
TOP 3만 보여주기
1. 전체 아이콘 세트 png 설정
2. 개별 아이콘 background-position 변경
Mongodb 연결하기
몽고DB는 데이터베이스입니다. 기존 데이터 베이스와 다르게 데이터를 테이블 행이 아닌 문서 단위로 저장한다는 것이 특징입니다. 몽고DB 연결하기1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { MongoClient } from "mongodb";// 첫번째 슬라이드 복사하여 컨테이너 박스 뒷부분에추가하기
const url = "mongodb+srv:// ...
const options = { useNewUrlParser: true };
let connectDB;
slideInterval = setInterval(transitionSlide, 3000);함수 실행 시 마다 새로운 타이머를 3초마다 실행
if (process.env.NODE_ENV === "development") {
if (!global._mongo) {
global._mongo = new MongoClient(url, options).connect();
}
connectDB = global._mongo;
} else {
connectDB = new MongoClient(url, options).connect();
}
export { connectDB };
해당 글 아이디 찾아 서버에서 검수 후 삭제하기
버튼 클릭 시 상태 값 카운트를 통해 재생, 정지를 구현하였습니다.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// list.js 라우팅으로 이동
export default async function Correction(props) {
const db = (await connectDB).db("forum");
let result = await db
.collection("post")
.findOne({ _id: new ObjectId(props.params.id) });
}
return (
<form action="/api/post/edit" method="POST"></form>
<input className="id-value" name="_id" defaultValue={result._id.toString()} />
}
edit.js
export default async function handler(req, res) {
if (req.method == "POST") {
// console.log(req.body);
let change = { title: req.body.title, content: req.body.content }; // 바꾸는 대상 객체 배열로 담기
console.log(change);
let db = (await connectDB).db("forum"); // 해당 포스트 될 db 불러오기
let result = db
.collection("post")
.updateOne({ _id: new ObjectId(req.body._id) }, { $set: change }); // 포스트 대상 불러와서 요청 내용 집어 넣기
console.log(result);
res.redirect(302, "/list"); // 응답 302 => 유저 /list 페이지로 강제 이동
}
NextAuth 라이브러리
Next.js 애플리케이션에서 사용자 인증을 손쉽게 구현할 수 있도록 도와주는 라이브러리입니다.1
2
3
4
5
6
7
8
9
10
export const authOptions = {
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID,
clientSecret: process.env.GOOGLE_CLIENT_SECRET,
redirect_uri: "http://localhost:3000/api/auth/callback/google",
}),
],
secret: process.env.NEXTAUTH_SECRET,
};
useEffect, useClient 이용해서 nextAuth 애니메이션 구현
Next.js 애플리케이션에서 사용자 인증을 손쉽게 구현할 수 있도록 도와주는 라이브러리입니다.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { useEffect } from 'react';
export default function Cube() {
useEffect(() => {
const handleMouseMove = (event) => {
const cube = document.querySelector('.cube');
const x = event.clientX / window.innerWidth * 2 - 1;
const y = event.clientY / window.innerHeight * 2 - 1;
const rotateX = y * 180;
const rotateY = x * 180;
cube.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
};
document.addEventListener('mousemove', handleMouseMove);
return () => {
document.removeEventListener('mousemove', handleMouseMove);
};
}, []);
}
데이터베이스에서 값 가져와서 TOP 3만 보여주기
slice 함수를 이용해서 배열에서 객체를 분리한 후, map 함수로 return하였습니다.1
2
3
4
5
6
7
8
9
10
// result == db 값을 담은 변수
</div><