묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결처음 만난 리액트(React)
JSX의 장점 및 사용법 강의 영상 중 오타가 있습니다.
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 코드 중 formatUser(user)가 formatName(user)인 거 같아요.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
npm run dev 연결이 안됩니다ㅜㅜ
PS C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master>npm run dev> react-boiler-plate@1.0.0 dev> concurrently "npm run backend" "npm run start --prefix client"[0] [0] > react-boiler-plate@1.0.0 backend[0] > nodemon server/index.js[0] [1] [1] > client@0.1.0 start[1] > react-scripts start[1] [0] [nodemon] 1.19.4[0] [nodemon] to restart at any time, enter rs[0] [nodemon] watching dir(s): .[0] [nodemon] watching extensions: js,mjs,json[0] [nodemon] starting node server/index.js[0] node:internal/modules/cjs/loader:1147[0] throw err;[0] ^[0][0] Error: Cannot find module 'bcrypt'[0] Require stack:[0] - C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\server\models\User.js[0] - C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\server\routes\users.js[0] - C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\server\index.js[0] at Module._resolveFilename (node:internal/modules/cjs/loader:1144:15)[0] at Module._load (node:internal/modules/cjs/loader:985:27) [0] at Module.require (node:internal/modules/cjs/loader:1235:19) [0] at require (node:internal/modules/helpers:176:18)[0] at Object.<anonymous> (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\server\models\User.js:2:16)[0] at Module._compile (node:internal/modules/cjs/loader:1376:14) [0] at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)[0] at Module.load (node:internal/modules/cjs/loader:1207:32) [0] at Module._load (node:internal/modules/cjs/loader:1023:12) [0] at Module.require (node:internal/modules/cjs/loader:1235:19) [0] at require (node:internal/modules/helpers:176:18)[0] at Object.<anonymous> (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\server\routes\users.js:3:18)[0] at Module._compile (node:internal/modules/cjs/loader:1376:14) [0] at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)[0] at Module.load (node:internal/modules/cjs/loader:1207:32) [0] at Module._load (node:internal/modules/cjs/loader:1023:12) { [0] code: 'MODULE_NOT_FOUND',[0] requireStack: [[0] 'C:\\Users\\Samsung\\Desktop\\project\\boilerplate-mern-stack-master\\server\\models\\User.js',[0] 'C:\\Users\\Samsung\\Desktop\\project\\boilerplate-mern-stack-master\\server\\routes\\users.js',[0] 'C:\\Users\\Samsung\\Desktop\\project\\boilerplate-mern-stack-master\\server\\index.js'[0] ][0] }[0][0] Node.js v20.11.0[0] [nodemon] app crashed - waiting for file changes before starting...[1] [HPM] Proxy created: / -> http://localhost:5000[1] i 「wds」: Project is running at http://192.168.11.5/[1] i 「wds」: webpack output is served from[1] i 「wds」: Content not from webpack is served from C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\public[1] i 「wds」: 404s will fallback to /[1] Starting the development server...[1][1] Error: error:0308010C:digital envelope routines::unsupported[1] at new Hash (node:internal/crypto/hash:68:19)[1] at Object.createHash (node:crypto:138:10)[1] at module.exports (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\util\createHash.js:135:53)[1] at NormalModule._initBuildHash (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:417:16)[1] at handleParseError (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:471:10)[1] at C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:503:5[1] at C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:358:12[1] at C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:373:3 [1] at iterateNormalLoaders (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:214:10)[1] at iterateNormalLoaders (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:221:10)[1] C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\react-scripts\scripts\start.js:19[1] throw err;[1] ^[1][1] Error: error:0308010C:digital envelope routines::unsupported [1] at new Hash (node:internal/crypto/hash:68:19)[1] at Object.createHash (node:crypto:138:10)[1] at module.exports (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\util\createHash.js:135:53)[1] at NormalModule._initBuildHash (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:417:16)[1] at C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:452:10[1] at C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\webpack\lib\NormalModule.js:323:13[1] at C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:367:11 [1] at C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:233:18 [1] at context.callback (C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\loader-runner\lib\LoaderRunner.js:111:13)[1] at C:\Users\Samsung\Desktop\project\boilerplate-mern-stack-master\client\node_modules\babel-loader\lib\index.js:59:103 {[1] opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],[1] library: 'digital envelope routines',[1] reason: 'unsupported',[1] code: 'ERR_OSSL_EVP_UNSUPPORTED'[1] }[1][1] Node.js v20.11.0[1] npm run start --prefix client exited with code 1
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
예외처리 질문
안녕하십니까, 현재 섹션3까지 수강하였는데 예외처리에 대해 궁금한 점이 생겨 질문드립니다.아직 예외상황 발생시 백엔드와 프론트엔드에서 무엇을 해야할 지 잘 모르겠는데 예외가 발생했을때 백엔드에서는 어떤 정보를 넘겨줘야하나요? 강의에서처럼 상태코드와 메시지만 넘겨주면 백엔드에서 할 일은 끝인가요?마찬가지로 프론트에서도 어떻게 대처하는지 궁금합니다.
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
외래키 참조 관계에서 bulk_create는 어떻게 사용하나요?
from django.db import models class Post(models.Model): title = models.CharField(max_length=200) content = models.TextField() class Comment(models.Model): post = models.ForeignKey(Post, on_delete=models.CASCADE) content = models.TextField() import itertools from typing import Iterator, Tuple from django.core.management import BaseCommand from django.db import transaction from blog.models import Post, Comment class Command(BaseCommand): help = "test" def handle(self, *args, **options): generate_post_instances = ( Post(title=title, content=content) for title, content in self.generate_post_row() ) with transaction.atomic(): for chunks in self.get_chunks(generate_post_instances, chunk_size=1000): Post.objects.bulk_create(chunks, ignore_conflicts=True) for post_instance in Post.objects.all(): generate_comment_instance = ( Comment(post=post_instance, content=content) for content in self.generate_comment_row() ) for chunks in self.get_chunks( generate_comment_instance, chunk_size=1000 ): Comment.objects.bulk_create(chunks, ignore_conflicts=True) @classmethod def generate_post_row(cls, size: int = 1000) -> Iterator[Tuple[str, str]]: for i in range(1, size + 1): yield f"Test post {i}", f"Test content {i}" @classmethod def generate_comment_row(cls, size: int = 100) -> Iterator[str]: for i in range(1, size + 1): yield f"Test comment {i}" @classmethod def get_chunks(cls, iterable: Iterator, chunk_size: int = 100) -> Iterator: iterator = iterable if hasattr(iterable, "__next__") else iter(iterable) for first in iterator: yield itertools.chain([first], itertools.islice(iterator, chunk_size - 1)) 안녕하세요.기존 강의에서 다루시던 대용량 데이터 처리 관련 코드를 참조하여 좀 더 이해하고자 커스텀해서 예시코드를 작성하게 되었습니다.제너레이터, bulk_create 메서드에 대해서 질문이 있습니다.1. 제너레이터는 yield 한 다음 반복문을 이용해 호출합니다. 제너레이트를 호출 한다면 호출할 때 반복문이 여러개 겹치게 되는데 이때 시간복잡도는 어떻게 되는건가요?[generate_post_row 호출 > generate_post_instances 호출 > get_chunks > 호출] 이때 반복문을 많이 사용하게 되는데 어떤식으로 처리가 되는지 궁금합니다. 2. transaction.atomic() 에서 먼저 Post을 bulk_create로 생성한 뒤 해당 Post의 데이터들을 Comment 인스턴스에 넘겨주어 bulk_create를 사용하였는데. 혹시 더 나은 방법이 있을까요?
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
섹션 8 .. API서버에서 사용자 정보 추출하기(2) 질문입니다.
accessToken을 넘기는데 undefined가 떠서 컨트롤러에 오지 못하는 거 같습니다. socialcontroller 입니다. 리액트 kakaoAPI.js 입니다. accessToken을 쿼리스트링으로 잘 보내고받는 코드는 맞는거 같은데 왜 undefined가 뜨는지 모르겠습니다...
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기
npm run dev 오류
npm run dev 하면 > react-boiler-plate@1.0.0 dev> concurrently "npm run backend" "npm run start --prefix client"sh: concurrently: command not found다음과 같은 오류가 발생합니다. npm install server과, client 모두에서 진행했고gpt가 알려주는 npm install -g concurrently도 진행했고npm update 후 다시 실행해보아도 해결되지 않고 있습니다. 도와주세요 ..!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
이미지 깨짐
선생님 url 까지는 받아왔는데 왜 이미지가 깨지는지 모르겠습니다하고 이미지 url로 타고 들어가면 404 에러도 나오는데 왜 이미지를 찾지 못하는지 모르겠습니다 app.post("/api/video/thumbnail", (req, res) => { let filePath = ""; let fileDuration = ""; //비디오 정보 가져오기 ffmpeg.ffprobe(req.body.url, function (err, metadata) { if (err) { console.error("Error getting video metadata:", err); return res.json({ success: false, err }); } console.dir(metadata); console.log(metadata.format.duration); fileDuration = metadata.format.duration; //썸네일 생성 ffmpeg(req.body.url) .on("filenames", function (filenames) { console.log("Will generate" + filenames.join(", ")); console.log(filenames); filePath = "uploads/thumbnails/" + filenames[0]; console.log(filePath); }) .on("end", function () { console.log("Screenshots taken"); return res.json({ success: true, url: filePath, fileDuration: fileDuration, }); }) .on("error", function (err) { console.error("Error generating thumbnails:", err); return res.json({ success: false, err }); }) .screenshots({ count: 3, folder: "uploads/thumbnails", size: "320x240", filename: "thumbnail-%b.jpeg", });404의 원인은 잘못된 url 인걸로 아는데 한 번 봐주셨으면 감사하겠습니
-
해결됨부트캠프에서 알려주지 않는 것들 (리액트) 1편
코드 샌드박스 안되는거같습니다
코드 샌드박스들어가면 이런식으로 뜨는데 어떻게 해결하나요?
-
미해결Next + React Query로 SNS 서비스 만들기
modal에 intercept route를 사용하는 이유가 새로고침했을때를 위함인가요?
안녕하세요 선생님.수업을 듣다 궁금한게 생겨서 문의 드립니다.모달창만 열려면 intercept를 쓰지 않고 패러렐 라우트에 일반라우트 폴더를 넣어도 작동하더라구요. (beforelogin)/@modal2/i/flow/login하지만 새로고침때는 그 페이지를 찾을 수 없기에 not-found.tsx를 호출하는걸 확인했습니다.modal에 intercept route를 사용하는 이유가 새로고침했을때를 위함이라고 이해하면 될까요? 혹은 다른 추가적인 이유가 더 있는지 궁금합니다.
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
useParam() 사용 질문
학습을 하던 중 코드에 궁금중이 생겨 질문드립니다.현재 modifyPage.js를 보면 인자에 tno를 받아와 사용하고 있습니다.그리고 readPage.js에서는 useParam()을 이용해 tno 값을 받아와 사용하고있는걸 확인하고 readPage에서도 ModifyPage 에서 처럼 useParam()을 사용하지 않고 인자로 받아와 사용하는 방식으로 해보았는데 오류가 나는데 왜그런걸까요?위의 코드를이렇게 바꾸면 오류가 납니다.
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
코드보관소 코드랑 강의내용이랑 씽크가 안되있음
코드보관소 코드랑 강의내용이랑 씽크가 안되는거 단원들이 몇개 있는거 같습니다.10강,11강 보면 코드보관소 코드의 내용이 한챕터씩 밀려서 올라가 있는거 같습니다.예를 들어 실제 코드보관소 section 11의 chapter2 열어보면 10.4강 내용의 소스입니다.section 11의 chapter3을 열어보면 11.2 강의 내용 같구요.그 이전강의도 있었는데 몇강인지 기억이 안나네요..전반적으로 씽크가 안맞는게 좀 있습니다.수정 부탁드려요..
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out
nginx 부분을 따라하다가실수로 서버에서 나갔다가 다시 들어가려니까ssh: connect to host zzimzzim-front port 22: Connection timed out위와같은 에러가나면서 갑자기 들어가지지 않습니다.검색했는데도 해결되지 않아서 답답해다가이럴땐 어떤걸 참고하면 좋을지 조언 주시면 감사하겠습니다. ㅠ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
sudo certbot --nginx 에러
ubuntu@ip-172-31-37-191:~/react-nodebird/prepare/front$ sudo certbot --nginx Saving debug log to /var/log/letsencrypt/letsencrypt.log Which names would you like to activate HTTPS for? We recommend selecting either all domains, or all domains in a VirtualHost/server block. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 1: zzimzzim.com - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Select the appropriate numbers separated by commas and/or spaces, or leave input blank to select all options shown (Enter 'c' to cancel): Requesting a certificate for zzimzzim.com Certbot failed to authenticate some domains (authenticator: nginx). The Certificate Authority reported these problems: Domain: zzimzzim.com Type: connection Detail: 3.37.101.58: Fetching http://zzimzzim.com/.well-known/acme-challenge/SNUl0WTK7OKWJ-oYyHTrIFuh67ww_P11CUJXw2zWRZk: Timeout during connect (likely firewall problem) Hint: The Certificate Authority failed to verify the temporary nginx configuration changes made by Certbot. Ensure the listed domains point to this nginx server and that it is accessible from the internet. Some challenges have failed. Ask for help or search for solutions at https://community.letsencrypt.org. See the logfile /var/log/letsencrypt/letsencrypt.log or re-run Certbot with -v for more details.위와같은 에러가 발생합니다.다른 질문들을 보고 제로초님https://www.zerocho.com/category/NodeJS/post/5ef450a5701d8a001f84baeb 따라해보았는데 해결되지 않아서 여쭤봅니다.
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
Minified React error 콘솔에러 (hydrate)
안녕하세요 선생님카카오톡 공유하기 까지 듣고 화면을 테스트해보고 있는데Minified React error 이 에러가 떠서 질문드립니다. 메인화면, 상세보기에서 게시글이 있을때 나옵니다.Uncaught Error: Minified React error #418; visit https://reactjs.org/docs/error-decoder.html?invariant=418 for the full message or use the non-minified dev environment for full errors and additional helpful warnings. at lg (framework-ecc4130bc7a58a64.js:9:46457) at i (framework-ecc4130bc7a58a64.js:9:121052) at oO (framework-ecc4130bc7a58a64.js:9:99019) at framework-ecc4130bc7a58a64.js:9:98886 at oF (framework-ecc4130bc7a58a64.js:9:98893) at oS (framework-ecc4130bc7a58a64.js:9:93932) at x (framework-ecc4130bc7a58a64.js:33:1364) at MessagePort.T (framework-ecc4130bc7a58a64.js:33:1894)검색해봤더니 hydrate 쪽 이슈더라구요.혼자서 풀어보다가 잘 풀리지 않아서 여쭤봅니다.혹시 제로초님은 저런 에러가 나지 않으시는지난다면 어느 로직을 확인해야할지 조언 부탁드립니다./pages/post/[id].jsimport axios from 'axios'; import Head from 'next/head'; import { useRouter } from 'next/router'; import { useSelector } from 'react-redux'; import AppLayout from '../../components/AppLayout'; import PostCard from '../../components/PostCard'; import { loadPost } from '../../reducers/post'; import { loadMyInfo } from '../../reducers/user'; import wrapper from '../../store/configurStore'; const Post = () => { const router = useRouter(); const { id } = router.query; const { singlePost } = useSelector((state) => state.post); return ( <AppLayout> {singlePost ? ( <> <Head> <title> {singlePost?.User.nickname} 님의 글 </title> <meta name="description" content={singlePost.content} /> <meta property="og:title" content={`${singlePost.User.nickname}님의 게시글`} /> <meta property="og:description" content={singlePost.content} /> <meta property="og:image" content={ singlePost.Images[0] ? singlePost.Images[0].src : 'https://nodebird.com/favicon.ico' } /> <meta property="og:url" content={`https://nodebird.com/post/${id}`} /> </Head> <PostCard post={singlePost}>{id}번 게시글</PostCard> </> ) : ( <div>존재하지 않는 게시물입니다.</div> )} </AppLayout> ); }; export const getServerSideProps = wrapper.getServerSideProps( (store) => async ({ req, params }) => { const cookie = req ? req.headers.cookie : ''; axios.defaults.headers.Cookie = ''; // 쿠키가 브라우저에 있는경우만 넣어서 실행 // (주의, 아래 조건이 없다면 다른 사람으로 로그인 될 수도 있음) if (req && cookie) { axios.defaults.headers.Cookie = cookie; } await store.dispatch(loadMyInfo()); await store.dispatch(loadPost(params.id)); }, ); export default Post; /components/PostCard.jsimport { RetweetOutlined, HeartOutlined, HeartTwoTone, MessageOutlined, EllipsisOutlined, } from '@ant-design/icons'; import { Card, Popover, Button, Avatar, List } from 'antd'; import dayjs from 'dayjs'; import Link from 'next/link'; import PropTypes from 'prop-types'; import { useState, useCallback, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import CommentForm from './CommentForm'; import Followbutton from './FollowButton'; import PostCardContent from './PostCardContent'; import PostImages from './PostImages'; import { removePostRequestAction, likePostRequestAction, unLikePostRequestAction, retweetRequestAction, } from '../reducers/post'; dayjs.locale('ko'); const PostCard = ({ post }) => { // const { me: {id} } = useSelector((state) => state.user); // const id = me && me.id; // const id = me?.id; // 옵셔널 체이닝 연산자 const { removePostLoading } = useSelector((state) => state.post); const dispatch = useDispatch(); const [commentFormOpend, setCommentFormOpend] = useState(false); const id = useSelector((state) => state.user.me?.id); const liked = post.Likers.find((d) => d.id === id); const onLike = useCallback(() => { if (!id) { alert('로그인이 필요합니다.'); } dispatch(likePostRequestAction(post.id)); }, [id]); const onUnLike = useCallback(() => { if (!id) { alert('로그인이 필요합니다.'); } dispatch(unLikePostRequestAction(post.id)); }, [id]); const onToggleComment = useCallback(() => { setCommentFormOpend((prev) => !prev); }, []); const onRemovePost = useCallback(() => { if (!id) { alert('로그인이 필요합니다.'); } dispatch(removePostRequestAction({ id: post.id })); }, [id]); const onRetweet = useCallback(() => { if (!id) { alert('로그인이 필요합니다.'); } dispatch(retweetRequestAction(post.id)); }, [id]); return ( <div style={{ marginTop: 10 }}> <Card cover={post.Images[0] && <PostImages images={post.Images} />} actions={[ // 배열안에 들어가는 것들은 다 key를 넣어줘야 한다. <RetweetOutlined key="retweet" onClick={onRetweet} />, liked ? ( <HeartTwoTone key="heart" twoToneColor="#eb2f96" onClick={onUnLike} /> ) : ( <HeartOutlined key="heart" onClick={onLike} /> ), <MessageOutlined key="comment" onClick={onToggleComment} />, <Popover key="more" content={ <Button.Group> {id && post.User?.id === id ? ( <> <Button type="primary" key="modify"> 수정 </Button> <Button type="danger" key="delete" onClick={onRemovePost} loading={removePostLoading} > 삭제 </Button> </> ) : ( <Button type="dashed" key="report"> 신고 </Button> )} </Button.Group> } > <EllipsisOutlined /> </Popover>, ]} extra={id && <Followbutton post={post} />} title={ post.RetweetId ? `${post.User.nickname}님이 리트윗하셨습니다.` : null } > {post.RetweetId && post.Retweet ? ( <Card cover={ post.Retweet.Images[0] && ( <PostImages images={post.Retweet.Images} /> ) } > <div style={{ float: 'right' }}> {dayjs(post.createdAt).format('YYYY.MM.DD')} </div> <Card.Meta avatar={ <Link href={`/user/${post.Retweet.User.id}`}> <Avatar>{post.Retweet.User?.nickname[0]}</Avatar> </Link> } title={post.Retweet.User?.nickname} description={<PostCardContent postData={post.Retweet.content} />} /> </Card> ) : ( <> <div style={{ float: 'right' }}> {dayjs(post.createdAt).format('YYYY.MM.DD')} </div> <Card.Meta avatar={ <Link href={`/user/${post.User.id}`}> <Avatar>{post.User?.nickname[0]}</Avatar> </Link> } title={post.User?.nickname} description={<PostCardContent postData={post.content} />} /> </> )} </Card> {commentFormOpend && ( <div> {/* 게시글의 아이디 위해서 post 넘겨줌 */} <CommentForm post={post} /> <List header={`${post.Comments.length}개의 댓글`} itemLayout="horizontal" dataSource={post.Comments} renderItem={(item) => ( <List.Item key={item.id}> <List.Item.Meta title={item.User.nickname} avatar={ <Link href={`/user/${item.User.id}`}> <Avatar>{item.User.nickname[0]}</Avatar> </Link> } description={item.content} /> </List.Item> )} /> </div> )} </div> ); }; PostCard.propTypes = { post: PropTypes.shape({ id: PropTypes.number, User: PropTypes.object, content: PropTypes.string, createdAt: PropTypes.string, Comments: PropTypes.arrayOf(PropTypes.object), Images: PropTypes.arrayOf(PropTypes.object), Likers: PropTypes.arrayOf(PropTypes.object), RetweetId: PropTypes.number, Retweet: PropTypes.objectOf(PropTypes.any), }).isRequired, }; export default PostCard; 여유되실때 한번 봐주시면 감사하겠습니다
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
카카오 공유했을 때 이전에 작성했던 글이 나오는 버그
안녕하세요 선생님보너스 강의 전까지 보고 카카오 공유하기 까지 테스트하고 있는데버그를 발견한것 같아서 어떻게 해결할지 여쭤보려 올립니다.위처럼 post/5의 게시글을 작성하고카카오톡에 공유를 하면이전에 썼던 (로컬에서 썼었던) 내용이 보여집니다.혹시 기존 데이터베이스를 리셋하거나 추가적인 작업이 필요한건지 궁금합니다.
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
LocalDateFormatter 사용 유무 차이
현재 LocalDateFormatter를 사용한 것과 사용하지 않았을 때 register 함수를 실행해보았는데 두 경우 모두 문제 없이 동일한 동작을 해서 아직 필요성을 못느끼겠는데 차이를 느끼려면 어떻게 테스트해보아야할까요?
-
미해결따라하며 배우는 리액트 A-Z[19버전 반영]
검색어 입력 후 초기화하는 방법 궁금합니다!
안녕하세요. 강의 수강 중에 추가적으로 구현하고 싶은 기능이 있는데 어떻게 해야할지 모르겠어서.. 질문 남깁니다. 검색창에 검색어를 입력하면 SearchPage에 관련 영화 포스터들이 나오고 그 중에 하나를 클릭해서 영화 상세 페이지(DetailPage)로 이동했을 때 검색창을 초기화하고 싶은데 어떻게 해야 하는지 궁금합니다.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
CRUD에서 CR만 배우는건가요
수정 삭제는 sqlite로 직접 만져야되나요
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
entity, dto 변환 메서드 위치
안녕하십니까, 강의에서는 todoService 인터페이스에 entity와 dto를 변환하는 메서드를 구현하였는데, 저는 평소에 dto 클래스에 dtoToEntity 메서드를, 엔티티 클래스에 EntityToDto 메서드를 만들어서 사용하였는데 강사님의 방법가 제가 사용하는 방법 중 어느 게 더 나은지, 그리고 그 이유를 알 수 있을까요?
-
미해결Next + React Query로 SNS 서비스 만들기
searchParams props
안녕하세요search 페이지 props에서 searchParams props가 기본적으로 제공된다고 알고있는데 저는 콘솔로 찍어보니 나오지 않습니다..! 혹시 제가 잘못적용한건지 아니면 다시한번 확인해야 될곳이 있을까요?/import SelectBox from "@/components/common/SelectBox"; import SelectStack from "@/components/common/SelectStack"; import Peoples from "@/components/people/Peoples"; import SearchForm from "@/components/common/SearchForm"; type Props = { searchParams: { page: string; size: string; sort?: string; keyword?: string; position?: string; teckStack?: string; }; }; export default function Page({ searchParams }: Props) { console.log("??", searchParams); return ( <div> <div className="relative flex items-center gap-4"> <h1 className="text-[36px] font-bold">People</h1> </div> <div className="flex justify-between"> <div className="flex gap-3"> <SelectBox options={option} title="포지션" /> <SelectStack /> </div> <SearchForm keyword={searchParams.keyword as string} /> </div> <Peoples searchParams={searchParams} /> </div> ); }