38,500원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
여기 학습에 필요한 css 이거 어디에 있나요?
어디서 찾는지 모르겠네요
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
useEffect 요런거 눌르면 자동으로 ()=>{ ) 어런식으로 자동완성 되자나요? 그거어떻게 하나요? ㅠㅠ
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
빌드하지 않고 테스트가 가능한가요?
'Read(1): 게시글 불러오기' 부분 수강중에 있습니다.강사님께서는 프론트부분 코드를 수정하시고도 npm run build 명령어 입력 없이 즉, 빌드 없이 바로 브라우저에서 테스트가 가능하신 것 같은데 어떻게 하신 건가요?저 같은 경우는 구름 ide라는 클라우드 서비스로 visual studio code를 이용중이며3000번 포트에서는 react를, 5000번 포트에서는 node를 사용중에 있습니다. 그래서 코드 한번 수정 후 테스트 해볼 때터미널에서 client폴더로 이동 -> npm run builid -> server폴더로 이동 -> nodemon index.js이후에 브라우저 들어가서 코드 바꾼 것 잘 적용 되었는지 확인중에 있습니다. 그런데 리액트 코드가 길어지면 길어질수록 빌드하는데 시간이 너무 오래 걸리네요 ㅠㅠ 강사님처럼 빌드하지 않고 바로 확인할 수 있는 방법이 있는지 궁금합니다.추가로 판다코딩님 깃헙 링크좀 부탁드립니다!
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
현재 맥북으로 진행중인데 React의 변경사항이 반영되지 않습니다
Express 첫 강의를 듣고있는데 나와있는 모든 패키지를 install 했고, 강의 중 놓친것이 없나 확인하면 몇번을 봤고, 아무런 에러메시지 없이 React의 변경사항이 5000번 포트를 띄우면 반영되지 않습니다.
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
배포 질문
헤로쿠가 무료 버젼이 사라지고 유로 버젼만 남았는데 혹시 다른 방식으로 배포방법을 강의나 다른 형식으로든 혹시 배울수 있을까요?
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
edit 부분에 질문이 있습니다.
edit 부분에 질문이 있습니다. 이렇게 수정버튼을 누르면 제목과 내용은 로딩이 되는데 이미지 부분만이 로딩이 안되어서 질문을 드립니다. post js var express = require("express"); var router = express.Router(); const multer = require("multer"); const { Post } = require("../Model/Post.js"); const { Counter } = require("../Model/Counter.js"); const { User } = require("../Model/User.js"); const setUpload = require("../Util/upload.js"); router.post("/submit", (req, res) => { let temp = { title: req.body.title, content: req.body.content, image: req.body.image, }; Counter.findOne({ name: "counter" }) .exec() .then((counter) => { temp.postNum = counter.postNum; User.findOne({ uid: req.body.uid }) .exec() .then((userInfo) => { temp.author = userInfo._id; const CommunityPost = new Post(temp); CommunityPost.save().then((doc) => { Counter.updateOne( { name: "counter" }, { $inc: { postNum: 1 } } ).then(() => { res.status(200).json({ success: true }); }); }); }); }) .catch((err) => { res.status(400).json({ success: false }); }); }); router.post("/list", (req, res) => { let sort = {}; if (req.body.sort === "최신순") { sort.createdAt = -1; } else { //인기순 sort.repleNum = -1; } Post.find({ $or: [ { title: { $regex: req.body.searchTerm } }, { content: { $regex: req.body.searchTerm } }, ], }) .populate("author") .sort(sort) .skip(req.body.skip) // 0, 5 .limit(5) //한번에 찾을 doc 숫자 .exec() .then((doc) => { res.status(200).json({ success: true, postList: doc }); }) .catch((err) => { res.status(400).json({ success: false }); }); }); router.post("/detail", (req, res) => { Post.findOne({ postNum: Number(req.body.postNum) }) .populate("author") .exec() .then((doc) => { res.status(200).json({ success: true, post: doc }); }) .catch((err) => { res.status(400).json({ success: false }); }); }); router.post("/edit", (req, res) => { let temp = { title: req.body.title, content: req.body.content, image: req.body.image, }; Post.updateOne({ postNum: Number(req.body.postNum) }, { $set: temp }) .exec() .then(() => { res.status(200).json({ success: true }); }) .catch((err) => { res.status(400).json({ success: false }); }); }); router.post("/delete", (req, res) => { Post.deleteOne({ postNum: Number(req.body.postNum) }) .exec() .then(() => { res.status(200).json({ success: true }); }) .catch((err) => { res.status(400).json({ success: false }); }); }); /* const storage = multer.diskStorage({ destination: function (req, file, cb) { cb(null, "image/"); }, filename: function (req, file, cb) { cb(null, `${Date.now()}_${file.originalname}`); }, }); const upload = multer({ storage: storage }).single("file"); router.post("/image/upload", (req, res) => { upload(req, res, (err) => { if (err) { res.status(400).json({ success: false }); } else { res.status(200).json({ success: true, filePath: res.req.file.path }); } }); }); */ router.post( "/image/upload", setUpload("react-community/post"), (req, res, next) => { res.status(200).json({ success: true, filePath: res.req.file.location }); } ); module.exports = router; edit js import React, { useState, useEffect } from "react"; import { useParams } from "react-router-dom"; import axios from "axios"; import ImageUpload from "./ImageUpload.js"; import { useNavigate } from "react-router-dom"; // import { UploadButtonDiv, UploadDiv, UploadForm, } from "../../Style/UploadCSS.js"; function Edit() { let navigate = useNavigate(); let params = useParams(); const [PostInfo, setPostInfo] = useState([]); const [Flag, setFlag] = useState(false); const [Title, setTitle] = useState(""); const [Content, setContent] = useState(""); const [Image, setImage] = useState(""); useEffect(() => { setTitle(PostInfo.title); setContent(PostInfo.content); setImage(PostInfo.image); console.log(PostInfo.image); }, [PostInfo]); useEffect(() => { let body = { postNum: params.postNum, }; axios .post("/api/post/detail", body) .then((response) => { if (response.data.success) { setPostInfo(response.data.post); setFlag(true); } }) .catch((err) => { console.log(err); }); }, []); const onSubmit = (e) => { e.preventDefault(); if (Title === "" || Content === "") { return alert("모든 항목을 채워 주십쇼"); } let body = { title: Title, content: Content, image: Image, postNum: params.postNum, }; axios .post("/api/post/edit", body) .then((response) => { if (response.data.success) { alert("글 수정이 완료되었습니다."); navigate(`/post/${params.postNum}`); } else { alert("글 수정에 실패하였습니다."); } }) .catch((err) => { console.log(err); }); }; return ( <UploadDiv> {Flag && ( <UploadForm> <label htmlFor="label">제목</label> <input id="title" type="text" value={Title} onChange={(e) => { setTitle(e.currentTarget.value); }} /> <ImageUpload setImage={setImage} /> <label htmlFor="content">내용</label> <textarea id="content" value={Content} onChange={(e) => { setContent(e.currentTarget.value); }} /> <UploadButtonDiv> <button className="cancel" onClick={(e) => { e.preventDefault(); navigate(-1); }} > 취소 </button> <button onClick={(e) => { onSubmit(e); }} > 제출 </button> </UploadButtonDiv> </UploadForm> )} </UploadDiv> ); } export default Edit; detail js import React, { useState, useEffect } from "react"; import { Link } from "react-router-dom"; import { useParams, useNavigate } from "react-router-dom"; import axios from "axios"; import Spinner from "react-bootstrap/Spinner"; import { PostDiv, Post, BtnDiv, SpinnerDiv, } from "../../Style/PostDetailCSS.js"; function Detail() { let navigate = useNavigate(); let params = useParams(); const [PostInfo, setPostInfo] = useState([]); const [Flag, setFlag] = useState(false); useEffect(() => { let body = { postNum: params.postNum, }; axios .post("/api/post/detail", body) .then((response) => { console.log(response); if (response.data.success) { setPostInfo(response.data.post); setFlag(true); } }) .catch((err) => { console.log(err); }); }, []); useEffect(() => { console.log(PostInfo); }, [PostInfo]); const DeleteHandler = () => { if (window.confirm("정말로 삭제를 하시겠습니까?")) { let body = { postNum: params.postNum, }; axios .post("/api/post/delete", body) .then((response) => { if (response.data.success) { alert("게시글이 삭제 되었습니다."); navigate("/"); } }) .catch((err) => { alert("게시글이 삭제에 실패하였습니다."); }); } }; return ( <PostDiv> {Flag ? ( <> <Post> <h1>{PostInfo.title}</h1> {PostInfo.image ? ( <img src={`http://localhost:5000/${PostInfo.image}`} alt="" style={{ width: "100%", height: "auto" }} /> ) : null} <p>{PostInfo.content}</p> </Post> <BtnDiv> <Link to={`/edit/${PostInfo.postNum}`}> <button className="edit">수정</button> </Link> <button className="delete" onClick={() => DeleteHandler()}> 삭제 </button> </BtnDiv> </> ) : ( <SpinnerDiv> <Spinner animation="border" role="status"> <span className="visually-hidden">Loading...</span> </Spinner> </SpinnerDiv> )} </PostDiv> ); } export default Detail; imageupload import React from "react"; import { Form } from "react-bootstrap"; import axios from "axios"; function ImageUpload(props) { const FileUpload = (e) => { var formData = new FormData(); formData.append("file", e.target.files[0]); axios.post("/api/post/image/upload", formData).then((response) => { props.setImage(response.data.filePath); }); }; return ( <div> <Form.Control type="file" className="shadow-none" accept="image/*" onChange={(e) => FileUpload(e)} /> </div> ); } export default ImageUpload; upload js import React, { useState, useEffect } from "react"; import ImageUpload from "./ImageUpload.js"; import { UploadButtonDiv, UploadDiv, UploadForm, } from "../../Style/UploadCSS.js"; import axios from "axios"; import { useNavigate } from "react-router-dom"; function Upload(props) { const [Title, setTitle] = useState(""); const [Content, setContent] = useState(""); const [Image, setImage] = useState(""); let navigate = useNavigate(); const onSubmit = (e) => { e.preventDefault(); if (Title === "" || Content === "") { return alert("모든 항목을 채워 주십쇼"); } let body = { title: Title, content: Content, image: Image, }; axios .post("api/post/submit", body) .then((response) => { console.log(response); if (response.data.success) { alert("글 작성이 완료되었습니다."); navigate("/"); } else { alert("글 작성에 실패하였습니다."); } }) .catch((err) => { console.log(err); }); }; return ( <UploadDiv> <UploadForm> <label htmlFor="label">제목</label> <input id="title" type="text" value={Title} onChange={(e) => { setTitle(e.currentTarget.value); }} /> <ImageUpload setImage={setImage} /> <label htmlFor="content">내용</label> <textarea id="content" value={Content} onChange={(e) => { setContent(e.currentTarget.value); }} /> <UploadButtonDiv> <button button onClick={(e) => { onSubmit(e); }} > 제출 </button> </UploadButtonDiv> </UploadForm> </UploadDiv> ); } export default Upload;
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
Error: ENOENT: no such file or directory, 가뜹니다
http://localhost:5000 으로 접속하면Error: ENOENT: no such file or directory, stat가 뜹니다 왜이럴까요 .. 빌드도 하고 경로도 영상따라 바꿨는데 말이죠 .. esktop\react-comuni\server\client\build\index.html이경로에 파일이 없다는 뜻같은데server\client 에서 server를 빼야 되는데 뭐라고 적어야 할까요
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
ReactDom.render 질문
useEffect를 이용해서 얼럿띄우면 두 번씩 뜨길래 컴포넌트마다 useEffect로 마운트 언마운트 얼럿을 띄워보았더니 App 콤포넌트가 처음에 마운트되었다가 바로 언마운트 되고 다시 마운트가 되는 현상을 발견했는데, 원인을 찾아보니 index.js에서 render 부분이 아래와 같을 때 나타나는 현상으로 보입니다. 이유를 알수 있을까요? react & react-dom v18.2.0에서 app 생성 시 코드React.StrictMode 삭제 시에는 재 마운트 현상 없음.const root = ReactDOM.createRoot(document.getElementById("root")); root.render( <React.StrictMode> <BrowserRouter> <App /> </BrowserRouter> </React.StrictMode> );
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
client firebase config 파일 문의
안녕하세요.강좌에서 보면 server쪽 화면변수(config)들 Herok에 등록하고, process.env로 접근하도록 설명해 주셨습니다. 그런데 client쪽 firebase관련 key값들은 Herok에 등록하지 않고 firebase.js에 추가하여 사용하는 것으로 이해했습니다. 이런 경우 보안에 문제가 될 수 있지 않나요? Herok setting의 config에 client쪽 key값(apiKey, authDomain, projectId, storageBucket, etc)들을 등록하지 않은 이유가 있으신가요?p.s 좋은 강의 감사드립니다.
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
firebase를 이용하여 회원등록하는 경우 자동로그인 되나요?
안녕하세요. 먼저 좋은 강의 감사드립니다.강좌 중에서 firebase를 이용하여 회원등록하면 (createUserWithEmailAndPassword)Auto상태값 변경시 발생되는 event 함수(onAuthStateChanged)가 계속 호출됩니다.이 의미가 회원등록 후 자동 로그인 되어서 발생하는 건가요?userInfo에 기본정보들이 정확히 들어 있는 것을 확인했습니다. 그리고 자동 로그인 상태가 맞다면 단순히 회원등록 상태로만 유지하고 로그인은 user가 원하는 경우 community site(현재 학습중인 사이트)에서 원하는 시점에 하고 싶습니다. firebase 회원등록시 option설정 값이 있나요?
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
여러번 계속 돌려보고했는데 오류를 못찾겠습니다 ㅜㅜ
이거는 reple 입니다.리플 모델입니다. 이거는 댓글 입력했을때 들어오는 값이랑 맨위에 사진17번째줄 콘솔입니다.포스트아이디가 없습니다..포스트 area 에서 postInfo 를 콘솔한것이 이것 이며 여기서 props.postID 를 가져오지를 못해서.. 값이 안들어가는것 같습니다. 혹시 강의가 업데이트 되거나 제가 잘못한 부분이있을까요..?PostArea.js 에서 댓글지역으로 프롭이렇게 보냈습니다 영상과같이.
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
Post-User 게시글 정보와 회원정보 연동하기 오류
console.log 에서는 postInfo 정보를 author까지 잘 가져옵니다. 그러나 강의 영상대로 postInfo 에서 author 로 접근했을 경우이런식으로 에러가는 현상이있어서 질문드립니다.강의영상이랑은 똑같이 작성했는데 여기서 에러가 나서 user.uid === postInfo.author.uid 접근을 못하고 있습니다.
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
504에러가 뜹니다;;
클라이언트 쪽에서 에러는 이렇게 나옵니다. List.js의 코드입니다.import React, { useState, useEffect } from 'react';import axios from 'axios';function List(props) { const [Text, setText] = useState(''); useEffect(() => { axios .post('/api/test') .then((res) => { console.log(res); setText(res.data.text); }) .catch((error) => { console.log(error); }); }, []); return ( <> {props.ContetnList.map((변수이름1, 인덱스) => { return <div key={인덱스}>내용: {변수이름1}</div>; })} <h3>{Text}</h3> </> );}export default List; server.js의 코드입니다.const express = require('express');const path = require('path');const mongoose = require('mongoose');const { urlencoded } = require('express');const app = express();const port = 5050;const BASIC_URL = '../../client/build';app.use(express.static(path.join(__dirname, ${BASIC_URL})));app.use(express.json());app.use(express, urlencoded({ extended: true }));const { Post } = require('../Model/Post.js');app.listen(port, () => { mongoose .connect('일부러 비워놓음') .then(() => { console.log(`Example app listening on port ${port}`); console.log('Connecting mongoDB...'); }) .catch((err) => { console.log(`${err}`); });});app.get('/', (요청, 응답) => { 응답.sendFile(path.join(__dirname, ${BASIC_URL}/index.html));});app.get('*', (요청, 응답) => { 응답.sendFile(path.join(__dirname, ${BASIC_URL}/index.html));});app.post('/api/test', (요청, 응답) => { // console.log(요청.body); const CommunityPost = new Post({ title: 'test', content: '테스트입니다.' }); CommunityPost.save() .then(() => { 응답.status(200).json({ success: true, text: '안녕하세요.' }); }) .catch((err) => { console.log(err); });}); 몽고디비 모델 강의쪽에서부터 막힙니다;;
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
React Hook useEffect has a missing dependency
useEffect(() => { getPostList(); }, [Sort]);위 코드에서 아래와 같은 경고 메세지가 나옵니다. Line 33:6: React Hook useEffect has a missing dependency: 'getPostList'. Either include it or remove the dependency array react-hooks/exhaustive-deps있어도 동작 자체는 잘 되는 것 같습니다만, 이게 원래 뜨는게 정상인건지, 저만 뜨는건지 궁금합니다. 경고메세지를 그대로 남겨두는 것도 찜찜하고요;
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
504에러
userInfo 조회하니까 데이터는 들어오는데 왜 _id값을 못 읽을까요..?
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
에러가 안 잡힙니다ㅠ
에러난 부분을 몇일째 못 고치고 있습니다ㅠㅠ뭐가 문젠지 감도 안와요..싹다 지우고 첨부터 다시해야되나 생각까지 드는데 그 전까지 잘 되다가 수정페이지 와서 에러나서 건들다가 완전 이상해진거같습니다ㅠ뭐가 문젤까요..? 회원가입이며 업로드며 다 에러가 뜹니다ㅠ
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
504에러
밑에 질문 올렸던 수강생입니다!댓글은 확인이 어려우신거같아서 다시 질문 남깁니다ㅎㅎhttps://github.com/aocl333/community요기에 올려놧는데 뭐가 문제인지 확인해주실수있을까요ㅠ?저는 도저히 못 찾겟네요ㅠ
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
배포 후 Not Found
로그 확인해보니 아래와 같은 에러가 있습니다Error: ENOENT: no such file or directory, stat '/app/client/build/index.html'다른 에러는 없고 위 에러 코드만 3번 뜨네요. + 몽구스 에러도 나왔습니다. production.js에 키는 제대로 입력을 했습니다MongooseError: The uri parameter to openUri() must be a string, got "undefined". Make sure the first parameter to mongoose.connect() or mongoose.createConnection() is a string.
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
에러가 뜨는데 이유를 모르겠습니다..
강의 해주신 그대로 하고있는데 갑자기 이런 에러가 뜹니다ㅠㅠ지금 회원가입쪽이 문제인거 같은데..회원가입하면 로그인화면으로 가게 설정해놨는데 메인으로 가버리고 몽고디비랑 파이어베이스에 데이터는 들어오는데 로그인하면 504에러가 뜹니다ㅜㅜ그전까지는 잘되다가 몽고디비 데이터 한번 지우라고 하셔서 counter까지 실수로 다 지웠다가 다시 만들었는데 그 이후로 안되는데 혹시 연관있을까요..??
- 미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
temp = req.body하면 왜 안되는건가요?
또 들어오면안되는건가요?