[강의 오류 제보] Navbar 컴포넌트 코드 오류 발견

React & FastAPI로 만드는 투표 커뮤니티 플랫폼: 결제 시스템으로 수익화까지!

2-4. Navbar.jsx 메뉴 바 제작 (3부)

해결된 질문

작성

수정됨

안녕하세요,
'리액트 + 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 미정의
```

수정방법:
<AuthButtons

isAuthenticated={isAuthenticated}

isOpen={isOpen}

setIsOpen={setIsOpen}

onLogoutClick={onLogoutClick} // ✅ 수정

onLoginClick={onLoginClick} // ✅ 추가

onSignupClick={onSignupClick} // ✅ 추가

<MobileMenu

isOpen={isOpen}

setIsOpen={setIsOpen}

isAuthenticated={isAuthenticated}

onLogoutClick={onLogoutClick} // ✅ 수정

onLoginClick={onLoginClick} // ✅ 추가

onSignupClick={onSignupClick} // ✅ 추가

/>

💡 제안: 이전 강의 자료에서는 올바르게 onLogoutClick 등을 전달하고 있었는데, 특정 시점부터 logout으로 변경되면서 함수명과 불일치가 발생한 것으로 보입니다.

강의 자료 업데이트 부탁드립니다. 감사합니다.

react mysql docker rest-api FastAPI

답변 2

닭강정

지식공유자

안녕하세요, 소중한 오류 제보 정말 감사합니다.

말씀해주신 Navbar 컴포넌트의 logout 관련 부분을 확인해보니, 말씀하신 대로 함수명이 불일치하여 에러가 발생하는 문제가 있었습니다. 꼼꼼히 확인해주신 덕분에 원인을 빠르게 파악하고, 해당 섹션의 강의 자료와 코드를 모두 수정 및 반영했습니다.

이처럼 세세하게 살펴보고 정확히 제보해주셔서 정말 감사드립니다. 덕분에 다른 학습자분들도 더 원활하게 학습하실 수 있을 것 같습니다. 앞으로도 자료와 강의 내용을 더욱 꼼꼼히 검수하겠습니다. 감사합니다!

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 고리오영감님, 강의에서 발생한 코드 오류에 대해 제보해 주셔서 감사합니다.

문제 요약

현재 강의 자료 코드에서는 함수 이름이 맞지 않아 ReferenceError: logout is not defined 에러가 발생하고 있습니다. 코드는 onLogoutClick, onLoginClick, onSignupClick이라는 함수로 정의되어 있으나, 실제 전달시 미정의된 logout 변수를 사용하고 있어 오류가 나는 상황입니다.

해결 방법

해결 방법은 AuthButtons와 MobileMenu 컴포넌트에 적절한 함수를 전달하도록 수정하는 것입니다. 기존의 logout 대신 onLogoutClick, onLoginClick, onSignupClick을 전달하면 됩니다.

수정된 코드는 다음과 같습니다:

<AuthButtons
  isAuthenticated={isAuthenticated}
  isOpen={isOpen}
  setIsOpen={setIsOpen}
  onLogoutClick={onLogoutClick} // ✅ 변경
  onLoginClick={onLoginClick}   // ✅ 추가
  onSignupClick={onSignupClick} // ✅ 추가
/>

<MobileMenu
  isOpen={isOpen}
  setIsOpen={setIsOpen}
  isAuthenticated={isAuthenticated}
  onLogoutClick={onLogoutClick} // ✅ 변경
  onLoginClick={onLoginClick}   // ✅ 추가
  onSignupClick={onSignupClick} // ✅ 추가
/>

추가 자료

비슷한 문제에 대한 다른 인프런 커뮤니티 게시물을 다음 링크에서 확인하실 수 있습니다. 이 링크들은 다양한 해결책을 포함하고 있어 도움이 되실 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해 드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변