const onChangeTerm = useCallback((e) => { setTerm(e.target.checked); console.log(term); setTermError(false); }, []); console.log(term);이렇게 term의 consol.log를 찍어서 확인해 봤는데 setState는 비동기이기에 term의 초기값이 false라고 했을때 useState는 비동기이니 하면첫번째 term의 consol.log는falsetruetruefalsefasletrue이런식으로 진행되야 할꺼 같은데실제로 로그 를 찍어보니까 onChangeTerm안에 있는 console.log(term)은 계속 false로 찍힙니다 이유가 무었인가요?

중고마켓 게시글 작성하는 부분을 작업 하고 있는데 여기서 게시글작성은 회원만 등록 할 수 있는것을 파악하였습니다.그래서 withAuth를 이용해서 분기처리를 하였는데 로그인 해도 로그인하라는 문구가 떠서 질문 드립니다.markets -> new -> index.tsxwithAuth어떤 식으로 해야 로그인 시 게시글 작성을 할 수 있을까요 , 또 로그인 안했을 시 빽쪽에서 막아놨기 때문에 게시글을 작성 할 수 없는걸까요?

회원가입 피그마 정답이 있는지 궁금하네요 열심히 만들었는데 비교를 할 수가 없어서 문제이네요최대한 비슷하게 했는데 미묘하게 달라서 제가 맞게 한건지 모르겠네요 섹션 7에 파이널 정답이 있는건 아는데 섹션2랑은 많이 달라서 문제네요  

회원가입 페이지 만들기(커스텀 훅) 강의를 듣던 중 질문 남깁니다.스타일 객체를 컴포넌트 바깥에 적으면 리랜더링을 줄일 수 있나요? 강의에서 style props값을 넣어줄때 객체로 넣어주면 react는 {} === {} //false이기에 매번 다르게 인식해서 리랜더 돌기에 useMemo를 해주면 좋다고 들었습니다.그런데, antd예시를 보니 style 객체를 컴포넌트 바깥에 두는 경우도 있더라구요.import { Button, Form, Input, } from 'antd'; const tailFormItemLayout = { wrapperCol: { xs: { span: 24, offset: 0, }, sm: { span: 16, offset: 8, }, }, }; const App = () => { const [form] = Form.useForm(); return ( <Form form={form} name="register" > <Form.Item name="agreement" valuePropName="checked" {...tailFormItemLayout} > <Checkbox> I have read the <a href="">agreement</a> </Checkbox> </Form.Item> </Form> ); }; export default App;이처럼 stlye에 담길 객체를 App 컴포넌트 바깥에 넣어두면 App이 랜더링되는 것과는 별개로 전역 선언된 거니까 리랜더 문제가 없는건 아닐까 궁금하여 문의 남깁니다.한마디로 App이 호출되서 랜더링 될때 tailFormItemLayout는 바깥에 선언되어있으니 리랜더 될 일이 없지 않을까..? 강의 잘 듣고 있습니다. 현명한 질문을 한 건지 모르겠네요. 답변기다리겠습니다. 감사합니다.

섹션 34에서 15분대에 _app.tsx 소스 파일을 eslint 형식에 맞게 수정하는 중에 이 사진처럼 Component 부분에 에러가 발생하는데 어떤 이유에서 발생하는지 알고 싶습니다. 검색을 해보니깐 버전이 꼬여서 발생한거라고 하는데... 이해가 가지 않습니다 ㅠㅠ  [ 상세 에러 ]'Component' cannot be used as a JSX component. Its type 'NextComponentType<NextPageContext, any, {}>' is not a valid JSX element type. Type 'ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext): any; }' is not assignable to type 'ElementType'. Type 'ComponentClass<{}, any> & { getInitialProps?(context: NextPageContext): any; }' is not assignable to type 'new (props: any) => Component<any, any, any>'. Construct signature return types 'Component<{}, any, any>' and 'Component<any, any, any>' are incompatible. The types returned by 'render()' are incompatible between these types. Type 'React.ReactNode' is not assignable to type 'import("c:/VsCodeProject/0.study/inflearn/codecamp-frontend/class/node_modules/@types/react-transition-group/node_modules/@types/react/index").ReactNode'.

안녕하세요 https://www.figma.com/file/e0ebI5c2LtjNMR8acwU0JS/%E1%84%8A%E1%85%A1%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%AF%E1%86%AF%E1%84%83%E1%85%B3?node-id=0%3A1올려주신 강의 따라하던중 notion에 공유해주신 내용중 싸이월드 만들기 1탄에 올려주셨던 figma url 연결시 "Figma is experiencing a temporary outage. We'll be back soon!" 와 같은 오류창이 뜹니다.url 연결 확인 부탁드려요~

package-lock.jspackage.jsontsconfig.json src디렉터리강의 보면 다운받아서 초기설정해주는것같은데얘네는 개발자가 원래 다 직접 쳐야하나요???아니면매번 파일들을 저장했다가 프로젝트처음할때붙여놓고 npm i 하고 해야하는건가요???

실습이 불가능하다면 그냥 눈으로 보고 흐름만 이해하고 넘어가면 되나요? 따로 타이핑 하거나 파일, 터미널에서 설치해야되는것도 안하고 넘어가나요

function ratingDetail(num) { // 여기에 코드를 작성하세요. let result; if (num >=90 && num <=100 ) { result = "A"; if (num >= 96) { result += "+"; } else if (num <= 93) { result += "-"; } else { } } else if (num >= 80 && num < 90) { result = "B"; if (num >= 86) { result += "+"; } else if (num <= 83) { result += "-"; } else { } } else if (num >= 70 && num < 80) { result = "C"; if (num >= 76) { result += "+"; } else if (num < 73) { result += "-"; } else { } } else if (num >= 60 && num < 70) { result = "D"; if (num >= 66) { result += "+"; } else if (num < 63) { result += "-"; } else { } } else if (num > 0 && num < 60) { result = "등급미달"; } else { result = "잘못된 값입니다"; } return result;}ratingDetail(60); output에 맞추다 보니 이렇게 코드가 길고가독성이 떨어지게 되었습니다.if문을 중첩으로 사용하는 것 외의다른 방법으로 코드를 최적화할 수 있는 방법이 궁금합니다. 커리큘럼 중 어느 부분을 찾아서 공부하고 응용하면 될까요?

 안녕하세요. 프로시저를 만든는 도중 에러가 발생해서 질문드립니다.똑같이 작성했는데도 에러가 나오네요. 세미콜론도 여러번 확인했는데 혹시 오류가 나는 다른 이유가 있을까요??

안녕하세요 제로초님우분투 서버에서 npm run build를 하는데처음에는ModuleNotFoundError: Module not found: Error: Can't resolve 'immer' in '/home/ubuntu/react-nodebird/front/util'> Build error occurredError: > Build failed because of webpack errorsat build (/home/ubuntu/react-nodebird/front/node_modules/next/dist/build/index.js:15:918)at runMicrotasks (<anonymous>)at processTicksAndRejections (internal/process/task_queues.js:95:5)npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! nodebird@1.0.0 build: cross-env ANALYZE=true NODE_ENV=production next buildnpm ERR! Exit status 1npm ERR!npm ERR! Failed at the nodebird@1.0.0 build script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above. 이 오류가 떠서 다시 immer 설치 후에 git commit, git push, 우분투 서버에서 git pull을 하였습니다. 그 다음에는 굵게 표시한 에러로 바뀌었는데./util/produce.jsAttempted import error: 'enableES5' is not exported from 'immer'.> Build error occurredError: > Build failed because of webpack errorsat build (/home/ubuntu/react-nodebird/front/node_modules/next/dist/build/index.js:15:918)at runMicrotasks (<anonymous>)at processTicksAndRejections (internal/process/task_queues.js:95:5)npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! nodebird@1.0.0 build: cross-env ANALYZE=true NODE_ENV=production next buildnpm ERR! Exit status 1npm ERR!npm ERR! Failed at the nodebird@1.0.0 build script.npm ERR! This is probably not a problem with npm. There is likely additional logging output above.util/produce 파일은 강의에 나온 파일과 똑같습니다!오류가 왜 나는지 어떻게 해결해야 할지 모르겠어서 질문 남깁니다.. 감사합니다!immer 버전은 "immer": "^9.0.21", 입니다!! 

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 현재 react-router-dom 공식사이트에 들어가면이제 creatBrowserRouter가 나오는데 이건 현재 최신버전이 바뀐건가요??저도 BrowsweRouter을 알고있었는데만약에 이런식으로 업데이트 돼서 새로운 버전이 나오면 새로운 버전을 공부하는 게 나을까요?아니면 기존에 사용했던 버전을 사용하는게 맞을까요??

const OddEvenResult = ({ count }) => { return <div>{count % 2 === 0 ? "짝수" : "홀수"}</div>; }; export default OddEvenResult; const OddEvenResult = (count ) => { return <div>{count % 2 === 0 ? "짝수" : "홀수"}</div>; }; export default OddEvenResult; count를 props로 넘겼을 때 첫번째는 제대로 동작하지만 2번째는 짝수,홀수 구분을 하지 못합니다.  하지만 2번째도 count가인건 인지하고 있습니다(홀수로 출력되기 때문)  counter.js에서 initalvaue가 객체이기 떄문에 oddevenresult에서도 {} 이렇게 받아야 제대로 동작 하는걸까요?

안녕하세요? 프로그램 설치 관련 질의 드린 gunaadatcom입니다. 권장하신 대로 ver2 강의에서 요구하는 대로 next.js에서 node.js 다시 다운받고 아래와 같이 다운로드를 진행하였으나 계속 애로가 나서 질의 한번 더 드립니다... npx create-next-app를 통해 폴더를 만들려고 하였으나 진행이 되질 않습니다. 확인 부탁 드립니다~~ ㅠ.ㅠ

제가 듣는 수업이 ver1 인지 ver2 인지 어떻게 확인할까요 ?

안녕하세요.몇 가지 질문 드리고자합니다.로그아웃 후 client.clearStore() 통해서 로그인 정보를 지워주는 것으로 알고 있는데 accessToken이 지워지는건가요?로그아웃 후 새로고침을 하면위와 같은 코드가 동작하여 refreshToken이 남아 있어서 토큰을 재발급 받고 있습니다. 로그아웃을 할 때 refreshToken도 삭제할 수 있나요?

import { useState, useRef, useEffect } from 'react'; function VideoPlayer({ src, isPlaying }) { const ref = useRef(null); useEffect(() => { if (isPlaying) { ref.current.play(); } else { ref.current.pause(); } }); return <video ref={ref} src={src} loop playsInline />; } export default function App() { const [isPlaying, setIsPlaying] = useState(false); return ( <> <button onClick={() => setIsPlaying(!isPlaying)}> {isPlaying ? 'Pause' : 'Play'} </button> <VideoPlayer isPlaying={isPlaying} src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" /> </> ); }위의 코드는 링크에 있는 리액트 공식 문서에 있는 코드입니다https://react.dev/learn/synchronizing-with-effectsuseEffect에서 배열을 생략하면 맨처음에 실행되고 그이후는 리랜더링 될때마다 실행된다는데 이번 강좌에서 리액트는 변경하는 props와 state만 리랜더링한다고 하셨습니다 그럼 useEffect를 배열없이 사용하면 연결된 모든 자식 혹은 부모 컴포넌트에서 리랜더링되는 props와 state가 발견이 되면 useEffect가 작동되는 건가요?

안녕하세요? 열심히 수강 중인 직장인입니다. 섹션4 react 기초 1강에서 설명하시는 대로, node.js, npm, yarn까지는 설치가 완료되었습니다만, 그 후 notion이라는 곳에 접속하여 다른 사항들을 설치하고자 하였으나, notion 접속 방법을 모르겠습니다.  영상을 보고 강사님이 접속하신 곳 주소를 그대로 입력하여 접속 및 회원가입을 하였으나, 강사님이 영상에서 보시는 곳과는 사뭇 다른 곳이라 접속 방법 등을 문의코자 글 남깁니다.  빠른 답변 부탁 드립니다.

vscode에서 저장시 foramting을 어떻게 해야할까요?const EmotionItem = ({ emotion_id, emotion_img, emotion_description, onClick }) 저는 저장을 해도 이렇게 한줄로 계속 남습니다.

USER와 Profile테이블은 OneToOne 관계입니다.근데 서로 하나씩만 존재하다면 그냥 USER테이블에 Profile을 넣어버리면 되는거 아닌가요?OneToOne 관계를 유지하는 특별한 이유가 있나요??하나의 테이블이 커지는걸 방지하기 위해 OneToOne 관계를 형성하는 걸까요?