MongoDB compass에서 new connection에서 말씀하신 대로 mern, merntest, admin 이렇게 설정해주고, connect 버튼을 눌렀는데 Authentication failed라는 오류가 뜹니다. 어느 부분에서 오류가 난 건가요..?

1번 질문next9 버전을 다운받아서 실행 했더니 오류가 나서 찾아봤는데 node버전이 높아서 호환 관련 문제로 실행이 안되는 오류가 있었습니다. next14 버전으로 진행했는데 앞으로도 괜찮나요? 2번 질문pages 폴더안에 index.js파일은 /이고 그 외에 이름은 /profile, /signup 구조인것 같은데 어떤 경우에 폴더구조를 사용하고 어떤 경우에 js파일의 이름을 변경해서 사용해야 하는지 궁금합니다.

프론트 axios에서 baseurl을 https://api.count101.shop으로 설정했는데 요청을 보내보니깐 request url이 https://count101.shop/https/api.count101.shop/user/autoLogin 이런식으로 앞에 https://count101.shop이 붙어버리는데 어디를 수정해야 될 지 모르겠습니다,,

실시간 채팅방 강좌 코드를 작성하여 작동 시켜 본 결과 메시지 전송 까지는 잘 되는 것을 확인 하였는데 GIF 업로드 시 다음 그림과 같은 현상이 발생하고 있습니다그림 하단에 표시한 부분 처럼 처음에 GIF 올리기를 하면 그림이 보이지 않다가 새로 고침을 하면 위의 다른 GIF 처럼 잘 보이긴 하는데 무슨 문제 일까요?참고로 관련 코드를 같이 올립니다chat.html {% extends 'layout.html' %} {% block content %} <h1>{{title}}</h1> <a href="/" id="exit-btn">방 나가기</a> <fieldset> <legend>채팅 내용</legend> <div id="chat-list"> {% for chat in chats %} {% if chat.user === user %} <div class="mine" style="color: {{chat.user}}"> <div>{{chat.user}}</div> {% if chat.gif %}} <img src="/gif/{{chat.gif}}"> {% else %} <div>{{chat.chat}}</div> {% endif %} </div> {% elif chat.user === 'system' %} <div class="system"> <div>{{chat.chat}}</div> </div> {% else %} <div class="other" style="color: {{chat.user}}"> <div>{{chat.user}}</div> {% if chat.gif %} <img src="/gif/{{chat.gif}}"> {% else %} <div>{{chat.chat}}</div> {% endif %} </div> {% endif %} {% endfor %} </div> </fieldset> <form action="/chat" id="chat-form" method="post" enctype="multipart/form-data"> <label for="gif">GIF 올리기</label> <input type="file" id="gif" name="gif" accept="image/gif"> <input type="text" id="chat" name="chat"> <button type="submit">전송</button> </form> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="/socket.io/socket.io.js"></script> <script> const socket = io.connect('http://localhost:8005/chat', { path: '/socket.io', }); socket.emit('join', new URL(location).pathname.split('/').at(-1)); socket.on('join', function (data) { const div = document.createElement('div'); div.classList.add('system'); const chat = document.createElement('div'); div.textContent = data.chat; div.appendChild(chat); document.querySelector('#chat-list').appendChild(div); }); socket.on('exit', function (data) { const div = document.createElement('div'); div.classList.add('system'); const chat = document.createElement('div'); div.textContent = data.chat; div.appendChild(chat); document.querySelector('#chat-list').appendChild(div); }); socket.on('chat', function (data) { const div = document.createElement('div'); if (data.user === '{{user}}') { div.classList.add('mine'); } else { div.classList.add('other'); } const name = document.createElement('div'); name.textContent = data.user; div.appendChild(name); if (data.chat){ const chat = document.createElement('div'); chat.textContent = data.chat; div.appendChild(chat); } else { const gif = document.createElement('img'); gif.sr = '/gif/' + data.gif; div.appendChild(gif); } div.style.color = data.user; document.querySelector('#chat-list').appendChild(div); }); document.querySelector('#chat-form').addEventListener('submit', function (e) { e.preventDefault(); if (e.target.chat.value) { axios.post('/room/{{room._id}}/chat', { chat: this.chat.value, }) .then( () => { e.target.chat.value = ''; }) .catch( (err) => { console.error(err); }); } }); document.querySelector('#gif').addEventListener('change', function (e) { console.log('******',e.target.files); const formData = new FormData(); formData.append('gif', e.target.files[0]); axios.post('/room/{{room._id}}/gif', formData) .then( () => { e.target.file = null; }) .catch( (err) => { console.error(err); }); }); </script> {% endblock %} routes/index.jsconst express = require('express'); const { renderMain, renderRoom, createRoom, enterRoom, removeRoom, sendChat, sendGif } = require('../controllers'); const multer = require('multer'); const fs = require('fs'); const path = require('path'); const router = express.Router(); router.get('/', renderMain); router.get('/room', renderRoom); router.post('/room', createRoom); router.get('/room/:id', enterRoom); router.delete('/room/:id', removeRoom); router.post('/room/:id/chat', sendChat); try {fs.readdirSync('uploads'); } catch (err) { console.error('uploads 폴더가 없어 uploads 폴더를 생성합니다.'); fs.mkdirSync('uploads'); } const upload = multer({ storage: multer.diskStorage({ destination(req, file, done) { done(null, 'uploads/'); }, filename(req, file, done ) { const ext = path.extname(file.originalname); done(null, path.basename(file.originalname, ext) + Date.now() + ext); }, }), limits: {fileSize: 5 * 1024 *1024 }, }) router.post('/room/:id/gif', upload.single('gif'), sendGif); module.exports = router;controllers/index.jsconst Room = require('../schemas/room'); const Chat = require('../schemas/chat'); const { removeRoom: removeRoomService } = require('../services'); exports.renderMain = async ( req, res, next ) => { try{ const rooms = await Room.find({}); res.render('main', {rooms, title: 'GIF 채팅방'}); } catch (error) { console.error(error); next(error); } }; exports.renderRoom = ( req, res, next ) => { res.render('room', { title: 'GIF 채팅방 생성'}); }; exports.createRoom = async ( req, res, next ) => { try{ const newRoom = await Room.create({ title: req.body.title, max: req.body.max, owner: req.session.color, password: req.body.password, //session data 에서 옮 }); const io = req.app.get('io'); io.of('/room').emit('newRoom', newRoom); // 방에 들어가는 부분 if (req.body.password ) { res.redirect(`/room/${newRoom._id}?password=${req.body.password}`); } else { res.redirect(`/room/${newRoom._id}`); } } catch (error) { console.error(error); next(error); } }; exports.enterRoom = async( req, res, next ) => { try{ const room = await Room.findOne({_id: req.params.id}); if (!room){ return res.redirect('/?error=존재하지 않는 방입니다.'); } if (room.password && room.password !== req.query.password ){ return res.redirect('/?error=비밀번호가 틀렸습니다.'); } const io = req.app.get('io'); const { rooms } = io.of('/chat').adapter; if (room.max <= rooms.get(req.params.id)?.size) { return res.redirect('/?error=허용 인원을 초과하였습니다.'); } const chats = await Chat.find({room: room._id }).sort('createdAt'); res.render('chat', { title: 'GIF 채팅방 생성', chats , room, user: req.session.color }); } catch (error) { console.error(error); next(error); } }; exports.removeRoom = async ( req, res, next ) => { try { await removeRoomService(req.params.id ); res.send('ok'); setTimeout(() => { req.app.get('io').of('/room').emit('removeRoom', req.params.id); }, 2000) } catch (error) { console.error(error); next(error); } }; exports.sendChat = async (req, res, next ) =>{ try { const chat = await Chat.create({ room: req.params.id, user: req.session.color, chat: req.body.chat, }); req.app.get('io').of('/chat').to(req.params.id).emit('chat', chat); res.send('ok'); } catch( error ){ console.error(error); next(error); } } exports.sendGif = async (req, res, next ) => { try { const chat = await Chat.create({ room : req.params.id, user: req.session.color, gif: req.file.filename, }) setTimeout(() => { req.app.get('io').of('/chat').to(req.params.id).emit('chat',chat); }, 1000); res.send('ok'); } catch (error) { console.error(error); next(error); } } [제로초 강좌 질문 필독 사항입니다]질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다.도움이 되는 질문을 하는 방법을 알려드립니다.https://www.youtube.com/watch?v=PUKOWrOuC0c0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다.1. 에러 메시지를 올리기 전에 반드시 스스로 번역을 해야 합니다. 번역기 요즘 잘 되어 있습니다. 에러 메시지가 에러 해결 단서의 90%를 차지합니다. 한글로 번역만 해도 대부분 풀립니다. 그냥 에러메시지를 올리고(심지어 안 올리는 분도 있습니다. 저는 독심술사가 아닙니다) 해결해달라고 하시면 아무런 도움이 안 됩니다.2. 에러 메시지를 잘라서 올리지 않아야 합니다. 입문자일수록 에러메시지에서 어떤 부분이 가장 중요한 부분인지 모르실 겁니다. 그러니 통째로 올리셔야 합니다.3. 코드도 같이 올려주세요. 다만 코드 전체를 다 올리거나, 깃헙 주소만 띡 던지지는 마세요. 여러분이 "가장" 의심스럽다고 생각하는 코드를 올려주세요.4. 이 강좌를 바탕으로 여러분이 응용을 해보다가 막히는 부분, 여러 개의 선택지 중에서 조언이 필요한 부분, 제 경험이 궁금한 부분에 대한 질문은 대환영입니다. 다만 여러분의 회사 일은 질문하지 마세요.5. 강좌 하나 끝날 때마다 남의 질문들을 읽어보세요. 여러분이 곧 만나게 될 에러들입니다.6. 위에 적은 내용을 명심하지 않으시면 백날 강좌를 봐도(제 강좌가 아니더라도) 실력이 늘지 않고 그냥 코딩쇼 관람 및 한컴타자연습을 한 셈이 될 겁니다.

AI 답변이 어느정도 편리할 수 있단 건 인정하지만, 질문 답변도 강의서비스에 포함된 것인데 어느 순간부터 강의제공자님의 직접답변은 달리지 않고 AI 답변만 달리네요. 그것만으로 전혀 충분하지 않은데 말이죠그리고 AI 답변은 기존 데이터가 없으면 답변을 못해줍니다. 강의제공자로부터 피드백을 받을 수 있을 것을 기대하고 강의를 수강하는데 이렇게 질문답변 조차 제대로 해결이 되지 않고 있는 것은 문제라고 봅니다.몇년 동안 강의를 걸어놓으 실 거면, 그리고 여러 API를 사용하실 거면 적어도 일년에 한번은 UI나 기능에 변화나 업데이트 가 있는지 확인하고 강의에 반영해주셔야 할 것 같은데 아직도 2022년 버전을 그대로 강의에 걸어두셔서 현재 UI와 완전달라 강의 진행이 제대로 안되고 있습니다.이게 정말 제대로 되고 있는게 맞나요? 무료 강의도 아니고 돈내고 듣는 강의에서 기본적인 내용 업데이트 및 강의에 포함된 질문 답변조차 제대로 진행 되지 않는다는 건 매우 실망 스럽습니다.강의 제공자님의 빠른 직접 답변과 피드백 부탁드립니다.

강의에 사용된 코드 다운 받는 사이트 주소 있나요?

제목 그대로 입니다. 가장 최근에 업데이트 해주신게 벌써 2년전인데, 강의를 계속 걸어놓으시려면 적어도 매년 단위로UI 상태에 맞게 해당 부분만이라도 강의를 업데이트 해주셔야 할 것 같습니다.Mock server 부분 도저히 찾지못해 시간만 보내고 진척이 없습니다. 대체 어떻게 해야 하나요?

안녕하세요. 최근에 프로젝트를 완성해서 배포까지 성공리에 마쳤는데요. 이제 운영을 해야하는데 몇가지 궁금한 점이 생겨서 질문 남기게 되었습니다.운영을 하다보면 배포하기 전 진행한 테스트 외에도 예기치 못한 오류가 생길 수 있기때문에 서버에서 로깅하는게 굉장히 중요하다고 생각이 드는데요. 실무에서는 로깅을 따로 어떻게 하는지에 대해 궁금함이 생겼습니다.현재 서비스의 중요한 비즈니스 로직에는 Logger를 사용해서 호출 될 때 마다, 시간과 함께 넘어가는 데이터를 같이 로깅하게끔 개발 해놨습니다. 약간 문제라고 생각되는 것은 에러가 발생 할 때, 호스팅하고있는 온프레미스 서버에 직접 접속해서 도커 컨테이너 로그를 일일이 확인해야 하는 번거로움이 있는 점입니다. 실무에서 모든 개발자들이 이렇게 확인하지 않을 것이라고 생각하는데 보통 실무에서는 어떻게 로그를 관리하시나요? 조언 부탁드립니다!

카카오 api 받아서 지도 잘 작동하고 검색창도 떳는데키워드 검색 데이터 받아오기 강의 들으면서 잘 따라갔는데 갑자기 안됩니다 upload.js:1 Uncaught ReferenceError: require is not definedat upload.js:1:20 f12누르니까 이렇게 나옵니다 ㅠㅠ 추가적으로 vs코드에서는파일이 CommonJS 모듈입니다. ES 모듈로 변환될 수 있습니다.ts(80001) 이런 문구가 나오네요  +그래서 upload 파일은 무시하고 지도위에 저장한 데이터 표시하기 강의까지 들었는데 이번엔 main.js:1 Uncaught ReferenceError: require is not defined at main.js:1:20 이렇게 뜨네요 require 함수가 지금까지 잘 되다가 수업이 진행될수록 왜 문제가 될까요 ㅠㅠ

안녕하세요. 프로젝트를 배포하는 과정에서 왜인지 모를 CORS 에러가 계속 생겨서 질문 드립니다.CORS 문제를 해결하기 위해서는 응답 헤더에 Acess-Control-Allow-Origin이 필요한데, nestjs와 같은 was에서 enableCors를 설정해주거나, Nginx의 server 블럭에 add_header를 통해서 헤더를 추가 해 줄 수 있는 것으로 알고 있습니다.웹 서버가 was보다 앞에 있으니까 웹 서버에서 설정해줘야겠다는 생각에 nginx.conf에 allowed_origin은 동적으로 Access-Control-Allow-Origin 헤더의 값을 받기 위해서 설정해뒀습니다.이렇게 작성하고 reload를 해줬는데, 왜인지 응답헤더에 추가한 헤더가 생기지 않습니다...테스트 서버에 위와 같은 설정으로 올렸을 때는 잘 해결됐는데 라이브에 올리니까 이런 문제가 발생하는데 어디를 살펴봐야 할 지 모르겠습니다... access to XMLHttpRequest at '도메인 주소' from origin '서버 ip' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.이런식으로 404에러가 나옵니다.

안녕하세요. 배포를 하고 있는 중 에러를 만났는데 도저히 이해가 가지 않아서 여쭤봅니다.[Nest] 1 - 05/23/2024, 2:56:25 PM ERROR [TypeOrmModule] Unable to connect to the database. Retrying (1)... Error: Access denied for user '유저'@'호스트 서버 IP' (using password: YES)제가 지금 만난 에러인데요. 현재 배포하고 있는 서버와 DB로 켜놓은 서버가 각각 다른 서버입니다.데이터베이스 사용자에 당연히 프로젝트에서 연결 해둔 유저를 추가해두었고, 배포하고 있는 서버의 접근도 허용해뒀습니다. 또한, GRANT ALL PRIVILEGES ON . TO '유저'@'호스트 서버 IP' IDENTIFIED BY '비밀번호'; flush privileges;이렇게 모든 권한도 주었습니다. 그런데 계속 위의 에러가 발생하는데 이유를 도통 모르겠습니다. 어떻게 접근해야 할까요?

[제로초 강좌 질문 필독 사항입니다]세션 6번app.js 시퀄라이즈 싱크에 관한 문의 입니다.const { sequelize } = require('./models');app.js 에서 시퀄라이즈를 가져오는데 해당 모둘안에는 3개의 파일 있습니다 .( user, comment, index ) index 파일만 실행하면 될거 같은데 sequelize 자져오는 이유가 궁금하고 , 여기서 가르키는 sequelize 가 index에 있는 sequelize 인지 궁금합니다.

movieTitle 값이 안나와요ㅜㅜㅜ

PS C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master>npm run dev> react-boiler-plate@1.0.0 dev> concurrently "npm run backend" "npm run start --prefix client"[0] [0] > react-boiler-plate@1.0.0 backend[0] > nodemon server/index.js[0] [1] [1] > client@0.1.0 start[1] > react-scripts start[1] [0] [nodemon] 1.19.4[0] [nodemon] to restart at any time, enter rs[0] [nodemon] watching dir(s): .[0] [nodemon] watching extensions: js,mjs,json[0] [nodemon] starting node server/index.js[0] node:internal/modules/cjs/loader:1147[0] throw err;[0] ^[0][0] Error: Cannot find module 'bcrypt'[0] Require stack:[0] - C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\server\models\User.js[0] - C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\server\routes\users.js[0] - C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\server\index.js[0] at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)[0] at Module._load (node:internal/modules/cjs/loader:985:27) [0] at Module.require (node:internal/modules/cjs/loader:1235:19) [0] at require (node:internal/modules/helpers:176:18)[0] at Object.<anonymous> (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\server\models\User.js:2:16)[0] at Module._compile (node:internal/modules/cjs/loader:1376:14) [0] at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)[0] at Module.load (node:internal/modules/cjs/loader:1207:32) [0] at Module._load (node:internal/modules/cjs/loader:1023:12) [0] at Module.require (node:internal/modules/cjs/loader:1235:19) [0] at require (node:internal/modules/helpers:176:18)[0] at Object.<anonymous> (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\server\routes\users.js:3:18)[0] at Module._compile (node:internal/modules/cjs/loader:1376:14) [0] at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)[0] at Module.load (node:internal/modules/cjs/loader:1207:32) [0] at Module._load (node:internal/modules/cjs/loader:1023:12) { [0] code: 'MODULE_NOT_FOUND',[0] requireStack: [[0] 'C:\\Users\\Samsung\\Desktop\\project\\boilerplate-mern-stack-master\\server\\models\\User.js',[0] 'C:\\Users\\Samsung\\Desktop\\project\\boilerplate-mern-stack-master\\server\\routes\\users.js',[0] 'C:\\Users\\Samsung\\Desktop\\project\\boilerplate-mern-stack-master\\server\\index.js'[0] ][0] }[0][0] Node.js v20.11.0[0] [nodemon] app crashed - waiting for file changes before starting...[1] [HPM] Proxy created: / -> http://localhost:5000[1] i ｢wds｣: Project is running at http://192.168.11.5/[1] i ｢wds｣: webpack output is served from[1] i ｢wds｣: Content not from webpack is served from C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\public[1] i ｢wds｣: 404s will fallback to /[1] Starting the development server...[1][1] Error: error:0308010C:digital envelope routines::unsupported[1] at new Hash (node:internal/crypto/hash:68:19)[1] at Object.createHash (node:crypto:138:10)[1] at module.exports (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\util\createHash.js:135:53)[1] at NormalModule._initBuildHash (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:417:16)[1] at handleParseError (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:471:10)[1] at C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:503:5[1] at C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:358:12[1] at C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:373:3 [1] at iterateNormalLoaders (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:214:10)[1] at iterateNormalLoaders (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:221:10)[1] C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\react-scripts\scripts\start.js:19[1] throw err;[1] ^[1][1] Error: error:0308010C:digital envelope routines::unsupported [1] at new Hash (node:internal/crypto/hash:68:19)[1] at Object.createHash (node:crypto:138:10)[1] at module.exports (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\util\createHash.js:135:53)[1] at NormalModule._initBuildHash (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:417:16)[1] at C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:452:10[1] at C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:323:13[1] at C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:367:11 [1] at C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:233:18 [1] at context.callback (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:111:13)[1] at C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\babel-loader\lib\index.js:59:103 {[1] opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],[1] library: 'digital envelope routines',[1] reason: 'unsupported',[1] code: 'ERR_OSSL_EVP_UNSUPPORTED'[1] }[1][1] Node.js v20.11.0[1] npm run start --prefix client exited with code 1 

npm run dev 하면 > react-boiler-plate@1.0.0 dev> concurrently "npm run backend" "npm run start --prefix client"sh: concurrently: command not found다음과 같은 오류가 발생합니다. npm install server과, client 모두에서 진행했고gpt가 알려주는 npm install -g concurrently도 진행했고npm update 후 다시 실행해보아도 해결되지 않고 있습니다. 도와주세요 ..!

nginx 부분을 따라하다가실수로 서버에서 나갔다가 다시 들어가려니까ssh: connect to host zzimzzim-front port 22: Connection timed out위와같은 에러가나면서 갑자기 들어가지지 않습니다.검색했는데도 해결되지 않아서 답답해다가이럴땐 어떤걸 참고하면 좋을지 조언 주시면 감사하겠습니다. ㅠ 

ubuntu@ip-172-31-37-191:~/react-nodebird/prepare/front$ sudo certbot --nginx Saving debug log to /var/log/letsencrypt/letsencrypt.log Which names would you like to activate HTTPS for? We recommend selecting either all domains, or all domains in a VirtualHost/server block. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1: zzimzzim.com - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Select the appropriate numbers separated by commas and/or spaces, or leave input blank to select all options shown (Enter 'c' to cancel): Requesting a certificate for zzimzzim.com Certbot failed to authenticate some domains (authenticator: nginx). The Certificate Authority reported these problems: Domain: zzimzzim.com Type: connection Detail: 3.37.101.58: Fetching http://zzimzzim.com/.well-known/acme-challenge/SNUl0WTK7OKWJ-oYyHTrIFuh67ww_P11CUJXw2zWRZk: Timeout during connect (likely firewall problem) Hint: The Certificate Authority failed to verify the temporary nginx configuration changes made by Certbot. Ensure the listed domains point to this nginx server and that it is accessible from the internet. Some challenges have failed. Ask for help or search for solutions at https://community.letsencrypt.org. See the logfile /var/log/letsencrypt/letsencrypt.log or re-run Certbot with -v for more details.위와같은 에러가 발생합니다.다른 질문들을 보고 제로초님https://www.zerocho.com/category/NodeJS/post/5ef450a5701d8a001f84baeb 따라해보았는데 해결되지 않아서 여쭤봅니다.

안녕하세요 선생님카카오톡 공유하기 까지 듣고 화면을 테스트해보고 있는데Minified React error 이 에러가 떠서 질문드립니다. 메인화면, 상세보기에서 게시글이 있을때 나옵니다.Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at lg (framework-ecc4130bc7a58a64.js:9:46457) at i (framework-ecc4130bc7a58a64.js:9:121052) at oO (framework-ecc4130bc7a58a64.js:9:99019) at framework-ecc4130bc7a58a64.js:9:98886 at oF (framework-ecc4130bc7a58a64.js:9:98893) at oS (framework-ecc4130bc7a58a64.js:9:93932) at x (framework-ecc4130bc7a58a64.js:33:1364) at MessagePort.T (framework-ecc4130bc7a58a64.js:33:1894)검색해봤더니 hydrate 쪽 이슈더라구요.혼자서 풀어보다가 잘 풀리지 않아서 여쭤봅니다.혹시 제로초님은 저런 에러가 나지 않으시는지난다면 어느 로직을 확인해야할지 조언 부탁드립니다./pages/post/[id].jsimport axios from 'axios'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { useSelector } from 'react-redux'; import AppLayout from '../../components/AppLayout'; import PostCard from '../../components/PostCard'; import { loadPost } from '../../reducers/post'; import { loadMyInfo } from '../../reducers/user'; import wrapper from '../../store/configurStore'; const Post = () => { const router = useRouter(); const { id } = router.query; const { singlePost } = useSelector((state) => state.post); return ( <AppLayout> {singlePost ? ( <> <Head> <title> {singlePost?.User.nickname} 님의 글 </title> <meta name="description" content={singlePost.content} /> <meta property="og:title" content={`${singlePost.User.nickname}님의 게시글`} /> <meta property="og:description" content={singlePost.content} /> <meta property="og:image" content={ singlePost.Images[0] ? singlePost.Images[0].src : 'https://nodebird.com/favicon.ico' } /> <meta property="og:url" content={`https://nodebird.com/post/${id}`} /> </Head> <PostCard post={singlePost}>{id}번 게시글</PostCard> </> ) : ( <div>존재하지 않는 게시물입니다.</div> )} </AppLayout> ); }; export const getServerSideProps = wrapper.getServerSideProps( (store) => async ({ req, params }) => { const cookie = req ? req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; // 쿠키가 브라우저에 있는경우만 넣어서 실행 // (주의, 아래 조건이 없다면 다른 사람으로 로그인 될 수도 있음) if (req && cookie) { axios.defaults.headers.Cookie = cookie; } await store.dispatch(loadMyInfo()); await store.dispatch(loadPost(params.id)); }, ); export default Post; /components/PostCard.jsimport { RetweetOutlined, HeartOutlined, HeartTwoTone, MessageOutlined, EllipsisOutlined, } from '@ant-design/icons'; import { Card, Popover, Button, Avatar, List } from 'antd'; import dayjs from 'dayjs'; import Link from 'next/link'; import PropTypes from 'prop-types'; import { useState, useCallback, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import CommentForm from './CommentForm'; import Followbutton from './FollowButton'; import PostCardContent from './PostCardContent'; import PostImages from './PostImages'; import { removePostRequestAction, likePostRequestAction, unLikePostRequestAction, retweetRequestAction, } from '../reducers/post'; dayjs.locale('ko'); const PostCard = ({ post }) => { // const { me: {id} } = useSelector((state) => state.user); // const id = me && me.id; // const id = me?.id; // 옵셔널 체이닝 연산자 const { removePostLoading } = useSelector((state) => state.post); const dispatch = useDispatch(); const [commentFormOpend, setCommentFormOpend] = useState(false); const id = useSelector((state) => state.user.me?.id); const liked = post.Likers.find((d) => d.id === id); const onLike = useCallback(() => { if (!id) { alert('로그인이 필요합니다.'); } dispatch(likePostRequestAction(post.id)); }, [id]); const onUnLike = useCallback(() => { if (!id) { alert('로그인이 필요합니다.'); } dispatch(unLikePostRequestAction(post.id)); }, [id]); const onToggleComment = useCallback(() => { setCommentFormOpend((prev) => !prev); }, []); const onRemovePost = useCallback(() => { if (!id) { alert('로그인이 필요합니다.'); } dispatch(removePostRequestAction({ id: post.id })); }, [id]); const onRetweet = useCallback(() => { if (!id) { alert('로그인이 필요합니다.'); } dispatch(retweetRequestAction(post.id)); }, [id]); return ( <div style={{ marginTop: 10 }}> <Card cover={post.Images[0] && <PostImages images={post.Images} />} actions={[ // 배열안에 들어가는 것들은 다 key를 넣어줘야 한다. <RetweetOutlined key="retweet" onClick={onRetweet} />, liked ? ( <HeartTwoTone key="heart" twoToneColor="#eb2f96" onClick={onUnLike} /> ) : ( <HeartOutlined key="heart" onClick={onLike} /> ), <MessageOutlined key="comment" onClick={onToggleComment} />, <Popover key="more" content={ <Button.Group> {id && post.User?.id === id ? ( <> <Button type="primary" key="modify"> 수정 </Button> <Button type="danger" key="delete" onClick={onRemovePost} loading={removePostLoading} > 삭제 </Button> </> ) : ( <Button type="dashed" key="report"> 신고 </Button> )} </Button.Group> } > <EllipsisOutlined /> </Popover>, ]} extra={id && <Followbutton post={post} />} title={ post.RetweetId ? `${post.User.nickname}님이 리트윗하셨습니다.` : null } > {post.RetweetId && post.Retweet ? ( <Card cover={ post.Retweet.Images[0] && ( <PostImages images={post.Retweet.Images} /> ) } > <div style={{ float: 'right' }}> {dayjs(post.createdAt).format('YYYY.MM.DD')} </div> <Card.Meta avatar={ <Link href={`/user/${post.Retweet.User.id}`}> <Avatar>{post.Retweet.User?.nickname[0]}</Avatar> </Link> } title={post.Retweet.User?.nickname} description={<PostCardContent postData={post.Retweet.content} />} /> </Card> ) : ( <> <div style={{ float: 'right' }}> {dayjs(post.createdAt).format('YYYY.MM.DD')} </div> <Card.Meta avatar={ <Link href={`/user/${post.User.id}`}> <Avatar>{post.User?.nickname[0]}</Avatar> </Link> } title={post.User?.nickname} description={<PostCardContent postData={post.content} />} /> </> )} </Card> {commentFormOpend && ( <div> {/* 게시글의 아이디 위해서 post 넘겨줌 */} <CommentForm post={post} /> <List header={`${post.Comments.length}개의 댓글`} itemLayout="horizontal" dataSource={post.Comments} renderItem={(item) => ( <List.Item key={item.id}> <List.Item.Meta title={item.User.nickname} avatar={ <Link href={`/user/${item.User.id}`}> <Avatar>{item.User.nickname[0]}</Avatar> </Link> } description={item.content} /> </List.Item> )} /> </div> )} </div> ); }; PostCard.propTypes = { post: PropTypes.shape({ id: PropTypes.number, User: PropTypes.object, content: PropTypes.string, createdAt: PropTypes.string, Comments: PropTypes.arrayOf(PropTypes.object), Images: PropTypes.arrayOf(PropTypes.object), Likers: PropTypes.arrayOf(PropTypes.object), RetweetId: PropTypes.number, Retweet: PropTypes.objectOf(PropTypes.any), }).isRequired, }; export default PostCard;  여유되실때 한번 봐주시면 감사하겠습니다

안녕하세요 선생님보너스 강의 전까지 보고 카카오 공유하기 까지 테스트하고 있는데버그를 발견한것 같아서 어떻게 해결할지 여쭤보려 올립니다.위처럼 post/5의 게시글을 작성하고카카오톡에 공유를 하면이전에 썼던 (로컬에서 썼었던) 내용이 보여집니다.혹시 기존 데이터베이스를 리셋하거나 추가적인 작업이 필요한건지 궁금합니다.

수정 삭제는 sqlite로 직접 만져야되나요