inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

suspense관련 질문 있습니다! 섹션6 5.2풀 라우트 캐시2강의

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요! 강의 잘 듣고 있습니다! suspense태그 관련 질문이 있습니다! 5.2 풀 라우트 캐시2 강의에서 저희가 useSearchParams() 훅이 빌드타임에서 실행되는 오류를 없애기 위해 <SearchBar/ > 컴포넌트를 suspense로 감싸잖아요 이때 강의 4분45초 쯤에서 사전 suspense를 사용해서 이제 사전 렌더링 과정에서 완전히 배제한다고 하셨는데, 그러면 페이지를 만들때 suspense로 감싼 컴포넌트는 nextjs app router방식이 아니라 csr방식으로 구현이 되는건가요 나머지 컴포넌트들만 approuter의 사전 렌더링 방식으로 구현이 되는건가요?? 제가 정리했을땐 동적 페이지도 정적 페이지도 사전렌더링의 시점은 다르지만 (요청할때, 빌드할때) 사전렌더링이라는 기능은 nextjs에서 기본으로 작동한다고 알고 있습니다! 그래서 사전렌더링에서 완전 배제된다는 부분이 헷갈려서 질문 남깁니다!

  • react
  • typescript
  • next.js
JIN LEE 댓글 3 좋아요 0 조회수 192

34강 인증 체크에서 element 사용 때문에 에러나시는 분들 이렇게 하심 됩니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 기본 강의

component 사용 시 에러 발생 function App() { return ( <Router> <div> <Routes> <Route path="/" element={Auth(LandingPage, null)} /> <Route path="/login" element={Auth(LoginPage, false)} /> <Route path="/register" element={Auth(RegisterPage, false)} /> */} </Routes> </div> </Router> ); } element 사용 시 아래처럼 진행하심 잘됩니다. (element 안에는 함수가 못들어간다하네요) function App() { const AuthLandingPage = Auth(LandingPage, null); const AuthLoginPage = Auth(LoginPage, false); const AuthRegisterPage = Auth(RegisterPage, false); return ( <Router> <div> <Routes> <Route exact path="/" element={<AuthLandingPage />} /> <Route exact path="/login" element={<AuthLoginPage />} /> <Route exact path="/register" element={<AuthRegisterPage />} /> </Routes> </div> </Router> ) }

  • react
  • node.js
해도디 댓글 1 좋아요 0 조회수 151

vercel 빌드 후 에러가 나옵니다.

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

vercel 빌드를 했는데, 이렇게 에러 메시지가 나오는데 뭐가 문제인지 찾지 못했습니다. vercel 페이지에서도 빌드로그를 보면 아래와같이 나오는데요. npm run build 했을때 정상적으로 노출되고, 오류 메시지가 없어서 정상배포될 줄알았는데 안되네요.ㅠ x Build failed in 181ms 18:15:46.529 error during build: 18:15:46.530 Could not resolve "./pages/NotFound" from "src/App.jsx" 18:15:46.530 file: /vercel/path0/src/App.jsx 18:15:46.530 at getRollupError (file:///vercel/path0/node_modules/rollup/dist/es/shared/parseAst.js:397:41) 18:15:46.530 at error (file:///vercel/path0/node_modules/rollup/dist/es/shared/parseAst.js:393:42) 18:15:46.530 at ModuleLoader.handleInvalidResolvedId (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:21111:24) 18:15:46.530 at file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:21071:26 18:15:46.544 Error: Command "npm run build" exited with 1

  • javascript
  • react
  • node.js
Babeloper 댓글 2 좋아요 1 조회수 420

App.js > QuestionBox > answers ={answers[step]}, QuestionBox.js > answer

미해결

실무 중심! FE 입문자를 위한 React

App.js > QuestionBox > answers ={answers[step]}, QuestionBox.js > answer 왜 App.js에서 prop에 answers라고 쓰고 QuestionBox.js 에서는 answer로 받는거죠?

  • react
  • redux
  • node.js
  • sass
  • swr
디오 댓글 0 좋아요 0 조회수 153

컴포넌트 단위 에러 처리는 이전 처럼 에러 바운더리를 래핑하면 되나요?

해결됨

한 입 크기로 잘라먹는 Next.js

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

  • react
  • typescript
  • next.js
트릴 댓글 2 좋아요 0 조회수 275

섹션 7 - 7 프로젝트 적용하기

해결됨

웹 프론트엔드를 위한 자바스크립트 첫걸음

안녕하세요! 마지막 프로젝트 적용만 남았는데 manifest.json 파일 만들고 저렇게 작성했는데 확장 프로그램 로드를 못하는 상황입니다..!

  • javascript
  • dom
정우 댓글 2 좋아요 1 조회수 145

섹션7 - 7 프로젝트 적용하기

해결됨

웹 프론트엔드를 위한 자바스크립트 첫걸음

🚨 질문 작성법 및 안내사항 질문 작성법 - 몇 섹션의 어떠한 강의에 대한 질문인지 작성해주세요. (ex. 섹션2 조건문에 대한 질문) - 질문은 최대한 구체적으로 작성해주세요. - 비슷한 질문이 올라와있는지 확인해주세요. - 코드가 포함된 질문은 아래와 같이 코드블록을 사용해주세요. body { margin: 0 auto; width: 100%; font-family: 'Hi Melody'; background-image: url("https://source.unsplash.com/user/hanjw3288/likes"); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: cover; /* color: white; */ /* overflow: hidden; */ } 강사님 안녕하세요! 마지막 프로젝트 적용하기 전에 background-image 적용할때 unsplash가 적용이 안되는데 어떻게 해결해야 할까요..? 저 url 타고 들어가면 404페이지가 뜹니다..

  • javascript
  • dom
정우 댓글 1 좋아요 0 조회수 105

DTO와 인증 서비스 강의 질문있습니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

1.DTO와 인증 서비스 13분 38초 화면이 [username user9@aaa.com ,password 1111] postman에서 회원가입하는 화면인건가요? 2.DTO와 인증 서비스 17분 10초 postman 화면도 있는데 이거는 로그인 화면인건가요? 3. 제가 포스트맨에서 username user10@aaa.com ,password 1111으로 넣고 send를 누르면 맨 위 사진과 같이 에러가 나옵니다. 참고로 db 테이블에 username user9@aaa.com ,password 1111 내용이 있습니다. 포스트맨 { "timestamp": "2025-03-02T20:26:21.086+00:00", "status": 404, "error": "Not Found", "trace": "org.springframework.web.servlet.resource.NoResourceFoundException: No static resource api/member/login.\r\n\tat org.springframework.web.servlet.resource.ResourceHttpRequestHandler.handleRequest(ResourceHttpRequestHandler.java:586)\r\n\tat org.springframework.web.servlet.mvc.HttpRequestHandlerAdapter.handle(HttpRequestHandlerAdapter.java:52)\r\n\tat org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:1089)\r\n\tat org.springframework.web.servlet.DispatcherServlet.doService spring boot 실행시 아래와 같이 나옵니다. Principal이 username이 user9@aaa.com로 안나옴. [Principal=anonymousUser, Credentials=[PROTECTED], Authenticated=true, Details=WebAuthenticationDetails [RemoteIpAddress=0:0:0:0:0:0:0:1, SessionId=null], Granted Authorities=[ROLE_ANONYMOUS]] 코드 첨부합니다. https://drive.google.com/file/d/1VtPVj_uRjPC7fYG3gRCeuFKcs2s4wPZm/view?usp=drive_link

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
zzzzz 댓글 1 좋아요 0 조회수 142

params부분 에러

해결됨

한 입 크기로 잘라먹는 Next.js

fetch 부분에서 다음과 같이 작성하였는데 params.id부분에서 id 부분에 Property 'id' does not exist on type 'Promise<{ id: string | string[]; }>'.ts(2339) 이러한 에러가 발생합니다. const result = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${params.id}` );

  • react
  • typescript
  • next.js
손성오 댓글 3 좋아요 0 조회수 431

캐싱 옵션이 적용되질않아요.

미해결

한 입 크기로 잘라먹는 Next.js

어떠한 옵션을 적용해도 콘솔과 같은데 뭐가 잘못되었을까요? 새로고침이나, 로고를 눌러서 인덱스 파일에 가도 똑같은 로그만 나타납니다.

  • react
  • typescript
  • next.js
트릴 댓글 3 좋아요 0 조회수 229

4.2 React 렌더링 과정 에서 왜 컴포넌트가 두 번씩 호출될까요?

미해결

실무 중심! FE 입문자를 위한 React

/*FunctionalComponent.jsx파일*/ import {useEffect,useState} from 'react'; function FunctionalComponent() { console.log('Function Beginning'); const [value, setValue] = useState(0); useEffect(() => { console.log('Function useEffect[]'); return () => { console.log('Function useEffect return[]'); } },[]); useEffect(() => { console.log('Function useEffect[value]'); return () => { console.log('Function useEffect return[value]'); } },[value]); console.log('Function End'); return ( <div> <h1>!FunctionalComponent</h1> <h1>value: {value}</h1> <button onClick={() => { setValue((state) => state + 1) }} > Increase value </button> </div> ); } export default FunctionalComponent /*App.jsx파일*/ import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' import axios from 'axios'; import FunctionalComponent from './practice/FunctionalComponent' function App() { return ( <FunctionalComponent /> ) } export default App

  • react
  • redux
  • node.js
  • sass
  • swr
최상협 댓글 1 좋아요 0 조회수 203

react-beatiful-dnd에서 문제가 발생합니다.

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 기능상에 문제가 있는건 아니지만, 계속해서 아래의 에러가 발생합니다. 사용하고 있는 버전의 문제일까요? { "name": "react-todo-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/dom": "10.4.0", "@testing-library/jest-dom": "6.6.3", "@testing-library/react": "16.2.0", "@testing-library/user-event": "13.5.0", "react": "^19.0.0", "react-beautiful-dnd": "13.1.1", "react-dom": "^19.0.0", "react-scripts": "5.0.1", "web-vitals": "2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "autoprefixer": "10.4.20", "postcss": "8.5.3", "tailwindcss": "3.4.17" } } Lists.js import React from 'react'; import List from './List.js' import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; const Lists = React.memo(({todoData, setTodoData}) => { // console.log('Lists Component') const handleEnd = (result) => { if(!result.destination) return; const newTodoData = Array.from(todoData); const [reorderedItem] = newTodoData.splice(result.source.index, 1); newTodoData.splice(result.destination.index, 0, reorderedItem); setTodoData(newTodoData); } return <div> <DragDropContext onDragEnd={handleEnd}> <Droppable droppableId='todo'> {(provided, snapshot) => ( <div ref={provided.innerRef} {...provided.droppableProps} > {(todoData ?? []).map((data, index) => ( <Draggable key={data.id} draggableId={data.id.toString()} index={index} > {(provided, snapshot) => ( <List key={data.id} id={data.id} title={data.title} completed={data.completed} provided={provided} snapshot={snapshot} todoData={todoData} setTodoData={setTodoData} /> )} </Draggable> ))} {provided.placeholder} </div> )} </Droppable> </DragDropContext> </div>; }) export default Lists; App.js import React, {useState} from 'react' import "./App.css" import Lists from './components/Lists' import Form from './components/Form' export default function App() { // console.log('App Component') const [todoData, setTodoData] = useState([ { id: 1, title: '운동하기', completed: false, }, { id: 2, title: '공부하기', completed: false, } ]) const [value, setValue] = useState("") return ( <div className="flex items-center justify-center w-screen h-screen bg-blue-100" > <div className='full p-6 m-4 bg-white rounded shadow md:w-3/4 md:max-w-lg lg:w-3/4 lg:max-w-lg'> <div className="flex justify-between mb-3"> <h1>할 일 목록</h1> </div> <Lists todoData={todoData} setTodoData={setTodoData} /> <Form value={value} setValue={setValue} setTodoData={setTodoData}/> </div> </div> ) }

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
  • react-beatiful-dnd
  • isdropdisabled
고유림 댓글 1 좋아요 0 조회수 131

useEffect 관련 질문드립니다.

미해결

실무 중심! FE 입문자를 위한 React

useEffect의 dependency array에 배열을 넣는 경우 "Maximum update depth exceeded." error가 발생하게 되는데, 이 경우는 어떻게 해야하나요? 예를 들어 아래와 같은 상황이라고 가정하겠습니다. 화면에는 테이블 1개만 존재한다. 데이터는 unknown[] 형태이다. 다른 조건에 의해 데이터의 갯수가 달라지는 경우에만 다시 렌더링한다. 코드로 예시를 들면 아래와 같습니다. const [items, setItems] = useState<unknown[]>([]); useEffect(() => void, [items]) 답변주시면 감사합니다.

  • react
  • redux
  • node.js
  • sass
  • swr
이준영 댓글 0 좋아요 0 조회수 148

Error: Route "/search" used `searchParams.q`. `searchParams` should be awaited before using its properties.

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요 강사님 해당 오류는 최신버전에서 발생하는건가요?! Error: Route "/search" used searchParams.q . searchParams should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at Page (src/app/(with-searchbar)/search/page.tsx:12:32) 10 | return ( 11 | <div> > 12 | Search 페이지 : {searchParams.q} | ^ 13 | <ClientComponent> 14 | <></> 15 | </ClientComponent> import ClientComponent from "@/components/client-component"; export default function Page({ searchParams, }: { searchParams: { q?: string; } }) { return ( <div> Search 페이지 : {searchParams.q} <ClientComponent> <></> </ClientComponent> </div> ) }

  • react
  • typescript
  • next.js
강프로그래머 댓글 2 좋아요 0 조회수 255

사이트 전체 Route 구조 짜기 영상 10분쯤 코드가 똑같은데 연결이 안되요

해결됨

(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>

영상 10분쯤 나오는 파트에서 Main.jsx와 App.jsx 코드를 아예 똑같이 썼는데도 사이트에 연결할 수 없다고 뜹니다 어떻게 해야 하나요 vsc에서는 Main이 선언은 되었지만 해당 값이 읽히지는 않았습니다 ts(6133)이라고 뜯니다

  • react
  • aws
  • Google-Analytics
  • cloudflare
  • adsense
  • 수익화
도도한 염소 댓글 2 좋아요 0 조회수 272

12.18 새 일기 쓰기 페이지 제목 수정 관련

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

index.html <!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>Emotion Diary</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> New.jsx import Header from "../components/Header"; import Button from "../components/Button"; import Editor from "../components/Editor"; import { useNavigate } from "react-router-dom"; import { useContext, useEffect } from "react"; import {DiaryDispatchContext} from "../App"; import usePageTitle from "../hooks/usePageTitle"; const New=()=>{ const{onCreate}=useContext(DiaryDispatchContext); const nav=useNavigate(); usePageTitle(`${useParams.id}번 일기 수정`); const onSubmit=(input)=>{ onCreate( input.createdDate.getTime(), input.emotionId, input.content ); nav('/',{replace: true}); }; return ( <div> <Header title={"write new diary"} leftChild={<Button onClick={()=>nav(-1)} text={"< back"}/>} /> <Editor onSubmit={onSubmit}/> </div> ); }; export default New; usePageTitle.jsx import { useEffect } from "react"; const usePageTitle=(title)=>{ useEffect(()=>{ const $title=document.getElementByTagName("title")[0]; $title.innerText=title; },[title]); }; export default usePageTitle; 이전 과정까지는 문제없었는데 12.18에 있는 새일기 쓰기 페이지에 들어왔을 때 페이지에 아무것도 뜨지 않는 문제가 발생하는데 어떤게 문제일까요

  • javascript
  • react
  • node.js
진성원 댓글 2 좋아요 0 조회수 110

실습 코드 있을까요?

미해결

처음 만난 리액트(React)

안녕하세요 감사하게도 강의 잘 듣고있습니다. 혹시 실습한 코드를 받을 수 있는 git 있을까요? 개발환경 버전이 달라서 그런지 챕터6하는데 원치않게 동작하는게 있어서요

  • HTML/CSS
  • javascript
  • react
호호하하 댓글 2 좋아요 1 조회수 232

단축키 질문입니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

DTO와 인증 서비스 2분 33초에서 35초 사이에 코드가 갑자기 생기는데요. 혹시 어떤 단축키 눌른건지 알 수 있을까요? Alt + Insert 눌러도 super까지 포함된 메소드는 나오지 않아서요. public MemberDTO(String email, String pw, String nickname, boolean social, List<String> roleNames) { super( email, pw, roleNames.stream().map(str -> new SimpleGrantedAuthority("ROLE_"+str)).collect(Collectors.toList())); this.email = email; this.pw = pw; this.nickname = nickname; this.social = social; this.roleNames = roleNames; }

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
zzzzz 댓글 1 좋아요 0 조회수 56

서비스계층과 컨트롤러(3) 질문있습니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

서비스계층과 컨트롤러(3)-상품수정 5분 42초에서 uuid값은 화면쪽에서 처리되면서 붙는다는게 무슨 의미인지 알 수 있을까요? @Override public void modify(ProductDTO productDTO) { //step1 read Optional<Product> result = productRepository.findById(productDTO.getPno()); Product product = result.orElseThrow(); //change pname, pdesc, price product.changeName(productDTO.getPname()); product.changeDesc(productDTO.getPdesc()); product.changePrice(productDTO.getPrice()); product.changeKeyword(product.getKeyword()); //upload File -- clear first 내용이 있을 수도 있기 때문에. product.clearList(); List<String> uploadFileNames = productDTO.getUploadFileNames(); if(uploadFileNames != null && uploadFileNames.size() > 0 ){ uploadFileNames.stream().forEach(uploadName -> { product.addImageString(uploadName); }); } productRepository.save(product); } CustomFileUtil에서 saveFiles메소드에서 List<String> uploadNames = new ArrayList<>(); 배열을 선언하고 ProductServiceImp에서는 product.clearList();로 있던 배열에서 내용을 지우면서 사용하는데요. CustomFileUtil클래스 에서 데이터 베이스 1행에 저장할 리스트 생성해주고 그 리스트를 수정하는 역할이 product.clearList(); 인가요?

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
zzzzz 댓글 2 좋아요 0 조회수 70

router.replace를 하는데 setCurrent에서 변경한 상태가 유지?

미해결

Next + React Query로 SNS 서비스 만들기

라우터가 이동하면 상태가 초기화 됐던걸로 아는데, setCurrent는 왜 계속 유지가 되나요? 쉘로우 라우팅도 아닌데,,, 제가 잘못알고있나요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
트릴 댓글 2 좋아요 0 조회수 185

인기 태그

인프런 TOP Writers

주간 인기글