Web Front-End/React (26) 썸네일형 리스트형 Next.js 프로젝트 (8) - Redux Thunk에서 라우팅하기(connected-next-router) Redux를 써보는데.. 특정 액션이 발생하고 난 후 특정 페이지로 이동하는 기능이 필요한데. 그냥 딱 떠오르는건 Router 객체를 이용해서 push 로 페이지를 이동시키는게 떠오른다. 하지만 Redux가 들어있는 .js는 모듈 형태로 따로 빼놓는데 여기에선 React 컴포넌트가 아니므로 useRouter Hook을 이용할 수 없다. 따라서 Redux에서 주소를 변경하거나 확인할 수 있는 라우터를 사용할 수 있는 기능이 필요하다. 검색해보니.. 1) 리액트용 "connected-react-router" => 확인 2) 1)을 기반으로한 "connected-next-router" => 확인 전용 라이브러리가 존재한다. 다니엘이라는 사람이 만든거 같은데 혀튼... Next를 사용중이니까 이걸로 설치!! 3.. Next.js 프로젝트 (7) - Redux-Thunk 사용하기 대표적인 리덕스 미들웨어 라이브러리로 redux-thunk, redux-saga가 존재한다. 미들웨어는 액션이 dispatch 되어 리듀서에서 처리하기 전에 처리하는 작업을 일컫는다. 그리고 redux는 action객체를 넘겨서 상태변화를 일으키지만 thunk의 경우 함수를 넘긴다. 함수를 넘기게되면 해당 액션이 dispatch 되었을 때 넘겼던 함수가 먼저 실행되고 비동기 결과에 따라 액션을 다시 디스페치하여 진정한 리덕스 패턴에 맞게 돌아가게 된다. 보니까 대부분 axios를 사용하는 구간은 대부분 thunk로 처리하면 될듯하다~! 혀튼 일반적으로 API 통신 같은 비동기 때 사용되고 반드시 필요한것은 아니지만 좋은 개발자경험이 따라온다고하니.. 나는 그 중 대표적인 redux-thunk를 이용해보고.. Next.js 프로젝트 (6) - Redux 사용하기 React에서.. 중앙집중상태 관리 라이브러리를 써본적이 아직 없어서. 리액트에서 가장 흔하게 쓰이는 Redex를 사용해보려고한다. 개념 자체는 Vuex와 동일하지만... Vuex를 하고 Redex로 넘어오는 상황에서는 용어가 겹치는 부분이 있어서 처음엔 좀 햇갈렸다.. dispatch, action, reducer 등등. 내가 알고 있는 개념으론 전체 상태와 리듀서를 관리하는 객체인 store가 있고.. 결국.. action은 객체이고. 이 객체를 dispatch의 파라미터로 넘기면 리듀서가 실행되고. 리듀서가 실행되면서 새로운 상태 즉, 상태를 변경 시킨다.. 인듯 1. React 환경에서 Redex 설치 $yarn add react-redux redux redux-devtools-extension .. Next.js 프로젝트 (5) - Ant Design 이용해보기 검색해 본 결과 토이프로젝트로.. 디자인하고 마크업 쪽에 시간을 덜 뺏길 원한다면 Ant Design이라는 훌륭한... 대륙의 실수로 만들어진 사이트가 있었다.. 공식사이트 확인 보면.. Layout 부터 네비게이터, 버튼은 물론이고 Grid, icon, Form, Modal, Drawer 등 바로 쓸 수 있도록 지원해주고 있었다. 1. Ant Design 설치 $ yarn add antd 끝.. 공식 사이트 보면 사용 예제도 있어서 쉽게 사용할 수 있다... Next 프로젝트에서 스타일을 적용하려면 앱이 최초로 실행되는 부분인 pages/_app.js 부분에 아래와같이 css를 선언해 줘야 스타일이 먹힌다. import "antd/dist/antd.css"; 추가로 아이콘 관련 컴포넌트를 쓰려면, $y.. Next.js 프로젝트 (3) - The keyword 'import' is reserved eslint 에러 이 전 포스트에서 babel-eslint 를 설치 및 적용을 안해주면 아래 같은 에러가 발생한다.. 이를 해결하려면! $ yarn add babel-eslint --dev 린트 설정 파일 parser 속성에 "parser": "babel-eslint" 를 적용하면 끝! Next.js 프로젝트 (2) - VSCode 기초 설정(Prettier, ESLint..etc) 우선 React랑 살짝 다른게 React에서는 ESLint가 내장되어 있었지만 Next에서는 내장되어 있지 않았다.. 따라서 ESLint, Prettier 를 설정해 주도록한다.! 당연.. 프로젝트 루트에서 설치!! 1. Prettier, ESLint 설치!! $ yarn add prettier eslint --dev $ yarn add --dev eslint-config-prettier eslint-plugin-prettier eslint-plugin-react # prettier: 코드를 예쁘게 일관성 있게 정리해준다. # eslint: 코딩 컨벤션 툴로.. 룰에 어것나는 것들은 경고, 에러를 발생 시켜 올바른 코딩을 할 수 있게 해준다. # eslint-config-prettier: eslint의 .. Next.js 프로젝트 (1)- App 생성하기 일단~ React로 구현할 수 있겠지만... 은근히 해야할 기초작업들이 많은데.. 이 번거로운 작업을 Next.js에서 대부분 처리해준다. Vue에서 Nuxt.js를 경험해 본 입장에서 상당히 편하다.. 그러므로 굳이... React.js나 Vue.js 만으로 할 필요는 없는듯... 물론 React만으로는 자유도가 상당히 높다는 장점이 있지만 기반을 다지는 일이 단점이라면 단점이라고 생각한다. 혀튼.. Nuxt.js 처럼 Next.js 프로젝트를 시작해본다.. yarn이 dependency 문제도 npm 보다 덜 엮이는거같고.. yarn이 facebook 쪽이라 더욱더 yarn을 쓰게된다. 속도도 더 빠르다.. 그렇다면 패키지 매니저는 yarn으로 고고.. 1. Project 생성 $ yarn creat.. Redux Hydrate 란? SSR(Server Side Rendering)이 완료 될 때 호출되는 액션! 즉, Next Redux Wrapper 에 createWrapper 메서드에 의해 생성된 객체의 getServerSideProps 메서드에서 dispatch에 의해 상태변화가 일어나면 Hydrate가 실행되면서 변경된 상태값을 받는다. 이전 1 2 3 4 다음
