묻고 답해요
160만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[React 1부] 만들고 비교하며 학습하는 React
super.show() 호출하는 이유가 궁금합니다.
안녕하세요, 강의 잘 듣고 있습니다.23강에서 SearchFormView 클래스의 show 메서드 오버라이딩과 관련하여 궁금한 점이 생겨서 질문드립니다.// SearchFormView.js show(searchKeyword = "") { this.inputElement.value = searchKeyword; this.showResetButton(this.inputElement.value.length > 0); }super.show() 를 호출하지 않아도 화면이 의도대로 동작하는 것을 확인했는데요.super.show() 호출이 단순히 체이닝을 위한 호출인지 아니면 제가 놓친 다른 의도가 있는 것인지 궁금합니다.
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
선생님 상태변경할때 질문
그 선생님은 지금 문제에서 상태 변경할떄setCount((count) => count +1); 로해주셨는데지금 상황에서는 그냥setCount((count+1)) 로 해도 문제 없지않나용?버튼 한번 눌렀을때 count+1 되는건 한번이니깐..?연속으로 +1 증가하는 로직이 아니라서 이렇게 생각되는데 혹시 제가 뭘 놓치고있는건가요?
-
해결됨React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!
[강의 오류 리포트] React Router Outlet 사용 오류
문제 발생 섹션: 4-1. Footer 제작문제 내용:강의 자료에서 제공된 App.jsx 코드에 구조적 오류가 있습니다.문제점:1. RootLayout 컴포넌트 내부에서 <Outlet /> 컴포넌트를 사용하고 있으나, 라우터 설정에 자식 라우트(children routes)가 정의되어 있지 않습니다.2.현재 라우터 구조:```const router = createBrowserRouter([ { path: "/", element: <LootLayout />, // children이 없음 - Outlet이 렌더링할 내용이 없음 },]);```발생한 에러:Outlet 컴포넌트 관련 에러 발생해당 코드 제거 시 정상 동작제안 사항:아래 두 가지 중 하나로 수정이 필요합니다:방법 1)자식 라우트가 없다면 Outlet 제거```<main className="flex-grow container mx-auto px-4 py-8"> {/* <Outlet /> 제거 */}</main>추가 의견:해당 강의를 수강하면서 이번 건 외에도 여러 오류를 발견했습니다. 학습에 상당한 지장이 있는 상황이므로, 강의 전체에 대한 코드 검수 및 업데이트를 요청드립니다.특히 React Router v6의 최신 문법과 개념(Outlet, createBrowserRouter 등)이 정확히 반영되었는지 재확인이 필요해 보입니다.수강생들이 불필요한 디버깅 시간을 소비하지 않도록 조속한 개선 부탁드립니다.
-
해결됨React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!
[강의 오류 제보] Navbar 컴포넌트 코드 오류 발견
안녕하세요, '리액트 + FastAPI로 투표 커뮤니티 플랫폼' 강의를 수강 중인 학습자입니다. 강의 자료의 코드를 그대로 따라했을 때 에러가 발생하여 제보드립니다. --- 📍 발생 위치: - 강의 섹션: [섹션 3/ch2. 메뉴바 제작] - 파일: src/Components/Navbar/index.jsx ❌ 발생한 에러: ReferenceError: logout is not defined 🔍 문제 원인: 강의 자료 코드에서 함수는 onLogoutClick, onLoginClick, onSignupClick으로 정의했으나, 자식 컴포넌트에 전달할 때는 정의되지 않은 logout 변수를 사용하고 있습니다. 현재 강의 자료 코드: ```javascript const onLogoutClick = () => { ... }; <AuthButtons logout={logout} /> // ❌ logout 미정의 <MobileMenu logout={logout} /> // ❌ logout 미정의```수정방법:<AuthButtonsisAuthenticated={isAuthenticated}isOpen={isOpen}setIsOpen={setIsOpen}onLogoutClick={onLogoutClick} // ✅ 수정onLoginClick={onLoginClick} // ✅ 추가onSignupClick={onSignupClick} // ✅ 추가/><MobileMenuisOpen={isOpen}setIsOpen={setIsOpen}isAuthenticated={isAuthenticated}onLogoutClick={onLogoutClick} // ✅ 수정onLoginClick={onLoginClick} // ✅ 추가onSignupClick={onSignupClick} // ✅ 추가/>💡 제안: 이전 강의 자료에서는 올바르게 onLogoutClick 등을 전달하고 있었는데, 특정 시점부터 logout으로 변경되면서 함수명과 불일치가 발생한 것으로 보입니다.강의 자료 업데이트 부탁드립니다. 감사합니다.
-
미해결손에 익는 Next.js - 블로그 만들기
getPostData 함수 질문
return 문에 왜 matterResult.data를 반환해주나요? id 와 content만 있으면 되는거 아닌가요??추가해주는 이유가 궁금합니다.
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
graphql 백엔드 서버가 포폴용 빼곤 접속이 안됩니다.
backend-practice 로 시작하는 포트폴리오용 백엔드 서버만 접속이 가능하고다른 서버들은 현재 접속할 수 없습니다.이로인해 현재 포트폴리오용 사이트 실습을 제외하고 기본 강의에서 제시해주시는 코드 테스트가 불가능합니다.약 일주일정도 살짝 넘게 강의 수강하면서 시도하는데 문제가 지속되는 것으로 봐서 관리가 안되고 있는 것 같은데 확인 부탁드립니다.
-
해결됨프론트엔드 마스터클래스
이벤트 루프 실행 관련
저는 풀스택 주니어입니다.특수 목적을 위해 바닐라js에서 ,document.innerHTML이나 element.remove(), element.append() 등으로 html element의 생성과 삭제가 빈번한로직을 다루고 있습니다.이 때 종종 브라우저 렌더링의 실행 완료에 대해 명확하게 알지 못해서 찝찝한 채로 브라우저에 렌더링 일을 시키고 있습니다. 그러던 중 이벤트 루프 관련 3개 강의(16,17,18강) 를 듣고 복습차, 17강으로 다시 돌아와서 보는 2분18초 경에 브라우저 랜더링에 대해 궁금한게 생겼습니다. 예를 들면const mySchedule = async () => { await randeringPipelineTask(); //랜더링파이프라인 await macroTask(); // 매크로태스크(); }으로 구성된 mySchedule 메서드가 있다고 가정하겠습니다.macroTask()는 renderingPipelineTask()의 브라우저 페인트까지 모두 완료를 확인한 후에 실행될까요? 아니면 JS엔진이라는 것은, 페인트는 브라우저에 렌더링을 해달라고 부탁까지만하고 macroTask()를 실행할까요?('실행의 시작'과 '실행의 끝'을 나눠서 생각해서 그런지 생각하면 할수록 햇갈립니다.)
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
vite 버전질문
vite 버전) 강의 선생님은 6 버전이던대저는 7인데 상관없나요 ??
-
미해결(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}/>}/>이부분이 에러가 뜨는거 같아요
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
그랩님,[꼭] 답변 부탁드립니다.
*먼저 이 질문의 글을 그랩님께서 보신다면, [꼭][[꼭] 그랩님, 답변 부탁드립니다], 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]사진 첨부해 봅니다.어떻게 해야 이 모든 에러를 해결 할 수 있을지에 대해 자세한 답변 부탁 드립니다.
-
해결됨[Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
언제부터 영상을 볼수 있나요?
언제부터 영상을 볼수 있나요?공지를 해주세요
-
해결됨[Live 챌린지] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)
챌린지 시작전 먼저 강의 볼 수 없나요?
챌린지 시작전 먼저 강의 볼 수 없나요?
-
미해결[React / VanillaJS] UI 요소 직접 만들기 Part 1
강의 난이도에대해서
혹시 강의 난이도에 대해서 문의드리고싶은데...저만 어렵게 느껴지는건...아니겠죠..?
-
미해결React Native with Expo: 제로초에게 제대로 배우기
앱 - 브라우저 통신 질문
제로초님 안녕하세요! 현재 구현중인 앱에서 QR코드를 통해 이미 web으로 만들어진 서비스의 https://..../trends 링크로 이동해야하고, 이 페이지를 정상적으로 보려면 엑세스 토큰을 가지고 있어야하는데요. 현재 회원가입, 로그인 기능은 모두 앱에서 하고있는 상황에서 질문 드릴게 몇가지 있습니다.1. /trends 페이지를 정상적으로 보기 위해서 웹뷰로 네이티브에서 js쪽에 엑세스 토큰을 전달해서 페이지를 볼 수 있게 하는 방향으로 생각중인데, 이 방법 이외에 더 최선의 방법이 있을까요? 2. 웹뷰가 구현되지 않은 현재 상황에서 앱 심사를 받고 있는데, 우선 앱스토어에 등록 한 다음에 웹뷰를 구현하고, eas updates를 통해 앱 심사 없이 웹뷰가 추가된 버전으로 업데이트가 가능할까요?조언 주시면 감사하겠습니다! 🙏🏻
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
React.lazy()
서비스를 보다보면 상품 리스트의 "더보기"나 상품 상세 설명에서의 "더보기" 와 같은 기능이 있는데, 이럴 때 React.lazy() 가 사용되는 건가요?
-
미해결코드로 배우는 React 19 with 스프링부트 API서버
섹션5부터...
섹션5부터 자바 프로젝트가 완전 바뀌어 있는데 만들어야될 db정보도 없고... 어찌해야 할지 모르겠네요...
-
미해결스프링 부트와 리액트로 구현하는 소셜 로그인
[소셜 로그인 16강] 로그인 실패 시 리다이렉트 관련 질문
16강을 수강하고 있습니다. CustomLoginFailureHandler사용자가 로그인에 실패했을 때 호출되는 메서드에 대한 질문입니다. if(savedRequest != null) { String targetUrl = savedRequest.getRedirectUrl(); //사용자가 접근하려던 URL // 즉, 로그인에 실패했지만 사용자를 원래 있던 페이지로 보내줌 // 실패 시 사용자가 접근하려던 URL 로그 출력 log.info("[핸들러 - 사용자가 접근 시도한 URL]\n-> " + targetUrl); // 사용자가 접근하려던 URL로 리다이렉트 (로그인 실패 후에도 이동) response.sendRedirect(targetUrl); }그런데 if문의 마지막 줄을 보면 로그인 실패 후에도 targetUrl 즉, 사용자가 접근하려했던 페이지로 이동시킨다고 작성 되어 있는데 ... 로그인 실패 시에도 targetUrl로 리다이렉트시키는 이유가 뭔가요?? 로그인에 실패하면 로그인 페이지에 남아있어야 하는 것 아닌가요 ...?
-
해결됨프론트엔드 마스터클래스
Map 강의 누락된 것 같습니다.
안녕하세요! 강의가 누락된 것 같아 글 작성합니다. 확인부탁드릴게요! 30강 Map 강의로부터 31강까진 문제없이 연결되는데, 32. WeakRef + FinalizationRegisty 강의시작부터 연결이 매끄럽지 못합니다. 뜬금없이 대안?에 대해서 나오는데 Map 예제부분과 WeakMap 부분이 누락된것같습니다.
-
미해결한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
브라우저의 렌더링 과정 질문
좋은 강의 감사합니다. React.js 소개 부분을 보며 궁금한점이 있어 문의드립니다. 화면 업데이트 관련 브라우저 렌더링 과정은 React.js뿐 아니라 Vue.js에서도 동일하게 적용되나요? 예를들면, Virtual Dom에서 한번에 모아 Actual DOM에 적용되는 방식등이요
-
미해결타입스크립트로 배우는 리액트(React.js) : 기초부터 최신 기술까지 완벽하게
Context API 리랜더링 방지를 위한 Memoization에 대한 질문
계속해서 학습을 진행중인데, 함수값을 넘길때에는 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을 이용해서 객체값으로 넘겨주는 식으로 작성해야 한다고 생각을 했었습니다. 코드를 작성하는 방법에는 정답은 없지만, 당장은 기본에 입각한 학습을 해야하기에 어떤 방법이 조금 더 효율적인지 여쭤보고 싶습니다.