-
[ Next ] MongoDB 연결Front/Next 2025. 9. 27. 23:57반응형
db를 사용하기 위해 간단한 정보를 저장할 것이기에 무료 클라우드 DB인 mongoDB를 사용하기로 했다.
Installment
우선 mongoDB를 사용하기 위해 mongoDB라이브러리를 설치
npm install mongodb
Initalized
mongoDB 페이지를 에서 connect 버튼을 누르면 connect정보를 준다.
이를 .env.local에 환경변수를 등록
이때 env.local에 환경변수를 저장할때는 따옴표 안에 넣어서 사용 이상하게 따옴표안에 안넣으면 계속 DB연결에서 오류가 발생했다.
이후 mongoDB util파일을 만든다.
이는 매번 DB를 호출할때 DB를 연결을 하지 않기 위해서
처음 실행했을때 해당 유틸이 실행되면서 client instatnce에 연결정보를 저장하고 이를 가져다만 쓰면 쉽게 db 접속이 가능하다.
import { MongoClient } from "mongodb"; const uri = process.env.MONGO_URI!; const options = {}; let client: MongoClient; if (!globalThis._mongoClientPromise) { client = new MongoClient(uri, options); globalThis._mongoClientPromise = client.connect(); } const clientPromise = globalThis._mongoClientPromise; export default clientPromise;
Useage
간단하게 로그인 api를 호출해서 테스트를 해보았다.
우선 api에 로그인 아이디와 비밀번호 입력값을 보내주어 이를 통해 db에서 해당 데이터를 찾곡 난후 bcrypt로 인코딩된 비밀번호를 비교해서 정상적인지 아닌지 판단한 후 로그인을 처리
export async function POST(request: Request) { const {username, password} = await request.json() const client = await clientPromise const db = client.db("camp") const user = await db.collection("user").findOne({username}) if(!user) { return NextResponse.json({error: 'User not found'}) } const isMatch = await bcrypt.compare(password,user.password) if(!isMatch) { return NextResponse.json({error: 'Invalid password'}) } return NextResponse.json({success: true, user: user}) }
이후 클라이언트 쪽에서는 fetch를 통해 해당 api를 호출하며 아이디와 비밀번호를 전달해준다.
const onClickLogin = async () => { const res = await fetch("/api/auth/login", { method: "POST", body: JSON.stringify({username, password}), headers: { "Content-Type": "application/json" }, }) const data = await res.json() }
그러면 로그인이 정상적으로 되는 것을 확인할 수 있다.
728x90반응형'Front > Next' 카테고리의 다른 글
[ Next ] KaKao 지도 API 사용하기 (0) 2025.09.28 [ Next ] Redis 사용하여 캐시 관리 (0) 2025.09.28 [ Next ] Ably Realtime 무료 소켓 활용하여 채팅 만들기 (0) 2025.09.27 [ Next ] webpack 활용 svg icon (0) 2025.09.10