38,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
로그인후 업로드 글을 쓰면 POST 400(Bad Request)에러가 발생합니다
ㅇ현재 post.js에 submit관련되어 작성된 코드입니다 ㅜ 무엇때문에 계속 에러가 잡히는지 못찾겠습니다 ㅜㅜㅜㅜ ㅕ모델 폴더에있는 User.js에 작성된 코드입니다 모델 폴더에 있는 Post.js에 작성된 코드입니다 author 정보를 가져오기위해 작성하고나서 부터 에러가 시작된것 같은데 그 이후로 400번 에러가 사라지지 않고 회원가입시에도 나타납니다 혹시나 해서 파이어베이스 계정을 확인해보면 회원가입은 진행이 되었구요 ... 뭐가 문제일까요 ㅠㅠㅠㅠㅠㅠ
- 해결됨MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
이미지 통신 오류...
안녕하세요. 서버와 이미지를 주고 받는 과정에서 에러가 발생했는데 어떤 부분이 문제일까요... 급하게 마무리 하려다 보니 자꾸 잘 안되네요ㅠㅠ 클라이언트의 ImageUpload.js 코드 import axios from 'axios' import React from 'react' function ImageUpload() { const FileUpload = (e)=>{ var formData = new FormData() //서버로 보내기 위한 파일내용 인코딩 formData.append("file", e.target.files[0]) //file이름으로 첨부된 파일 데이터를 추가 axios.post('/api/post/image/upload', formData) .then(()=>{ console.log("성공") }).catch((err)=>{ console.log(err) }) } return ( <div> <input onChange={(e)=>FileUpload(e)} type="file" accept='image/*'/> </div> ) } export default ImageUpload 클라이언트 창 콘솔 에러... 서버의 post.js 코드 const express = require('express') const router = express.Router() const multer = require('multer') const { Post } = require('../models/post.js') const { Counter } = require('../models/counter.js') router.post('/submit', (req, res) => { let temp = req.body Counter.findOne({ name: 'counter' }).exec().then(counter => { temp.postNum = counter.postNum const CommunityPost = new Post(temp) CommunityPost.save().then(() => { Counter.updateOne({ name: "counter" }, { $inc: { postNum: 1 } }) .then(() => { res.status(200).json({ success: true }) }) }) }).catch(err => { err.status(400).json({ success: false }) }) }) router.post('/list', (req, res) => { Post.find().exec().then(doc => { res.status(200).json({ success: true, postList: doc }) }).catch(err => { status(400).json({ success: false }) }) }) router.post('/detail', (req, res) => { Post.findOne({ postNum: Number(req.body.postNum) }).exec() .then(doc => { res.status(200).json({ success: true, postList: doc }) }).catch(err => { console.log(err) status(400).json({ success: false }) }) }) router.post('/edit', (req, res) => { console.log(req.body) let temp = { title: req.body.title, content: req.body.content, } console.log(temp) Post.updateOne({ postNum: Number(req.body.postNum) }, { $set: temp }).exec() .then(() => { console.log("수정성공") res.status(200).json({ success: true }) }).catch(err => { console.log("수정실패") err.status(400).json({ success: false }) }) }) router.post('/delete', (req, res) => { Post.deleteOne({ postNum: Number(req.body.postNum) }).exec() .then(doc => { res.status(200).json({ success: true }) }).catch(err => { console.log(err) status(400).json({ success: false }) }) }) const storage = multer.diskStorage({ //multer를 통해 전달받은 데이터를 파일 디스크에 저장 destination: (req, file, cb) => { //저장할 경로를 지정 cb(null, 'image/') }, filename: (req, file, cb) => { //저장할 파일의 이름 지정 cb(null, file.originalname + '-' + Date.now()) } }) const upload = multer({ storage }).single('file') router.post('/image/upload', (req, res) => { upload((req, res, err) => { if (err) res.status(400).json({ success: false }) else console.log("성공!") }) }) module.exports = router 이전 기능까지는 잘 구현되었는데 이미지 통신 자체가 잘 안되는 것 같습니다...
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
게시글 수정 안됨
안녕하세요. 강의를 따라 코딩을 하던 중 게시물 수정기능이 작동하지 않아 질문드려요... 오류없이 전부 다 잘 작동하고 수정 완료 알림까지 다 뜨는데 업데이트 구문이 실행이 되지 않는 것 같습니다. temp를 console로 찍어봐도 수정한 내용이 찍혀나오는데 updateone 이후에 수정성공이 뜨고 원래 게시글 detail로 돌아가면 수정이 되지 않은 상태로 그대로 있습니다.... 콘솔 결과 수정 완료 알림 이후 결과 index.js 코드 app.post('/api/post/edit', (req, res) => { console.log(req.body) let temp = { title: req.body.title, content: req.body.content, } console.log(temp) Counter.updateOne({ postNum: Number(req.body.postNum) }, { $set: temp }).exec() .then(() => { console.log("수정성공") res.status(200).json({ success: true }) }).catch(err => { console.log("수정실패") err.status(400).json({ success: false }) }) }) 제가 생각하기에는 updateone부분이 잘못된 것 같은데 뭐가 잘못되었을까요....
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
post-user 게시글 작성자 표시부분에서 에러가 발생합니다
게시글 작성자를 나타나게 하는 postInfo.author.displayName 코드를 작성하면 콘솔창에 저렇게 에러가 납니다. 그런데 저 부분을 주석처리를 하면 2번째 사진처럼 또 게시글이 나옵니다. 해결하고 싶은데 어디서 부터 손을 봐야되는지 막막하네요... 혹시 몰라서 구글 메일로 코드 보내드렸습니다
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
axios통신 / proxy 관련 문제
안녕하세요, 이번엔 다른 문제가 발생해서 또 질문 올려봅니다. 제가 집에서 작업을 하면 해결이 되는 문제가 다른 장소로 이동해서 코딩을 하면 나타나는 현상인데요 현재 포트번호는 서버 5002, 클라이언트 3001입니다. list를 받아오는 요청을 할 때, network상황을 보면 대기중이라고만 뜨고 통신이 안되는 현상이에요 작업하려고 나오면 안되고.. 집에서 하면 잘 됩니다... 작업환경은 맥북이고, 브라우저 콘솔과 idle콘솔 어디를 봐도 오류메시지는 뜨지 않고 그냥 하얀 화면으로만 출력이 되는 현상이 지속되고 있어요.. 혹시 어떻게 해결해야할지 방법을 아실까요?ㅠㅠ index.js setupProxy.js List.js 현재 코드 상황도 같이 보여드립니다..
- 해결됨MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
useEffect 2번 실행되는 이유
안녕하세요. 강의를 잘 듣고있는 학생입니다. 다만 선생님과 다른 부분이 궁금하여 질문하게 되었는데요, upload에서 list로 페이지 이동할 때 axios를 이용해서 요청 성공과 실패를 확인하는 부분인데요. useEffect 조건에 빈 배열을 넣을 경우 실행코드가 한 번만 뜨는 걸로 알고있었는데 자꾸 저한테는 실행코드인 alert창이 두 번씩 뜹니다.. 왜 이러는 걸까요? 현재로써는 코드에서는 다른 부분이 전혀 없어보입니다. 혹시 해결 방법을 아시는지 도움을 요청해봅니다..!!
- 해결됨MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
s3 , post.js 에서 설정 까지 다 해줬는데 에러가 나서 질문드립니다
판다님 강의처럼 s3 설정 및 post.js에서 경로설정 까지 다 해줬는데 에러가 뜨네여 혹시나 뭔가 잘 못 적었나 싶어서 몇번이나 강의를 보면서 체크 해봤는데 다른 부분은 없었습니다 키부분은 질문 작성한다고 잠시 지웠습니다
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
아마존 S3로 이미지 외부저장소에 업로드하기
강의에선 네이버 클라우드를 외부저장소로 사용해서 저는 아마존 S3 버킷 사용할려 하는데 인터넷에 자료가 너무 많이있어서 뭘 따라야 될지 모르겠어서 이 점에 대해서 궁금점과 질문을 남깁니다. (참고로 저는 해외라서 네이버 클라우드는 사용이 불가해서 질문합니다!)
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
몽구스 모델 강의에서 에러가 발생했습니다
몽구스 모델 강의에 있는 post에서 코드500 에러가 발생합니다. 검색을 해봐도 어떻게 해결해야되는지 모르겠어서 질문 남깁니다
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
react 파일 빌드 자동화, 화면 새로고침 관련한 재 질문
얼마전에 비슷한걸로 질문했던 수강생입니다. 강사님은 리액트 빌드한걸 노드에 연결한채로 프론트 작업하시는거 같은데, 강의를 보면, 프론트 소스파일을 변경할때마다 화면 리프레쉬 하면 바로바로 변경이되는 것 같습니다. 그 방법이 궁금합니다. 저는 매번 소스 바뀔때마다 빌드를 해서 노드에 빌드된 파일을 보내는지라, 빌드시키는 시간이 오래걸려서 곧바로 리프레쉬가 안됩니다.
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
emotion styled에 대해 궁금한 게 있습니다.
1.emotion styled로 css가 입혀진 태그를 생성하면 그 태그는 리액트 컴포넌트인가요? 1번 질문이 맞다면 2-1. emotion 컴포넌트도 props를 내려주는 게 가능한가요? 2-2. emotion 컴포넌트를 일반적인 리액트 컴포넌트 만들듯이 함수로 정의할 수 있나요?
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
리액트 파일 빌드 자동화와 화면 새로고침 관련한 질문
안녕하세요. 강의를 따라가다 궁금한 점이 생겨 질문을 올립니다. 강의 내용에 덧붙여서, 리액트 측에서 npm watch를 설치를하여, 코드를 고칠때마다 리액트 파일 빌드를 자동화하여 빌드된 파일을 노드가 sendFile하면, 화면 새로고침이 되도록 만들었는데, 프론트 코드를 고칠때마다 빌드되는것이 시간이 오래걸립니다. 빌드하고나서야 노드가 빌드된 파일을 렌더링하기때문에 혹시 매번 프론트코드를 고칠때마다 바로바로 화면에 적용되게끔 할 수 있는 방법이 있는지 질문드립니다.
- 해결됨MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
axios 강의부분 부터 문제가 잇습니다
강의에서 하시는대로 따라했는데 리스트 부분 가면 안녕하세요 라는 텍스트가 나오지 않고 몽고DB에 가도 강의 처럼 데이터가 나오지 않네요. 뭐가 잘못된거지 확인 좀 부탁드리겠습니다 맥북사용 중 입니다 아참 포트는 5000하니깐 에러가 나서 4000으로 사용중입니다
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
왜 강의마다 소리가 다 다른가요?
제발 강의 소리 좀 일정하게 녹화 해주셨으면 좋겠습니다. 강의마다 어떤 강의는 소리가 작고 또 어떤강의 소리가 엄청 크고 맨날 강의 들을때마다 스피커조절을 해야되네여
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
프록시 연결후 서버 연결시 요청실패 에러만 나옵니다
몽구스와 프록시로 서버 연결하고 요청하고나서 List를 누르면 403 forbidden 에러가 나옵니다 똑같이 한거같은데 뭐가 문제인지 몰라 계속 해결이 안되고있는데 , 요청실패라고 나오는게 크게 상관 없다면 다음페이지로 넘어갈까 하고있습니다 ㅜ 아래는 입력한 코드입니다
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
로그인 로그아웃 관련 새로고침 이슈
한가지 더 해결못한 이슈가 있습니다.새로고침 후 /직전에 구동 잘 되는 걸 확인했던 author 정보의displayName을 읽어올수없다는 TypeError가 뜨네요,그리고 로그인 후 리덕스에서 읽어오는 과정에서 뭔가문제가 있는지 자꾸 react_devtools_backend.js:3973 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. at Login (http://localhost:3000/static/js/bundle.js:924:76)이 오류가 뜨네요, 무시해도 되는 것인지 아니면 이번 문제와 연관이 있는지 모르겠습니다. 헷갈리는건 리덕스를 포스트 리스트 페이지에 연동하기 전까지는 무리 없이 잘 됐다가 갑자기 페이지를 새로고침 하니까로그인 관련 이슈가 생겼다는 점입니다.!!제가서버를 구동시킨 상태에서 디테일 컴포넌트에 추가했던 author 정보의 displayName 받아오는 코드를 다시 지웠더니 문제가 사라졌다가 지웠던 코드를 똑같이 다시 쓰니 디테일 페이지가 문제 없이 작성자 정보를 보여주었습니다. <h3>writer:{postInfo.author.displayName}</h3> 그런데 새로고침을 누르자 마자 위의 타입에러가 뜨면서 디테일페이지가 로딩이 1초간 됐다가 흰 화면이 되며 콘솔창에 아래 오류가 뜨는 것입니다. 콘솔창에 문제를 추적하기 위해 제가 아래 디테일 코드에 콘솔로그를 몇군데에 찍어봤는데 로그인 문제와 연관이있는지 서버와 연결은 되지만 위 첨부 콘솔창과 같이 빈 데이터가 넘어오는것 같습니다. 혹시나 해서 다시 "/" 으로 돌아가 로그아웃을 강제로 하고재로그인을 해서 리스트가 있는 페이지로 들어와봤습니다.그랬더니 author 정보는 잘 받아오는데 다음과 같은 콘솔창 오류가 추가되었습니다.일단 저 오류를 무시하고 리스트에 있는 목록을 하나 클릭해 들어가니 역시나 빈 배열이 받아지는 오류가 반복됩니다.분명 새로고침과 관련한 문제인 것 같은데....이상한건 새로고침을 하면 자동 로그아웃이 되어버리는건가 하고 의심해서 "/" 으로 돌아와보면토큰이 넘어와 로그인 상태가 유지중이었습니다.그래도 의심되는건 바로 로그인상태가 표시되는게 아니라 조금 뜸들이다가 로그인이 되었음이 표시되긴 합니다. 판다선생님이라면 어떤 부분을 살펴보실 것 같은가요어떤 부분을 살펴보면 좋을지 알려주시면 확인 후 조치해보고 코드를 첨부해보겠습니다.
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
user의 athor 정보 서버 작업 후 포스팅 400 오류 ㅜ
안녕하세요, 강의 잘 듣고 있습니다. 빠르고 효율적인 강의 감사합니다. 이번 강의에서 로그인 로그아웃을 구현하고게시글에 유저의 정보를 넘겨주는 코드까지 따라 작성하니갑자기 게시글 등록시 오류가 생깁니다.동시에 "/" 에서 로그인 시 콘솔창에 빨간경고가 뜨기 시작했습니다. 아직까지 원인을 제대로 찾지 못했습니다. 아래는 포스팅 오류 서버/ 포스트 라우터의 submit api 클라이언트 경고와서버의 유저모델/ 포스트모델
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
res.req.file로 코딩하시는 이유가 궁금합니다.
multer를 사용해서 하나의 파일만 받는 메소드인 upload를 사용하고 그 안에서 req, res, err 를 받아서 console.log(res.req.file)을 코딩하실 때, 설명으로는 upload의 응답인 res에 ImageUpload.js의 요청인 req라고 설명주시면서 res.req.file를 코딩하셨는데 req.file로 ImageUpload.js의 요청을 받아오는 것까지는 이해가 되었으나, res.req.file을 코딩하시는 것은 이해가 잘되지 않았습니다. 조금 더 추가적인 설명 부탁드립니다.
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
postNum 부분이 +1 되지않아요 ㅠㅠ
뭐가 잘못된지 모르겠어요ㅠㅠ
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
useParams()를 통해 받는 postNum의 출처
해당 강의에서 Edit 컴포넌트를 생성할 때, params를 useParams로 선언하고 params.postNum을 통해서 postNum을 가져오는데 useParams로 받는 object가 어디서 넘어온 object인지 데이터의 흐름이 잡히질 않습니다 ㅠㅠ