수강이 제한됩니다.
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 해결됨React로 NodeBird SNS 만들기
로컬 서버에 이미지 등록은 성공했는데, 프론트에서 썸네일 이미지가 보이지 않습니다.
현재상태 1. 이미지 등록을 누르면 서버에 post로 요청한 결과 값을 result로 받아 리덕스에 등록되어있습니다. 2. 네트워크 상태에 위와 같은 메시지가 나오면서 썸네일이 동작되지 않습니다. 3. 오타를 확인해봤지만, 확인하지 못했습니다. 4. 어디가 문제일까요? postcard.js const onChangeImages = useCallback(e => { console.log(e.target.files); const imageFormData = new FormData(); [].forEach.call(e.target.files, f => { imageFormData.append("image", f); }); dispatch({ type: UPLOAD_IMAGES_REQUEST, data: imageFormData }); }, []); // 이미지 업로드 버튼 클릭시, 이미지 업로드할 수 있는 Input이 열리도록 const onClickImageUpload = useCallback(() => { imageInput.current.click(); // 이미지 업로드 할 수 있는 input form open }, [imageInput.current]); return ( <Form onSubmit={onSubmit} style={{ margin: "10px 0 20px" }} encType="multipart/form-data" > <Input.TextArea style={{ height: "120px" }} value={text} onChange={onChangeText} /> <div> <input type="file" multiple hidden ref={imageInput} onChange={onChangeImages} /> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <Button type="primary" htmlType="submit" loading={isAddingPost}> Twit </Button> </div> <div> {imagePaths.map(v => { return ( <div> <div> <Button>삭제</Button> </div> <img src={`http://localhost:3065" + ${v}`} style={{ width: "200px" }} alt={v} /> </div> ); })} </div> </Form> ); }; 서버 index.js const express = require("express"); const app = express(); const morgan = require("morgan"); const db = require("./models"); const cors = require("cors"); const cookieParser = require("cookie-parser"); const expressSession = require("express-session"); const dotenv = require("dotenv"); // dotdev 모듈을 불러와서 const passport = require("passport"); const passportConfig = require("./passport"); dotenv.config(); // 실행 db.sequelize.sync(); passportConfig(); // passport index에서 보내주는 함수를 실행 app.use("/", express.static("uploads")); // express 내부의 static이란 미들웨어를 통해 app.use( cors({ origin: true, //"http://localhost:3000" 로도 가능, 단 서버 재실행 하기 credentials: true }) ); // cors 미들웨어 장착 app.use(cookieParser("nodebirdcookie")); app.use( expressSession({ resave: false, saveUninitialized: false, secret: process.env.COOKIE_SECRET, cookie: { httpOnly: true, secure: false }, name: "rnbck" }) ); app.use(passport.initialize()); app.use(passport.session()); app.use(morgan("dev")); app.use(express.json()); app.use(express.urlencoded({ extended: true })); const userAPIRouter = require("./routes/user"); const postAPIRouter = require("./routes/post"); const postsAPIRouter = require("./routes/posts"); const hashtagAPIRouter = require("./routes/hashtag"); app.use("/api/user", userAPIRouter); app.use("/api/post", postAPIRouter); app.use("/api/posts", postsAPIRouter); app.use("/api/hashtag", hashtagAPIRouter); app.listen(3065, () => { console.log("server is running on http://localhost:3065"); }); 서버 post router const express = require("express"); const router = express.Router(); const db = require("../models"); const multer = require("multer"); const { isLoggedIn } = require("./middleware"); const path = require("path"); const upload = multer({ storage: multer.diskStorage({ destination(req, file, done) { done(null, "uploads"); }, filename(req, file, done) { const ext = path.extname(file.originalname); const basename = path.basename(file.originalname, ext); done(null, basename + new Date().valueOf() + ext); } }), limits: { fileSize: 20 * 1024 * 1024 } }); router.post("/images", upload.array("image"), (req, res) => { console.log(req.files); res.json(req.files.map(v => v.filename)); }); }); module.exports = router;
- 해결됨React로 NodeBird SNS 만들기
댓글 기능에 db SELF JOIN을 걸어서 대댓글을 만들고 싶습니다.
module.exports = (sequelize,DataTypes) => { const Comment = sequelize.define('Comment', { content:{ type: DataTypes.TEXT, allowNull: false, }, isDeleted:{ type:DataTypes.BOOLEAN, allowNull:false, defaultValue:false, }, }, { charset :'utf8mb4', collate : 'utf8mb4_general_ci', }); Comment.associate = (db) => { db.Comment.belongsTo(db.User); db.Comment.belongsTo(db.Post); db.Comment.belongsTo(db.Comment,{as:'ReComment', foreignKey:'ParentId'}); }; return Comment;}; 다음과 같이 모델에 새로 관계 추가해줬구요 router.post('/:postId/comment/:parentId', isLoggedIn, async (req, res, next) => { // POST /api/post/10/comment/2 try { const post = await db.Post.findOne({ where: { id: req.params.postId } }); if (!post) { return res.status(404).send('\"message\": \"포스트가 존재하지 않습니다.\"'); } const comment = await db.Comment.findOne({ where: { id: req.params.parentId } }); if (!comment) { return res.status(404).send('\"message\": \"댓글이 존재하지 않습니다.\"'); } const reComment = await db.Comment.create({ PostId: req.params.postId, UserId: req.user.id, content: req.body.content, ParentId: req.params.parentId, }); await post.addComment(reComment.id); const comments = await db.Comment.findOne({ where: { id: reComment.id, }, include: [{ model: db.User, attributes: ['id', 'nickname'], }], }); return res.json(comments); } catch (e) { console.error(e); return next(e); }}); 다음과 같이 라우터에도 추가해줘서 대댓글이 잘 생성이 되긴 합니다. 그런데 대댓글의 데이터 셋을 뽑아올 때 sequelize로 어떻게 뽑아와야할 지 모르겠더라구요. 일단 제가 작성한 코드는 다음과 같습니다. router.get('/:id/comments', async (req, res, next) => { try { const post = await db.Post.findOne({ where: { id: req.params.id } }); if (!post) { return res.status(404).send('\"message\": \"포스트가 존재하지 않습니다.\"'); } const comments = await db.Comment.findAll({ where: { PostId: req.params.id, isDeleted:0, ParentId : null, }, order: [['createdAt', 'ASC']], include: [{ model: db.User, attributes: ['id', 'nickname'], include:[{ model:db.Image, attributes:['src'] }] }, { model: db.Comment, as:'ReComment', where: { ParentId: Comment.id //해결하고싶은 부분 } }], }); res.json(comments); } catch (e) { console.error(e); next(e); }}); 해결하고싶은 부분이 바로 저부분입니다. WHERE절에 db.Comment 의 id를 가져다가 사용하고싶은데요 어떤 함수를 사용해야하는지 공식문서를 찾아봐도 못찾겠더라구요 혹시 해결방법이 있을까요? 생 쿼리를 사용한다면 SELECT * FROM comments.Co SELF JOIN comments.Re ON Re.parentId = Co.id 이런 느낌이겠네요.
- 미해결React로 NodeBird SNS 만들기
댓글은 확인 안 하시는 것 같아서 새 게시글 남깁니다
https://www.inflearn.com/questions/27186 댓글 알림이 따로 안 가는지 ㅠㅠ 확인 부탁드립니다
- 미해결React로 NodeBird SNS 만들기
propTypes에서 bool으로 쓰면 값이 안 나오는데
PlannerCard.propTypes = { planner: propTypes.shape({ checked:propTypes.bool content: proTypes.string, }), } 으로 설정했고 reducers planner에서는 checked라는 변수에 대해 true로 했는데 <Checkbox defaultChecked={planner.checked24} disabled></Checkbox> 이 결과값이 다르게 아무것도 표시 없이 나오는데 propType이 잘못된 건가요? 다른 변수들은 propTypes.string, propTypes.object였는데 잘나왔어요
- 해결됨React로 NodeBird SNS 만들기
sequelize Cannot read property 'findOne' of undefined 에러 입니다.
"sequelize": "^5.21.5", "sequelize-cli": "^5.5.1" 현재 시퀄라이즈 위 버전을 사용하고 있고, 댓글을 입력하고, post 요청을 보냈는데 아래와 같은 에러가 나옵니다. 1. 프론트에서 데이터 요청은 정상적으로 서버에 보냈습니다. 2. 아래와 같은 에러가 나옵니다. TypeError: Cannot read property 'findOne' of undefined at router.post (/Users/kim/Desktop/projects/nodebird/back/routes/post.js:112:38) 다른 질문들에 남기신 답글들을 찾아보았는데, model/ index.js 파일은 문제가 없는 것 같습니다. const Sequelize = require("sequelize"); const env = process.env.NODE_ENV || "development"; const config = require("../config/config")[env]; const db = {}; const sequelize = new Sequelize( config.database, config.username, config.password, config ); db.Comment = require("./comment")(sequelize, Sequelize); db.Hashtag = require("./hashtag")(sequelize, Sequelize); db.Image = require("./image")(sequelize, Sequelize); db.Post = require("./post")(sequelize, Sequelize); db.User = require("./user")(sequelize, Sequelize); Object.keys(db).forEach(modelName => { if (db[modelName].associate) { db[modelName].associate(db); // associate -> 서로 테이블간의 관계를 만듬 } }); db.sequelize = sequelize; db.Sequelize = Sequelize; module.exports = db; 댓글 등록하는 라우터 코드입니다. router.post("/:id/comment", async (req, res, next) => { try { if (!req.user) { return res.status(401).send("로그인이 필요합니다."); } const post = await db.Post.findOne({ where: { id: req.params.id } }); if (!post) { return res.status(404).send("포스트가 존재하지 않습니다."); } const newComment = await db.Comment.create({ PostId: post.id, UserId: req.user.id, content: req.body.content }); await post.addComment(newComment.id); const comment = await db.comment.findOne({ where: { id: newComment.id }, include: [ { model: db.User, attributes: ["id", "nickname"] } ] }); return res.json(comment); } catch (e) { console.error(e); next(e); } }); 서버부분 index.js 입니다. const express = require("express"); const app = express(); const morgan = require("morgan"); const db = require("./models"); const cors = require("cors"); const cookieParser = require("cookie-parser"); const expressSession = require("express-session"); const dotenv = require("dotenv"); // dotdev 모듈을 불러와서 const passport = require("passport"); const passportConfig = require("./passport"); dotenv.config(); // 실행 db.sequelize.sync(); // api란, 다른 서비스가 내 서비스 기능을 실행할 수 있게 열어놓은 창구 passportConfig(); // passport index에서 보내주는 함수를 실행 app.use( cors({ origin: true, //"http://localhost:3000" 로도 가능, 단 서버 재실행 하기 credentials: true }) ); // cors 미들웨어 장착 app.use(cookieParser("nodebirdcookie")); app.use( expressSession({ resave: false, saveUninitialized: false, secret: process.env.COOKIE_SECRET, // 쿠키에 대한 암호화, parser에도 입력해줘야함. cookie: { httpOnly: true, // 자바스크립트에서 쿠키에 접근을 못함. 해커들이 남의 사이트에 심어서 쿠키 빼돌리는걸 방지 secure: false // https 를 사용한다면 true로 변경 }, name: "rnbck" // cookie에 설정할 이름을 담아줌, 보안을 위해서 }) ); app.use(passport.initialize()); app.use(passport.session()); app.use(morgan("dev")); // 로그 남기기 위함 app.use(express.json()); // json 형식의 본문을 처리 app.use(express.urlencoded({ extended: true })); // 폼으로 넘어오는 데이터를 처리하는 것 const userAPIRouter = require("./routes/user"); const postAPIRouter = require("./routes/post"); const postsAPIRouter = require("./routes/posts"); const hashtagAPIRouter = require("./routes/hashtag"); app.use("/api/user", userAPIRouter); app.use("/api/post", postAPIRouter); app.use("/api/posts", postsAPIRouter); app.use("/api/hashtag", hashtagAPIRouter); app.listen(3065, () => { console.log("server is running on http://localhost:3065"); }); 어떤방식으로 해결해야 할까요?
- 해결됨React로 NodeBird SNS 만들기
쌤 안녕하세요 어제에 이어서 질문 드릴께요 ㅠㅠ
https://github.com/wjdwndtlr/react-site 어제 content 모델에 기본값이 없다는 에러로 마이그레이션과 씨름한 학생입니다. 그 결과, 게시글 (제목, 내용)을 작성하면 잘 post됩니다. 페이로드에 title와 content 각각 잘들어가는거 확인되구요 근데 mysql워크벤처에 들어가면 title만 있고 content는 비어있습니다. 콘솔로그찍어봐도 로그에 타이틀만 기록되구요. 혼자 해결해보려고 계속 씨름해봤는데 도저히 안되서 도움 요청합니다. - boack=> routes => post.js const express = require("express"); const db = require("../models"); const router = express.Router(); router.post("/", async (req, res, next) => { try { const newPost = await db.Post.create({ title: req.body.title, content: req.body.content, UserId: req.user.id }); // const fullPost = await db.Post.findOne({ // where: { id: newPost.id }, // include: [ // { // model: db.User // } // ] // }); // console.log("newPost:", newPost); // console.log("fullPost:", fullPost); return res.json(newPost); } catch (e) { console.error(e); next(e); } }); router.post("/images", (req, res) => {}); router.get("/:id/comments", async (req, res, next) => {}); module.exports = router; - front=> sagas=> post.js import { all, fork, takeLatest, put, delay, call } from "redux-saga/effects"; import axios from "axios"; import { ADD_POST_FAILURE, ADD_POST_REQUEST, ADD_POST_SUCCESS, ADD_COMMENT_FAILURE, ADD_COMMENT_REQUEST, ADD_COMMENT_SUCCESS, LOAD_MAIN_POSTS_FAILURE, LOAD_MAIN_POSTS_REQUEST, LOAD_MAIN_POSTS_SUCCESS, LOAD_HASHTAG_POSTS_REQUEST, LOAD_HASHTAG_POSTS_SUCCESS, LOAD_HASHTAG_POSTS_FAILURE, LOAD_USER_POSTS_SUCCESS, LOAD_USER_POSTS_FAILURE, LOAD_USER_POSTS_REQUEST, LOAD_COMMENTS_SUCCESS, LOAD_COMMENTS_FAILURE, LOAD_COMMENTS_REQUEST } from "../reducers/post"; function addPostAPI(postData) { return axios.post("/post", postData, { withCredentials: true }); } function* addPost(action) { try { const result = yield call(addPostAPI, action.data); yield put({ type: ADD_POST_SUCCESS, data: result.data }); } catch (e) { yield put({ type: ADD_POST_FAILURE, error: e }); } } function* watchAddPost() { yield takeLatest(ADD_POST_REQUEST, addPost); } export default function* postSaga() { yield all([fork(watchAddPost)]); } - reducers -> post.js export default (state = initialState, action) => { switch (action.type) { case ADD_POST_REQUEST: { return { ...state, isAddingPost: true, addPostErrorReason: "", postAdded: false }; } case ADD_POST_SUCCESS: { return { ...state, isAddingPost: false, mainPosts: [action.data, ...state.mainPosts], postAdded: true }; } case ADD_POST_FAILURE: { return { ...state, isAddingPost: false, addPostErrorReason: action.error }; } default: { return { ...state }; } } };
- 미해결React로 NodeBird SNS 만들기
포스트가 존재하는지에 대한 익스프레스 미들웨어
제목에 쓴 ㅇ미들웨어를 만드는게 숙제라고 하셔서 검사받아봅니다.. 다음처럼 req.post에 데이터를 넣어주고, 라우터 함수 내부에서 const post = req.post; 로 받아오게끔 구현했습니다. 이렇게 하는게 맞을까요?
- 미해결React로 NodeBird SNS 만들기
닉네임 include관련 질문입니다
이 부분 관련 오류입니다. include 할 때 nickname 관련 부분을 불러오지 못하고 있습니다. 저와 같은 문제가 있으신 분들 질문을 봤는데 참고해도 해결이 되지 않습니다. const express = require('express'); const db = require('../models'); const router = express.Router(); router.get('/', async (req, res, next) => { //게시글 가져옴 try { const posts = await db.Post.findAll({ include: [{ model : db.User, attributes : ['id', 'nickname'], }], order : [['createdAt', 'DESC']], //DESC는 내림차순 ASC는 오름차순 }); res.json(posts); } catch (e) { console.error(e); next(e); } }); module.exports = router; / <Card.Meta avatar={<Avatar>{post.User.nickname[0]}</Avatar>} title = {post.User.nickname} description = {post.content} /> card.meta 부분의 avatar, title 파트를 주석처리하면 원활하게 돌아갑니다. nickname 부분도 원활하게 저장되고 있는 것 같은데 어디서 문제가 발생하는지 알 수가 없습니다.
- 해결됨React로 NodeBird SNS 만들기
Field 'content' doesn't have a default value
강의를토대로 게시판 작성을 실습중인데요! ㅠ ㅠ 게시판 작성을 누르면 "Field 'content' doesn't have a default value"라는 에러가 발생합니다. 검색해보니 mysql 특정 버전에서는 디폴트값이 없으면 에러가 날수있다고해서 마이그레이션을 작성해주었습니다. "use strict"; module.exports = { up: (queryInterface, Sequelize) => { queryInterface.changeColumn("Posts", "content", { type: DataTypes.TEXT, allowNull: false, defaultValue: "" }); }, down: (queryInterface, Sequelize) => { /* Add reverting commands here. Return a promise to correctly handle asynchronicity. Example: return queryInterface.dropTable('users'); */ } }; 명령프로세서에서 실행해주면 다음과 같이 나옵니다. 강의와 똑같은 환경과 비슷한 코드를 작성했는데 왜 에러가 나는걸까요??.. postForm.js import React, { useCallback, useState, useEffect } from "react"; import styled from "styled-components"; import Link from "next/link"; import { useSelector, useDispatch } from "react-redux"; import { media } from "../components/StyleUtils"; import { ADD_POST_REQUEST } from "../reducers/post"; const postForm = () => { const dispatch = useDispatch(); const [titleText, setTitleText] = useState(); const [text, setText] = useState(); const { imagePaths, isAddingPost, postAdded } = useSelector( state => state.post ); const onSubmitForm = useCallback( e => { e.preventDefault(); if (!titleText || !titleText.trim()) { return alert("제목을 작성하세요."); } if (!text || !text.trim()) { return alert("게시글을 작성하세요."); } dispatch({ type: ADD_POST_REQUEST, data: { title: titleText.trim(), content: text.trim() } }); }, [titleText, text] ); const onChangeTitleText = useCallback(e => { setTitleText(e.target.value); }, []); const onChangeText = useCallback(e => { setText(e.target.value); }, []); return ( <Container> <PageTitle>게시글 작성</PageTitle> <Form onSubmit={onSubmitForm} enctype="multipart/form-data"> <Label htmlFor="title">제목</Label> <Title id="title" placeholder="제목을 입력해주세요" value={titleText} onChange={onChangeTitleText} /> <Label htmlFor="content">내용</Label> <Content id="content" placeholder="내용을 입력해주세요" value={text} onChange={onChangeText} /> <ButtonBox> <Button type="primary" htmlType="submit" style={{ marginRight: 10 }}> 작성하기 </Button> <Link href="/board"> <a> <ButtonSecond>목록으로</ButtonSecond> </a> </Link> </ButtonBox> </Form> </Container> ); }; export default postForm; models => post module.exports = (sequelize, DataTypes) => { const Post = sequelize.define( "Post", // 테이블명은 posts { title: { type: DataTypes.STRING(20), allowNull: false } }, { views: { type: DataTypes.INTEGER, allowNull: false, defaultValue: 0 } }, { content: { type: DataTypes.TEXT, // 매우 긴 글 allowNull: false, defaultValue: "" } }, { charset: "utf8mb4", // 한글+이모티콘 collate: "utf8mb4_general_ci" } ); Post.associate = db => { db.Post.belongsTo(db.User); // 테이블에 UserId 컬럼이 생겨요 db.Post.hasMany(db.Comment); db.Post.hasMany(db.Image); db.Post.belongsToMany(db.User, { through: "Like", as: "Likers" }); }; return Post; }; routes=>post.js const express = require("express"); const db = require("../models"); const router = express.Router(); router.post("/", async (req, res, next) => { try { const newPost = await db.Post.create({ title: req.body.title, content: req.body.content, UserId: req.user.id }); return res.json(newPost); } catch (e) { console.error(e); next(e); } }); router.post("/images", (req, res) => {}); router.get("/:id/comments", async (req, res, next) => {}); module.exports = router; .
- 미해결React로 NodeBird SNS 만들기
회원가입폼에서 입력 후 ㅠㅠ 버튼을눌러도 콘솔 결과가 안보여요
안녕하세요 화면도 잘 나오고 딱히 ㅠㅠ 에러는보이지 않습니다만폼 내용 입력후 란을 눌러도 console.log의 결과가 보이질않고 버튼 눌러도반응이 없는 것 같은데 ㅠㅠ 어느부분이 잘못된 걸까용 ㅠㅠ https://github.com/minch1025/Node_bird_mincho/tree/master/front현재 signup.js부분이미궁입니다 ㅠㅠ
- 미해결React로 NodeBird SNS 만들기
immer로 줄일 때
index 찾아서 splice하는 방식 말고 그냥 concat 한다음에 draft 값 자체를 다시 바꿔주는 방식 그대로 해도 되나요? 예시) draft.followingList = draft.followerList.filter(v => v.id !== action.data)
- 미해결React로 NodeBird SNS 만들기
선생님 시퀄라이즈 마이그레이션 질문있습니다.
post 모델에 title을 처음에 마이그레이션을 이용해서 추가해줬는데요, 추가는 잘되었습니다. 그런다음 조회수(views)를 추가해주고싶어서 추가해줬는데, "마이그레이션이 실행되지 않았으며 데이터베이스 스키마가 이미 최신 상태입니다." 라는 문구가나오고 워크벤치를 확인해보면 views는 추가가 안되어있습니다. "use strict"; module.exports = { up: function(queryInterface, Sequelize) { return [ queryInterface.addColumn("Posts", "title", { type: Sequelize.STRING }), queryInterface.addColumn("Posts", "views", { type: DataTypes.INTEGER, defaultValue: 0 }) ]; }, down: (queryInterface, Sequelize) => { /* Add reverting commands here. Return a promise to correctly handle asynchronicity. Example: return queryInterface.dropTable('users'); */ } }; 위에는 제가 작성한 코드인데.. down에서 마이그레이션을 되돌린후에 다시 up을 해줘야할까요?
- 해결됨React로 NodeBird SNS 만들기
antd에서 Calendar를 적용하고 싶은데
이렇게 페이지에는 나와있어서 import { Alert, Calendar} from 'antd'; import moment from 'moment'; const App = () => { const { first, setFirstState } = useState(moment('2020-03-08')); const { second, setSecondState } = useState(moment('2020-03-08')); const onSelect = useCallback((e)=> { setFirstState(e); setSecondState(e) }); const onPanelChange = useCallback((e) => { setFirstState(e); }, []); const { value } = first || {}; const { selectedValue } = second || {}; return( <Calendar onSelect={onSelect.bind} onPanelChange={onPanelChange} value={value}/> ); }; 이렇게 바꿨는데 first가 계속 undefined로 나오더라구요 onSelect도 bind없이 하면 setFirstState is not a function이라고 떠서 찾아보니깐 bbind를 붙이고 해서 붙였는데 에러가 계속 떠서 혹시 어떻게 적용해야되나요..?
- 미해결React로 NodeBird SNS 만들기
강의를 보다 궁금해서 물어봅니다. react 에서 로그인 상태를 유지 하기 위해서는 ssr을 사용하는게 효과적인가요?
강의를 보다 궁금해서 물어봅니다. react 에서 로그인 상태를 유지 하기 위해서는 ssr을 사용하는게 효과적인가요? 다른 사이트를 찾아보니 document.cookie에 직접 넣어서 로그인 상태를 유지하기도 하던데 어느쪽이 실제 개발에서 로그인 유지를 위해 많이 쓰는지 궁금해서 올립니다. 답변 기다리겠습니다 감사합니다.
- 미해결React로 NodeBird SNS 만들기
dispatch의 순서에 영향을 받는 경우 처리에 대한 문의드립니다.
state.user.me에 데이터가 없는경우 0으로 보내고 api에서 req.params가 0 인경우 로그인한 유저 데이터가 내려오는걸로 처리하셨는데요.. 말씀 하신 '꼼수'를 사용하지 않는 경우(dispatch의 순서에 영향을 받는 경우) 어떻게 해야 할지 문의 드립니다.
- 미해결React로 NodeBird SNS 만들기
선생님 코드 질문있습니다.
아직 완강은 안했고 현재 강의 진도 나간대까지 혼자서 미니플젝하고있습니다. 그러던중 코드를 참고하던중에 잘 생각이안나는 부분이있어서 코드를 가져왔습니다. function loadUserAPI(userId) { // 서버에 요청을 보내는 부분 return axios.get(userId ? `/user/${userId}` : "/user/", { withCredentials: true }); } function* loadUser(action) { try { const result = yield call(loadUserAPI, action.data); yield put({ // put은 dispatch랑 동일 type: LOAD_USER_SUCCESS, data: result.data, me: !action.data // action.data는 현재 UserId인데, UserId가 없으면 내 정보를 표시해준다는 뜻임 }); } catch (e) { // loginAPI실패 yield put({ type: LOAD_USER_FAILURE, error: e }); } } function* watchLoadUser() { yield takeEvery(LOAD_USER_REQUEST, loadUser); } 바로 위의 코드인데요, 어떨때 쓰일까요? 1. function loadUserAPI(userId) {} loadUserAPI(userId){} 코드에서 userId는 action의 data를 인수로 받는데.. 여기서 action의 리듀스를 보면 ...state라고만 되있던데, 그러면 앞에서 me에 user정보가 들어와있으니 이거를 활용하는걸까요?? 2. me: !action.data // action.data는 현재 UserId인데, UserId가 없으면 내 정보를 표시해준다는 뜻임 이 부분도 모르겠습니다. 제가 코드주석을 달긴했는데 후우.... 멍청..ㅠㅠ UserId는 백엔드폴더-> 모듈 -> user에 있는 user.js에있는 userId를 뜻하는 걸까요? action.data 앞에 ! 를 붙였다는건 정반대라는건데.. 이 의미를 잘 모르겠습니다. 왜 붙이셨을까요??... 저렇게 코드가 되면 me에는 어떤 정보가 들어오게되나요? 3. 3번 질문은 제 개인적인 질문인데요, 선생님 강의를 따라오면서 제 블로그에 코드 및 강의 내용 정리를 제가 너무 잘 해오다보니 현재 미니프로젝트를 하면서 제 블로그에있는 코드를 거의 복붙으로 해결해왔고 몇몇코드만 수정하는 식으로 작업했습니다. ( 제 미니플젝은 엔티디 안쓰고 styled-components로 제가 직접 스티일링하면서 하고있습니다.) 이렇게 복붙으로 작업을 진행했지만 그래도 기타 에러들은 발생했고 이를 해결하는데에도 적지않은 시간이 걸렸습니다. 강의에서 발생한 에러보다는 약과였습니다 아마 강의에서 발생했던 에러들을 제가 블로그에 상세히 적어놓아서 큰 에러들을 피해갈수있었던거 같습니다. 다시 본론으로 들어가서 자잘한 에러들을 검색과 전체적인 코드를 보며 고쳐가면서 뭔가 뿌듯하고 자신감을 얻었고, 배웠던 지식들을 다시금 되새김질할 수 있어서 좋았습니다만, 제가 생각했던 개발자와는 거리가 먼거같아 불안합니다. 저도 선생님처럼 맨땅에 하나하나 코드를 적어내려가고 잘 생각이 안나는 부분만 검색으로 해결하고싶은데, 현재 저는 선생님의 코드 구조들을 그냥 싹다 복붙했고, 몇몇만 수정해서 사용하는 수준밖에 안됩니다. 지금은 이렇게 해도 괜찮겠지..라고 안일한 생각을 약간은 갖고있지만 응용해야하는 심화문제를 만났을때 엄청난 위기로 작용할것같아서 걱정됩니다..ㅠㅠ 이런 저에게 한말씀 조언 부탁드립니다.. 선생님도 처음엔 저처럼 다 카피했었나요? 강의 중간에 샘은 프리뛸때 모르는 의뢰가 들어와도 일단 ㅇㅋ하고 문서보면서 만드신다고 들었는데.. 대단하세요..
- 미해결React로 NodeBird SNS 만들기
제로초님~
제로초님 혹시 리액트 hook으로 구글 맵 만들고 있는데 저기서 보면은 구글이라고 props로 google를 받던데 저 프롭스가 어디서 받아지는건지를 잘 모르겠어서요 ㅠ.ㅠ node.js에서 다 만들고 이제 리액트로 만들어 보려고 하는데 저 google이 어디서 나오는지 모르겠더라구여 ㅠㅠ 고차 컴포넌트로 하면서 구글이라는 props가 생기는 건지 .... 제로초 님이라면 아실 것 같아 질문 남깁니다
- 해결됨React로 NodeBird SNS 만들기
workbench 연결 실패 질문입니다.
1. 터미널로 mysql에 로그인 후, table 값 확인하면 정상적으로 동작됨을 확인했습니다. 2. workbench로 보고자 해서, 연결을 시도했는데, 아래와 같은 에러가 나옵니다. 3. 구글 검색을 해도 해결 방법을 잘 모르겠어서, 답답한 마음에 제로초님께 여쭤봅니다.
- 미해결React로 NodeBird SNS 만들기
key에 사용하신 +는 뭔가요?
오타인줄 알았는데.... +post.createdAt에 +는 뭘 의미하는건가요?
- 미해결React로 NodeBird SNS 만들기
해시태그
content 에 해시 태그를 넣지 않고 따로 해시태그 입력란을 만들었습니다. model: db.Hashtag, where: { name: decodeURIComponent(req.params.tag) }, 쿼리로 전달된 해시태그만 가져오게 되는데, 전 포스트에 해당되는 모든 해시태그의 name을 가져 오고 싶습니다. 따로 포스트에 해당하는 해시태그를 찾는 함수를 하나더 작성해야되나요?