inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

게시글 좋아요 부분 강의에서 하트색이 바로 변하지 않습니다

미해결

[리뉴얼] React로 NodeBird SNS 만들기

에러는 없고 데이터에서도 like하고 unlike가 잘되는건 확인했는데 화면에서는 새로고침 해야지만 바뀌네요 그리고 좋아요하고 다시 눌러서 취소 할려는데 취소가 안되고 계속 중복으로 좋아요가 됩니다 const express = require("express"); const { Post, Image, Comment, User } = require("../models"); const { isLoggedIn } = require("./middlewares"); const router = express.Router(); router.post("/", isLoggedIn, async (req, res, next) => { try { const post = await Post.create({ content: req.body.content, userId: req.user.id, }); 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); } }); router.post("/:postId/comment", isLoggedIn, async (req, res, next) => { try { const post = await Post.findOne({ where: { id: req.params.postId }, }); if (!post) { return res.status(403).send("존재하지 않는 게시글입니다"); //return을 붙여줘야지 send하고 밑에 json이 동시에 실행안됨 } const comment = await Comment.create({ content: req.body.content, PostId: req.params.postId, userId: req.user.id, }); const fullComment = await Comment.findOne({ where: { id: comment.id }, include: [ { model: User, attributes: ["id", "nickname"], }, ], }); res.status(201).json(fullComment); } catch (error) { console.error(error); next(error); } }); router.patch("/:postId/like", isLoggedIn, async (req, res, next) => { try { const post = await Post.findOne({ where: { id: req.params.postId }, }); if (!post) { return res.status(403).send("게시글이 존제하지 않습니다"); } await post.addLikers(req.user.id); res.json({ PostId: post.id, userID: req.user.id }); } catch (error) { console.error(error); next(error); } }); router.delete("/:postId/like", isLoggedIn, async (req, res, next) => { try { const post = await Post.findOne({ where: { id: req.params.postId }, }); if (!post) { return res.status(403).send("게시글이 존제하지 않습니다"); } await post.removeLikers(req.user.id); res.json({ PostId: post.id, userID: req.user.id }); } catch (error) { console.error(error); next(error); } }); router.delete("/", (req, res) => { res.json({}); }); module.exports = router; const express = require("express"); const { Post, Image, User, Comment } = require("../models"); const router = express.Router(); router.get("/", async (req, res, next) => { try { const posts = await Post.findAll({ limit: 10, order: [ ["createdAt", "DESC"], [Comment, "createdAt", "DESC"], ], //옵션 = ASC: 오름차순 include: [ { model: User, attributes: ["id", "nickname"], //아이디 ,닉네임만 가져오기 }, { model: Image, }, { model: Comment, include: [ { model: User, attributes: ["id", "nickname"], }, ], }, { model: User, // 좋아요 누른 사람 as: "Likers", attributes: ["id"], }, ], }); res.status(200).json(posts); } catch (error) { console.error(error); next(error); } }); module.exports = router; import { Card, Button, Avatar, Popover, List, Comment } from "antd"; import { RetweetOutlined, HeartOutlined, MessageOutlined, HeartTwoTone, EllipsisOutlined, } from "@ant-design/icons"; import { useDispatch, useSelector } from "react-redux"; import PropTypes from "prop-types"; import PostImages from "./PostImages"; import { useCallback, useEffect, useState } from "react"; import CommentForm from "./CommentForm"; import PostCardContent from "./PostCardContent"; import FollowButton from "./FollowButton"; import { REMOVE_POST_REQUEST, LIKE_POST_REQUEST, UNLIKE_POST_REQUEST, } from "../reducers/post"; const PostCard = ({ post }) => { const dispatch = useDispatch(); const { removePostLoading } = useSelector((state) => state.post); const [commentFormOpened, setCommentFormOpened] = useState(false); const id = useSelector((state) => state.user.me?.id); const onLike = useCallback(() => { if (!id) { return alert("로그인이 필요합니다."); } dispatch({ type: LIKE_POST_REQUEST, data: post.id, }); }, [id]); const onUnLike = useCallback(() => { if (!id) { return alert("로그인이 필요합니다."); } dispatch({ type: UNLIKE_POST_REQUEST, data: post.id, }); }, [id]); const onToggleComment = useCallback(() => { setCommentFormOpened((prev) => !prev); }, []); const onRemovePost = useCallback(() => { dispatch({ type: REMOVE_POST_REQUEST, data: post.id, }); }, []); const liked = post.Likers.find((v) => v.id === id); console.log("@@@", liked); return ( <div style={{ marginBottom: 10 }}> <Card cover={post.Images[0] && <PostImages images={post.Images} />} actions={[ <RetweetOutlined key="retweet" />, liked ? ( <HeartTwoTone twoToneColor="#eb2f96" key="heart" onClick={onUnLike} /> ) : ( <HeartOutlined key="heart" onClick={onLike} /> ), <MessageOutlined key="message" onClick={onToggleComment} />, <Popover key="more" content={ <Button.Group> {id && post.user?.id === id ? ( <> <Button>수정</Button> <Button type="danger" onClick={onRemovePost} loading={removePostLoading} > 삭제 </Button> </> ) : ( <Button>신고</Button> )} </Button.Group> } > <EllipsisOutlined /> </Popover>, ]} extra={id && <FollowButton post={post} />} > <Card.Meta avatar={<Avatar>{post.user?.nickname[0]}</Avatar>} title={post.user?.nickname} description={<PostCardContent postData={post.content} />} /> </Card> {commentFormOpened && ( <div> <CommentForm post={post} /> <List header={`${post.Comments.length}개의 댓글`} itemLayout="horizontal" dataSource={post.Comments} renderItem={(item) => ( <li> <Comment author={item.user?.nickname} avatar={<Avatar>{item.user?.nickname[0]}</Avatar>} content={item.content} /> </li> )} /> </div> )} </div> ); }; PostCard.propTypes = { post: PropTypes.shape({ id: PropTypes.number, user: PropTypes.object, content: PropTypes.string, createdAt: PropTypes.string, Comment: PropTypes.arrayOf(PropTypes.object), Images: PropTypes.arrayOf(PropTypes.object), Likers: PropTypes.arrayOf(PropTypes.object), }).isRequired, }; export default PostCard;

  • react
  • redux
  • node.js
  • express
  • next.js
장산 댓글 1 좋아요 0 조회수 566

join과 join fetch 의 차이 ..

미해결

실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화

OrderQueryRepository 에 findAllByDto_flat 보면 다 join 으로 되어있는데 join과 join fetch (페치 조인)의 차이점은 뭔가요 ..? join도 lazy 로 되어있는거 한번에 끌고오는 건 비슷한 거 같은데 .. ㅜ

  • java
  • spring
  • spring-boot
  • jpa
김김 댓글 1 좋아요 0 조회수 656

댓글을 달면 500에러가 뜹니다

미해결

[리뉴얼] React로 NodeBird SNS 만들기

로그인 후 게시물에 댓글을 달면 500에러가 뜨면서 실패합니다 ㅠㅠ 백엔드에는 comment.comment 없다고 에러 뜨는거같은데 어디가 문제인지 잘모르겠습니다 지금까지 해본건 오타 찾아보고 대소문자를 바꿔보고 했는데도 안되서 결국에 질문하네요 ㅠㅠ const express = require("express"); const { Post, Image, Comment, User } = require("../models"); const { isLoggedIn } = require("./middlewares"); const router = express.Router(); router.post("/", isLoggedIn, async (req, res, next) => { try { const post = await Post.create({ content: req.body.content, userId: req.user.id, }); 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); } }); router.post("/:postId/comment", isLoggedIn, async (req, res, next) => { try { const post = await Post.findOne({ where: { id: req.params.postId }, }); if (!post) { return res.status(403).send("존재하지 않는 게시글입니다"); //return을 붙여줘야지 send하고 밑에 json이 동시에 실행안됨 } const comment = await Comment.create({ content: req.body.content, PostId: req.params.postId, UserId: req.user.id, }); const fullComment = await Comment.findOne({ where: { id: comment.id }, include: [ { model: User, attributes: ["id", "nickname"], }, ], }); res.status(201).json(fullComment); } catch (error) { console.error(error); next(error); } }); router.delete("/", (req, res) => { res.json({}); }); module.exports = router;

  • react
  • redux
  • node.js
  • express
  • next.js
장산 댓글 1 좋아요 0 조회수 365

강의를 듣다가 export default function () 관련 궁금점이 있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 멘토님. 항상 강의 잘 보고 있습니다. 예전부터 문의드리려다가 자꾸 잊어먹던게 있었는데 이제서야 질문드립니다. export default function aaa() { const bbb = () => { ... } ... } 위와 같이 강의를 들을 때 마다 왜 컴포넌트 부분의 최초 함수 선언 부분만 화살표 함수가 아닌 일반 함수 선언 방식으로 하시는지, 특별한 이유가 있는 것인지 궁금합니다. 감사합니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
FRONTEER 댓글 1 좋아요 0 조회수 496

9분 05초 author이랑 isbn

미해결

실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화

author이랑 isbn이 null로 나와있는데 싱글테이블에서 Album이랑 Movie에 관련된 컬럼은 안나오고 딱 Book이랑만 관련된 author이랑 isbn 만 null로 표시됐는데 이건 JPA가 Book인 걸 알아서 그것만 표시해주는건가요 ?? 어떻게 author이랑 isbn만 표시해주게 되는건지 궁금합니다 ..

  • java
  • spring
  • spring-boot
  • jpa
김김 댓글 2 좋아요 0 조회수 530

useMemo 질문이요

미해결

[리뉴얼] React로 NodeBird SNS 만들기

const TextAreaStyle = { resize: 'none', height: 120, marginBotton: 5, }; function EditPostCard() { return ( <> <TextArea rows={4} style={TextAreaStyle} /> <Space wrap> <Button type="primary">수정</Button> <Button type="primary" danger>취소</Button> </Space> </> ); } export default EditPostCard; 컴포넌트 밖에서 스타일객체를 선언한 경우 function EditPostCard() { const TextAreaStyle = useMemo(() => ({ resize: 'none', height: 120, marginBotton: 5, })); return ( <> <TextArea rows={4} style={TextAreaStyle} /> <Space wrap> <Button type="primary">수정</Button> <Button type="primary" danger>취소</Button> </Space> </> ); } 컴포넌트 안에서 useMemo를 사용한 경우 리렌더링때문에 스타일을 따로 선언해주었는데요. 두 가지 경우가 큰 차이가 있나요? useMemo안 쓰고 컴포넌트 밖에다 선언해줘도 상관없나요?

  • react
  • redux
  • node.js
  • express
  • next.js
dsfsdf 댓글 1 좋아요 0 조회수 276

글작성시 userId가 데이터에 저장을 안해서 게시글을 가져올려고 해도 안가져와집니다.

미해결

[리뉴얼] React로 NodeBird SNS 만들기

1. 뭔가 프론트는 문제가 없는거같은데 백에서는 어디에서 문제가 있는지 잘모르겠습니다 ㅠㅠ 에러는 없습니다 3. const express = require("express"); const { Post, Image, Comment, User } = require("../models"); const { isLoggedIn } = require("./middlewares"); const router = express.Router(); router.post("/", isLoggedIn, async (req, res) => { try { const post = await Post.create({ content: req.body.content, UserId: req.user.id, }); 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); } }); router.post("/:postId/comment", isLoggedIn, async (req, res) => { try { const post = await Post.findOne({ where: { id: req.params.postId }, }); if (!post) { return res.status(403).send("존재하지 않는 게시글입니다"); //return을 붙여줘야지 send하고 밑에 json이 동시에 실행안됨 } const comment = await Comment.create({ content: req.body.content, PostId: req.params.postId, UserId: req.user.id, }); res.status(201).json(comment); } catch (error) { console.error(error); next(error); } }); router.delete("/", (req, res) => { res.json({}); }); module.exports = router; import { Form, Input, Button } from "antd"; import { useCallback, useRef, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { ADD_POST_REQUEST } from "../reducers/post"; import useInput from "./hooks/useInput"; const PostForm = () => { const { imagePaths, addPostDone, addPostLoading } = useSelector( (state) => state.post ); const [text, setText] = useState(""); const dispatch = useDispatch(); const imageInput = useRef(); useEffect(() => { if (addPostDone) { setText(""); } }, [addPostDone]); const onSubmitForm = useCallback(() => { dispatch({ type: ADD_POST_REQUEST, data: text, }); }, [text]); const onChangeText = useCallback((e) => { setText(e.target.value); }, []); const onClickImageUpload = useCallback(() => { imageInput.current.click(); }, [imageInput.current]); return ( <Form style={{ margin: "10px 0 20px" }} encType="multipart/form-data" onFinish={onSubmitForm} > <Input.TextArea value={text} onChange={onChangeText} maxLength={140} placeholder="어떤 일이 생겼나요" /> <div> <input type="file" multiple hidden ref={imageInput} /> <Button onClick={onClickImageUpload}>이미지 업로드</Button> <Button type="primary" style={{ float: "right" }} htmlType="submit" loading={addPostLoading} > 짹쨱 </Button> </div> <div> {imagePaths.map((v) => ( <div key={v} style={{ display: "inline-block" }}> <img src={v} style={{ width: "200px" }} alt={v} /> <div> <Button>제거</Button> </div> </div> ))} </div> </Form> ); }; export default PostForm; //saga - AddPost function addPostAPI(data) { return axios.post("/post", { content: data }); } function* addPost(action) { try { const result = yield call(addPostAPI, action.data); yield put({ //put : dispatch type: ADD_POST_SUCCESS, data: result.data, }); yield put({ type: ADD_POST_TO_ME, data: result.data.id, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, data: err.response.data, }); } } // reducer case ADD_POST_REQUEST: draft.addPostLoading = true; draft.addPostDone = false; draft.addPostError = null; break; case ADD_POST_SUCCESS: draft.addPostLoading = false; draft.addPostDone = true; draft.mainPosts.unshift(action.data); break; case ADD_POST_FAILURE: draft.addPostLoading = false; draft.addPostError = action.error; break;

  • react
  • redux
  • node.js
  • express
  • next.js
장산 댓글 1 좋아요 0 조회수 438

수강 범위에 대한 질문입니다 ㅠㅠㅠ

미해결

나도코딩의 자바 기본편 - 풀코스 (20시간)

안녕하세요 나도코딩님 오늘도 열심히 공부중인 학생입니다 ㅠㅠㅠ 복수전공 과목 중 자바로 배우는 자료구조를 수강중인데 사전에 자바 공부도 없이 듣는 수업이라 도통 무슨 소린지 이해가 가질 않네요.. 그래서 현재 고급편 결제하고 섹션9 추상클래스 까지 들은 상태인데 뒤로 갈수록 내용이 어려워져서 복습한다고 속도가 너무 늦어지는 상태에요.. 자료구조 내용을 이해하려면 일단 어떤 파트를 필수적으로 빨리 들어야 하고 어떤 파트는 빼도 되는지 알려주실 수 있을까요??ㅜ 답변 주시는데 도움이 될 지 모르겠지만 교재 한 챕터에 {자바 데이터 타입(기본타입, 참조타입), 제어문(조건문,반복문), 메소드(호출문,메인), try문} 이렇게만 존재하긴 하는데 중간중간 책에는 없는 추상클래스, 입력문 같은 파트도 보여서 감이 안잡히네요..

  • java
  • 객체지향
댓글 1 좋아요 1 조회수 410

ec2 에러

미해결

[리뉴얼] React로 NodeBird SNS 만들기

프론트서버를 ec2 에서 npm start를 하면 자꾸 client_loop: send disconnect: connection reset by peer 이라는 에러가 나오는데 해결방법이 있을까요 구글링도 해봤지만 해답을 찾지 못했습니다

  • react
  • redux
  • node.js
  • express
  • next.js
bs44108 댓글 1 좋아요 0 조회수 263

인터페이스 변수

미해결

나도코딩의 자바 기본편 - 풀코스 (20시간)

안녕하세요~ 강사님, 인터페이스(후반전) 강의를 듣고 있는데, 왜 인터페이스 변수를 만드는지 이해가 가지 않습니다. 수업 내용에서 FactoryCam이 인터페이스 Detectable과 Reportable을 구현하여 인터페이스에 있는 메소드를 FacstoryCam에서 구현해야한다는 것은 이해했습니다. 그리고 다른 클래스의 detect 메소드와 report 메소드를 호출하는것이라서 public void detect(){detecter.detect();} 이고, detecter은 객체이잖아요. 여기서 막힙니다. 이 객체랑 인터페이스 변수랑 무슨 상관인지? FactoryCam 의 인터페이스 변수를 생성해서 변수에 값 저장하는 걸로 하면 되지 않는지? 왜 인터페이스 변수를 선언해서 거기다가 값을 저장하는지, 잘 이해가 안 됩니다.... ㅠㅠ 그리고 추가로, 인터페이스로 다중 상속이 가능하다고 하셨는데, 수업 내용 중 어떤 것이 다중 상속이 되고 있는지 파악하기가 어렵습니다. 혹시, 다른 클래스의 메소드를 호출할 수 있는 부분때문에 다중 상속이 가능한 것인가요? 후반부로 갈수록 어렵네요 ㅠㅠ

  • java
  • 객체지향
vlrmffpt33 댓글 1 좋아요 0 조회수 496

OAuth 관련 질문이 있습니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

안녕하세요 멘토님, 항상 틈틈히 강의 잘 보고 있습니다. 질문부터 말씀드리자면, OAuth로 로그인 기능을 만들면 백엔드에서 별도로 JWT관련 인증, 발급, 재발급 등의 로직을 개발해주지 않아도 되는지 궁금해서 질문을 드리게 되었습니다. 제 상황을 말씀드리자면 토이프로젝트 개발을 슬슬 시작하려는데요, 시작하기에 앞서 백엔드 서버부터 먼저 만들고 있었습니다. 해당 강의에서 제공해주는 백엔드 서버의 중고마켓이나 게시판 API를 활용한 것이 아닌, 다른 주제로 개인 토이프로젝트를 새로 프론트부터 백엔드단까지 직접 만들어보려고 합니다. 기존 웹 개발 경력이 조금 있어서인지 자바나 노드 백엔드 구축 등을 배워서 API를 개발하는 것은 할만했습니다. 하지만 백엔드에서 딱 하나, JWT 관련 로직을 추가하는 부분이 제 기준으로 너무 어렵고 벽이더라구요. (현업에서도 JWT 경험이 없습니다) 그래서 시간이 너무 걸려서 보류해두었다가 다시 강의를 듣고 있었는데 이번 강의에서 OAuth 관련 내용을 보게 되었습니다. 더 찾아보니까 인증, 발급과 같은 각종 로그인 관련 기능들을 해당 OAuth 서버에서 제공해준다고 되어있더라구요. 그래서 해당 부분들을 활용하면 기존의 JWT 발급이나 인증 관련 로직을 백엔드에서 직접 구축해야하는 부분을 스킵하고 진행할 수 있지 않을까 궁금해져서 질문 글을 올리게 되었습니다. 강의 내용의 OAuth 부분을 보고 궁금해져서 질문을 올려야 겠다고 생각했는데 어쩌다 보니 백엔드 느낌의 질문 글이 되어 죄송합니다. 하지만 멘토님이 백엔드쪽 강의도 하시는걸로 알고 있어 혹시나 질문을 드려봅니다. 감사합니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
FRONTEER 댓글 1 좋아요 0 조회수 583

prevState를 사용하여 리팩토링

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

import { useState } from "react"; import { Modal } from "antd"; import { Address } from "react-daum-postcode/lib/loadPostcode"; import DaumPostcodeEmbed from "react-daum-postcode"; const ModalCustomPage = () => { const [isModalOpen, setIsModalOpen] = useState(false); const onToggleModal = () => { setIsModalOpen((prev) => !prev); }; const handleComplete = (address: Address) => { console.log("실행되었습니다."); console.log(address); onToggleModal(); }; return ( <> {isModalOpen && ( <Modal title="모달 제목" open={true} onOk={onToggleModal} onCancel={onToggleModal} > <DaumPostcodeEmbed onComplete={handleComplete} /> </Modal> )} </> ); }; export default ModalCustomPage; 안녕하세요, 한 가지 궁금증이 들어 질문합니다. onToggleModal 함수를 보면 prevState를 사용해서 isOpenModal 값을 바꾸는데 굳이 그럴 필요가 있을까? 라는 생각이 들어서요. const onToggleModal = () => { setIsModalOpen((!isModalOpen); }; onToggleModal 안에서 여러개의 setIsModalOpen이 실행되는 것이 아니기 때문에 그냥 이렇게 코드를 작성해도 함수가 끝나면 isOpenModal 값이 바뀌고 리렌더링되어 버그 없이 잘 실행될 것 같은데 혹시 다른 이유가 있나요? 아님 setState 사용할때 prevState를 사용하는 것이 암묵적인 원칙인가요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
박혜주 댓글 1 좋아요 0 조회수 1199

새로고침 시 로그인 문제 + mui ssr 문제

미해결

[리뉴얼] React로 NodeBird SNS 만들기

안녕하세요 제로초님. getServerSideProp를 적용한 이후 새로고침 시 로그인 문제가 발생합니다. 로그인을 하고 -> 1번째 새로 고침 시 로그인이 풀립니다. 하지만 1번째 새로 고침 이후, 끈기를 가지고 계속해서 새로고침을 하다보면 로그인 상태로 다시 돌아옵니다. 보통 3번째 정도 새로고침을 하면 로그인이 돌아옵니다.. 이거는 됐다가 안됐다가 하는 문제이기 때문에 제 코드 문제는 아닌 거 같습니다.. 새로고침을 n번째 시도 했을 때 로그인이 불규칙 하게 돌아옵니다. 그리고 mui ssr 문제도 있는데요. styled-components는 _document와 babelrc? 를 적용하지 않아도 잘 적용되는 반면에, mui ssr은 https://github.com/mui/material-ui/issues/33072 여기에서 시키는 대로 해봐도 적용이 안 되네요 1번째 사진은 새로고침 해서 ssr이 적용된 스타일 입니다. 2번째 사진은 /profile 페이지 갔다가, 왼쪽 상단 mui 눌러서 홈페이지로 이동 했을때 csr이 적용된 스타일 (= 원래 디자인) 입니다. 혹시 짚이는 게 있으시면 답변 부탁드릴게요.. 감사합니다.

  • react
  • redux
  • node.js
  • express
  • next.js
신영 유 댓글 1 좋아요 0 조회수 629

graphql의 DOCS가 강의와 다른 것 같아요.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

섹션 6 포트폴리오 리뷰 영상 보면서 따라하고 있는데 아무래도 createBoard의 파라미터랑 리턴값이 강의와 다른 것 같아서 오류가 발생하는 것 같은데 어떻게 해야 같은 API를 사용할 수 있을까요?

  • react
  • node.js
  • seo
  • graphql
  • next.js
준밍 댓글 1 좋아요 0 조회수 340

강사님 좋은강의 만들어 주셔서 감사합니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

하루에 한강의씩 들었더니 어느덧 배포까지 완강 하였네요. 알차고 좋은강의 만들어 주셔서 감사합니다.

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
rhkdtjd_12 댓글 1 좋아요 1 조회수 374

docker-compose up으로 POSTGRES_USER나 POSTGRES_PASSWORD가 없다는 오류가 뜨는분들 참고

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

ls -a 명령어를 사용하였을때, .git .gitignore client docker-compose.yml server 이렇게 밖에 구성이 없을경우, 저같은 경우에도 .gitignore에 .env파일을 추가 해두어서 git에 없습니다. .env파일에는 DB_USER_ID= DB_USER_PASSWORD= 데이터베이스 아이디와 비밀번호가 입력되어 있는데 .env 환경변수 파일이 없어서 docker-compose up 명령어를 실행 했을때 문제가 발생합니다. 이를 해결하려면 간단하게 .env파일을 만들어주면 됩니다. cd명령어로 docker-compose.yml파일과 같은경로에 가주신 다음에 .env 파일 생성 명령어 $ sudo vim .env 내용을 작성하려면 키보드에서 Insert키 눌려야 됩니다. 디비유저 아이디와 패스워드를 작성해주신다음에 esc키 누른후 wq! 명령어로 저장해주시면 끝입니다. 잘 저장 되었는지 확인 하는 방법은 다시 $ sudo vim .env 명령어를 치시면 잘 저장되어 있는지 확인 가능합니다. 이후에 docker-compose up 사용하시면 잘됩니다. 요약 docker-compose.yml파일과 같은경로로 이동 $ sudo vim .env 명령어로 .env파일생성 vim명령어로 열려진 .env파일에 키보드에 Insert키 눌려서 작성상태로 만든뒤 DB_USER_ID= DB_USER_PASSWORD= 작성하기.(복사 붙여넣기도 됨) 꼭!! esc키 누른 후 wq!명령어 치고 엔터로 저장하기. 다시 $ sudo vim .env 명령어로 잘 저장되어 있는지 확인하고 esc + q! 저장 안하고 나오기. docker-compose up 명령어로 실행 하기

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
rhkdtjd_12 댓글 1 좋아요 4 조회수 718

강의자료 pdf에서 우분투에서 도커 다운받는 링크 복사할때

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

도커 다운받는 링크 복사 할때 공백 생겨서 필요 하신분 쓰시라고 링크 올려 두겠습니다. https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-22-04

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
rhkdtjd_12 댓글 2 좋아요 2 조회수 1162

faker가 안먹혀요 ㅠㅠ

미해결

[리뉴얼] React로 NodeBird SNS 만들기

faker를 개발자가 망쳐두고 튀었다고 듣긴했는데 그럼 몇버젼을 사용해야할까요 게시글들 보면서 보이는 버전들은 다 사용했는데 안먹혀서 ㅠㅠ 요즘에는 몇버전 사용하나요?

  • react
  • redux
  • node.js
  • express
  • next.js
장산 댓글 1 좋아요 0 조회수 541

postData.split is not a function 에러

미해결

[리뉴얼] React로 NodeBird SNS 만들기

[제로초 강좌 질문 필독 사항입니다] 질문에는 여러분에게 도움이 되는 질문과 도움이 되지 않는 질문이 있습니다. 도움이 되는 질문을 하는 방법을 알려드립니다. https://www.youtube.com/watch?v=PUKOWrOuC0c 0. 숫자 0부터 시작한 이유는 1보다 더 중요한 것이기 때문입니다. 에러가 났을 때 해결을 하는 게 중요한 게 아닙니다. 왜 여러분은 해결을 못 하고 저는 해결을 하는지, 어디서 힌트를 얻은 것이고 어떻게 해결한 건지 그걸 알아가셔야 합니다. 그렇지 못한 질문은 무의미한 질문입니다. 2. 3. case ADD_POST_TO_ME: return { ...state, me: { ...state.me, Posts: [{ id: action.data }, ...state.me.Posts], }, }; const PostCardContent = ({ postData }) => ( //#해쉬태그 <div> {postData?.split(/(#[^\s#]+)/g).map((v, i) => { if (v.match(/(#[^\s#]+)/)) { return ( <Link href={`/hashtag/${v.slice(1)}`} key={i}> <a>{v}</a> </Link> ); } return v; })} </div> ); function* addPost(action) { try { //const result = yield fork(addPostAPI, action.data); yield delay(1000); const id = shortId.generate(); yield put({ //put : dispatch type: ADD_POST_SUCCESS, data: { id, content: action.data, }, }); yield put({ type: ADD_POST_TO_ME, data: id, }); } catch (err) { yield put({ type: ADD_POST_FAILURE, data: err.response.data, }); } } 로그인하고 게시물을 아무거나 입력하고 짹짹을 누르면 에러가뜹니다 postData.split이 읽히지가 않아서 ?까지 넣어봤는데 같은오류가 나옵니다. <PostCardContent postData={post.content} /> 여기서 post.content는 콘솔로 찍어본 결과 "첫 번째 게시글 #해시태그 #jangsan"만 뜹니다 어디가 문제인지 잘모르겠습니다

  • react
  • redux
  • node.js
  • express
  • next.js
장산 댓글 1 좋아요 0 조회수 522

스프링 입문에 대하여 질문드립니다

해결됨

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 여기에 질문 내용을 남겨주세요. 안녕하십니까, 자주하는 질문 에서 학습방법을 봤는데 코드를 쭉 따라하는식 방법이 적혀있었는데, 이렇게 따라만 해도 공부가 되는게 맞을까 혹시나 하는 마음에 따로 질문을 올리게 되었습니다. 따로 국비학원 수료 없이 학교 졸업하자마자 취업했는데 백엔드 스프링을 사용한다해서 선생님 강의 커리큘럼을 따라갈려고합니다. 스프링을 배우는데 자바 기본 지식이 필요하다해서 자바의 정석 유튜브를 먼저 보고, 부족하지만 최대한 자바 기본 문법개념 같은걸 숙지한 상태에서 선생님 영상 시청하고있습니다. 선생님의 이론수업이 정말로 재밌고 스프링 입문하는데 좋은걸 알겠는데 이론설명뒤에 선생님이 치시는 코드가 무엇을 의미 해석이 안되고, 코드형식(?) 코드 구조 (문법?) 이게 정말 와닿지 않는 상태이다보니 ,영상을 보고 타이핑하니깐 공부 하는 느낌이 안들어서 걱정이 됩니다. 프로그래밍 능력, 자바기초실력이 부족해서 이런 느낌을 받는 거 같은데 회사 실무에 도움이 될까 걱정이 됩니다.처음 취직한 회사라서 최대한 적응하고 회사에 도움이 되는 개발자가 되어보고싶은데 어떠한 방식으로 공부를 해야할 지 조언이 가능할까요? (혹시 책이나 강의같은걸 추천해주시면 감사하겠습니다.)

  • java
  • spring
  • mvc
  • spring-boot
신입코딩 댓글 1 좋아요 2 조회수 1257

인기 태그

인프런 TOP Writers

주간 인기글