안녕하세요 강사님! 수업 내용을 바탕으로 useRef 를 이용해 직전 상태값을 저장하고 관리하는 로직을 실습하던 중 궁금한 점이 생겨 질문드립니다. 강의 내용처럼 useRef 를 사용하여 렌더링 사이의 값을 보관하고 이를 화면에 출력하려고 코드를 작성했습니다. 이때 최신 ESLint 규칙에서 "Cannot access refs during render" 라는 에러(react-hooks/refs)가 발생합니다. 제가 공부한 바로는 리액트의 '렌더 단계(Render Phase)'의 순수성을 지키고 데이터 불일치를 방지하기 위해 렌더링 도중 Ref 접근을 금지한다고 이해했습니다. 이와 관련하여 강사님에게 질문드립니다. 만약 ref를 사용하는 현재의 구조를 유지하면서 리액트의 렌더링 원칙을 준수할 수 있는 더 나은 패턴(예: 커스텀 훅 등)이 있다면 무엇인지 조언 부탁드립니다. 감사합니다~!
22. REST 방식 컨트롤러 만들기(2)에서 포스트맨으로 글 등록 테스트 할 때 complete 필드가 없는 경우 Bad Request 400에러가 나는 걸 확인했습니다. { "title": "Test title", "writer": "testuser", "complete": false, "dueDate": "2026-02-04" } 위와같이 complete필드를 추가하니 잘 되었는데, 문제는 29강에서처럼 브라우저 화면에서 테스트 해보니 아래와같이 400에러가 발생합니다. 여기도 마찬가지로 입력폼에서 complete필드가 없어서 그런것 같은데 강의에서는 등록이 잘 되는게 이해가 안되네요. 섹션4까지 완성된 코드를 다운받아서 실행해보았지만 위의 사진처럼 브라우저에서 등록 시 400에러가 발생합니다.
안녕하세요 강사님! 강의에서 useRef는 값이 변경되었을 때 리렌더링을 발생시키지 않으므로 값이나 DOM 요소를 참고하고 싶을 때 사용한다고 하셨는데요. 1) 강의 예제 중, 수정이 일어난 횟수를 countRef에 담기도록 하셨는데, 이 때 값이 변경되어 ' onChange 함수에서 setInput 함수를 호출함으로써 리렌더링이 발생하는 것이고, countRef.current++는 리렌더링이 발생함과 동시에 값이 증가 되는 것 뿐이다 '라고 이해하면 되는 것일까요? 1번 코드 참고하시면 됩니다! 2) 위처럼 이해를 하다가 문득 궁금한 것이 생겼는데, 2번 코드 처럼.. useState의 input 객체에 count 프로퍼티를 추가하여 0으로 초기화 해주었습니다. 그리고 onChange 함수에서 setInput으로 count를 +1 시켜주었는데요. 1번 예제처럼 수정할 때 마다 count가 +1 되는 것을 의도하였는데, 이 때 textarea에서 ㄱ을 입력했다면, setInput 함수는 한 번 호출되며 textarea 수정과 count 증가가 동시에 발생하고 'textarea 수정 + count 증가' 이렇게 리렌더링이 한 번 발생하는 걸까요? 3) 만약 2번 질문의 답이 '결국 setInput 함수가 한 번 호출되며 작동하는 것이므로 리렌더링은 한 번이다.' 라면, 1번과 2번 코드는 '리렌더링이 발생할 때 마다 count 증가' 라는 점에서 같은 결과인 걸까요..? 질문이 좀 복잡하지만.. 답변해주시면 감사하겠습니다..! 1) useRef 사용하여 count import { useRef, useState } from "react"; export default function Test() { const [input, setInput] = useState({ name: "", bio: "", }); const countRef = useRef(0); console.log(input); console.log(countRef.current); const onChange = (e) => { countRef.current++; setInput({ ...input, [e.target.name]: e.target.value, }); }; return ( <div>...</div> ) } 2) useState로 count import { useState } from "react"; export default function Test() { const [input, setInput] = useState({ name: "", bio: "", count: 0, }); console.log(input); const onChange = (e) => { setInput({ ...input, [e.target.name]: e.target.value, count: input.count + 1, }); }; return ( <div>...</div> ) }
안녕하세요. 강의 잘 수강하고 있습니다. /usage 명령어를 통해 토큰 잔여량을 확인할 때, Resets 시간을 강의 영상처럼 (Asia/Seoul)로 확인 할 수 있을거라 생각했는데 저는 (UTC)로 표기되어 있습니다. 해당 기준 시간 설정을 어디서 어떻게 하면 되는지 여쭤봅니다. 감사합니다.
현재 29. [ADDED] 대화형 질문 기능 까지 수강했습니다. 프로젝트를 처음 시작할 때 계획모드에서 대화형 질문이 강의처럼 나오고 원하는 스택을 선택할 수 있으면 엄청 편할것같은데요, 클로드코드가 이런 스택 선택을 질문 하도록 유도할 수 있을까요? 저는 이력서 실습 후에 바로 진행해서 그런지 스택에 관련한 질문은 하지 않더라구요. 이미지에서 노란 하이라이트 부분이 클로드코드가 물어본 질문과 제 대답입니다.
안녕하세요 회사에서 vue를 사용해 퍼블을 해야돼서 인강을 구매했는데, 제가 생성한 파일이랑 형식이 달라서 어떻게 따라가야 할 지 문의드립니다. 제가 알고 있는 화면 구성은 아래 사진인데 Vue.create 이런건 어떻게 바꿔야 하는지 모르겠습니다ㅜ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>vue-project</title> </head> <body> <div id="app"></div> <script type="module" src="/src/main.js"></script> </body> </html>
윈도우 환경에서 진행하시는 분들 use context7 부분에서 오류날텐데 .mcp.json 파일 아래 처럼 바꿔주세요. 관련 내용은 /doctor 실행하면 볼 수 있습니다. { "mcpServers": { "context7": { "type": "stdio", "command": "cmd", "args": [ "/c", "npx", "-y", "@upstash/context7-mcp", "--api-key", "발급받은 API 키" ], "env": {} } } }
안녕하세요 선생님! 매일매일 선생님의 강의를 수강하고 있는 제자입니다. 다름이 아니라 실전 반응형 웹사이트 제작 전 해당 웹사이트에 접속해서 크롬 확장 프로그램을 이용해 이미지 다운을 받으려고 합니다. 근데 현재 시점에서 넷플릭스, 크롬 사이트의 구성과 이미지 파일이 선생님의 강의와 많이 달라져서 수업을 잘 따라갈 수 있을지 걱정이 됩니다. 현재 각 웹사이트들의 이미지 소스들을 다운받아서 현 시점 웹사이트와 똑같이 혼자 만들려면 너무 어렵지 않을까 걱정되어서요ㅠㅠ 또 선생님 강의를 못따라 갈까봐 걱정도 되구요ㅠㅠ 현시점에서 어떤식으로 학습해야하는지 방향제시 부탁드립니다.ㅠㅠ
