레인지피커의 값을 받아오려는데 e.target.value를 하면 Cannot read properties of undefined (reading 'value')이런 오류가 떠요구글링도 해봤는데 어떻게 알수 있는 방법 없을까요?레인지피커는 파란색 박스에요

로그인 된 상태가 아닐 때 (로그인하면 안뜸) alert창: {"response":{"errors":[{"message":"","locations":[{"line":2,"column":3}],"path":["restoreAccessToken"],"extensions":{"code":"INTERNAL_SERVER_ERROR","exception":{"stacktrace":["Error"," at RestoreAccessTokenService.createAccessToken (/codecamp_backend_api/dist/api/token/services/mutation/restoreAccessToken.service.js:45:19)"," at runMicrotasks (<anonymous>)"," at processTicksAndRejections (internal/process/task_queues.js:93:5)"," at async target (/codecamp_backend_api/node_modules/@nestjs/core/helpers/external-context-creator.js:76:28)"," at async /codecamp_backend_api/node_modules/@nestjs/core/helpers/external-proxy.js:9:24"]}}}],"data":null,"status":200,"headers":{"map":{"content-length":"654","content-type":"application/json; charset=utf-8"}}},"request":{"query":"mutation restoreAccessToken {\n restoreAccessToken {\n accessToken\n }\n}"}} 이런 문구가 뜨는데 다른 분 질문에서 프론트딴에서는 무시해도 된다고 하셨는데 화면딴에서 이게 안뜨게는 못하는걸까요?할 수 있다면 어떻게 해야하나요?  

안녕하세요 제로초님 강의 잘 듣고 있습니다 .제가 댓글 구현하기까지 잘 진행하던중 Comment가 antd에서 지원을 안해준다는 error가 발생하여 antd 버전을 강의와 맞게 다운그레이드 (npm i antd@4.16.1) 했습니다.근데 그 때 이후로 화면에 antd가 제대로 적용이 되지않은 상태가 되었습니다 . 다시 원래버전을 설치해도 같은 결과입니다 . Comment문제보단 화면에 antd가 다시 제대로 적용됬으면 합니다 . 혹시 해결방안이 있을까요?화면이 이런형식으로 바뀌였습니다. 코드는 지금까지 강의와 똑같이 진행하였습니다package.json

강사님이 예시로 보여줄땐 보이는데왜 제가 하면 payload 탭이 안보일까요ㅠ

강좌에서 알려주신대로 페이지의 getServerSideProps로 초기로드를 SSR하는 방식을제 프로젝트에서도 적용을 했는데요. 모든 페이지에 SSR을 진행하다보니막상 배포해서 돌려보면 첫페이지 로드를 빨리 보여주는 장점보다,서버에서 렌더링을 기다려야하는 단점이 눈에 띄게 보였습니다.사실 모든 페이지에서 SSR을 적용하면 기존의 전통적인 웹과 다를바가 없지않나라는생각들 들고, SEO vs SPA 둘 중의 하나의 고민으로 오게되는데 제로초님은 이런경우에어떤 기준으로 판단을 하시나요?getStaticProps() 가 SSG(static site generation)에 해당하고 getServerSideProps() 가 SSR(server side rendering)에 해당하는것이 맞나요?

안녕하세요 선생님맨 처음 설치 과정에서 막히는 부분이 있어 질문 남깁니다!class 폴더를 만들고, apollo, emotion등 것들을 분명 설치를 했는데 package.json에는 확인되지 않는 이유가 뭘까요?

제가 redux toolkit으로 제로초님 강의를 따라가고 있는데 제로초님이 올려주신 toolkit 깃허브 코드에는 addPostToMe에 대해 reducers로 선언만 다른 코드에서 사용하는건 안보이는데 그래서 제가 강의내용과 비슷하게 수정을 했습니다user.js const userSlice = createSlice({ name: "user", initialState, reducers: { addPostToMe(draft, action) { draft.me.Posts.unshift({ id: action.payload }); }, removePostOfMe(draft, action) { draft.me.Posts = draft.me.Posts.filter((v) => v.id !== action.payload); }, }, }) export const { addPostToMe, removePostOfMe } = userSlice.actions;PostForm.js import { addPostToMe } from "../reducers/user"; const onSubmit = useCallback(() => { const id = shortId.generate(); dispatch(addPost({ id, text })); dispatch(addPostToMe()); }, [text]);이렇게 코드를 수정했는데 혹시 제로초님은 다른 방식으로 addPostToMe를 사용했는데 제가 발견을 못한걸까요?아니면 제가 작성한 코드에 뭔가 다른 문제가 생길 수도 있나요?  

안녕하세요. 최근 강의를 수강을 시작하였는데요. nextjs가 13버전으로 바뀜에 따라 강의 에 맞게 소스 코드를 받아서 진행하려고 합니다. git checkout 으로 0-2 branch로 이동하고 여기서 부터 이어하려고 했으나,  error: Your local changes to the following files would be overwritten by checkout: pages/section1/clientSideRendering.tsx pages/section1/getServerSideProps.tsxPlease commit your changes or stash them before you switch branches.Aborting 변경점이 있는것 같아 해당 branch로 이동이 안되는것 같습니다!$ git stash && git pull origin master && git stash pop임시 저장소로 옮기고 pull을 하려고 했으나 git@github.com: Permission denied (publickey).fatal: Could not read from remote repository.Please make sure you have the correct access rightsand the repository exists. 키가 없어서 안되는것 같습니다! 혹시 이런경우에 어떻게 해결해야 할지 알 수 있을까요?     

강의 코드를 작성하다가 중간에 잘못 작성한 부분이 있었는지다음페이지를 눌렀을때 11 , 21, 31페이지로 넘어가지 않고계속 1 ~ 10페이지만 작동을 해서좀 이상하길래 재수정을 하고 재빌드를 했는데 코드의 이상이 없음에도 똑같이 작동하길래.next 폴더를 삭제하고 재빌드를 했더니정상작동 하는 것을 보았습니다..next 폴더가 캐싱 정보를 가지고 있어서 그랬던 건가요?만약에 .next 폴더를 건드리고 싶지 않다면 브라우저에서 캐시된 것들을 지우면 되는 건가요? 

안녕하세요, 강사님"댓글구현하기"편을 보던 중 기존 업무에서도 궁금했던 점이 생각나 질문 남깁니다. 예를들어 부모요소에서 하위요소에 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 인데몇으로 다운그레이 해야할까요 ? + 그 전까지는 잘 작동되던 워크벤치가 왜 갑자기 버전충돌이 일어난거죠 ?

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로 저장하는 방법이 있나요?

안녕하세요. Vercel 배포 후 상세페이지 meta tag내 thumbnail 이미지가 생성되지 않는 이슈가 발생합니다. (500 에러 발생)구글 참고하여 verce l내 runtime을 기존 Node 18에서 Node 14로 변경하고 빌드하여 해결하긴 했는데, 빌드 메세지가 아래처럼 발생합니다.(Error: Node.js version 14.x has reached End-of-Life. Deployments created on or after 2023-08-15 will fail to build. Please set Node.js Version to 18.x in your Project Settings to use Node.js 18.)Node 18로 빌드하고 난 후 vercel에서 runtime log를 확인해 보면 아래와 같은 에러가 발생하는데 구글링을 해봐도 14로 내리는 것 외엔 해결책을 찾을 수 없어 Node 18로 빌드하여 해결하신 분이 있는지 올려봅니다.[pid=22][err] /tmp/chromium: error while loading shared libraries: libnss3.so: cannot open shared object file: No such file or directory [pid=22] <process did exit: exitCode=127, signal=null> [pid=22] starting temporary directories cleanup

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

강의중 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라 나옵니다