월 17,600원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
이미지 업로드 시 data가 보내지지 않습니다..ㅠㅠ
안녕하세요. 강사님! 강의를 들으며 똑같이 작성했고 혹시 모를 오타가 있는지도 확인하면서 강사님 깃허브도 참조해보았는데 원인을 찾지 못하겠어서 문의드립니다. ㅠ ㅠ이미지 업로드를 하면 아래와 같이 오류가 뜨고 redux dev tools 로 확인해 보았을 때UPLOAD_IMAGES_REQUEST 만 처리되고 SUCCESS 로 넘어가지가 않아요.리퀘스트 되어 있는 데이터를 보면 빈 값인 것을 보니 데이터가 넘어가지 않는 것 같은데 도무지 원인을 모르겠습니다. 업로드를 하면 에러가 나면서 서버연결도 끊깁니다. ㅜㅜ제 코드에 뭐가 문제가 있는 건가요..?ㅠㅠ 확인 후 문제를 알려주시면 너무 감사할 것 같습니다..ㅠㅠㅠ[redux] import produce from "immer"; export const initialState = { mainPosts: [], // 이미지 업로드할 때 이미지의 경로들이 저장됨 imagePaths: [], uploadImagesLoading: false, uploadImagesDone: false, uploadImagesError: null, } export const UPLOAD_IMAGES_REQUEST = "UPLOAD_IMAGES_REQUEST"; export const UPLOAD_IMAGES_SUCCESS = "UPLOAD_IMAGES_SUCCESS"; export const UPLOAD_IMAGES_FAILURE = "UPLOAD_IMAGES_FAILURE"; const reducer = (state = initialState, action) => { return produce(state, (draft) => { switch (action.type) { case UPLOAD_IMAGES_REQUEST: draft.uploadImagesLoading = true; draft.uploadImagesDone = false; draft.uploadImagesError = null; break; case UPLOAD_IMAGES_SUCCESS: draft.imagePaths = action.data; draft.uploadImagesLoading = false; draft.uploadImagesDone = true; break; case UPLOAD_IMAGES_FAILURE: draft.uploadImagesLoading = false; draft.uploadImagesError = action.error; break; default: break; } }); }; export default reducer; [saga]import axios from "axios"; import { all, fork, put, takeLatest, throttle, call, } from "redux-saga/effects"; import { UPLOAD_IMAGES_FAILURE, UPLOAD_IMAGES_REQUEST, UPLOAD_IMAGES_SUCCESS, } from "../reducers/post"; function uploadImagesAPI(data) { return axios.post("/post/images", data); } function* uploadImages(action) { try { const result = yield call(uploadImagesAPI, action.data); yield put({ type: UPLOAD_IMAGES_SUCCESS, data: result.data, }); } catch (err) { console.error(err); yield put({ type: UPLOAD_IMAGES_FAILURE, error: err.response.data, }); } } function* watchUploadImages() { yield takeLatest(UPLOAD_IMAGES_REQUEST, uploadImages); } export default function* postSaga() { yield all([ fork(watchUploadImages), ]); }[components] import React, { useCallback, useEffect, useRef } from "react"; import { useSelector, useDispatch } from "react-redux"; import { Form, Input, Button } from "antd"; import { UPLOAD_IMAGES_REQUEST, REMOVE_IMAGE, ADD_POST_REQUEST, } from "../reducers/post"; import useInput from "../hooks/useInput"; const PostForm = () => { const dispatch = useDispatch(); const { imagePaths, addPostDone } = useSelector((state) => state.post); const [text, onChangeText, setText] = useInput(""); const imageInput = useRef(); useEffect(() => { if (addPostDone) { setText(""); } }, [addPostDone]); const onSubmit = useCallback(() => { if (!text || !text.trim()) { return alert("게시글을 작성하세요."); } const formData = new FormData(); imagePaths.forEach((p) => { formData.append("image", p); }); formData.append("content", text); return dispatch({ type: ADD_POST_REQUEST, data: formData, }); }, [text, imagePaths]); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); const onChangeImages = useCallback((e) => { console.log("images", e.target.files); const imageFormData = new FormData(); [].forEach.call(e.target.files, (f) => { imageFormData.append("image", f); }); dispatch({ type: UPLOAD_IMAGES_REQUEST, data: imageFormData, }); }, []); const onRemoveImage = useCallback( (index) => () => { dispatch({ type: REMOVE_IMAGE, data: index, }); }, [] ); return ( <Form style={{ margin: "10px 0 20px" }} encType="multipart/form-data" onFinish={onSubmit} > <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 신기한 일이 있었나요?" /> <div> <input type="file" name="image" multiple hidden ref={imageInput} onChange={onChangeImages} /> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <Button type="primary" style={{ float: "right" }} htmlType="submit"> 짹짹 </Button> </div> <div> {imagePaths?.map((v, i) => ( <div key={v} style={{ display: "inline-block" }}> <img src={`http://localhost:3065/${v}`} alt={v} style={{ width: "200px" }} /> <div> <Button onClick={onRemoveImage(i)}>제거</Button> </div> </div> ))} </div> </Form> ); }; export default PostForm; [back - routes/post.js]const express = require("express"); const multer = require("multer"); const path = require("path"); const fs = require("fs"); const { Post, Image, Comment, User } = require("../models"); const { isLoggedIn } = require("./middlewares"); const router = express.Router(); try { fs.accessSync("uploads"); } catch (error) { console.log("uploads 폴더가 없으므로 생성합니다."); fs.mkdirSync("uploads"); } const upload = multer({ storage: multer.diskStorage({ destination(req, file, done) { done(null, "uploads"); }, filename(req, file, done) { // amanda.png const ext = path.extname(file.originalname); // 확장자 추출(.png) const basename = path.basename(file.originalname, ext); // amanda done(null, basename + "_" + new Data().getTiem() + ext); // amanda15653484.png }, }), limits: { fileSize: 20 * 1024 * 1024 }, // 20MB }); router.post( "/images", isLoggedIn, upload.array("image"), // single , array , none async (req, res, next) => { // POST /post/images console.log(req.files); res.json(req.files.map((v) => v.filename)); } ); router.post("/", isLoggedIn, upload.none(), async (req, res) => { // POST /post try { const post = await Post.create({ content: req.body.content, UserId: req.user.id, }); if (req.body.image) { if (Array.isArray(req.body.image)) { // 이미지를 여러 개 올리면 image: [제로초.png, 부기초.png] const images = await Promise.all( req.body.image.map((image) => Image.create({ src: image })) ); await post.addImages(images); } else { // 이미지를 하나만 올리면 image: 제로초.png const image = await Image.create({ src: req.body.image }); await post.addImages(image); } } const fullPost = await Post.findOne({ where: { id: post.id }, include: [ { model: Image, }, { model: Comment, include: [ { model: User, // 댓글 작성자 attributes: ["id", "nickname"], }, ], }, { model: User, // 게시글 작성자 attributes: ["id", "nickname"], }, { model: User, // 좋아요 누른 사람 as: "Likers", attributes: ["id"], }, ], }); res.status(201).json(fullPost); } catch (error) { console.error(error); next(error); } }); module.exports = router;
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
post 에서 작성 후 mainPosts.map 에서 key={post.id} 가 undefined 로 나옵니다.
에러메세지:ADD_POST_SUCCESS 까지 잘 되었고 content 에 id 도 잘 들어가 있는걸로 보입니다. pages/index.jsimport React, { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import AppLayout from "../components/AppLayout"; import PostCard from "../components/PostCard"; import PostForm from "../components/postForm"; import { LOAD_POSTS_REQUEST } from "../reducers/post"; import { LOAD_USER_REQUEST } from "../reducers/user"; const Home = () => { const me = useSelector((state) => state.user.me); const { mainPosts, hasMorePosts, isLoadingPosts } = useSelector( (state) => state.post ); const dispatch = useDispatch(); useEffect(() => { dispatch({ type: LOAD_USER_REQUEST, }); dispatch({ type: LOAD_POSTS_REQUEST, }); }, []); useEffect(() => { function onScroll() { if ( window.scrollY + document.documentElement.clientHeight > document.documentElement.scrollHeight - 300 ) { if (hasMorePosts && !isLoadingPosts) { dispatch({ type: LOAD_POSTS_REQUEST, }); } } } window.addEventListener("scroll", onScroll); return () => { window.removeEventListener("scroll", onScroll); }; }, []); return ( <AppLayout> {me && <PostForm />} {mainPosts.map((post) => ( <PostCard key={post.id} post={post} /> ))} </AppLayout> ); }; export default Home; reducers/post.jsimport produce from "immer"; export const initialState = { mainPosts: [], imagePaths: [], hasMorePosts: true, isAddingPost: false, isAddedPost: false, isAddPostErr: null, isRemovingPost: false, isRemovedPost: false, isRemovePostErr: null, isAddingComment: false, isAddedComment: false, isAddCommentErr: null, isRemovingComment: false, isRemovedComment: false, isRemoveCommentErr: null, isLoadingPosts: false, isLoadedPosts: false, isLoadPostsErr: null, }; export const LOAD_POSTS_REQUEST = "LOAD_POSTS_REQUEST"; export const LOAD_POSTS_SUCCESS = "LOAD_POSTS_SUCCESS"; export const LOAD_POSTS_FAILURE = "LOAD_POSTS_FAILURE"; export const ADD_POST_REQUEST = "ADD_POST_REQUEST"; export const ADD_POST_SUCCESS = "ADD_POST_SUCCESS"; export const ADD_POST_FAILURE = "ADD_POST_FAILURE"; export const REMOVE_POST_REQUEST = "REMOVE_POST_REQUEST"; export const REMOVE_POST_SUCCESS = "REMOVE_POST_SUCCESS"; export const REMOVE_POST_FAILURE = "REMOVE_POST_FAILURE"; export const ADD_COMMENT_REQUEST = "ADD_COMMENT_REQUEST"; export const ADD_COMMENT_SUCCESS = "ADD_COMMENT_SUCCESS"; export const ADD_COMMENT_FAILURE = "ADD_COMMENT_FAILURE"; export const addPost = (data) => ({ type: ADD_POST_REQUEST, data, }); const reducer = (state = initialState, action) => { return produce(state, (draft) => { switch (action.type) { case ADD_POST_REQUEST: draft.isAddingPost = true; draft.isAddedPost = false; draft.isAddPostErr = null; break; case ADD_POST_SUCCESS: draft.isAddingPost = false; draft.mainPosts.unshift(action.data); draft.isAddedPost = true; break; case ADD_POST_FAILURE: draft.isAddingPost = false; draft.isAddedPost = false; draft.isAddPostErr = action.error; break; case REMOVE_POST_REQUEST: draft.isRemovingPost = true; draft.isRemovedPost = false; draft.isRemovePostErr = null; break; case REMOVE_POST_SUCCESS: draft.isRemovingPost = false; draft.mainPosts = state.mainPosts.filter((v) => v.id !== action.data); draft.isRemovedPost = true; draft.isRemovePostErr = null; break; case REMOVE_POST_FAILURE: draft.isRemovingPost = false; draft.isRemovedPost = false; draft.isRemovePostErr = action.error; break; case ADD_COMMENT_REQUEST: draft.isAddingComment = true; draft.isAddedComment = false; draft.isAddCommentErr = null; break; case ADD_COMMENT_SUCCESS: draft.isAddingComment = false; const post = draft.mainPosts.find((v) => v.id === action.data.PostId); post.Comments.unshift(action.data); draft.isAddedComment = true; break; case ADD_COMMENT_FAILURE: draft.isAddingComment = false; draft.isAddedComment = false; draft.isAddCommentErr = action.error; break; case LOAD_POSTS_REQUEST: draft.isLoadingPosts = true; draft.isLoadedPosts = false; draft.isLoadPostsErr = null; break; case LOAD_POSTS_SUCCESS: draft.isLoadingPosts = false; draft.mainPosts = draft.mainPosts.concat(action.data); draft.isLoadedPosts = true; break; case LOAD_POSTS_FAILURE: draft.isLoadingPosts = false; draft.isLoadedPosts = false; draft.isLoadPostsErr = action.error; break; default: break; } }); }; export default reducer;sagas/post.jsimport { delay, all, fork, put, takeLatest, call } from "redux-saga/effects"; import axios from "axios"; import { ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_POST_FAILURE, ADD_COMMENT_FAILURE, ADD_COMMENT_SUCCESS, ADD_COMMENT_REQUEST, REMOVE_POST_REQUEST, REMOVE_POST_SUCCESS, REMOVE_POST_FAILURE, LOAD_POSTS_REQUEST, LOAD_POSTS_SUCCESS, LOAD_POSTS_FAILURE, } from "../reducers/post"; import { ADD_POST_TO_ME, REMOVE_POST_FROM_ME } from "../reducers/user"; function addPostAPI(data) { return axios.post( "/post", { content: data }, { withCredentials: true, } ); } function* addPost(action) { try { const result = yield call(addPostAPI, action.data); yield put({ type: ADD_POST_SUCCESS, content: result.data }); yield put({ type: ADD_POST_TO_ME, data: result.data.id, }); } catch (err) { console.log(err); yield put({ type: ADD_POST_FAILURE, error: err.response.data, }); } } function removePostAPI(data) { return axios.delete("/post", data); } function* removePost(action) { try { yield delay(1000); yield put({ type: REMOVE_POST_SUCCESS, data: action.data, }); yield put({ type: REMOVE_POST_FROM_ME, data: action.data, }); } catch (err) { yield put({ type: REMOVE_POST_FAILURE, error: err.response.data, }); } } function addCommentAPI(data) { return axios.post(`/post/${data.postId}/comment`, data); //POST /post/1/comment } function* addComment(action) { try { const result = yield call(addCommentAPI, action.data); yield put({ type: ADD_COMMENT_SUCCESS, data: result.data }); } catch (err) { console.log(err); yield put({ type: ADD_COMMENT_FAILURE, error: err, }); } } function loadPostsAPI() { return axios.get(`/posts`); } function* loadPosts(action) { try { const result = yield call(loadPostsAPI, action.data); yield put({ type: LOAD_POSTS_SUCCESS, data: result.data }); } catch (err) { console.log(err); yield put({ type: LOAD_POSTS_FAILURE, error: err.response.data, }); } } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPost); } function* watchRemovePost() { yield takeLatest(REMOVE_POST_REQUEST, removePost); } function* watchAddComment() { yield takeLatest(ADD_COMMENT_REQUEST, addComment); } function* watchLoadPosts() { yield takeLatest(LOAD_POSTS_REQUEST, loadPosts); } export default function* postSaga() { yield all([ fork(watchAddPost), fork(watchRemovePost), fork(watchAddComment), fork(watchLoadPosts), ]); }routes/posts.jsconst express = require("express"); const { Post, Image, User, Comment } = require("../models"); const router = express.Router(); router.get("/", async (req, res, next) => { // GET /posts try { const posts = await Post.findAll({ limit: 10, order: [ ["createdAt", "DESC"], [Comment, "createdAt", "DESC"], ], include: [ { model: User, attributes: ["id", "nickname"], }, { model: Image, }, { model: Comment, include: [{ model: User, attributes: ["id", "nickname"] }], }, ], }); res.status(200).json(posts); } catch (err) { console.error(err); next(err); } }); module.exports = router; sql 테이블도 잘 들어가있고, 새로 고침 하면 포스팅은 잘 되어 있습니다.
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
.next파일
로컬에서 Next를 빌드해서 aws 인스턴스에서 Npm start를 하려고 하는데 .next파일을 git에 푸쉬했을때 문제가 생기는 부분이 있을까요? 보안이라던지
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
프론트서버를 s3로 배포하는 방식은 어떤가요?
강좌에서는 ec2 인스턴스 2개로 프론트 백엔드를 유지하는 방식인데 블로그 글들을 찾아보면 프론트서버는 s3로 유지하는 경우가 많더라구요. Get post patch delete 같은 요청에 열려있다는 단점은 있지만 프론트서버같은 정적인 컨텐츠에는 큰 무리가 없고 무엇보다 ec2 2개를 만드는것보다 과금이 없다는건데.. 실제 서비스를 운영할때는 어떤방식으로 하는 편인가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
aws 포트지정
노드버드 프로젝트를 하나의 인스턴스에서 프론트와 백 서버 둘다 올리기 위해서aws 인스턴스 3000번 포트와 3065번 포트를 열어놓으려고 하는데 사용자지정tcp에서 열어놓으면 되는걸까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
npm run build관련 질문
aws 한개의 인스턴스에 서버와 프론트 서버를 같이 사용하려고 하는데 프리티어에서는 next js의 num run build까지 하게 되면 서버가 터지는 걸로 알고 있습니다 해서 로컬에서 num run build를 해서 깃허브에 푸쉬한 이후 빌드된 파일을 인스턴스에서 Pull 받으려고 하는데 그러면 기존에 gitignore로 인해서 깃허브로 푸쉬가 안되고 있던 node_modules파일이랑 .next파일을 푸쉬해줘야 ec2에서 Pull을 받으면 빌드된게 반영되는건가요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
react-query 적용
제로초쌤 혹시 swr 대신에 react-query로 적용한 버젼을 따로 강의해주시거나 그럴 의향있으신가요!? swr은 slack 강좌랑 nodebird 강좌를 통해서 감을 잡아가고 있는데 react-query 는 공식문서를 보면서도 반밖에 잘 이해가 안가서 어떻게 적용하는지 궁금합니다..!
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
왜 자기 게시글을 리트윗하는 것을 금지해야하는 지 궁금합니다.
왜 자기 게시글을 리트윗하는 것과자기게 시글을 남이 리트윗 한 거를 자기가 또 리트윗 하는 거를 금지해야하는 지 궁금합니다.실제 트위터에서 보면 제 트윗을 제가 또 리트윗 하는 것이 가능하던데 특별한 이유라도 있나요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
로그인 클릭시 로딩
안녕하세요 제로초님 saga와 reducer 연결하는 강의를 듣고 있는데 로그인 버튼 클릭시 로딩만 되고 다음으로 안 넘어가서 질문 드립니다..에러는 안 나고 리덕스 데브툴즈에는 LOG_IN_REQUEST만 뜨는 상태입니다.console창에서 reducer login은 뜨지만 saga logIn은 안 떠서 sagas/user의 function* login() {} 함수가 실행이 안되는 것 같습니다..index.jsuser/reduceruser/sagaconfigureStore.js아래에 해결한 사람들의 방법으로도 해봤는데 여전히 안되어서 질문 남깁니다...!!
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
mysql_secure_installation password 질문이요
... Failed! Error: SET PASSWORD has no significance for user 'root'@'localhost' as the authentication method used doesn't store authentication data in the MySQL server. Please consider using ALTER USER instead if you want to change authentication parameters.구글링도하고 mysql다시깔아서 local password도 다시 설정했는데 자꾸 이 오류가 나오네요.. 혹시 해결 방법이 있을까요?
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
Aws관련질문
강좌에서 aws 인스턴스를 2개를 사용해 프론트서버와 백엔드서버를 배포한것과는 다르게 프리티어 인스턴스 한개로 두개의 서버를 배포하려하는데 aws 서버 메모리가 부족할까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요.
안녕하세요.현재 새로 나온 노드 교과서 이북과 현영님께서 주신 현물 책도 가지고 있는 상황에서 공부를 시작하려고 하는데 강의 결제 후 같이 보는건 어떨까요??공부하는데 돈은 아끼면 안된다고 생각하는 편이라 학습 효율이 가장 중요합니다. 예전에 유튜브로 하나만 구매하면 된다곤 하셨는데 둘 다 병행하면서 보면 어떨지 궁금합니다. 그리고 만약 하나를 선택 한다면 책, 강좌 중 뭐가 더 괜찮을지 혹은 개인의 성향 차이일지도 궁금합니다.항상 좋은 강좌 감사합니다.
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
Credentials 설정 후 origin: true를 줘도 헤더 결과값이 안들어가요
안녕하세요!Credentials 설정 후 origin을 'http://localhost:3060' 으로도, true 로도 변경해봤지만 계속해서 해당 오류가 뜨는데 이유를 모르겠습니다. ㅠㅠ 제로초님의 오류와 다른 부분이 있는 것 같습니다.Access to XMLHttpRequest at 'http://localhost:3065/user/login' from origin 'http://localhost:3060' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.제 코드는 현재 이렇습니다.[app.js]const express = require("express"); const session = require("express-session"); const cookieParser = require("cookie-parser"); const cors = require("cors"); const passport = require("passport"); const dotenv = require("dotenv"); const postRouter = require("./routes/post"); const userRouter = require("./routes/user"); const db = require("./models"); const passportConfig = require("./passport"); const app = express(); dotenv.config(); passportConfig(); //서버 실행할 때 db sequelize 연결도 함께 실행 db.sequelize .sync() .then(() => { console.log("db 연결 성공"); }) .catch(console.error); // router보다 위에 작성해야 함 app.use( cors({ // origin: 'https://nodebird.com' // 설정된 웹페이지에서 오는 요청만 허용 // origin: "*" // 전체 허용 // origin: "http://localhost:3060", // withCredential: true 일 때 보안이 더 철저해져서 정확한 주소를 적어야 함 origin: true, // 요청을 보낸 곳의 주소가 자동으로 들어가 허용 credientials: true, }) ); // CORS 에러 처리법 2 (npm i cors) app.use(express.json()); // front에서 json형식으로 데이터를 보냈을 때 json형식의 데이터를 req.body로 넣어줌 app.use(express.urlencoded({ extended: true })); // form을 submit했을 때 urlencoded 방식으로 데이터가 넘어옴 app.use(cookieParser(process.env.COOKIE_SECRET)); app.use( session({ saveUninitialized: false, resave: false, secret: process.env.COOKIE_SECRET, }) ); app.use(passport.initialize()); app.use(passport.session()); app.get("/", (req, res) => { res.send("hello express"); }); app.get("/posts", (req, res) => { res.json([ { id: 1, content: "hello1" }, { id: 2, content: "hello2" }, { id: 3, content: "hello3" }, ]); }); app.use("/post", postRouter); app.use("/user", userRouter); app.listen(3065, () => { console.log("서버 실행중!!!!"); }); [sagas - index.js]import axios from "axios"; import { all, fork } from "redux-saga/effects"; // take 는 1회용이기 때문에 while(true) {} 문으로 감싸준다. 하지만 직관적이지 않으므로 take 대신에 takeEvery를 사용한다. // takeLatest 는 클릭이 두번되었을 때 두 번 실행되지 않기 위해 마지막 것만 실행되도록 하는 effect 이다. (요청은 취소되지 않고 응답만 취소되므로 서버에는 두개가 저장됨(치명적단점)) // takeLeading 은 첫번째 것만 실행되도록 하는 effect 이다. // throttle 은 시간제한을 두어 그 시간동안에 한번만 실행되도록 요청하는 것이다. (특수한 경우에 사용, 디도스 공격을 막을 때 좋음) import userSaga from "./user"; import postSaga from "./post"; axios.defaults.baseURL = "http://localhost:3065"; axios.defaults.withCredentials = true; // function* : generator 는 yield(중단점)가 있는 곳에서 멈춤 export default function* rootSaga() { // all 은 fork 나 call 을 동시에 실행시켜준다. yield all([ // fork !== call // fork 는 비동기 함수 호출 , call 은 동기 함수 호출 fork(userSaga), fork(postSaga), ]); } 어디서 잘못된 걸까요..? 오류를 보면 header in the response is '' 로 헤더의 결과 값이 없는 것같은데...origin 을 true 로 변경했는데 왜 안들어갈까요...
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
react-query 관련
노드버드 깃허브 코드를 봤습니다 redux-saga와 redux 툴킷을 사용하신 프로젝트에서는 getServersideProps를 주로 쓰시고 react-query에서는 getstaticProps를 쓰셨던데 어째서 이런 차이가 있는건지 궁금합니다
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
aws ec2 관련
강좌에서는 backend 서버와 프론트 서버를 인스턴스를 2개를 사용해서 배포하는데혹시 인스턴스 1개에서 둘다 배포하는건 불가능한건가요? 가능하다면 어떤식으로 해야할까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
s3 관련 aws-sdk 오류 질문
안녕하세요 선생님.일단 우분투에서 백서버 실행을 하면 sudo npx pm2 reload all Use --update-env to update environment variables [PM2] Applying action reloadProcessId on app [all](ids: [ 0 ]) [PM2] [app](0) ✓이렇게 실행은 되는데 주소로 접근하면 자꾸 에러가 나서 로그를 보니까/root/.pm2/logs/app-error.log last 15 lines: 0|app | at Module._compile (internal/modules/cjs/loader.js:1114:14) 0|app | at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10) 0|app | at Module.load (internal/modules/cjs/loader.js:979:32) 0|app | at Function.Module._load (internal/modules/cjs/loader.js:819:12) 0|app | code: 'MODULE_NOT_FOUND', 0|app | requireStack: [ 0|app | '/home/ubuntu/My-Projects/fourthProject/back/node_modules/@aws-sdk/lib-storage/dist-cjs/Upload.js', 0|app | '/home/ubuntu/My-Projects/fourthProject/back/node_modules/@aws-sdk/lib-storage/dist-cjs/index.js', 0|app | '/home/ubuntu/My-Projects/fourthProject/back/node_modules/multer-s3/index.js', 0|app | '/home/ubuntu/My-Projects/fourthProject/back/routes/post.js', 0|app | '/home/ubuntu/My-Projects/fourthProject/back/app.js' 0|app | ] 0|app | }이렇게 나오는데, 이건 routes/post.js 에서 aws-sdk를 적용한 뒤에 나온 에러라서 이 부근이 문제인건 알겠지만 어디를 봐야할지 모르겠어서 질문 드립니다. const multerS3 = require('multer-s3'); const AWS = require('aws-sdk'); AWS.config.update({ accessKeyId: process.env.S3_ACCESS_KEY_ID, secretAccessKey: process.env.S3_SECRET_ACCESS_KEY, region: 'ap-northeast-2', }); const upload = multer({ storage: multerS3({ s3: new AWS.S3(), bucket: 'fashionary-s3', key(req, file, cb){ cb(null, `original/${Date.now()}_${path.basename(file.originalname)}`) } }), limits: {fileSize: 20 * 1024 * 1024} //20MB }) router.post('/images', isLoggedIn, upload.array('image'), async(req, res, next) => { console.log("req.files:::::::" + req.files); res.json(req.files.map((v) => v.location)); });문제의 코드는 위와 같은데,버켓명도 일치하고, 리전도 서울(아시아 태평양(서울) ap-northeast-2)이고vim .env해서 S3_ACCESS_KEY_ID와 S3_SECRET_ACCESS_KEY도 넣고,(cat .env로 확인하였습니다)npm uninstall multer-s3 aws-sdk 후, npm install multer-s3 aws-sdk 도 해보았는데같은 에러가 떠요. 어디를 봐야 하나요 선생님..?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
ssr방식과 csr방식
수업시간 5분 50초때 설명해주시기로는ssr방식은 첫 페이지는 전통적인 방식으로 seo를 가능하게 하고, 이후 페이지 전환시에는 react방식으로 하신다고 하셨는데, 이게 next.js에서 구현된 ssr에 한하여 설명해주신건가요?? 아니면 next가 아니더라도 보편적인 ssr방식을 설명해주신건가요 ?? 동아리 면접 대비로 ssr, csr, spa, mpa 개념이 헷갈려서 공부하고있는데,제가 이해하기로는 ssr은 브라우저의 요청시마다 페이지 전체를 데이터까지 적용하여 서버에서 전달받아 렌더링하는걸로 이해했는데, 6분때 설명해주시는것은 csr방식이 섞인것 같은데, 혹시 제 이해가 잘못되었나 싶어서 여쭤봅니다.. + 수업 1분20초에 ssr의 전체 과정이 길어서 로딩속도가 많이걸려 느리게 그려준다고 하셨는데, 다른 관련 블로그 글에선 오히려 csr방식이 서버에 첫 요청시 전체 페이지에 대한 문서파일을 받아오니 ssr보다 첫페이지 로딩속도가 느리다고 하더라고요.그러면 첫페이지 로딩속도는 ssr이 csr보다 빠르고,페이지 전환 속도는 csr이 ssr보다 빠르다고 정리하면 될까요?? 답변해주시면 감사하겠습니다 !
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
front 인스턴스 퍼블릭 주소 접근 에러
안녕하세요 선생님..강의 따라 프론트 배포 후, aws인스턴스에 나와있는 퍼블릭 ip주소로 들어가서 프론트 서버가 실행되는지 확인해보니 연결을 거부했다는 창이 떴습니다.우분투에서 npm run build 해서 info - Generating static pages (4/4) info - Finalizing page optimization Page Size First Load JS ┌ λ / 2.04 kB 374 kB ├ /_app 0 B 105 kB ├ ○ /404 2.77 kB 108 kB ├ λ /hashtag/[tag] 1.54 kB 299 kB ├ ○ /login 1.89 kB 225 kB ├ ○ /newLook 14.3 kB 310 kB ├ λ /post/[id] 34 kB 345 kB ├ λ /post/allPosts 973 B 278 kB ├ λ /profile 180 B 365 kB ├ ○ /signup 5.97 kB 282 kB └ λ /user/[id] 2.75 kB 365 kB + First Load JS shared by all 105 kB ├ chunks/2eefa3dc3cc8f0c2cde672071668ef45dcb6f3dd.22cde6.js 28.1 kB ├ chunks/commons.7a84f9.js 11.5 kB ├ chunks/f0193db3.b49a15.js 69 B ├ chunks/framework.1daf1e.js 39.9 kB ├ chunks/main.8aa676.js 9.07 kB ├ chunks/pages/_app.6afac7.js 15.7 kB ├ chunks/webpack.eb080e.js 751 B ├ css/342ac7ff0ab1780a5748.css 72 kB └ css/4fae701701216c0faa95.css 198 B λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ○ (Static) automatically rendered as static HTML (uses no initial props) ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps) (ISR) incremental static regeneration (uses revalidate in getStaticProps)이렇게 빌드 하고, sudo npx pm2 start npm -- start위의 명령어를 입력하니까ubuntu@ip-172-31-15-140:~/My-Projects/fourthProject/front$ sudo npx pm2 start npm -- start npx: installed 184 in 13.279s [PM2] Spawning PM2 daemon with pm2_home=/root/.pm2 [PM2] PM2 Successfully daemonized [PM2] Starting /usr/bin/npm in fork_mode (1 instance) [PM2] Done. ┌─────┬────────┬─────────────┬─────────┬─────────┬──────────┬────────┬──────┬───────────┬──────────┬──────────┬──────────┬──────────┐ │ id │ name │ namespace │ version │ mode │ pid │ uptime │ ↺ │ status │ cpu │ mem │ user │ watching │ ├─────┼────────┼─────────────┼─────────┼─────────┼──────────┼────────┼──────┼───────────┼──────────┼──────────┼──────────┼──────────┤ │ 0 │ npm │ default │ N/A │ fork │ 19231 │ 0s │ 0 │ online │ 0% │ 26.1mb │ root │ disabled │ └─────┴────────┴─────────────┴─────────┴─────────┴──────────┴────────┴──────┴───────────┴──────────┴──────────┴──────────┴──────────┘터미널에 이런 창이 떴구요,sudo npx pm2 monit위의 명령어 입력하니까ubuntu@ip-172-31-15-140:~/My-Projects/fourthProject/front$ sudo npx pm2 monit npx: installed 184 in 7.952s ubuntu@ip-172-31-15-140:~/My-Projects/fourthProject/front$ npm run build > fahsionary@1.0.0 build /home/ubuntu/My-Projects/fourthProject/front > cross-env ANALYZE=true NODE_ENV=production next build Browserslist: caniuse-lite is outdated. Please run: npx browserslist@latest --update-db info - Using external babel configuration from /home/ubuntu/My-Projects/fourthProject/front/.babelrc Webpack Bundle Analyzer saved report to /home/ubuntu/My-Projects/fourthProject/front/.next/server/analyze/client.html Webpack Bundle Analyzer saved report to /home/ubuntu/My-Projects/fourthProject/front/.next/analyze/client.html info - Creating an optimized production build info - Compiled successfully info - Collecting page data [ ==] info - Generating static pages (0/4)watchSinUp [====] info - Generating static pages (1/4)watchSinUp 메인포스트: [] undefined [=== ] info - Generating static pages (1/4)watchSinUp undefined watchSinUp info - Generating static pages (4/4) info - Finalizing page optimization Page Size First Load JS ┌ λ / 2.04 kB 374 kB ├ /_app 0 B 105 kB ├ ○ /404 2.77 kB 108 kB ├ λ /hashtag/[tag] 1.54 kB 299 kB ├ ○ /login 1.89 kB 225 kB ├ ○ /newLook 14.3 kB 310 kB ├ λ /post/[id] 34 kB 345 kB ├ λ /post/allPosts 973 B 278 kB ├ λ /profile 180 B 365 kB ├ ○ /signup 5.97 kB 282 kB └ λ /user/[id] 2.75 kB 365 kB + First Load JS shared by all 105 kB ├ chunks/2eefa3dc3cc8f0c2cde672071668ef45dcb6f3dd.22cde6.js 28.1 kB ├ chunks/commons.7a84f9.js 11.5 kB ├ chunks/f0193db3.b49a15.js 69 B ├ chunks/framework.1daf1e.js 39.9 kB ├ chunks/main.8aa676.js 9.07 kB ├ chunks/pages/_app.6afac7.js 15.7 kB ├ chunks/webpack.eb080e.js 751 B ├ css/342ac7ff0ab1780a5748.css 72 kB └ css/4fae701701216c0faa95.css 198 B λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps) ○ (Static) automatically rendered as static HTML (uses no initial props) ┌─ Process List ───────────────────┐┌── npm Logs ────────────────────────────────────────────────────────────────────┐ │[ 0] npm Mem: {#aN-fg} 0 MB ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ │ ││ │ └──────────────────────────────────┘└──────────────────────────────────────────────────────────────────────────────────┘ ┌─ Custom Metrics ─────────────────┐┌─ Metadata ───────────────────────────────────────────────────────────────────────┐ │ ││ App Name npm │ │ ││ Namespace default │ │ ││ Version N/A │ │ ││ Restarts 15 │ │ ││ Uptime 0 │ │ ││ Script path /usr/bin/npm │ └──────────────────────────────────┘└──────────────────────────────────────────────────────────────────────────────────┘ left/right: switch boards | up/down/mouse: scroll | Ctrl-C: exit To go further check out https://pm2.io/ 이렇게 뜨던데..어디가 문제인가요?vim package.json 하니까 "scripts": { "dev": "next", "build": "cross-env ANALYZE=true NODE_ENV=production next build", "start": "cross-env NODE_ENV=production next start -p 80" },scripts부분은 이렇게 나왔습니다 aws에서 프론트 인스턴스의 보안그룹 인바운드 규칙은이렇게 구성했습니다.백서버는 ip주소로 들어가면 수업 내용과 같이 hello express가 보여서 잘 실행되고 있는걸 확인했습니다. config폴더에에서 confing.js로 backUrl로 백 주소 정의해서 교체도 진행했어요
- 미해결[리뉴얼] React로 NodeBird SNS 만들기
401 오류
쿠키 세션과 전체 로그인 흐름 강의 까지 들었습니다. 안녕하세요. 로그인시 401 오류가 생겨서 해결을 못하고 있습니다. user saga 에서 logInAPI랑 logIn 부분에서 error가 생기고 있는거 같은데 이유를 찾지 못했습니다.아래에 비슷한 질문이 있길래 봤더니 json 형식으로 axios.post 해줘야 한다고 하시는 거 같은데 이해를 못하겠습니다... 조금 더 길게 설명해 주실 수 있을까요?
- 해결됨[리뉴얼] React로 NodeBird SNS 만들기
back에 mysql설치 중 뜬 메시지 질문
안녕하세요 선생님. 우분투(back)에 mysql 설치 커맨드를 강의 따라 입력하다가터미널 창에 아래와 같은 메시지가 떴는데우분투가 mysql에 지원되지 않는 서버라고...?? 목록에 있는 시스템 중 하나를 선택하라고 하는데 이때 뭘 선택해야 하나요? 명령어 sudo dpkg -i mysql-apt-config_0.8.13-1_all.deb 입력하니까 저런게 나왔어요.우분투 22.04 LTS 입니다.mysql --version 하니까mysql Ver 8.0.32-0ubuntu0.22.04.2 for Linux on x86_64 ((Ubuntu))이렇게 나오던데 계속 진행해도 될까요?