store/configureStore.js
우선 next.js에서 next-redux-wrapper를 사용하는 이유는 무엇인가 ?
이것이 궁금해진 이유는 react에서 createStore를 이용해서 리덕스 스토어를 사용하는 반면 next에서는 createWrapper을 사용하고 createStore도 마찬가지로 사용하기 때문이다. 그렇다면 기능적으로 혹은 성능적으로 추가가 된 것일 것 같아서 궁금해져서 찾게 되었다.
이유는 어렵지 않았는데 간단하게 next.js는 react에서 복잡한 ssr(서버 사이드 렌더링) 과정을 간단하게 함수로 구현할 수 있는 점이라고 생각하는데,
ex) getServerSideProps ..
저 createWrapper로 wrapper을 만들고 _app.js를 wrapper.withRedux() 로 감싸주지 않는다면 저런 서버사이드렌더링 관련 함수를 사용할 수 없기 때문에 감싸주는 것이다.
오늘 글까지 추가한 라이브러리들을 살펴보겠다.
npm i next-redux-wrapper@6
npm i react-redux
npm i redux
npm i redux-devtools-extension
npm i immer- useSelector,useDispatch를 통한 전역상태관리를 위해 react-redux를 받는다
- createStore, applyMiddleware, compose를 통해 리덕스를 사용하기 위해 redux를 받는다.
- 개발시에 브라우저에서 개발자도구를 이용하여 상태관리를 보다 편리하게 하고, 오류 발생시 발견하기 위해서 composeWithDevTools가 필요한데, 따라서 redux-devtools-extension도 받는다.
- 사실 immer은 불변성을 더욱 쉽게 유지하기 위함인데, 아직 깊이가 많이 필요한 문장은 사용하지 않았지만 후에 불변성을 수월하게 유지하기 위해서 미리 설치해놓고 reducer에서 immer을 이용한다.
다른 페이지나 컴포넌트는 간단하게 antd 공식문서를 보고 먼저 만들고 조금씩 다른 부분은 아무래도 수업에 맞게 맞췄다. (디자인 적인 측면은 이 프로젝트에서는 수업과 거의 동일하게 할 생각이기 때문이다)
후에 기능을 추가적으로 더 개발하는 부분을 만들 것이다.
나는 프론트엔드 개발자를 꿈꾸기에 백엔드 부분은 잘 모르지만 강의에 나오는 지식들을 사용해서 한번 기능 개발을 더 하려한다.
현재 기본 컴포넌트들을 추가하고 리덕스를 이용해서 간단하게 포스트 추가시 더미데이터를 이용해서 추가하고, 로그인,로그아웃, 자신의 팔로워,팔로잉 목록을 확인할 수 있는 부분까지 구현했다.
난 프론트엔드에서 중요한 부분 중 하나는 서버로 서버에서 필요로하는, 형식에 맞는 데이터를 알맞게 보내고 서버에서 다시 보내주는 데이터를 알맞게 사용해서 사용자에게 보여주는 것이라고 생각한다.
(물론 깔끔한 UI, 빠른 렌더링 같은 다른 중요한 것을 무시하는 것을 무시하는 것은 아니다! 이것 역시 굉장히 중요한 부분이다.)
이렇게 생각한 이유는 결국 데이터를 알맞게 받아오고 알맞게 사용을 해야 사용자가 그 정보를 바탕으로 다음 활동을 할 수 있다고 생각하기 때문이다.
오늘 작성한 코드들은 위에서 말했듯이 공식문서를 보고도 할 수 있는 부분이기에 조금만 리뷰하고 넘어가려 한다.
아래 코드는 store파일 안에있는 configureStore.js이다.
위에서 말한 createWrapper와 createStore을 이용하여 리덕스와 추후에 할 ssr을 사용할 틀을 만들고 _app.js를 감싼다.
configureStore.js
import { createWrapper } from "next-redux-wrapper";
import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "../reducers";
import { composeWithDevTools } from "redux-devtools-extension";
const configureStore = () => {
const middlewares = [];
const enhancer =
process.env.NODE_ENV === "production"
? compose(applyMiddleware(...middlewares))
: composeWithDevTools(applyMiddleware(...middlewares)); //개발용
const store = createStore(rootReducer, enhancer);
return store;
};
const wrapper = createWrapper(configureStore, {
debug: process.env.NODE_ENV === "development",
});
export default wrapper;
_app.js
import "antd/dist/antd.css";
import PropTypes from "prop-types";
import wrapper from "../store/configureStore";
const App = ({ Component }) => {
return <Component />;
};
App.propTypes = {
Component: PropTypes.elementType.isRequired,
};
export default wrapper.withRedux(App);
이제 리덕스를 이용하여 전역 상태관리를 할 수 있다!
프론트엔드는 백엔드와 협업을 하여 데이터를 보내고 이럴 알맞은 형식에 맞춰 사용자에게 보여주는데, 현재는 백엔드가 없기 때문에 더미데이터를 사용한다.
실무에서도 이러한 경우가 많다고 하는데 따라서 나는 이 부분도 집중해서 확인했다.
간단하게 더미데이터를 구현했다.
const initialState = {
user: null,
logInLoading: false,
logInDone: false,
logInError: null,
logOutLoading: false,
logOutDone: false,
logOutError: null,
signUpLoading: false,
signUpDone: false,
signUpError: false,
};
const dummyUser = {
id: 1,
email: "dummy@naver.com",
nickname: "vanc",
};이 dummyUser는 initialState안의 user에 들어갈 데이터이다.
현재는 이 더미데이터의 데이터가 고정적으로 들어가지만 로그인 한 유저의 정보를 바탕으로 더미데이터를 바꾸려한다.
현재 진행 과정을 보면
이렇게 진행되었다. dummyPost도 위에 쓴 더미데이터와 비슷한 형식으로 사용했기 때문에 따로 적지는 않았지만 이 더미데이터 또한 실제 입력한 content를 나타낼 수 있게 표현할 생각이다.
