next.js+mongoDB 게시판
1.1. mongo db setting
미뤄두고 미뤄뒀던 mongo db 사용해서 게시판 만들기 드디어 스타투!mongo DB 사용한 CRUDs3 파일 업로드AWS 클라우드에 배포하기몽고 DB settingMongoDB 입출력database -> connect → Drivers → 3. Add your co
2.2. 데이터출력
:: 진행상황 & TODO :: [x] 몽고 DB setting [x] MongoDB 입출력 [ ] 글 목록 조회 기능(/list) [x] 글 제목, [ ] 날짜 데이터바인딩 [ ] 글 상세 페이지(/detail/[id]/page.js) [x] 제목,
3.3. api 구성 및 라우팅 설정(app router와 pages router 비교)
App router 사용해야지! 하고선 기존 pages router 방식의 api routes 방식으로 작성한 코드의 api폴더를 냅다 app폴더로 이동시키고 에러와 싸웠다.. 항상 공식문서를 확인하자...⭐ 기존 미니프로젝트에서는 페이지라우터를, 팀 파이널 프로젝트
4.4. 게시글 수정
🌞 MongoDB 데이터 수정하기 await db.collection('콜렉션이름').updateOne({게시물정보}, { $set : {바꿀데이터}} ); 공식문서.updateOne() 1. 수정페이지 생성. - EditPage 수정 아이콘 누를 시 해당 id
5.5. 게시글 삭제
🌞 MongoDB 데이터 삭제하기공식문서.deleteOne()ListItem 클라이언트 컴포넌트로 분리ListItem 컴포넌트에 postData prop으로 전달 \* id는 string형태로 전달해주자!코드의 일관성 유지, 재사용성을 위해 공통 컴포넌트를 만들어주
6.6. Auth.js 사용한 소셜로그인
NextAuth 라이브러리 셋팅 js import NextAuth from "next-auth" const handler = NextAuth({ ... }) export { handler as GET, handler as POST } js import Nex
7.7. 회원가입, 로그인(Credentials provider + JWT 사용하기)
비밀번호 암호화해서 저장하기 위한 bcrypt 라이브러리 설치회원가입 페이지 생성 및 코드 작성src/app/register/page.jsapi 작성src/app/api/auth/signup/route.jsawait bcrypt.hash(data.password, 10
8.s3 setting
권한' 눌러서 '버킷 정책' 자료 읽기 : s3:GetObject쓰기 : s3:PutObject삭제 : s3:DeleteObjectPrincipal은 어떤 유저인지 명시하는 부분인데 \* 쓰면 모든유저,특정 AWS 계정을 넣고 싶으면 arn:aws:iam::AWS계정I