오늘의 TIL👩‍🌾

✍MongoDB 접속 에러

원인

Mongodb 계정 비밀번호에 포함된 특수문자가 인코딩되면서 발생한 에러

에러 로그

npm run dev

> nextjs-course@0.1.0 dev C:\Users\이민주\Desktop\coding\nextjs-course
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully
event - build page: /new-meetup
wait  - compiling...
event - compiled successfully
event - build page: /api/new-meetup
wait  - compiling...
event - compiled successfully
error - MongoAPIError: URI must include hostname, domain name, and tld
    at Object.resolveSRVRecord (C:\Users\이민주\Desktop\coding\nextjs-course\node_modules\mongodb\lib\connection_string.js:51:25)
    at Object.connect (C:\Users\이민주\Desktop\coding\nextjs-course\node_modules\mongodb\lib\operations\connect.js:41:36)
    at C:\Users\이민주\Desktop\coding\nextjs-course\node_modules\mongodb\lib\mongo_client.js:127:23
    at Object.maybePromise (C:\Users\이민주\Desktop\coding\nextjs-course\node_modules\mongodb\lib\utils.js:518:5)
    at MongoClient.connect (C:\Users\이민주\Desktop\coding\nextjs-course\node_modules\mongodb\lib\mongo_client.js:126:24)
    at Function.connect (C:\Users\이민주\Desktop\coding\nextjs-course\node_modules\mongodb\lib\mongo_client.js:190:36)
    at handler (C:\Users\이민주\Desktop\coding\nextjs-course\.next\server\pages\api\new-meetup.js:27:75)
    at Object.apiResolver (C:\Users\이민주\Desktop\coding\nextjs-course\node_modules\next\dist\server\api-utils.js:101:15)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at async DevServer.handleApiRequest (C:\Users\이민주\Desktop\coding\nextjs-course\node_modules\next\dist\server\next-server.js:770:9) {
  page: '/api/new-meetup'
}

해결 방법

비밀번호에 있는 특수문자 삭제

참고글

https://stackoverflow.com/questions/55753484/mongoparseerror-uri-does-not-have-hostname-domain-name-and-tld/56705563

🙁또 다른 에러 발생

원인

카페에서 진행했던 작업을 집에 와서 하려고 하니까 Mongodb와 연결된 ip 주소가 달라서 생긴 문제

에러 로그

MongoServerSelectionError: connection to 34.204.20.102:27017 closed

해결방법

집 ip주소로 변경, 0.0.0.0/0 ip주소 추가

참고글

https://stackoverflow.com/questions/60431996/mongooseerror-mongooseserverselectionerror-connection-monitor-to-52-6-250-2/60863977

🙁또 다른 에러 발생

에러 로그

error - TypeError: Cannot create property '_id' on string '{"title":"title","image":"https://mblogthumb-phinf.pstatic.net/20160221_113/moisophiaj_1456039384605ruhmX_JPEG/%BA%D0%C0%A7%B1%E2_%C0%D6%B4%C2_%BF%B9%BB%DB_%BF%DC%B1%B9_%B5%B5%BD%C3_%C7%B3%B0%E6_%BB%E7%C1%F8_%288%29.jpg?type=w2","address":"add","description":"desc"}'

해결방법

headers에서 'Accept'로 되어있던 부분을 'Content-Type'으로 수정

function NewMeetupPage() {
  async function addMeetupHandler(enteredMeetupData) {
    const response = await fetch('/api/new-meetup', {
      method: 'POST',
      body: JSON.stringify(enteredMeetupData),
      headers: {
        'Content-Type': 'application/json' // 'Accept'로 되어있던 부분을 'Content-Type'으로 수정
      }
    });

👊문제 해결 완료

npm run dev

> nextjs-course@0.1.0 dev C:\Users\이민주\Desktop\coding\nextjs-course
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
event - compiled successfully
event - build page: /next/dist/pages/_error
wait  - compiling...
event - compiled successfully
event - build page: /new-meetup
wait  - compiling...
event - compiled successfully
wait  - compiling...
event - compiled successfully
wait  - compiling...
event - compiled successfully
event - build page: /api/new-meetup
wait  - compiling...
event - compiled successfully
{
  acknowledged: true,
  insertedId: new ObjectId("615266200d0f787f773a2b7b")
}
{
  acknowledged: true,
  insertedId: new ObjectId("615266250d0f787f773a2b7c")
}
{
  acknowledged: true,
  insertedId: new ObjectId("6152662e0d0f787f773a2b7d")
}
wait  - compiling...
event - compiled successfully

정상적으로 데이터가 insert됨