antd 편해서 적용하려는데 문제없나요?styled component 문제있다하셔서 css module로 커스텀하려는데 인라인 스타일로 커스텀하면되나요?

한입 잘라먹는 NEXT.JS 강좌 풀라우트 캐시 2 4분 30초 쯤에Suspense 를 사용하여 next run build 를 하는 과정이 있습니다그런데  Type error: Type '{ searchParams: { q?: string | undefined; }; }' does not satisfy the constraint 'PageProps'. Types of property 'searchParams' are incompatible. Type '{ q?: string | undefined; }' is missing the following properties from type 'Promise<any>': then, catch, finally, [Symbol.toStringTag] 32 | 33 | // Check the prop type of the entry function> 34 | checkFields<Diff<PageProps, FirstArg<TEntry['default']>, 'default'>>() | ^ 35 | 36 | // Check the arguments and return type of the generateMetadata function 37 | if ('generateMetadata' in entry) {계속 이런 에러가 발생해서 구글링 해서 찾아보면 components 및 해당 app 폴더 안에 중첩되는 page.tsx 나 layout.tsx 가 존재하면 이러한 에러가 발생할수도 있다고 하여 각 폴더 마다 파일명을 변경하고 계속 빌드를 시도했지만 에러문구는 해결이 되지않고 있네요...위의 사진은 제가 현재 문제가 발생하고 있는 프로젝트의 전체 폴더 및 파일 구조입니다.어디가 문제일까요...ㅠ 답변 부탁드리겠습니다.

안녕하세요 현재 Context분리하기 부분의 강의를 듣고 있습니다. Provider를 사용하면 onCreate, onUpdate, onDelete에서 사용한 useCallback이 되지않는 것을 볼 수있는데 이 이유는 Provider도 컴포넌트이고 이 안에 onCreate, onUpdate, onDelete 객체들이기 때문에 주소값이 바뀌므로 전부 재렌더링이 되어서 useCallback이 되지 않는다..... 이렇게 이해를 했는데 이렇게 이해를 하는게 맞는건가요? 그리고 TodoDispatchContext에서 onCreate, onUpdate, onDeleterk 변경되지 않는 값이라고 나오는데 할일을 추가하면 추가한 내용이 나오고 업데이트도 변경되고 삭제부분도 삭제를 하면 해당내용이 없어지기 때문에 변경이 되는데 이 변경되지 않는 값이라는게 정확히 어떤말인지 궁금합니다.

 7:45에서 ref={inputRef} 코드가 보이는데요, console에 출력되는 input요소가 단순 모양만 같은 <input... > 인것인지, 아니면 현재 페이지의 input 요소인건지 궁금합니다.만약 후자라면 똑같이 생긴 input 요소를 2개 만들어도 정확히 원하는 요소를 가리키겠지만, 전자라면 버그가 발생하지 않을까? 하는 생각이 들었어요.  그리고 만약 지금 name 말고 다른 input들도 유효성 검사를 하고 싶다면.. ref를 여러개 만들어야하나요??  질문이 너무 뒤섞여있네요 하하    

안녕하세요 강사님 좋은 강의 감사드립니다. 몇 가지 헷갈리는 점이 있어 질문드립니다. React (CSR)에서는 js Bundle시 요청 페이지 뿐만 아니라 모든 페이지의 자바스크립트 파일과 컴포넌트들을 불러오는 반면, Next (SSR)에서는 js Bundle시 모든 페이지가 아닌 요청페이지의 파일과 컴포넌트들을 불러온다.제가 이해한 게 맞을까요?2. 프리 페칭 시점은 js bundle후 -> 페이지에 접속한 후 -> "프리페칭" 이 시점이 맞을까요?(프리페칭 시점에 현재 페이지에서 이동할 수 있는 모든 페이지들의 자바스크립트를 사전에 불러온다.)3. next에서 js bundle시 요청페이지의 파일을 불러온다고 했는데, 요청페이지의 파일은 _app.tsx를 기준으로 하나요?

export default function FormComponent() { return ( <form onSubmit={handleSubmit}> <input name="first" type="text" value="첫번째" /> <input name="second" type="text" value="두번째" /> <button type="submit">Submit 버튼</button> </form> ); }위와 같이 input 에 value props 를 설정하면 왜 타이핑이 안되는지 이해가 잘 안됩니다. 순수 HTML 에서는 input 요소의 value 속성은 초기값이고 변화된 현재값은 DOM 의 value 프로퍼티를 통해 가져올 수 있다고 알고있는데 React 에서는 뭐가 달라지길래 value props 를 설정만 하더라도 input 에 입력값이 변화되지 않는 것인지 알고 싶어요!

안녕하세요. 수강생 입니다. 좋은 강의 잘 수강하면서 열심히 공부하고 있습니다.노션 페이지 내용 관련으로 문의드립니다.[입문] 시작은 프리캠프 - 섹션 3 CSS의 기본과 싸이월드 실습 1CSS 사용방법 3가지 예시 이미지 중 해당 내용들에 대한 이미지가 이상해문의 남깁니다. 감사합니다. 

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 혹시 작은 따옴표와 백틱을 구분하여 사용해야 하나요?백틱을 써야하는데 작은 따옴표를 쓰면 오류가 나거나 그 반대 상황에서도 오류가 나는 경우가 있을까요?큰 따옴표도 궁금합니다!

node 버전은 20.18.1 설치했습니다알려주신 방법대로 터미널에서 명령어가 만들어졌습니다npx create-react-app . --template typescript && npm install -D tailwindcss postcss autoprefixer && npx tailwindcss init -p실행하니 아래 에러가 발생합니다Installing template dependencies using npm... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: pomodoro@0.1.0 npm error Found: react@19.0.0 npm error node_modules/react npm error react@"^19.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^18.0.0" from @testing-library/react@13.4.0 npm error node_modules/@testing-library/react npm error @testing-library/react@"^13.0.0" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see:인터넷을 통해 찾아본 바로는 리엑트 19 버전 호환성 문제로 에러가 나는거라는데 vite 를 사용해서 프로젝트를 생성하는걸 추천하네요해결 방법이 없을까요?

연결이 안되네요. 오류 메세지를 올릴게요.  MongooseError: The uri parameter to openUri() must be a string, got "undefined". Make sure the first parameter to mongoose.connect() or mongoose.createConnection() is a string. at NativeConnection.createClient (D:\inflearn\boiler-plate\node_modules\mongoose\lib\drivers\node-mongodb-native\connection.js:225:11) at NativeConnection.openUri (D:\inflearn\boiler-plate\node_modules\mongoose\lib\connection.js:835:34) at connect (D:\inflearn\boiler-plate\node_modules\mongoose\lib\mongoose.js:447:15) at file:///D:/inflearn/boiler-plate/index.js:19:1 at ModuleJob.run (node:internal/modules/esm/module_job:268:25) at async onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:543:26) at async asyncRunEntryPointWithESMLoader (node:internal/modules/run_main:116:5)Example app listening on port 5000node:internal/modules/esm/resolve:257 throw new ERR_MODULE_NOT_FOUND( ^Error [ERR_MODULE_NOT_FOUND]: Cannot find module 'D:\inflearn\boiler-plate\config\dev' imported from D:\inflearn\boiler-plate\config\key.js at finalizeResolution (node:internal/modules/esm/resolve:257:11) at moduleResolve (node:internal/modules/esm/resolve:913:10) at defaultResolve (node:internal/modules/esm/resolve:1037:11) at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:650:12) at #cachedDefaultResolve (node:internal/modules/esm/loader:599:25) at ModuleLoader.resolve (node:internal/modules/esm/loader:582:38) at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:241:38) at onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:542:36) at TracingChannel.tracePromise (node:diagnostics_channel:337:14) at ModuleLoader.import (node:internal/modules/esm/loader:541:21) { code: 'ERR_MODULE_NOT_FOUND', url: 'file:///D:/inflearn/boiler-plate/config/dev'}Node.js v22.11.0 at moduleResolve (node:internal/modules/esm/resolve:913:10) at defaultResolve (node:internal/modules/esm/resolve:1037:11) at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:650:12) at #cachedDefaultResolve (node:internal/modules/esm/loader:599:25) at ModuleLoader.resolve (node:internal/modules/esm/loader:582:38) at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:241:38) at onImport.tracePromise.__proto__ (node:internal/modules/esm/loader:542:36) at TracingChannel.tracePromise (node:diagnostics_channel:337:14) at ModuleLoader.import (node:internal/modules/esm/loader:541:21) { code: 'ERR_MODULE_NOT_FOUND', url: 'file:///D:/inflearn/boiler-plate/config/dev'}Node.js v22.11.0 code: 'ERR_MODULE_NOT_FOUND', url: 'file:///D:/inflearn/boiler-plate/config/dev'}

섹션 5 4.2 첫 React App 생성하기 - 3분 3초 npm create vite@latest 입력 시 아래와 같은 에러가 납니다. 예전에 vue 프로젝트를 만들 때도 똑같은 에러가 났는데 구글에 검색하고 생성형 AI에 물어봐도 해결이 안 돼서 질문 드립니다,,에러 코드: $ npm create vite@latest> npx> create-vitenpm error code 3221225477npm error path C:\Onebite_Reactnpm error command failednpm error command C:\WINDOWS\system32\cmd.exe /d /s /c create-vitenpm error A complete log of this run can be found in: C:\Users\조현희\AppData\Local\npm-cache\_logs\2024-12-20T17_22_12_873Z-debug-0.log/c/Program Files/nodejs/npm: line 65: 1280 Segmentation fault "$NODE_EXE" "$NPM_CLI_JS" "$@"

안녕하세요 정환님. 우선 좋은 강의 감사드려요! 첫 프론트엔드 입문임에도 즐겁게 따라가고 있습니다. useEffect를 설명하는 과정에서 setCount가 비동기 방식이니 count 변수에 바로 반영이 되지 않는다는 말씀을 듣고 궁금증이 생겨서 질문드립니다. (구글링을 시도해 봤으나 키워드 자체가 익숙하지 않아 정보를 찾기 힘들었습니다 ㅎㅎ;;)const onClickButton = (incrementValue) => { const updatedCount = count + incrementValue; setCount(updatedCount); console.log(updatedCount); };위 코드와 같이 count를 더한 값을 미리 계산한 뒤, 그 값으로 setCount 및 console.log()를 찍어보면 업데이트시마다 값이 정확히 출력되는 것을 확인했습니다.현재는 App 컴포넌트에서 count 변수의 값을 조작하는 곳이 버튼 한 곳(해당 이벤트 리스너) 밖에 없기에 크게 문제될 여지는 없다고 느껴집니다.즉, 해당 경우에서는 단순 로그만 찍고 있는데, 이 경우라면 useEffect보다 해당 이벤트 리스너에 코드 한 줄 추가하는 것이 더 간단하다는 생각이 들었습니다! 결과적으로, 관리 포인트가 한 곳인 위 케이스에서 마저도 useEffect를 사용하는 것이 좋은 방법인지 여쭤보고 싶습니다! 배속으로 들어도 소리도 참 잘 들리는.. 너무 깔끔한 강의 감사합니다! 따뜻한 연말 보내세요🙇

[입문] 시작은 프리캠프 - 섹션 2 HTML과 기술스택 이해하기 노션 페이지 내용 중 종속태그 예시 부분의 이미지에 태그 내용은 없고 글자만 표기되어 있습니다. 이 부분이 오류인지 확인 부탁드립니다. 

윈도우 해결법은 있는데, Mac 해결법은 없는 것 같아서 공유 합니다. 터미널에 아래 명령어 입력하시구, mkdir ~/.npm-globalexport NPM_CONFIG_PREFIX=~/.npm-globalexport PATH=$PATH:~/.npm-global/binecho -e "export NPM_CONFIG_PREFIX=~/.npm-global\nexport PATH=$PATH:~/.npm-global/bin" >> ~/.bashrc  npm install -g vercel 입력하시면 정상 설치됩니다~!

강의를 듣다가 궁금한 점이 생겨서 질문드립니다.브라우저에서 실행되는 코드에서는 브라우저 클라이언트를 사용하고, 서버에서 실행되는 코드에서는 서버 클라이언트를 사용합니다. - [Creating a Supabase client for SSR](https://supabase.com/docs/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=nextjs&queryGroups=environment&environment=client#create-a-client)@supabase/ssr 라이브러리를 사용해서 2가지 유형의 클라이언트를 생성합니다.클라이언트 컴포넌트 클라이언트(createBrowerClient) - 브라우저에서 실행되는 클라이언트 컴포넌트에서 Supabase에 접근서버 컴포넌트 클라이언트(createServerClient) - 서버에서만 실행되는 서버 컴포넌트, 서버 액션 및 라우트 핸들러에서 Supabase에 접근 서버 컴포넌트로 동작하는 page 컴포넌트에서 각 클라이언트를 사용해 번갈아 API 호출을 해봤는데 동일하게 작동하는 것 같았습니다. 서버 컴포넌트에서 Supabase의 클라이언트/서버 클라이언트가 동작하는 방식의 차이가 있는지, 렌더링 방식에 차이가 있는지 궁금합니다. 서버와 클라이언트 개념과 렌더링 방식(SSR, CSR)이 자꾸 혼동되어 헷갈리네요..import { getTodos as getTodosClient } from '@/apis/todos'; import { getTodos as getTodosServer } from '@/actions/todos'; export default async function page() { const todos = await getTodos...(); } // todos.ts import { createBrowserSideClient } from "@/lib/client/supabase"; export const getTodos = async() => { const supabase = await createBrowserSideClient(); const result = await supabase.from("todos").select("*"); return result.data; }// todos.action.ts import { createServerSideClient } from "@/lib/server/supabase"; export const getTodos = async() => { const supabase = await createServerSideClient(); const result = await supabase.from("todos").select("*"); return result.data; }

어제까지도 같은 디렉토리에 토이 프로젝트 새로 생성하면서 잘 진행하고있는데, 오늘 카운터앱 진도 나가면서 새로운 프로젝트 생성하는데, 생성하고 빌드시 이런 에러가 뜹니다. { "name": "section06", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "react": "^18.3.1", "react-dom": "^18.3.1" }, "devDependencies": { "@eslint/js": "^9.17.0", "@types/react": "^18.3.17", "@types/react-dom": "^18.3.5", "@vitejs/plugin-react": "^4.3.4", "eslint": "^9.17.0", "eslint-plugin-react": "^7.37.2", "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.16", "globals": "^15.13.0", "vite": "^6.0.3" } }package.json이구요 버전 체크 전부 해봤는데 어제 만든 잘 작동되는 프로젝트랑 아예 버전 차이도 없고, 생성후에 npm install 외에 아예 건든것도 없는데 npm run dev또는 npm run build 하면 저런 에러가 뜨네요.. 새로 다시 만들어도 에러고, 다른 디렉토리에 만들어봐도 똑같습니다.이거땜에 1시간은 날린거같은데, 이럴 경우에 어떻게 해결해야하는게 좋을까요??

안녕하세요!이번 강의 4분 10초에 나오는 state 값 content를 사용자에게 값을 입력받는 input의 value로 아래 코드와 같이 작성해주시는 이유는 무엇일까요??value는 어떤 용도로 사용되며 content를 넣어주면서 어떤 변화가 생기는건지 이해가 잘 안되어서 질문드립니다!<input value={content} placeholder="새로운 Todo..." />

현재 useMemo에 대한 강의를 보고 있습니다. 강의를 볼 땐 어느 부분의 코드가 계속 렌더링이 되기 때문에 불필요한 부분이라 최적화를 해주기 위해 useMemo를 사용한다라고 이해는 하지만 막상 혼자 어떤걸 만들어볼땐 어느 부분의 코드가 계속 렌더링이 되고 불필요한 코드인지 몰라 useMemo를 이용하기가 많이 어렵더라구요. 어떻게 하면 쉽게 이해해서 혼자 코드를 작성할 때 잘 이용할 수 있는지 궁금합니다 ^^

해당 강의에서 선생님이 설명해주시기로는,페이지라우터와 앱라우터의 차이로 인해 앱 라우터 버전에서는 리퀘스트 메모이제이션이 생겼다고 하셨습니다. 페이지라우터에서는, 트리의 최상단에서 api요청이 발생한다음에 해당 결과값을 각 컴포넌트에 나눠주는 구조이고, 앱 라우터는 모든 서버컴포넌트가 각각 api를 호출해야하는 구조라고 하셧는데, 제가 테스트 해본결과, 서버컴포넌트 끼리도 props로 데이터를 주고받을 수 있는것 같습니다. 그래서 햇갈리는 부분이 존재하는데요.  import "./globals.css"; import Link from "next/link"; import style from "./layout.module.css"; import { BookData } from "@/types"; function InnerFooter({ books }: { books: BookData[] }) { return <>{books[0].author}</>; } async function Footer() { const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book` ); if (!response.ok) { return <footer>제작 @winterlood</footer>; } const books: BookData[] = await response.json(); const bookCount = books.length; return ( <footer> <footer>제작 @winterlood</footer> <div>{bookCount}개의 책이 존재함</div> <InnerFooter books={books} /> </footer> ); } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang="en"> <body> <div className={style.container}> <header> <Link href={"/"}>📚 ONEBITE BOOKS</Link> </header> <main>{children}</main> <Footer /> </div> </body> </html> ); } 제가 테스트 한 코드에서는 Footer 컴포넌트가 내부적으로 InnerFooter 컴포넌트를 호출하면서 데이터를 넘겨주고 있습니다.  선생님이 설명하신 부분이 제가 이해한 부분과는 다른걸까요?

안녕하세요 강의를 듣다 궁금한 점이 생겨서 질문 드립니다.강의에서는 list페이지와 add페이지로 이동할때 useCallbak을 사용하여 이동하는데,  const handleClickList = () => { navigate('list'); }; const handleClickAdd = () => { navigate('add'); };다음과 같이 useNavigate만 사용해도 라우터 이동은 똑같지 않나요??