inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

노드 리액트 기초 강의 #29 로그인 페이지 (1)

index.js 랜딩페이지로 가지 않음

516

esthrelar

작성한 질문수 1

1

index.js에서

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);


// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

이렇게 랜딩 페이지로 잘 가는데,

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import { Provider } from 'react-redux';
import 'antd/dist/reset.css';
import { legacy_createStore as createStore, applyMiddleware } from 'redux';
import promiseMiddleware from 'redux-promise';
import ReduxThunk from 'redux-thunk';
import rootReducer from './_reducers'; //'./_reducers/index.js'라고 안 해도 알아서 index.js인 줄 알고 해 줌.

const createStoreWithMiddleware = applyMiddleware(promiseMiddleware, ReduxThunk)(createStore); 
//원래는 createStore만 해서 store를 redux에서 생성하는건데, 그냥 store는 객체밖에 못 받기 때문에 
//promise와 function도 받게 해주기 위해 이 middleware와 함께 이렇게 만들어 주는 것.

//그래서 store 만든 것을 이렇게 store에다가 넣어주는 것.
//이렇게까지 하면 우리 application에 redux를 연결 시킨 것.
ReactDOM.render(
  <Provider 
    store={createStoreWithMiddleware(rootReducer
      ,
      window.__REDUX_DEVTOOLS_EXTENSION__ &&
      window.__REDUX_DEVTOOLS_EXTENSION__()
    )}
  > 
    <App />
  </Provider>
  
  ,  document.getElementById('root')
);


// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

이렇게 redux 부분을 추가한 코드로 하면 랜딩페이지로 가지 않고 컴파일은 되나

localhosst:3000도, localhosst:3000/login도, localhosst:3000/register도 다 이렇게 흰 화면만 뜨고 해당 페이지로 가지 않습니다..

해결 방법 아시는 분 알려주시면 감사하겠습니다😭

 

react node.js

답변 1

3

esthrelar

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

이 부분을

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

이렇게 수정하니 되었습니다 :)

혹시 같은 문제를 겪는 분이 계실까봐 댓글로 그냥 남겨두겠습니다!

깃 이메일이랑 비번이 필요하다고 하네요

0

38

1

404 에러

0

104

1

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

0

121

1

로그인, 로그아웃, 토근 작동 안 함

0

240

0

로그아웃 findOneAndUpdate 함수

0

172

1

9강 오류 어떻게 해결하나요?

0

195

1

localhost 에서 연결을 거부했습니다.

0

1936

4

포스트맨에서 true가 안떠요

0

151

1

왜 안되나요

0

130

1

몽고db 연결 오류가 납니다 위에껀 입력한 코드, 아래껀 터미널이에요

0

243

1

로그아웃 401 에러(Unauthorized)

0

506

2

암호가 해싱되지 않고 입력값 그대로 db에 저장되는 문제

0

151

1

7강중에서

0

167

2

User.findByToken is not a function

0

213

1

루트 디렉토리

0

275

1

useState

0

563

1

프록시 잘 설정했는데도 404 오류 뜨는 분들

5

876

6

webpack 관련 에러 질문

0

221

1

리액트 관련 질문

0

275

1

14강 로그아웃 안됨

0

319

1

mongoDB 데이터 확인하는 법

0

411

1

postman 에러

0

295

1

선생님 리덕스를 사용하면 어떠한 부분이 좋은지 알 수 있을까요?

0

236

1

다음과 같은 에러들이 발생합니다.

0

274

1