페이지 구현- 홈(/) 파트에서 17:00분 정도에 useEffect를 사용하여 data를 콘솔에 찍어보는데 그전까지는 home component까지는 더미데이터가 잘 받아와졌는데 저부분에서 콘솔에서 이렇게 빈배열로 넘어와져요계속 코드를 몇번씩이나 강의돌려보고 검토했지만 도저히 제눈엔 보이지않아 강사님께 질문드립니다.깃허브에 코드올려놨습니다. 한번 검토해주시면 감사하겠습니다!!https://github.com/eunsoo-cho/emotion-Diart.git

안녕하세요.우선 저는 맥북을 사용하고 있습니다.import { VFC, useCallback, useEffect, useRef } from 'react'; import { Form, MentionsTextarea, SendButton, Toolbox } from './styles'; import React from 'react'; import autosize from 'autosize'; interface Props { chat: string; onSubmitForm: (e: any) => void; onChangeChat: (e: any) => void; placeholder?: string; } const ChatBox: VFC<Props> = ({ chat, onSubmitForm, onChangeChat, placeholder }) => { // const onSubmitForm = useCallback(() => {}, []); const textareaRef = useRef(null); useEffect(() => { if (textareaRef.current) { autosize(textareaRef.current); } }, []); const onKeydownChat = useCallback( (e) => { if (e.key === 'Enter') { if (!e.shiftKey) { e.preventDefault(); onSubmitForm(e); } } }, [onSubmitForm], ); return ( <Form onSubmit={onSubmitForm}> <MentionsTextarea id="editor-chat" value={chat} onChange={onChangeChat} onKeyDown={onKeydownChat} placeholder={placeholder} ref={textareaRef} /> <Toolbox> <SendButton className={ 'c-button-unstyled c-icon_button c-icon_button--light c-icon_button--size_medium c-texty_input__button c-texty_input__button--send' + (chat?.trim() ? '' : ' c-texty_input__button--disabled') } data-qa="texty_send_button" aria-label="Send message" data-sk="tooltip_parent" type="submit" disabled={!chat?.trim()} > <i className="c-icon c-icon--paperplane-filled" aria-hidden="true"></i> </SendButton> </Toolbox> </Form> ); }; export default ChatBox; 이건 제가 작성한 ChatBox입니다.import React, { useCallback } from 'react'; import { Container, Header } from './styles'; import useSWR, { useSWRInfinite } from 'swr'; import fetcher from '@utils/fetcher'; import { useParams } from 'react-router'; import gravatar from 'gravatar'; import ChatBox from '@components/ChatBox'; import ChatList from '@components/ChatList'; import useInput from '@hooks/useInput'; import axios from 'axios'; import { IDM } from '@typings/db'; const DirectMessage = () => { const { workspace, id } = useParams<{ workspace: string; id: string }>(); const { data: userData } = useSWR(`/api/workspaces/${workspace}/users/${id}`, fetcher); const { data: myData } = useSWR('/api/users', fetcher); const [chat, onChangeChat, setChat] = useInput(''); const { data: chatData, mutate: mutateChat, revalidate, } = useSWR<IDM[]>(`/api/workspaces/${workspace}/dms/${id}/chats?perPage=20&page=1`, fetcher); const onSubmitForm = useCallback( (e) => { e.preventDefault(); if (chat?.trim()) { axios .post(`/api/workspaces/${workspace}/dms/${id}/chats`, { content: chat, }) .then(() => { revalidate(); setChat(''); console.log('submit'); }) .catch((error) => { console.log(error); }); } }, [chat], ); if (!userData || !myData) { return null; } return ( <Container> <Header> <img src={gravatar.url(userData.email, { s: '24px', d: 'retro' })} alt={userData.nickname} /> <span>{userData.nickname}</span> </Header> <ChatList chatData={chatData} /> <ChatBox chat={chat} onChangeChat={onChangeChat} onSubmitForm={onSubmitForm} /> </Container> ); }; export default DirectMessage; 이건 DirectMessage 입니다.e.preventDefault()로 기본 이벤트를 막아줬는데도 DM을 엔터로 전송하면 (한글로만 전송하면 2개씩 보내져요...!)어떨때는 2개가 보내지고 어떨때는 1개가 보내져요... 네트워크나 콘솔에도 2개씩 뜨고요.. 전송버튼을 눌렀을때는 1개만 보내집니다.  

안녕하세요, 강사님"댓글구현하기"편을 보던 중 기존 업무에서도 궁금했던 점이 생각나 질문 남깁니다. 예를들어 부모요소에서 하위요소에 post객체에 속한 id값 하나만 전달하고자 합니다.그럴 때 <하위요소 post = {post}/>와 <하위요소 postId = {post.id}/> 중에 어떤 방식을 선호하시나요?단, 이때 자식요소에서 post의 id외에는 필요가 없습니다. 개인적으로는 다른 사람도 저의 코드를 보고 이해할때 '아! 이 자식 요소에서는 post의 id만 사용하는 구나' 딱 알수 있기 때문에 <하위요소 postId = {post.id}/>가 더 좋을 것 같다 생각했습니다. 강사님의 의견 여쭤보고 싶습니다. 답변 기다리겠습니다.감사합니다.

안녕하세요. 멘토님. 강의를 듣다 보니 react 18이 아닌 17버전을 쓰는 이유가 궁금해져서 질문 드립니다.18 버전을 사용하게 된다면 다른 라이브러리와 호환이 안되는 이슈가 생겨서 17버전을 쓰는 것일까요?18버전을 쓸때 어떤 이슈가 생길 수 있는지 궁금해서 질문 드립니다..!

다음 수업 > 을 통해서 섹션8 | 데이터 통신 에 도달하였는데 아무 반응이 없네요.해당 페이지에서 다음 수업 > geolocation 은 정상동작하네요.

질문1:빨간색 부분에 width랑 background가 하얀글씨로 되어있는데적용이 된건가요? 그리고강의 중 이 부분에 예시가 없어서 레퍼런스 코드를 참고해버렸는데요질문2:transition:제일 앞에 선언할수 있는 속성이 무엇이 있는지질문3:transition-property:는 어떤식으로 사용하는지 궁금합니다  

박스사이즈를 구하라는 문제에서 저는 div의 크기를 생각하고24*3(폰트사이즈*3em) + 20(가로세로 padding 10+10)=92 생각했는데 93이라는 약간의 오차도 있고정답은 폰트사이즈인 72네요 ㅠ 1.제가 문제를 잘못이해했는지2.div크기 구하는데 오차가 발생하는 이유위 두가지가 궁금합니다.

프론트 부분 회원가입한 후 router설정 까지 끝낸 후,회원정보가 잘 들어갔는지 확인하기 위해 Workbench에서 Users테이블을 클릭 했는데,,바로 예기치 않게 종료되었습니다.가 떴습니다.구글링 해본 결과 버전이 문제인데싹 - 지우고 다운그레이 하라고 하더라구요. 지금 버전이 8.0.32 인데몇으로 다운그레이 해야할까요 ? + 그 전까지는 잘 작동되던 워크벤치가 왜 갑자기 버전충돌이 일어난거죠 ?

강의를 따라하는 도중에 npx sequelize db:create를 입력하였을때는 정상적으로 "Database sleact create."라는 메세지가 확인됬습니다. 그 이후로 yarn dev를 실행하니 아래와 같은 오류가 확인됬습니다.이유가 뭘까요?ㅜㅜ

https://github.com/ZeroCho/react-nodebird/tree/master/toolkitredux toolkit으로 바꾸면서 제로초님 강의를 듣고있는데 .addCase(addComment.fulfilled, (draft, action) => { const post = draft.mainPosts.find((v) => v.id === action.data.PostId); console.log('draft', draft, 'post', post, 'Comments', post.Coments); post.Comments.unshift(action.data); draft.addCommentLoading = false; draft.addCommentDone = true; })이런 코드를 보면 action.data이렇게 action에서 data를 가져오는데 제가 redux devtools에서 봤을 때 action안에 값들은 action.payload에 저장이 되어있는거 같습니다 혹시 값들을 action.data로 저장하는 방법이 있나요?

안녕하세요!도커 컨테이너로 mysql을 띄워놓고local terminal에서 django 서버를 실행시킬려고 합니다.하지만, 계속해서 아래와 같은 Unkown Mysql server host 'mysql' 에러 또는 Access denied 에러가 발생되어 여줘봅니다.django.db.utils.OperationalError: (2005, "Unknown MySQL server host 'mysql' (8)")코드는 다음과 같습니다.DATABASES = { "default": { "ENGINE": "django.db.backends.mysql", "NAME": "instagram", "USER": "project", "PASSWORD": "a1s2d3f4", "HOST": "mysql", "PORT": "3306", } } mysql은 docker compose 가 아닌 하나만 실행해서 다음과 같이 했습니다. docker run -e MYSQL_ROOT_PASSWORD=a1s2d3f4 -e MYSQL_USER=project -e MYSQL_PASSWORD=a1s2d3f4 -e MYSQL_DATABASE=instagram -d -p 3310:3306 --name mysql mysql 제가 시도한 것들은 다음과 같습니다.실행 후 컨테이너 생성을 확인했고, docker exec -it mysql bash 명령어로 접속하여 password, username, database name 다 확인되어 정상적으로 로그인 확인 되었습니다. 사용한 명령어는 mysql -u project -p 그리고 root로도 로그인 해서 확인 완료했습니다.혹시 몰라서 django databases의 host를 0.0.0.0 으로 바꿔서 실행하면 django.db.utils.OperationalError: (1045, "Access denied for user 'project'@'localhost' (using password: YES)") 와 같은 에러가 발생됩니다. 이외에도 127.0.0.1 로도 바꿔서 해봤지만 동일한 에러가 뜹니다. 동일하게 localhost를 나타내는 IP 주소라서 그런 것 같습니다.그래서 docker inspect <container name> 을 사용해서 확인되는 IP 주소로 바꿔도 연결이 되지 않습니다.django server 실행 명령어는 다음과 같습니다.python manage.py runserver --settings=config.settings.production 0.0.0.0:8000 settings는 settings directory 안에 base.py, developement.py, deployment.py 로 3개를 나눠서 하고 있습니다. docker compose로 django app도 container로 띄우면 잘 작동됩니다. 도커 안에서라 그런지 잘 되는 것 같은데, localhost와 container로 하면 연결이 안됩니다.이번 강의를 들으면서 IP와 PORT 가 문제인 것 같은데 어떻게 시도를 하면 될지 잘 모르겠습니다.도와주시면 감사하겠습니다 

안녕하세요.브라우저 재 접속 시 로그인 상태 유지를 하고 싶습니다.로그인 후 어플리케이션의 쿠키에 refreshToken이 담긴 것을 확인하였습니다.브라우저를 재접속하면 refreshToken이 사라져있는데 이것은 브라우저를 종료하면 쿠키가 휘발되는 성질로 인해 사라지는 것이 맞나요? 그렇다면 브라우저 재접속 시 로그인 상태 유지는 어떻게 구현할 수 있는지 궁금합니다.감사합니다.

공식문서를 보고 다 맞게 작성해서 실행하며 No module named 'django_toolbar' 오류가 발생합니댜ㅏ

강의중 clearfix div를 넣어주는데제가 그게 왜들어가는지 들어가서 무슨작용을 하는지원리가 무엇인지 아직 이해가 덜되서요.. 조금만 더 자세하게 설명해주실수 있나요?못난 제자라 죄송합니당 ㅜㅜ html:<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>02-02-clear</title> <link rel="stylesheet" href="./index.css"> </head> <body> <div class="box1 box"> 첫번째 박스입니다.<br> float:left가 적용되어 있습니다. </div> <div class="box2 box"> 두번째 박스입니다.<br> float:right가 적용되어 있습니다. </div> <div class="clearfix"></div> <div class="box3"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris risus sapien, facilisis vitae feugiat ut, semper at ligula. Vivamus cursus lectus tincidunt tellus tincidunt pharetra. Donec pharetra dictum malesuada. Fusce non sapien egestas, maximus urna vel, pulvinar magna. Aenean ut dapibus lacus, in blandit ligula. Vestibulum sit amet efficitur tortor. Phasellus id viverra felis. Mauris magna est, luctus sit amet neque et, sagittis ultrices elit. Morbi odio eros, finibus non justo eget, sollicitudin dapibus ante. Nunc maximus eu nunc et finibus. Vivamus viverra feugiat pretium. Sed at tempus enim, et dignissim ante. Mauris vel nisi leo. Nullam vel nibh suscipit, lobortis ex eu, mollis nunc. Fusce in eros blandit, vehicula libero et, euismod enim. </div> </body> </html>css:*{ box-sizing: border-box; margin: 0; padding: 0; } .container { background-color: #eeeeee; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 50px 0px; } .wrapper { width: 620px; padding: 40px 30px; background-color: white; border: 1px solid gray; border-radius: 10px; } .wrapper__head { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px dashed gray; } .wrapper__head__title { font-size: 32px; background-color: orange; color: white; text-align: center; padding: 5px; margin-bottom: 10px; } .wrapper__head__sub-title{ font-size: 18px; padding: 10px 0; } #point { color: orange; font-size: 22px; font-weight: bold; text-decoration: underline; display: block; margin-top: 15px; } .wrapper__body { border: 1px solid #dddddd; padding: 20px 30px; } .diary-title { font-size: 18px; font-weight: 600; background-color: #f4f4f4; margin-bottom: 20px; } .kimchi { color: red; font-weight: 600; } .egg { color: orange; font-weight: 600; } .highlight { font-size: 22px; color: blue; font-weight: 700; font-style: italic; } .diary-date { color: #919191; font-size: 14px; text-align: right; } .header { height: 80px; display: flex; justify-content: center; align-items: center; border: 1px solid gray; } .header-inner { width: 900px; height: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; } .logo { width: 100px; } .logo h1 a{ text-decoration: none; color: orange; } .menu__ul { display: flex; flex-direction: row; } .menu__ul li { list-style: none; } .menu__ul li a{ display: block; /* a 태그는 inline태그여서 상하적용이 안되기 떄문에 block요소를 적용시킴*/ padding: 10px 20px; /*상하에 굳이 시각적 차이 없는 10px을 주는 이유는 마우스 커서클릭 영역이 글자만 되는것 보다 영역을 늘려서 여유를 주기위해서*/ text-decoration: none; color: black; } .menu__ul li a:hover{ color: orange; } .user { width: 100px; }

다음과 같이 not found라 나옵니다

강사님 refreshToken 이해가 되지않아서 인데요.제가 52강의 까지 보고 했는데요,이사진은 기존토큰이 없을때 뜨는 restore try~ catch문에서 나오는 Error 입니다. 저는 refreshToken을 localStorage에 값이 있을때로 했거든여, 제가 구현하고 싶은거는사용자가 해당 시간때가 끝나면 알아서 자동으로 해주는걸로 했는데 이렇게 해도 되는지여쭤봅니다... 강의에서 볼때는 버튼을 누르고 새롭게 갱신하는걸로 해가지고요뭔가 로그인, 로그아웃 새로고침 여기서 막히네여 ㅠ, 

let origin = { name: "otter", age: 25, favoriteFood: { first: "sushi", second: "hamburger" } }; const copy = JSON.stringify(origin); const deepCopy = JSON.parse(copy);강의에서 깊은 복사할 때 위 코드처럼 JSON.stringify(), JSON.parse()를 사용해서 복사를 해주셨는데 아래의 코드처럼 복사해주어도 문제가 없을까요? 물론 객체 안에 객체들이 많아진다면 JSON 명령어를 사용해서 복사해주는 것이 좋다고 생각합니다! 하지만 예시처럼 객체가 하나거나 적은 경우에 저는 개인적으로 아래처럼 해주는 게 편한 것 같아서 아래처럼 복사해줘도 괜찮은건지 질문드립니다!let origin = { name: "otter", age: 25, favoriteFood: { first: "sushi", second: "hamburger" } }; const myCopy = {...origin, favoriteFood: {...origin.favoriteFood}}

아폴로 캐시 데이터를 직접 수정하고 싶어서 질문 드립니다. 포인트 충전 시 변경된 포인트를 refetchQueries 사용하지 않고, 캐시를 수정해서 화면에 보여주려 하는데요.두번째 사진에서 캐시에 저장된 fetchUserLoggedIn.userPoint.amount를 직접 수정하고 싶은데 어떻게 수정해야 할지 모르겠습니다.강의에서 cache.modify를 이용해 배열에 아이템 목록을 추가하거나 삭제하는 예시만 알려주셔서요.캐시 데이터를 직접 수정하는 방법이 있을지 여쭙고 싶습니다.

configureStore.js 파일을 강좌와 똑같이 진행하였는데해당오류가 발생합니다. 강의를 계속 진행하면 해결될까요?configure.js _app.jspackage.json

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 에러코드도 아닌데 왜 뜰까요??제가 console.log로 한것도 아닌데 안뜨게 할 수 없을까요?