next 강의 코딩애플에서 수강중입니다.
자체 회원가입 기능을 만드는 중 사용자가 입력한 사용자 id,pw가 mongodb에 업로드가 안되고 페이지가 무한로딩되어 해결하고자 연락드립니다.
pages>api>auth>signup.js 는 다음과 같습니다.
import { connectDB } from "util/database";
import bcrypt from "bcrypt";
export default async function handler(요청, 응답) {
if (요청.method === "POST") {
console.log(요청.body)
const hash = await bcrypt.hash(요청.body.password, 10);
요청.body.password = hash;
let db = await connectDB();
let userCollection = db.collection('user');
await userCollection.insertOne(요청.body);
응답.status(200).json('성공');
}
}
-----------------------
src>app>signup>page.js 는 다음과 같습니다.
export default function Register(){
const inputStyle = "w-[338px] h-[44px] border-[0.5px] border-[#707070] focus:border-[#005CA6] focus:border-[2px] focus:outline-none rounded-full py-[13px] pl-[23px] text-16 text-[#A5A5A5] font-['PretendardLight'] placeholder:text-[#A5A5A5]";
return(
<div className='flex flex-col items-center w-auto h-[121px] gap-y-[8px]'>
<form method="POST" action="/api/auth/callback/signup">
<p className="mb-4 text-center">회원가입</p>
<input
type='id' name='userId' id='userId'
className = {inputStyle}
placeholder='아이디를 입력해 주세요'/>
<br/>
<input
type='password' name = 'userPass' id='userPass'
className={inputStyle}
placeholder='비밀번호를 입력해 주세요'/>
<br/>
<button type="submit">완료</button>
</form>
</div>
)
}
---------------------------------
질문:
http://localhost:3000/signup에서 id,pw를 입력후 완료 버튼(submit)을 누르면
해당 페이지가 무한 로딩되고 db에도 사용자 입력 정보가 보이지 않습니다.
여러 방법들을 시도해 봤는데 해결이 되지 않아 글 납깁니다.
ps.
database.js는 util>database.js 에 있으며 경로 문제는 없고 .env에도 db 정보를 정확히 기재하였음 .
db 연결 테스트 결과 다른곳에선 db 정보가 잘 추출됨
