묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
popover
안녕하세요 제로초님...예제를 조금 변형해 PostCard 를 만드는 작업을 하는 도중에 문제가 생겨서 남깁니다. 기존 action요소 에 있던 <EllipsisOutlined />를 extra로 옮기면서 작업하는 도중에 Popover를 사용할 경우에 무한 콜스택으로 들어가는 문제가 생겼습니다. ㅜㅜ 그래서 Popover를 감싸지 않고 <EllipsisOutlined />를 사용해서 onClick으로 출력 해준 결과에는 잘 작동하는 것을 보였습니다. 어떤게 문제인가요? ㅜㅜPopover가 제가 모르는 다른 call을하는건지 1번코드 사진 2번코드 사진 //1번째 코드 import react, { useState, useCallback } from 'react'; import { Card, Popover, Button, List, Comment, Avatar, Skeleton } from 'antd'; import { useSelector } from 'react-redux'; import { RetweetOutlined, HeartOutlined, MessageOutlined, ShareAltOutlined, EllipsisOutlined } from '@ant-design/icons'; import PostImage from './PostImage'; import CommentForm from './CommentForm'; import PropTypes from 'prop-types'; const POSTCARD = ({ post }) => { console.log(post.User.id); const { me } = useSelector(state => state.user); const [commentOpen, setCommentOpened] = useState(false); const id = me && me.id; console.log(me); console.log(id); const onClickRetWeet = useCallback( () => { }, [], ) const onClickHeart = useCallback( () => { }, [], ) const onClickComment = useCallback( () => { setCommentOpened((pre) => (!pre)); }, [], ) const onClickShared = useCallback( () => { }, [], ) const onClickmore = useCallback( () => { console.log("click more"); }, [], ) return ( <> <Card cover={post.Images[0] && <PostImage images={post.Images} />} actions={[ <RetweetOutlined key="retweet" onClick={onClickRetWeet} />, <HeartOutlined key="edit" onClick={onClickHeart} />, <MessageOutlined key="message" onClick={onClickComment} />, <ShareAltOutlined key="shared" onClick={onClickShared} />, ]} extra={ // <Popover trigger="click" // content={( // <Button.Group> // {id && id === post.User.id ? // <> <Button>수정</Button> <Button>삭제</Button></> // : // <>< Button>신고 </Button></>} // </Button.Group> // )} // > // <EllipsisOutlined /> // </Popover>} <EllipsisOutlined onClick={onClickmore}/> } > <Card.Meta avatar={<Avatar>{post.User.nickname[0]}</Avatar>} title={post.User.nickname} description={post.content} /> </Card > {commentOpen && ( <> <Card > <CommentForm post={post} /> <List style={{ marginTop: "20px" }} header={`${post.Comments.length}개의 댓글`} itemLayout="horizontal" dataSource={post.Comments} renderItem={item => ( <List.Item actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]} > <Skeleton avatar title={false} loading={item.loading} active> <List.Item.Meta avatar={ <Avatar>{item.User.nickname[0]}</Avatar> } title={item.User.nickname} description={item.content} /> </Skeleton> </List.Item> )} /> </Card> </> )} </> ) } POSTCARD.PropTypes = { post:PropTypes.shape({ id: PropTypes.number, User: PropTypes.object, Comments: PropTypes.arrayOf(PropTypes.any), content: PropTypes.string, Images: PropTypes.arrayOf(PropTypes.any), imagePaths: PropTypes.arrayOf(PropTypes.any) }) } export default POSTCARD; ////2번째 코드 import react, { useState, useCallback } from 'react'; import { Card, Popover, Button, List, Comment, Avatar, Skeleton } from 'antd'; import { useSelector } from 'react-redux'; import { RetweetOutlined, HeartOutlined, MessageOutlined, ShareAltOutlined, EllipsisOutlined } from '@ant-design/icons'; import PostImage from './PostImage'; import CommentForm from './CommentForm'; import PropTypes from 'prop-types'; const POSTCARD = ({ post }) => { console.log(post.User.id); const { me } = useSelector(state => state.user); const [commentOpen, setCommentOpened] = useState(false); const id = me && me.id; console.log(me); console.log(id); const onClickRetWeet = useCallback( () => { }, [], ) const onClickHeart = useCallback( () => { }, [], ) const onClickComment = useCallback( () => { setCommentOpened((pre) => (!pre)); }, [], ) const onClickShared = useCallback( () => { }, [], ) // const onClickmore = useCallback( // () => { // console.log("click more"); // }, // [], // ) return ( <> <Card cover={post.Images[0] && <PostImage images={post.Images} />} actions={[ <RetweetOutlined key="retweet" onClick={onClickRetWeet} />, <HeartOutlined key="edit" onClick={onClickHeart} />, <MessageOutlined key="message" onClick={onClickComment} />, <ShareAltOutlined key="shared" onClick={onClickShared} />, ]} extra={ <Popover trigger="click" content={( <Button.Group> {id && id === post.User.id ? <> <Button>수정</Button> <Button>삭제</Button></> : <>< Button>신고 </Button></>} </Button.Group> )} > <EllipsisOutlined /> </Popover>} > <Card.Meta avatar={<Avatar>{post.User.nickname[0]}</Avatar>} title={post.User.nickname} description={post.content} /> </Card > {commentOpen && ( <> <Card > <CommentForm post={post} /> <List style={{ marginTop: "20px" }} header={`${post.Comments.length}개의 댓글`} itemLayout="horizontal" dataSource={post.Comments} renderItem={item => ( <List.Item actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]} > <Skeleton avatar title={false} loading={item.loading} active> <List.Item.Meta avatar={ <Avatar>{item.User.nickname[0]}</Avatar> } title={item.User.nickname} description={item.content} /> </Skeleton> </List.Item> )} /> </Card> </> )} </> ) } POSTCARD.PropTypes = { post:PropTypes.shape({ id: PropTypes.number, User: PropTypes.object, Comments: PropTypes.arrayOf(PropTypes.any), content: PropTypes.string, Images: PropTypes.arrayOf(PropTypes.any), imagePaths: PropTypes.arrayOf(PropTypes.any) }) } export default POSTCARD;
-
R로 쉽게 배우는 강화학습
dimension이 클 경우에서 R 구현
삭제된 글입니다
-
미해결프로그래밍 시작하기 : 파이썬 입문 (Inflearn Original)
안녕하세요 문의드립니다
안녕하세요. 2-1강을 보고있는데 프린트를 쳤는데 제대로 출력이 되지않고 아래사진과 같이 에러가 떠서 문의드립니다. 이유가 뭔지 해결방법이 어떻게 되는지 알려주시길 부탁드리겠습니다. 감사합니다.
-
미해결자바 머신러닝 weka(웨카) 초급
Seed의 구체적인 설명이 있으면 좋겠습니다
렌덤 시드와 교차검증때 seed 를 1도 넣고 2도 넣고 돌리는 것으로 아는데 이때 seed 에 숫자를 부여한 의미를 정확히 알고싶습니다
-
미해결[백문이불여일타] 데이터 분석을 위한 중급 SQL
왜 Inner join인지 모르겠습니다.
안녕하세요, 항상 수업 잘 듣고 있습니다! Inner join과 left join 의 차이가 '데이터 비어있을 때 NaN이 뜨는데, 이걸 제외해서는 안되는 경우 left join 을 쓴다' 맞을까요? 맞다면, 일단 웬만한 경우에는 left join을 쓰고 NaN을 처리하는 것이 안전해보이는데 풀어주신 세 문제 전부 Inner join을 쓰신 이유가 있나요? 일단 Left join으로 문제 풀었을 때 오답이 나왔는데, 왜 오답인지 와닿지가 않습니다. + 제가 짜본 코드가 강의에서 보여주신 코드와 딱 한 지점이 다르거든요. INNER JOIN 을 LEFT JOIN 으로 써서, NULL 266866 요 NULL 대륙이 추가되어 있는데, 이거는 필요가 없는 데이터인가요? T-T 어떤 NULL은 유의미하고, 어떤 NULL은 일단 무시해도 되는지 그 기준을 잡기가 어려운데, 조언 받고 싶습니다!
-
미해결[백문이불여일타] 데이터 분석을 위한 중급 SQL
AS 사용의 위치가 헷갈립니다
안녕하세요 선미님 leetcode 의 1179번 문제 풀면서 AS 위치를 어디에 둘지 몰라서 한참 고민했습니다. AS는 무조건 절의 맨 끝에 쓰는 것이 맞나요? 아니면 위치가 상관 없을까요?
-
미해결현존 최강 크롤링 기술: Scrapy와 Selenium 정복
질문드립니다!
DEBUG: Filtered duplicate request: <GET http://corners.gmarket.co.kr/Bestsellers> - no more duplicates will be shown (see DUPEFILTER_DEBUG to show all duplicates) 마지막 G마켓 크롤링 예재에서 세부카테고리(subcategory)를 크롤링할때 동일한 for문을 2번 작성하여 위와 같은 duplicate오류가 발생하는것을 확인했습니다. 이에, request 안에 dont_filter = True처리를 해주어서 처리를 하였더니 정상적으로 출력이 되었습니다. 혹시 선생님께서는 DUPEFILTER_DEBUG의 default값을 FALSE로 설정해 놓으셔서 별도로 코드 작성없이 정상적으로 실행이 되신건가요??? 또한 혹시 만약에 INFINITE LOOP안에서 크롤링을 해야하는 경우는 위와 같이 duplicate처리를 어떻게 하면 좋을까요???
-
해결됨남박사의 파이썬으로 실전 웹사이트 만들기
join.html에서 회원 가입하면 not found로 넘어갑니다.
회원가입페이지 만들기 부분에서 not found 오류가 납니다. {% with messages = get_flashed_messages() %} {% if messages %} <script> alert('{{messages[-1]}}'); </script> {% endif %} {% endwith %} <div class="join_container"> <form action="form" method="POST" action="/join"> <div class="form_group"> <label for="name">이름</label> <input type="text" name="name" id="name"> </div> <div class="form_group"> <label for="email">이메일</label> <input type="text" name="email" id="email"> </div> <div class="form_group"> <label for="pass">비밀번호</label> <input type="password" name="pass" id="pass"> </div> <div class="form_group"> <label for="pass2">비밀번호 확인</label> <input type="password" name="pass2" id="pass2"> </div> <div class="form_group"> <input type="submit" value="가입하기"> </div> </form> </div> @app.route('/join', methods=['GET', 'POST']) def member_join(): if request.method == 'POST': name = request.form.get('name', type=str) email = request.form.get('email', type=str) pass1 = request.form.get('pass', type=str) pass2 = request.form.get('pass2', type=str) if name == '' or email == '' or pass1 == '' or pass2 == '': flash('입력되지 않은 값이 있습니다.') return render_template('join.html') if pass1 != pass2: flash('비밀번호가 일치하지 않습니다.') return render_template('join.html') members = mongo.db.members cnt = members.find({'email': email}).count() if cnt > 0: flash('중복된 이메일 주소입니다.') return render_template('join.html') current_utc_time = round(datetime.utcnow().timestamp() * 1000) post = { 'name': name, 'email': email, 'pass': pass1, 'joindate': current_utc_time, 'logintime': '', 'logincount': 0, } members.insert_one(post) return '' else: return render_template('join.html')
-
미해결모던 안드로이드 - 코틀린과 Jetpack 활용
기존 SQLITE처럼 DB파일 저장 경로 지정 할 수 있나요?
기존 SQLITE처럼 DB파일 저장 경로 지정 할 수 있나요?
-
해결됨홍정모의 따라하며 배우는 C언어
형식지정자 크기와 자료형에 대한 질문입니다.
#include <stdio.h> #include <limits.h> #include <stdlib.h> int main() { char c = 65; short s = 200; unsigned int ui = 3000000000U; long l = 65537L; long long ll = 12345678908642LL; printf("char = %hhd, %d, %c, %ld, %lld\n", c, c, c, c, c); // 왜 %lld 만 수가 다르게 나오나요? 분명 더 큰 형식지정자인데 궁금합니다. printf("short = %hhd, %hd, %d, %ld, %lld\n", s, s, s, s, s); printf("unsigned int = %u, %d\n",ui,ui); printf("long = %ld, %hd, %lld\n", l, l, l); printf("long long = %lld, %ld\n",ll,ll); return 0; } 질문: 더 큰 형식지정자인 %lld 를 사용해서 char 자료형을 출력했는데 다른 형식지정자들은 65로 같게 나오는데 %lld 만 다르게 출력됩니다. 무슨 이유가 있나요?
-
미해결[2026년 출제기준] 웹디자인개발기능사 실기시험 완벽 가이드
섹션 8-3. [최종본 제작] 가로 고정형(A1타입) – Part1 JUST 쇼핑몰 모듈 외 컨텐츠 결과 이미지가 밑으로 내려 갔습니다.
섹션 8-3. [최종본 제작] 가로 고정형(A1타입) – Part1 JUST 쇼핑몰 모듈 외 컨텐츠 결과 이미지가 밑으로 내려 갔습니다. 확인 후 잘못 된 점 알려 주십시오. index.html style.css 결과 이렇게 이미지 이미지가 밑으로 내려 왔습니다. 무엇이 잘못 되었습니까?
-
미해결쉽게 배우는 Webpack
리뉴얼 강의 쿠폰 문의
강사님 안녕하세요~ 강의 잘보고 도움 많이 받고 있어요 감사합니당 웹팩 강의 수강하려고 들어왔다가 리뉴얼 공지를 확인했는데, 지금도 쿠폰 받을 수 있을 까해서 여쭤봐요:)
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
back 에서 mdels 의 model file 코드에 대해
안녕하세요. 제로초님. 강의를 들으면서 실습시 오류등이 발생하면 제로초님의 github에서 참고하는데요. modes의 파일들은 수업때 진행하신 코드와는 다르게 클래스로 되어있더라고요. 혹시 관련 설명이 수업중에 언급이 되는데 제가 놓친건가 해서 문의드려요~ 즐거운 한주 되세요.
-
미해결스프링 시큐리티
질문드립니다
DB와 리소스 권한 관리 구현에서 모든 ajax로 들어오는 요청도 걸리게 되는데 ajax요청 url도 모두 DB에 저장해서 관리해야 되는게 맞는 건가요? ignore를 해버리게 되면 사용자 데이터가 노출될 위험이 있는거 같습니다! 답변 부탁드립니다~ 좋은 강의 찍어주셔서 감사합니다~!!
-
미해결자바 머신러닝 weka(웨카) 초급
데이터 분할해서 모델링
glass 데이터를 분할해서 J48로 하면 정확도가 떨어지는데 왜그런가요??
-
미해결Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
결국 이 코드에선 안티패턴 제거가 안된게 아닌가 싶어서 문의드립니다.
안녕하세요. "상위 컴포넌트의 데이터를 하위 컴포넌트로 전달한 후 하위 컴포넌트에서 변경(변형)하지 말아야 한다" 즉 컴퍼넌트 안의 data를 직접 변경하는게 하위 컴퍼넌트와의 이벤트 버스를 통해 변경하는것보다는 좋다. 이 부분에는 전적으로 동의합니다. 어찌보면 당연한 내용이기도 하고요. 근데 궁금한건 이 코드는 결국엔 toggleOneItem() 함수를 실행하면서 인자로 받은 todoItem을 localStorage에 담을땐 그대로 하위 컴퍼넌트의 값을 이용한게 아닌가 싶어서요. 말씀하신대로 리펙토링한다면 아래와 같이 추가로 더 수정해야 할듯 한데 어떻게 생각하시는지 궁금합니다. localStorage.removeItem(this.todoItems[index].item); localStorage.setItem(this.todoItems[index].item, JSON.stringify(this.todoItems[index]));
-
미해결모던 안드로이드 - 코틀린과 Jetpack 활용
room이 sqlite기반으로 만들어진건가요?
db파일을 pc로 가져와서 sqlite 개발툴로 편집 가능한가요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]
샌드박스 어카운트가 하나만 나오는데요..
지금 이틀째.. 이부분이 해결이 안되서 질문드려요. 이렇게 만들고, 앱을 만들려고 하면 어카운트가 비지니스 하나만 나타나는데, 이유를 찾을수가 없어요..ㅜㅜ 이런식으로만 나타나는데, (어카운트를 만들때 비밀번호 변경도 한상태)비지니스 어카운트를 이용해도 상관 없는건지, 알려주실수 있을까요? 다음 강의를 진행하고 싶어요...ㅜㅜ
-
미해결Java TPC (생각하고, 표현하고, 코딩하고)
클래스 상속과 오버라이딩 질문있습니다!
안녕하세요. 강사님! 강의를 완강한 수강생입니다. 처음엔 그냥 그렇겠지 하고, 생각했는데...잘이해가 가지않아서 질의드립니다. Class 상속에서 자식클래스의 메서드 기능이나 설명을 모르는경우 부모클래스에서 같은 메서드 이름을 써주어 오버라이딩하고, main 함수에서 upcasting 하여 사용한다고 설명해주셨습니다. 하지만 소스코드가 없다면 메서드 이름조차 알수없지않을까? 생각이 들었습니다. 또 오버라이딩은 다른 책을찾아보면 부모클래스의 함수를 자식클래스에서 재정의한다고 @기호를 붙이던데, 혹시 강사님이 설명주신거처럼 자식클래스의 매서드와 동일한 이름으로 부모 클래스에 정의하면 자동으로 자식클래스의 매서드 위에 @overiding 문구가 들어가는지 궁금합니다. 항상 좋은강의 들려주서서 감사합니다!
-
미해결[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part3: 유니티 엔진
테스트 종료 시 뜨는 에러
Play 버튼을 한번 더 눌러 테스트를 종료할 때 위와 같은 에러 미시지가 뜹니다. 어디서 뜬 에러인지 추적이 안 되어서 원인을 찾기가 어려운데, 이런 에러는 어떻게 해결해야 하나요?