묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결React로 NodeBird SNS 만들기
그룹의 게시글의 댓글 질문합니다 ///////
https://www.inflearn.com/questions/33679 전에 답변주신 덕분에 ㅠㅠ ♡.. LOAD_MAIN_POSTS_REQUEST 게시물로드하기 성공했어요~! 그룹에 속한 게시물로 구조를 바꾸어준 후, 댓글 불러오기 LOAD_COMMENTS_REQUEST에 네트워크탭에 Request URL 에 전과 같은 undefined 오류가 나는 것을 확인했습니다 코드수정 후, 네트워크탭에서 성공의 200표시가 떳습니다.! 그런데 리덕스 데브툴즈에는 LOAD_COMMENTS_FAILURE가 뜨고 화면에서도 댓글이 보이지않았어요... 타입에러인 것을 확인했습니다, 강의하신 mainPosts의 data구조를 (어느그룹에 속한 게시물인지 데이터를보내기위해) data에 gpostId와 content로 나누어놨었어요 그래서인지 findIndex함수가 작동하지 않는것을 확인하고, 리듀서에서 mainPosts의 배열을 뽑아내기위해 ----> mainPosts.content로 수정했습니다. < post.js / reducers/ front > // 댓글 불러오기 case LOAD_COMMENTS_SUCCESS: { // console.log("state.mainPosts.content",state.mainPosts.content); const postIndex = state.mainPosts.content.findIndex(v => v.id === action.data.postId); // console.log("postIndex",postIndex); const post = state.mainPosts[postIndex]; // console.log("post",post); const Comments = action.data.comments; // console.log("Comments",Comments); const mainPosts = [...state.mainPosts.content]; // console.log("mainPosts",mainPosts); mainPosts[postIndex] = { ...post, Comments }; // console.log("new : ",mainPosts[postIndex]); return { ...state, mainPosts, }; } reducer / console.log ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// 이렇게 수정해주니 리덕스 데브툴즈에서도 LOAD_COMMENTS_SUCCESS 가 떳고 네트워크탭에서도 GET 방식으로 댓글이 잘 받아와지는 것을 확인할수있었어요.! 그런데 화면에서는 다른화면으로 넘어가서 원하는 결과가 나오지 않아요...ㅠㅠ 오류또한 발견핧수없었습니다. ^ 결론 : 댓글버튼을 클릭하면 dispatch로 LOAD_COMMENTS_REQUEST가 실행되고 컴포넌트<ContentForm> 에서 { post } 프롭값에 db.Comment 테이블에서 Comments 배열이 불러와졌었는데,, post를 콘솔로 확인해보면 Comments 배열이 불러와지지 않아요,,,, post.Comments로 결과를 화면에 나타나게 했는데 값이 불려와지지 않는게,, 왜그런지 알고싶습니다.ㅠㅠ /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// < post.js / sagas / front > // 댓글 불러오기 function loadCommentsAPI(postId) { return axios.get(`/post/${postId}/comments`); } function* loadComments(action) { try { const result = yield call(loadCommentsAPI, action.data); yield put({ type: LOAD_COMMENTS_SUCCESS, data: { postId: action.data, comments: result.data, }, }); } catch (e) { console.error(e); yield put({ type: LOAD_COMMENTS_FAILURE, error: e, }); } } function* watchLoadComments() { yield takeLatest(LOAD_COMMENTS_REQUEST, loadComments); } < ContentForm.js / Component / front > const ContentForm = ({post}) => { const [commentFormOpened, setCommentFormOpened] = useState(false); const [commentText, setCommentText ] = useState(''); const { me } = useSelector(state => state.user); const { commentAdded, isAddingComment, mainPosts } = useSelector(state => state.post); const dispatch = useDispatch(); const liked = me && post.Likers && post.Likers.find(v => v.id === me.id); //댓글창토글 const onToggleComment = useCallback(() => { setCommentFormOpened(prev => !prev); if (!commentFormOpened) { // 댓글창 켤때 불러오기 dispatch({ type: LOAD_COMMENTS_REQUEST, data: post.id, }); } }, []); // 댓글 const onChangeComment = useCallback((e) => { setCommentText(e.target.value); }, []); // 댓글올리기 사이클 const onSubmitComment = useCallback((e) => { e.preventDefault(); if(!me){ return alert('로그인이 필요합니다.'); } return dispatch({ type: ADD_COMMENT_REQUEST, data:{ postId: post.id, content: commentText, }, }); }, [me && me.id, commentText]); // 댓글 성공시, 빈텍스트로 useEffect(() => { setCommentText(''); },[commentAdded === true]); // 댓글삭제하기 const onRemoveComments = useCallback(userId => () => { alert('댓글을 삭제하시겠습니까?'); if(me.id === post.User.id) dispatch({ type: REMOVE_COMMENT_REQUEST, data: userId, }); }); // 댓글 변수선언 var listIndex; // 게시글 삭제 const onRemovePost = useCallback(userId => () => { if(me.id === post.User.id) alert('게시물을 삭제하시겠습니까?'); dispatch({ type: REMOVE_POST_REQUEST, data: userId, }); if(me.id !== post.User.id) alert('다른 사용자의 게시물은 삭제할 수 없습니다.'); }); // 좋아요 토글 const onToggleLike = useCallback(() => { if (!me) { return alert('로그인이 필요합니다!'); } if (liked) { // 좋아요 누른 상태 dispatch({ type: UNLIKE_POST_REQUEST, data: post.id, }); } else { // 좋아요 안 누른 상태 dispatch({ type: LIKE_POST_REQUEST, data: post.id, }); } }, [me && me.id, post && post.id, liked]); return( <> <div className="postbox"> <div className="contBox"> <p>{post.User.nickname} 님의 게시물 - 좋아요 : {post.Likers.length } </p> <PostImages images={post.Images} /> <div>{post.content}</div> </div> <div className="btnsbox"> <button type="button" className="commentBtn" value={commentFormOpened} onClick={onToggleComment} /> { liked ? <button type="button" className="likeBtnred" onClick={onToggleLike} /> : <button type="button" className="likeBtnline" onClick={onToggleLike} /> } <button type="button" className="removeBtn" onClick={onRemovePost(post.id)} /> {commentFormOpened===true && <form className="commentbox" onSubmit={onSubmitComment}> <textarea className="comment" value={commentText} onChange={onChangeComment} /> <button type="primary" htmltype="submit" className="combtn" loading={isAddingComment} >COMMENT</button> </form> } {/* 댓글올라갈부분 */} {commentFormOpened===true && ( <div style={{display:"inline-block", width:"100%"}}> <p style={{marginLeft:"10px"}}>{commentAdded ? '댓글' + post.Comments.length : '댓글'+ '0'}</p> <div className="comline"></div> {console.log("mainPosts.content???: ",mainPosts.content,"post???: ",post)} {(()=>{ if(post.Comments){ listIndex = post.Comments.map((el)=> ( <li style={{listStyle:"none", display:"inline-block", clear:"both"}} > {console.log("el",el)} {el.User.nickname} : {el.content} { el.UserId === me.id ? <button type="button" className="remove" onClick={onRemoveComments(post.id)} > REMOVE </button> : "" } </li> ) ) } return( <ul> {listIndex} </ul> ); })()} </div> ) } </div> </div> </> ); }; ContentForm.propTypes={ post: PropTypes.shape({ User: PropTypes.object, content: PropTypes.string, createdAt: PropTypes.string, }), }; export default ContentForm; < post.js / routes / back > // 댓글불러오기 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('포스트가 존재하지 않습니다........'); } const comments = await db.Comment.findAll({ where: { PostId: req.params.id, }, order: [['createdAt', 'ASC']], include: [{ model: db.User, attributes: ['id', 'nickname'], }], }); res.json(comments); } catch (e) { console.error(e); next(e); } });
-
미해결코어 자바스크립트
null이 Primitive Type이 맞나요?
typeof(null) 했을 때, 'object'로 출력이 되는데, 튜터님의 설명에서는 primitive type으로 되어 있어서 혼란스럽습니다! 어떤게 맞는 건가요 ?_?
-
미해결파이썬 입문 및 웹 크롤링을 활용한 다양한 자동화 어플리케이션 제작하기
pytube 임포트 에러
파이튜브 사용 강의를 듣던중 임포트 에러가 발생하여 글을 씁니다. 아나콘다 프롬프트는 관리자 권한으로 실행하였고 아래 그림은 conda list 입니다. atom 명령어로 에디터를 실행하여 강의의 소스를 똑같이 입력하였지만 import에러가 발생하여 오타가 있을수도 있기에 간단한 출력문을 작성하여도 아래 그림과 같이 import 에러가 발생합니다.
-
미해결파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)
최대거리 지정할 때 질문입니다.
영상에서는 그냥 최대값을 max를 기준으로 하셨는데 1이랑 9일 때 기준으로 1과 9사이의 거리는 7이니까 그냥 max - min - 1로 해도 상관없나요?
-
미해결실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발
안녕하세요. 화면 경로 오류에 관한 질문입니다.
안녕하세요. 강의 한 번 쭈욱 듣고 이제 하나씩 실습하고 있는데요. 화면 경로를 못 찾는것 같아서 질문 드립니다. 우선 서버를 띄우면 Cannot find template location: classpath:/templates/ (please add some templates or check your Thymeleaf configuration) 이런 메세지가 뜨고, url에 localhost:8080/hello 를 입력하면 There was an unexpected error (type=Internal Server Error, status=500). Error resolving template [hello], template might not exist or might not be accessible by any of the configured Template Resolvers org.thymeleaf.exceptions.TemplateInputException: Error resolving template [hello], template might not exist or might not be accessible by any of the configured Template Resolvers 메세지가 뜹니다. 검색해서 해결하려고 했는데도 되질 않아서 질문드립니다. 감사합니다!
-
해결됨[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part2: 자료구조와 알고리즘
렌더링 과정에서 질문입니다.
Render()함수에서 ConsoleColor prevColor = Console.ForegroundColor; 이렇게 임시저장 해줬다가 Console.ForegroundColor = prevColor; 이렇게 이전 상태를 복원한다고 하셨는데 복원을 한다는게 정확히 무슨 뜻인가요? 이렇게 복원을 하지 않으면 무슨 문제가 있나요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 챗봇 사이트 만들기
entity
엔티티를 등록하고 진행해야하나요?
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
저 아직 문제가 해결이 안되서여
걍 첨부터 다시하는게 좋을까여? 감사합니다 ~!
-
미해결코알못도 누구나 쉽게 따라하는 웹, 앱 만들기 (기초부터 실전 활용까지)
실습후 디플로이 취소
안녕하세요 조코딩님 덕분에 재밌게 공부하고 있습니다 넷플리파이에 디플로이를 하는 실습을했는데요 이후에 지우려면 어디서 하면 될까요? 찾아봤는데 눈에 안띄어서요.. 감사합니다^^
-
해결됨React로 NodeBird SNS 만들기
1:41초에 로그인,로그아웃 대문자관련해서
https://docs.microsoft.com/en-us/dotnet/standard/design-guidelines/capitalization-conventions 마소 convention보면 Pascal, camel의 경우 logIn이라는말은 안쓰고 logOn, logOff라고 되어있네요, Not이 쓰지말라는 의미같은데 logIn, logOut이라고 되어있습니다. 로그인자체를 쓰지말라는건지 logIn 이 형태로 쓰지말라는건지는 잘 모르겠으나, 제가 이해한 의미가 맞다면 login은 login으로 쓰라는 것 같은데 제로초님은 현재 어떻게 쓰시나요?
-
미해결[개정판] 딥러닝 컴퓨터 비전 완벽 가이드
안녕하세요 강사님 matterport부분 질문있습니다
안녕하세요! Segmentation -> matterport에서 load_weights 함수를 작동시킬때, by_name=True라는 변수를 넣어주지 않을때 에러가 발생합니다. 혹시 by_name 변수가 하는 역할을 알려주실수 있을까요? 감사합니다!
-
미해결대세는 쿠버네티스 (초급~중급편)
선생님 질문이 있습니다.
이제 막 강의를 시작하는 수강생입니다. 목표는 현재 머신러닝 파이프라인을 만들어보려고 하는데요. 이 파이프라인 안에서 쿠버네티스로 여러 머신러닝 모델을 컨테이너에 각각 담아서 서로 독립적으로 동작하는 여러 머신러닝모델을 서빙해보는 프로젝트를 하려고 하는데 선생님 수업을 듣고 나면 그정도는 할 수 있는지 궁금합니다. 제가 도커, 쿠버네티스에 대해서 거의 아는게 없어서 강좌목록을 봐도 감이 안오네요. 감사합니다.
-
Vue.js 중급 강좌 - 웹앱 제작으로 배워보는 Vue.js, ES6, Vuex
git 권한 승인
삭제된 글입니다
-
미해결프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
url-loader와 file-loader의 관계
url-loader 에서 설정한 용량을 넘어가면 file-loader 에 대한 설정이 없어도 자동으로 file-loader를 사용하게 되는건가요?
-
해결됨파이썬 알고리즘 문제풀이 입문(코딩테스트 대비)
공주 구하기 코드 질문입니다.
from collections import deque a = list(map(int, input().split())) a = deque(a) k = int(input()) for _ in range(len(a)): if len(a) < k: if k == 2: res = a[0] else: #1 res = a[1] else: a.remove(a[k-1]) a.rotate(-(k-1)) print(res) # rotate를 사용해서 코딩을 해봤는데, 강사님이 짜신 코드와 비교해봤을 때 제가 짠 코드는 비효율적인가요?
-
미해결파이썬 데이터시각화 분석 실전 프로젝트
str 변환 설명 더 부탁드려요
선생님, 안녕하세요. 파이썬 입문자입니다. official time 시간 포맷을 sec로 변환하는 user define 함수 쓰실때, .str 설명 더부탁드립니다. 이해하기로는 판다스에서 record를 object로 가져오기때문에 str로 변환한다고 하셨는데... record.str 만 return 하고 head 이용해서 print 해보았을 때. official time new 에 <pandas.core.strings.StringMethods object at 0x000001AA06002648> 로 나오는데. 이해되지 않습니다..
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 유튜브 사이트 만들기
에러가 뜨네요~ ㅜ.ㅜ
getComment 라우터에서 setComments 로 빈 배열에 서버에서 받아온 댓글 객체들을 넣어줘야 하는데 객체 안에 있는 객체를 받지 못하는 것 같습니다 ㅠ.ㅠ 도움이 필요합니다 ㅎㅎ... https://github.com/ryun3433/Youtube2.0.git 깃헙주소입니다!
-
미해결홍정모의 따라하며 배우는 C언어
str3를 출력하던중 생긴 오류와 궁금증
#include <inttypes.h> char str3[10] = "Hello, world"; //array size is not enough printf("%s\n", str3); 결과값 Hello, worHi 질문1: 비쥬얼스튜디오코드를 사용하여 코딩중인데 저는 영상처럼 "Hello, world" 커서를 대었을 때 교수님의 화면처럼 13이 뜨지 않네요 코드라서 안 뜨는 건가요?? 저는 (char [10])"Hello, wor" 이런식으로 뜹니다 질문2: "Hello, world";의 위치에 커서를 대었을 때는 (char [10])"Hello, wor" 이런 식으로 미리보기가 뜨는데 왜 미리보기와 다른 Hello, worHi이 출력되는 것이고, 결과값 중의 'Hi'는 왜 출력이 되는 것인가? 질문3: 영상과 달리 제 코드는 어떻게 10으로 정해진 사이즈를 넘어서 출력이 될 수 있는 것인가?? 항상 잘 듣고 있습니다 ㅎㅎ 이해하기 쉽게 잘 설명해 주셔서 감사해요 코드 전문 #include <stdio.h> int main() { int a = 1; int int_arr[10] = { 0, 1, 2, 3, 4, 5, 6 ,7 ,8 ,9 }; printf("%i %i %i\n", int_arr[0], int_arr[1], int_arr[9]); //printf("%i\n", int_arr[10000]); int_arr[10]이므로 9를 넘어선안됨 [지정사이즈 넘으면 안됨] char c = 'a'; char str1[10] = "Hello"; //null character Hello(\0) char str2[10] = { 'H', 'i'}; //문자열 저장하는 방식이 두가지 printf("%c\n", c); printf("%s\n", str1); printf("%s\n", str2); printf("%hhi %hhi %hhi %hhi %hhi\n", str2[0], str2[1], str2[2], str2[3], str2[4]); //배열로 출력시 강제로 0을 출력시킴 char str3[10] = "Hello, world"; //array size is not enough char str3[20] = "Hello, \0world"; printf("%s\n", str3); printf("%s\n", str3[10]); printf("%s\n", str3[11]); return 0; }
-
미해결[라즈베리파이] IoT 딥러닝 Computer Vision 실전 프로젝트
7 값을 어떻게 찾았는지 궁금 합니다.
RBP_DL11_MNIST_model 예제에서 넘버 테스트 결과 값이 이미지나 , 어떤 상수 값도 비교가 없는되 숫자 7 나온 이유가 궁금 합니다.
-
미해결자바 프로그래밍 입문 강좌 (renew ver.) - 초보부터 개발자 취업까지!!
영상 다시 찍어주셨으면..
잡음이 너무 심합니다