vite 버전질문
미해결
타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
vite 버전) 강의 선생님은 6 버전이던대 저는 7인데 상관없나요 ??
- react
- version
jyl08840
댓글 2
좋아요 0
조회수 64
묻고 답해요
173만명의 커뮤니티!! 함께 토론해봐요.
쇼핑몰관련 질문드립니다.
미해결
(2025 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
쇼핑몰 만들기 부분을 보고 있는데요, 상품상세페이지 만드는데서 막히네요. 메인에서 제품을 누르면 로그인화면이 뜨고 로그인을 하면 다시 메인으로 가는거까지는 되었는데요, 거기서 다시 목록을 누르면 콘솔창에 해당하는 id정보가 나와야 하는데 App.jsx 에서 에러가 난다고 하는데 그대로 따라한 파일이라 어디가 틀린건지 잘 모르겠네요 import React, { useEffect } from 'react'; import { useParams } from 'react-router-dom'; const ProductDetail = () => { let {id} = useParams(); const getProductDetail = async () => { let url = `http://localhost:5000/products/${id}`; let response = await fetch(url); let data = await response.json(); console.log(data); }; useEffect(()=>{ getProductDetail(); },[]); return ( <div></div> ) } export default ProductDetail; import './App.css'; import 'bootstrap/dist/css/bootstrap.min.css'; import { useEffect, useState } from 'react'; import { Routes, Route } from 'react-router-dom'; import ProductAll from './page/ProductAll'; import Login from './page/Login'; import ProductDetail from './page/ProductDetail'; import Navbar from './component/Navbar'; import PrivateRoute from './route/PrivateRoute'; function App() { const [authenticate, setAuthenticate] = useState(false); //true이면 로그인이 됨, false이면 로그인이 안됨 useEffect(()=>{ console.log('aaa',authenticate); },[authenticate]); //값이 바뀔때마다 return ( <div> <Navbar/> <Routes> <Route path="/" element={<ProductAll/>}/> <Route path="/login" element={<Login setAuthenticate={setAuthenticate}/>}/> <Route path="/product/:id" element={<PrivateRoute authenticate={authenticate}/>}/> </Routes> </div> ) } export default App; <Route path="/product/:id" element={<PrivateRoute authenticate={authenticate}/>}/> 이부분이 에러가 뜨는거 같아요
- react
- redux
- web-api
댓글 2
좋아요 1
조회수 105
그랩님,[꼭] 답변 부탁드립니다.
해결됨
비전공자를 위한 진짜 입문 올인원 개발 부트캠프
*먼저 이 질문의 글을 그랩님께서 보신다면, [꼭][[꼭] 그랩님, 답변 부탁드립니다], Failed to load resource: the server responded with a status of 404 (Not Found) 상품 상세 페이지 질문입니다. https://inf.run/FB4N9 링크부터 본 뒤 답변을 그 게시물에 해 주신 후 이 질문 글 아래에도 답변 을 부탁 드립니다. 그랩님, 좋은 강의 잘 듣고 있습니다. 다름이 아니라, 아래 질문글에서 단 하나도 수정한 것 없이 몇일 뒤 재부팅만 해주었는데요, VS CODE에서 실행을 해주면 아래와 같이 에러도 줄어들어들었습니다. 그리고 위 그림에서 축구공을 누르면 '상품 상세 페이지'가 아무리 기다려도 뜨지 않고 오른쪽에 에러 가 발생 합니다. 에러 발생 스샷 아래 첨부 합니다. ( 참고로 이전에는 상품 상세 페이지의 상품 정보를 받고 있습니다...가 에러 없이 내용을 잘 불러왔었습니다 . 그런데 왜 지금은 아무리 기다려도 내용을 불러오지 못하는 이유를 모르겠습니다. ) 오른쪽에 에러를 해결하여 상품 정보를 받고 있습니다... 내용이 불러오게 하려면 어떻게 해야 하나요 ? ------------------------------------------------------------------------------------------------- 또한 79강 강의 2분 56초 부터 3분 32초 보면, POSTMAN 테스트 를 하는 부분이 나오는데, 여기서 아래 사진을 보면[왼쪽 메뉴 get product] Body 부분에서 그랩 강사님 화면과 다르게 뜨는데, 이것은 왜 그런 건가요? 어떻게 해야 http://localhost:8080/products/1 , http://localhost:8080/products/2 , http://localhost:8080/products/3 을 제대로 작동하게 할 수 있나요? 마지막으로 [참고 사진]으로 POSTMAN의 잘 작동하는 [get products]사진 첨부해 봅니다. 어떻게 해야 이 모든 에러 를 해결 할 수 있을지에 대해 자세한 답변 부탁 드립니다.
- HTML/CSS
- javascript
- react
- node.js
- react-native
- 머신러닝
- express
- tensorflow
isbcom1004
댓글 1
좋아요 0
조회수 101
언제부터 영상을 볼수 있나요?
해결됨
[Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
언제부터 영상을 볼수 있나요? 공지를 해주세요
- react
- next.js
- cursor
- 프롬프트엔지니어링
- 바이브코딩
사랑2
댓글 2
좋아요 0
조회수 100
챌린지 시작전 먼저 강의 볼 수 없나요?
해결됨
[Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
챌린지 시작전 먼저 강의 볼 수 없나요?
- react
- next.js
- cursor
- 프롬프트엔지니어링
- 바이브코딩
최영찬
댓글 2
좋아요 0
조회수 85
강의 난이도에대해서
미해결
[React / VanillaJS] UI 요소 직접 만들기 Part 1
혹시 강의 난이도에 대해서 문의드리고싶은데... 저만 어렵게 느껴지는건...아니겠죠..?
- react
- typescript
- dom
- ui
- vanilla-js
프론트엔드마스터
댓글 1
좋아요 0
조회수 145
.
미해결
React Native with Expo: 제로초에게 제대로 배우기
.
- react
- react-native
- 하이브리드-앱
- typescript
- expo
이영훈
댓글 1
좋아요 0
조회수 82
React.lazy()
미해결
타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
서비스를 보다보면 상품 리스트의 "더보기"나 상품 상세 설명에서의 "더보기" 와 같은 기능이 있는데, 이럴 때 React.lazy() 가 사용되는 건가요?
- react
- react-router
- redux-toolkit
- zustand
- react.js
챙준
댓글 2
좋아요 0
조회수 67
섹션5부터...
미해결
코드로 배우는 React 19 with 스프링부트 API서버
섹션5부터 자바 프로젝트가 완전 바뀌어 있는데 만들어야될 db정보도 없고... 어찌해야 할지 모르겠네요...
- react
- typescript
- spring-boot
- jpa
- jwt
feelsagood
댓글 1
좋아요 0
조회수 98
[소셜 로그인 16강] 로그인 실패 시 리다이렉트 관련 질문
미해결
스프링 부트와 리액트로 구현하는 소셜 로그인
16강을 수강하고 있습니다. CustomLoginFailureHandler 사용자가 로그인에 실패했을 때 호출되는 메서드에 대한 질문입니다. if(savedRequest != null) { String targetUrl = savedRequest.getRedirectUrl(); //사용자가 접근하려던 URL // 즉, 로그인에 실패했지만 사용자를 원래 있던 페이지로 보내줌 // 실패 시 사용자가 접근하려던 URL 로그 출력 log.info("[핸들러 - 사용자가 접근 시도한 URL]\n-> " + targetUrl); // 사용자가 접근하려던 URL로 리다이렉트 (로그인 실패 후에도 이동) response.sendRedirect(targetUrl); } 그런데 if문의 마지막 줄을 보면 로그인 실패 후에도 targetUrl 즉, 사용자가 접근하려했던 페이지로 이동시킨다고 작성 되어 있는데 ... 로그인 실패 시에도 targetUrl로 리다이렉트시키는 이유가 뭔가요?? 로그인에 실패하면 로그인 페이지에 남아있어야 하는 것 아닌가요 ...?
- react
- java
- spring-boot
- jpa
- spring-security
정수현
댓글 2
좋아요 0
조회수 101
Map 강의 누락된 것 같습니다.
해결됨
프론트엔드 마스터클래스
안녕하세요! 강의가 누락된 것 같아 글 작성합니다. 확인부탁드릴게요! 30강 Map 강의로부터 31강까진 문제없이 연결되는데, 32. WeakRef + FinalizationRegisty 강의시작부터 연결이 매끄럽지 못합니다. 뜬금없이 대안?에 대해서 나오는데 Map 예제부분과 WeakMap 부분이 누락된것같습니다.
- javascript
- react
- 함수형-프로그래밍
- 객체지향
- next.js
모던
댓글 2
좋아요 0
조회수 187
브라우저의 렌더링 과정 질문
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
좋은 강의 감사합니다. React.js 소개 부분을 보며 궁금한점이 있어 문의드립니다. 화면 업데이트 관련 브라우저 렌더링 과정은 React.js뿐 아니라 Vue.js에서도 동일하게 적용되나요? 예를들면, Virtual Dom에서 한번에 모아 Actual DOM에 적용되는 방식등이요
- javascript
- react
- node.js
- 카카오공채-개발
kmh880507
댓글 2
좋아요 0
조회수 84
Context API 리랜더링 방지를 위한 Memoization에 대한 질문
미해결
타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
계속해서 학습을 진행중인데, 함수값을 넘길때에는 useCallback을 사용해야한다는 것으로 알고있었는데, >>밑에는 실제 강의 중 공유해 주신 ContextProvider 안에 함수들 const increment = () => { setCount((count) => count + 1); }; const decrement = () => { setCount((count) => count - 1); }; const reset = () => { setCount(0); }; const memoization = useMemo(()=>({ increment, decrement, reset }),[]); >>제가 생각했던 방식 const increment = useCallback(() => { setCount((count) => count + 1); },[]); const decrement = useCallback(() => { setCount((count) => count - 1); },[]); const reset = useCallback(() => { setCount(0); },[]); const memoization = useMemo(()=>({ increment, decrement, reset }),[increment, decrement, reset]); 저는 밑에 memoization 변수를 빼고 바로 useCallback을 이용해서 객체값으로 넘겨주는 식으로 작성해야 한다고 생각을 했었습니다. 코드를 작성하는 방법에는 정답은 없지만, 당장은 기본에 입각한 학습을 해야하기에 어떤 방법이 조금 더 효율적인지 여쭤보고 싶습니다.
- react
- react-router
- redux-toolkit
- zustand
- react.js
유키
댓글 2
좋아요 0
조회수 72
저도 피그마 강의 자료 이미지 누락 문제 관련 문의드립니다.
해결됨
[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
안녕하세요! 저도 동일한 현상을 겪고 있습니다. 레이아웃은 그대로 복제되는데, 이미지가 모두 누락되어 있습니다. 제 생각에는 수강생들에게 보기 권한만 부여되어 있어서 해당 리소스에 접근할 수 없고, 그로 인해 파일 복제 시 이미지가 빠지는 것 같습니다. 혹시 가능하시다면, 모든 수강생이 문제없이 접근할 수 있도록 이미지를 파일 내에 직접 포함한 버전으로 자료를 수정해 다시 업로드해 주실 수 있을까요? 그렇게 해주신다면 저를 포함한 다른 수강생들도 문제없이 실습을 진행할 수 있을 것 같습니다. 바쁘시겠지만 확인 부탁드립니다. 좋은 강의 감사드립니다!
- react
- next.js
- cursor
- 프롬프트엔지니어링
- 바이브코딩
- figma
조내일
댓글 2
좋아요 0
조회수 223
.
미해결
React Native with Expo: 제로초에게 제대로 배우기
.
- react
- react-native
- 하이브리드-앱
- typescript
- expo
이영훈
댓글 2
좋아요 0
조회수 113
안녕하세요
미해결
[25.10.02] 코드캠프 라이브 테스트
모야모야 이거 모야
- react
- python
- java
성실한 도마뱀
댓글 1
좋아요 0
조회수 42
궁금한 점 5가지 있습니다.
미해결
[25.10.02] 코드캠프 라이브 테스트
하루에 4번 사랑을 말하기 8번 웃기
- react
- python
- java
썸머
댓글 1
좋아요 1
조회수 56
여기에 쓰면 무슨 질문이지
미해결
[25.10.02] 코드캠프 라이브 테스트
하이
- react
- python
- java
인프런 애시
댓글 1
좋아요 1
조회수 51
.
미해결
React Native with Expo: 제로초에게 제대로 배우기
.
- react
- react-native
- 하이브리드-앱
- typescript
- expo
이영훈
댓글 2
좋아요 0
조회수 182
동적페이지 풀라우트 캐시 질문 있습니다.
미해결
한 입 크기로 잘라먹는 Next.js
강의에서 book/4는 동적 페이지인데 첫 접속 후 Full Route Cache에 저장되어 두 번째 접속이 빨라진다고 했습니다. 동적 페이지는 Full Route Cache에 저장되지 않는다고 배웠는데 왜 적용되나요? .next 폴더에 해당 페이지가 남아있는 것을 확인했는데, 이것이 Full Route Cache 적용을 의미하나요? npm run start로 프로덕션 모드에서 테스트했는데 첫 접속과 두 번째 접속 모두 170ms로 동일합니다. 왜 속도 차이가 없나요? import { notFound } from "next/navigation"; import style from "./page.module.css"; import { BookData } from "@/types"; // export const dynamicParams = false; export function generateStaticParams() { return [{ id: "1" }, { id: "2" }, { id: "3" }]; } export default async function Page({ params, }: { params: Promise<{ id: string | string[] }>; }) { const { id } = await params; const response = await fetch( `${process.env.NEXT_PUBLIC_API_SERVER_URL}/book/${id}` ); if (!response.ok) { if (response.status === 404) { notFound(); } return <div>오류가 발생했습니다...</div>; } const book: BookData = await response.json(); const { coverImgUrl, title, subTitle, author, publisher, description } = book; return ( <div className={style.container}> <div className={style.cover_img_container} style={{ backgroundImage: `url('${coverImgUrl}')` }} > <img src={coverImgUrl} /> </div> <div className={style.title}>{title}</div> <div className={style.subTitle}>{subTitle}</div> <div className={style.author}> {author} | {publisher} </div> <div className={style.description}>{description}</div> </div> ); } 🚨 필독) 질문하시기 전에 꼭 읽어주세요 (10초 소요) 제목을 구체적으로 작성해 주세요 ✅ 좋은 예 : 감정일기장 Home 구현중 xx 이슈가 발생합니다. ⛔ ️ 나쁜 예 : 이거 왜 안되나요?, 오류나요 도와주세요 등 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 코드의 이슈는 전체 프로젝트를 "링크 형태"로 올려주셔야 원인을 파악할 수 있습니다. 깃허브, 구글드라이브 등의 수단을 통해 링크 형태로 전달해주세요 직접 실행해보며 원인을 파악해야 하기 때문에 텍스트 형태로 붙여넣는건 삼가해주세요 🥲 답변이 도움이 되셨다면 답글 or 해결완료 버튼을 클릭해주세요 비슷한 궁금함을 갖고 계신 분들께 도움이 될 수 있어요! 제 답변이 여러분께 도움이 되었는지 저도 알고 싶어요 🥲 강의 내용에 궁금한 점이 있다면 몇 챕터의 몇 분 몇 초인지 알려주시면 더 좋아요 더 빠른 답변이 가능합니다!
- react
- typescript
- next.js
- 카카오공채-개발
hinpuo
댓글 2
좋아요 0
조회수 110
인기 태그
인프런 TOP Writers
- 정현섭 7
- eggmun(문성진) 4
- hush park 4
- 꿈이 있는 자유 4
- 박효정 3
- morneau 3
- Like me black 3
주간 인기글
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
- 🚨[월 최소 650만원+] AI/Bigdata 데이터 분석·머신러닝 강사 구합니다🚨 NoFe