Next 강의에서 App Router 실습을 위해서 강사님께서 올려주신 자료를 다운받으면위 사진과 같이 강의와는 다르게 Promise 타입이 존재하여 searchParams.q에 오류가 발생하게 됩니다.그래서 Promise 타입을 없애면 오류는 사라지지만 빌드타입에 오류가 아래와 같이 발생합니다.  어떻게 해결하면 될까요?

안녕하세요 강사님한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강좌 잘듣고 있습니다. 감사합니다.저는 자막을 켜고 보는데,아래 강좌의 자목이 잘못된 것을 발견했습니다.5-3) JSX로 UI 표현하기그리고, 동영상을 보다가, 일시정지하면서, 자막을 다시 확인하면서 보고 있습니다만, 혹시, 학습 편의를 위해서, 동영상 강좌 자막 대본 내용도 같이 올려주실수 없을까요?타입스크립트, Next.js에도 자막 대본 내용도 같이 올려주시면 좋겠습니다. ㅠ

eslint를 설치하면 이전과 달리 esling.config.mjs로 파일이 설정되며 extend나 rules의 활용이 기존과 다른 방식으로 진행되며 충돌이 일어납니다. stackoverflow나 chatGPT의 도움을 받아 동작은 되지만, 이 부분 다시 설명해주셔야 하는게 아닌지요. (기존에 설명된 부분들도 코드나 적용방식이 달라져서, 플러그인을 활용하도록 합니다)이 부분을 스스로 혼자 찾아서 수정할 수 있는 역량이 있다면 이 강의를 듣지 않겠지요. 하루 종일 한단원도 나가지 못하고 .. 해결하려다 포기하게 되네요. 2년전에 산 강의를 시간이 없어 이제 듣는 제 문제도 있겠지만.. 이 부분 상세한 설명을 넣어주셔야 할것 같아요.

firebase authentication 을 사용해서 회원가입을 구현 했습니다. 회원가입 페이지에서 정보를 입력하고 휴대전화에 sms를 보낸 후 인증번호를 입력하면 회원가입이 되는 것 까지 모두 정상적으로 작동합니다. 하지만 회원가입 페이지에서 sms 인증을 보낸 후 대략 1~2분 후*Timeout at handleError (http://localhost:3000/static/js/bundle.js:115024:58) at http://localhost:3000/static/js/bundle.js:115047:7이런 오류가 발생합니다. 도통 왜 발생하는지 못찾겠습니다.. 한번만 도와주세요ㅜㅜㅜㅜ회원가입 페이지 코드 부분 / sms 인증코드 확인 부분 const sendVerificationCode = async () => { if (!validateForm()) return; try { if (!window.recaptchaVerifier || window.recaptchaVerifier.expired) { resetRecaptcha(); } const phoneNumber = `+82${formData.phoneNumber.slice(1)}`; const appVerifier = window.recaptchaVerifier; const confirmationResult = await Promise.race([ signInWithPhoneNumber(auth, phoneNumber, appVerifier), new Promise((_, reject) => setTimeout(() => reject(new Error("Request timeout")), 120000) // 2 minutes ), ]); window.confirmationResult = confirmationResult; alert("Verification code sent!"); } catch (error) { console.error("Error sending verification code:", error); resetRecaptcha(); } }; const verifyCode = async () => { if (!inputValue.trim()) { alert("Please enter the verification code."); return; } try { const result = await Promise.race([ window.confirmationResult.confirm(inputValue), new Promise((_, reject) => setTimeout(() => reject(new Error("Verification timeout")), 180000) // 3 minutes ), ]); alert("Verification successful!"); // Handle user information here... } catch (error) { console.error("Verification error:", error); alert("Verification failed. Please try again."); } };  

오늘 카운터앱 강의를 들으면서 새로운 파일 (section06)을 만들었는데요. 가장 기본 세팅을 하고 화면에 카운터앱 이라는 단어를 렌더링 하려고 npm run dev를 한 후 ctrl shift p 를 눌러 페이지에 들어갔는데 글자가 렌더링 되지 않길래 개발자 도구를 켜 보았더니 Failed to load module script : Expected a JavaScript module script but the server responed with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTMl spec. 라는 오류가 뜨네요. 오류 해결을 위해 업데이트도 해보고, 파일을 지웠다 새로 만들어도 보고, 지피티에 물어보거나 인터넷에 검색도 해봤는데 도저히 오류가 고쳐지지 않습니다. 혹시나 해서 이번에 새로 만든 파일 말고 section05 파일을 실행시켜 보았더니 어제는 잘 되던 파일이 오늘은 똑같은 오류가 뜨며 실행이 되지 않더라구요. 무슨 오류일까요 ㅠㅠ 제발 도와주세요 엉엉엉엉엉엉엉엉

혹시 백엔드서버를 종료해도 에러가 뜨지안고 정상가동되면 어떻게해야하나요?.. 당황스럽네요 하하 아 캐싱문제네요 강제 새로고침으로 해결했습니다.감사합니다. 음 아니네요 여전히 이상하네요..전 이상하게 Footer에서 먼저 에러가 나네요.force cache가 되어있음에도.. 왜그럴까요?ㅜㅜ 

use client 가 선언되지 않아도 searchable-layout.tsx 에서 useEffect 가 동작 하는 이유는 무엇인가요?  제가 알기론 이런 클라이언트사이드 훅들은 use client를 최상위에 선언해줘야 동작한다고 이해했었습니다..

Home.jsx이렇게 하고 import { useEffect, useState } from 'react'; import HomeDataLength from '../components/HomeDataLength.jsx'; import HomeSearch from '../components/HomeSearch.jsx'; import CanvasItemList from '../components/CanvasItemList.jsx'; import SearchBar from '../components/SearchBar.jsx'; import GridFlexBTN from '../components/GridFlexBTN.jsx'; import { deleteHome, createHome, getHome } from '../api/home.js'; import { v4 as uuid } from 'uuid'; import dayjs from 'dayjs'; export default function Home() { const [isGrid, setIsGrid] = useState(true); const [search, setSearch] = useState(''); const [data, setData] = useState([]); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(false); useEffect(() => { const api = async () => { setIsLoading(true); setError(false); try { const response = await getHome(''); setData(response.data); } catch (err) { setError(err); } finally { setIsLoading(false); } }; api(); }, []); const [isLoadingCreate, setIsLoadingCreate] = useState(false); const [createError, setCreateError] = useState(false); // 등록버튼 누르면 새로운 데이터 저장 const handleNewCreate = async () => { // setIsLoadingCreate(true); // setCreateError(false); // try { const id = uuid(); const newCreate = { id, date: dayjs().format('YYYY-MM-DD HH:mm:ss'), text: `${id.substring(0, 4)}-테스트`, category: '테스트', }; await createHome(newCreate); console.log(123); // const res = await getHome(); // setData(res.data); // } catch (err) { // setCreateError(err); // console.log(createError, 'createError'); // } finally { // setIsLoadingCreate(false); // } }; const handleText = text => { const searchData = data.filter(d => d.text.toLowerCase().includes(text.toLowerCase()), ); if (searchData.length === 0) { setSearch(null); } else { setSearch(searchData); } }; const handleDelete = async id => { // const newData = data.filter(d => d.id !== id); // setData(newData); await deleteHome(id); }; return ( <> <> <div className="flex flex-col md:flex-row justify-between items-center"> <button className="hover:bg-blue-400 bg-blue-500 text-white rounded-md text-bold p-3" onClick={handleNewCreate} > 등록하기 </button> {isLoadingCreate && <p>등록중</p>} {createError && <p>{createError}</p>} <SearchBar handleText={handleText} /> <GridFlexBTN setIsGrid={setIsGrid} isGrid={isGrid} /> </div> <HomeDataLength data={data} error={error} isLoading={isLoading} /> <HomeSearch search={search} /> {!isLoading && !error && ( <CanvasItemList data={data || []} search={search} isGrid={isGrid} handleDelete={handleDelete} /> )} </> </> ); } home.js 파일은 아래와 같은 상태이면 import { home } from './http'; // 목록 조회 export const getHome = () => { return home.get('/'); }; // 등록 export const createHome = newCreate => { try { console.log('ㅅㅣ작'); } catch (error) { console.log('에러'); } finally { console.log('종료'); } // debugger; return home.post('/', newCreate); }; // 수정 // 삭제 export const deleteHome = id => { return home.post('/', id); }; db는 server-json을 사용하고 있습니다.그런데 get 요청을 할때는 잘 작동하는데post로 등록하거나 삭제할때는 db에 정상 등록, 삭제되는데 화면이 새로고침이 되버리는 상태입니다. Home.jsx 화면이 리렌더링이 되도록 하고싶은데 새로고침은 왜 그런지 모르겠습니다. postman으로도 post로 db에 저장했는데 리액트 화면이 자동으로 새로고침 되버립니다. 구글링도 해봤는데 해결이 안되서 문의드립니다.혹시나 해서 db.json이 변경되면 화면도 변경될까 싶어서 을 db.json --watch로만 해보고 --watch도 없애봤는데 안됩니다.   const handleNewCreate = async () => { console.log('시작1'); const id = uuid(); const newCreate = { id, date: dayjs().format('YYYY-MM-DD HH:mm:ss'), text: `${id.substring(0, 4)}-테스트`, category: '테스트', }; const data = await createHome(newCreate); console.log(data, 'data'); console.log('시작2'); debugger; };debugger를 사용했을때이렇게 데이터 나오는데 디버거 끄는 순간 바로 화면이 새로고침 되고 있습니다. 그리고 콘솔창도 새창으로 이전 내역이 다 사라지는 상태입니다. 

실제 https로 배포된 API를 fetch를 활용하여 SSR을 구현하고있습니다.문제는 local에서는 yarn build -> yarn start 하고 테스트를 진행하면 fetch가 정상적으로 작동합니다.하지만 AWS Amplify를 활용하여 Next JS를 배포하고 배포한 사이트에서 fetch(pending 이후에 catch로 빠짐)가 작동하지않습니다.API에 문제가 있나해서 다른 API를 CSR로 테스트를 해보면 정상적으로 200이 됩니다.원인이 뭘까요?

 폴라우트 페이지 2를 보면서 / 인덱스페이지가 강사님은 static 페이지가 아닌 다이나믹 페이지로 빌드가 되는 부분에서 강사님은 fetch에 force-cache를 적용시키면서 이제 다이나믹된 페이지를 static 페이지로 바꾸셨느데 일단 저는 force-cache 옵션을 적용을 안해도 static 페이지이더라구요강사님과 저랑 다른 점은 api호출하는 함수 부분을 따로 api 폴더에 빼둔거 말고는 다른 점은 없습니다 .이렇게 따로 빼놓은 뒤 그냥 promis.all로 데이터 패칭을 해서 그대로 화면에 보여줬습니다 (이것저것 시험하느라 Allbook ,RandomBook 컴포넌트를 따로 빼지는 않은 상태입니다. )export default async function Home() { const [allBooks, randomBooks] = await Promise.all([ fetchBooks(), fetchRandomBook(), ]);저는 force-cache 를 적용안햇는데도 왜 다이나믹 페이지가 안되고 static 페이지가 되는걸까요 ... 

// CssModulePage.jsx import styles from "./styles.module.css"; export default function CssModulePage() { return ( <> <button className={styles.버튼스타일}>버튼</button> <div className={styles.네모상자스타일}>네모상자</div> </> ); }.버튼스타일 { background-color: yellow; } .네모상자스타일 { width: 200px; height: 200px; }Server ErrorError: The default export is not a React Component in "/section04/04-03-css/page"

영상이 18분쯤 마무리 되는 것 같은데 영상길이가 87분으로 검은화면만 노출됩니다확인 부탁드려요!

 react native cli로 개발할때mac에서는ios,and 2가지가 있는데 윈도우에서는 android만 되는건가요? ios는 안되는건가요?

안녕하세요, 강의 잘 듣고 있습니다.jwtUtil.js 의 beforeRes 함수에서 아래 코드 관련 문의사항이 있습니다. // "ERROR_ACCESS_TOKEN" => JWTCheckFilter에서 어떠한 이유에서든 오류가 발생 시 if (data && data.error === 'ERROR_ACCESS_TOKEN') { const memberCookieValue = getCookie("member"); const result = await refreshJWT(memberCookieValue.accessToken, memberCookieValue.refreshToken); console.log("refreshJWT RESULT", result); memberCookieValue.accessToken = result.accessToken; memberCookieValue.refreshToken = result.refreshToken; setCookie("member", JSON.stringify(memberCookieValue), 1); // 원래의 호출 const originalRequest = res.config; originalRequest.headers.Authorization = `Bearer ${result.accessToken}`; return await axios(originalRequest); }위 코드를 보면, accessToken (또는 refreshToken이 같이) 새로 발급된 후, setCookie 함수로 cookie에는 새롭게 갱신된 accessToken/refreshToken을 저장하고 있지만, redux store에는 갱신된 token 정보들을 업데이트 하지 않고 있는 것 같습니다. (loginSlice의 reducer를 호출하지 않고 있네요...) 혹시 redux store에도 새롭게 refresh된 token들을 저장하고 싶다면, 어느 부분에서 처리해야 할까요?감사합니다.

안녕하세요강사님 목소리가 귀에 쏙쏙박혀 잘듣고있습니다.강의 내용이 2024년 초 기준이라 1년이 지난 현재시점 node LTS 버전이 20.xx.x 버전에서 지금은 22.xx.x 버전으로 올랐습니다.버전에 따른 이슈가 있을수도있을것같은데 강의 버전에 맞춰서 진행해야하나요? 아니면 최신버전으로 진행해도 문제없을까요?

제가 알기로는 서버 액션은 현재 url, 강의 기준 /i/flow/signup으로 네트워크 요청이 일어나는거로 알고 있는데 msw의 핸들러로 fetch를 하신 이유가 궁금합니다. 작동하는 코드인가요?const onSubmit = async (formData: FormData) => { "use server"; let shouldRedirect = false; try { const res = await fetch(`${process.env.NEXT_PUBLIC_BASE_URL}/api/users`, { method: "post", credentials: "include", body: formData, }); console.log(res.status); console.log(await res.json()); shouldRedirect = true; } catch (error) { console.error(error); } if (shouldRedirect) { redirect("/home"); } console.log("실행됨"); };위 코드는 SignupModal에서 msw의 핸들러로 form 제출 요청을 보내는 코드이고,http.post(`${baseUrl}/api/users`, () => { console.log("로그인 성공"); return HttpResponse.json({ message: "msw 성공", }); }),이 코드는 핸들러 코드입니다. 요청 url인 http://localhost:3000/api/users로 폼 제출이 정상적으로 이루어지는지 궁금합니다. 

안녕하세요:) 수업 잘 듣고 있습니다.2.1.4 공급자와 소비자 강의 中 7:04에서 this.setValue = this.setValue.bind(this)를 작성하셨는데 리액트에서의 바인딩이란 자식 컴포넌트에 프로퍼티로 이벤트 핸들러와 다른 함수들을 전달할 때,구체적으로 핸들러 안에서 부모 컴포넌트에 접근할 필요가 있을 때 해야 하는 것으로 알고 있습니다. 그런데, setValue는 자식 컴포넌트로 이벤트 핸들러를 넘겨주는 상황이 아닌데 이벤트 바인딩을 해야 하는 이유가 무엇인지 궁금합니다.화살표 함수를 활용하면 자연스럽게 바인딩이 되는데 왜 화살표함수를 안쓰신 건지 궁금합니다.  

안녕하세요 강사님해당 7.3 섹션의 깃헙은 업데이트가 안되이어있는 것 같습니다.소소한 제보 드립니다... https://github.com/winterlood/onebite-react-v2/tree/main/section07/chapter03

안녕하세요.npm create vite@lastest 명령어 입력시 아래와 같이 오류가 발생하고 있습니다. 어떻게 해결해야 하는지 알수있을까요? => 노드 버전 (v22. 12. 0)=> 사용자 계정명 영어오류 발생했을 때 확인 부분1. npm 버전이 낮아 현재 11버전으로 업데이트 진행2. npm chche clean --force 진행 후 명령어 재실행 발생한 에러 메세지C:\Users\dwkim\Desktop\study\React\oneBite-React>npm create vite@lastestnpm error code ETARGETnpm error notarget No matching version found for create-vite@lastest.npm error notarget In most cases you or one of your dependencies are requestingnpm error notarget a package version that doesn't exist.npm error A complete log of this run can be found in: C:\Users\dwkim\AppData\Local\npm-cache\_logs\2025-01-11T02_29_00_002Z-debug-0.log

안녕하세요 강사님조건문, 반복문에서 또는커스텀 훅을 사용하기 전에 Hook을 사용하였을 때는함수 컴포넌트 외부에서 호출했을 때 오류가 발생하는 것 처럼 별다른 오류가 발생하지 않는데 말씀하신 내용으로는 권장사항인걸까요?조건문, 반복만에서 Hook 호출 시import { useState } from "react"; const HookExam = () => { //const state = useState(); if (true) { const state = useState(); console.log(state); } for (let i=0; i<1; i++) { const state = useState(); console.log(state); } return <div>HookExam</div> }; export default HookExam; 커스텀 훅 만들기 전에 Hook 호출 시import { useState } from "react"; function getInput() { const [input, setInput] = useState(""); const onChange = (e) => { setInput(e.target.value); console.log(e.target.value); }; return [input, onChange]; } const HookExam = () => { const [input, onChange] = getInput(); return ( <div> <input value={input} onChange={onChange}/> </div> ); }; export default HookExam;함수 컴포넌트 외부에서 Hook 호출 시