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

작성한 질문수

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

무비앱 시리즈 #15 강의 마무리 ( 따라하며 배우는 리액트 노드 )

질문이 있습니다 선생님...

작성

·

296

1

https://github.com/crmrelease/tj-book

(참고용인 제가 작업중인 깃헙입니다)

안녕하세요

선생님 강의 참고해서 제가 왓챠같은 도서 어플을 만들어보고 있어요. 정보는 인터파크 api를 이용하구요.

그런데 맨처음 만들었던 plate에서 로그아웃 문제가 아직도 해결되지 않아 부득이하게 질문드립니다 ㅠㅠ

클라이언트단 코드는 이렇구요

로그아웃후에 '/login'으로 돌아가야 하는데, url만 '/login'으로 변하고 페이지는 리다이렉트 되질 않더라구요

그런데 임시로 랜딩페이지에 만든 로그아웃 버튼은 잘 되거든요

왜 네비의 rightmenu에 있는 버튼은 리다이렉트가 되질 않을까요.

사용하는 백단로직은 같고, 콘솔찍어보니 리턴받는 내용도 동일합니다.

네비가 아닌 랜딩페이지에 임시로 만든 로그아웃 버튼은 잘돼요 ㅠㅠ 문제가 무얼까요

그리고 처음에는 선생님께서 만드신 라우터대로 만드니 작동하지 않았는데 BrowserRouter로 감싸주니 코드가 돌더라구요

여기에 문제가 있을까요?

웹앱 react mongodb nodejs express

답변 5

2

질문자

선생님 정말 너무 감사합니다:)

제가 BrowserRouter를 잘못 사용했네요.

늦은 나이에 개발 시작해서 이런저런 방식으로 공부해보고 강의도 들어봤지만 피로하기만했는데

선생님 강의 듣고 정말 많은 동기부여가 됐어요.

항상 좋은 강의 해주셔서 감사합니다 ^^ 앞으로도 즐겁게 수업 들을게요~~!

1

지식공유자

아 그리고 index.js 는

이것도 해주셔야 되요

여기서 BrowserRouter로 감싸주시고 ~

App.js 에서 Switch 안에 있는 컴포넌트들중에 움직이게 해주는겁니다 ~

ReactDOM.render(
<Provider
store={createStoreWithMiddleware(Reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ &&
window.__REDUX_DEVTOOLS_EXTENSION__()
)}
>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
, document.getElementById('root'));

1

지식공유자

태진님 ~ 처음에 해보다가 뭐가 문제인지 보니깐

그 App.js 랑 NavBar 쪽에
코드가 바뀌어 있더라구요 ^^

App.js 이거랑

<Suspense fallback={(<div>Loading...</div>)}>
<NavBar />
<div style={{ paddingTop: '75px', minHeight: 'calc(100vh - 80px)' }}>
<Switch>
<Route exact path="/" component={Auth(LandingPage, null)} />
<Route exact path="/login" component={Auth(LoginPage, false)} />
<Route exact path="/join" component={Auth(RegisterPage, false)} />
<Route exact path="/book/:bookId" component={Auth(BookDetail, true)} />
<Route exact path="/token" component={Auth(TokenPage, false)} />
<Route exact path="/tobook" component={Auth(ToBook, true)} />
<Route exact path="/didbook" component={Auth(DidBook, true)} />
<Route exact path="/mycomment" component={Auth(MyComment, true)} />
<Route exact path="/find" component={Auth(FindBook, true)} />
<Route exact path="/profile" component={Auth(Profile, true)} />
</Switch>
</div>
</Suspense>

Navbar.js

<nav className="menu" style={{ position: 'fixed', zIndex: 1, width: '100%', height: '10%' }}>
<div className="menu__logo">
<a href="/" ><img src={logo} style={{ width: '140%' }} /></a>
</div>
<div className="menu__container">
<div className="menu_left">
<LeftMenu mode="horizontal" />
</div>
<div className="menu_rigth">
<RightMenu mode="horizontal" />
</div>
<Button
className="menu__mobile-button"
type="primary"
onClick={showDrawer}
>
<icon type="align-right" />
</Button>
<Drawer
title="Basic Drawer"
placement="right"
className="menu_drawer"
closable={false}
onClose={onClose}
visible={visible}
>
<LeftMenu mode="inline" />
<RightMenu mode="inline" />
</Drawer>
</div>
</nav>

이렇게 바꿔주시구요 ~

우선 BrowserRouter로 감싸주신다음에
Switch 안에 있는 component들이 움직이는거에요 ~

0

지식공유자

태진씨 항상 응원할게요 !!! 질문있을때 마다 질문주세요 ^^ !!! 다음에 또 뵐게요 !!!

0

지식공유자

그리고 앱 굉장히 잘만드셨어요 ^^

작성한 질문수