전체보기 (55) 썸네일형 리스트형 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 프로젝트 (4) - root 절대 경로 설정하기 Vue 쪽의 Nuxt는 루트 절대 경로는 ~ 또는 @ 로 지정하면 프로젝트 루트로 지정된다. 하지만, Next는 그런 부분이 본적으로 설정하는 부분이 없다. Next 문서에서 찾아보니 역시나 해당 설정 방법이 존재하였다. Next 절대 경로 설정하기 확인 내용을 정리하자면 Next에서는 자동으로 tsconfig.json, jsconfig.json, path, baseUrl 옵션을 지원한다. complilerOptions 에 paths 속성에 원하는 기본 경로를 원하는 별명을 지어주면 소스에서 원하는 경로를 별명을 통해 지정이 가능하다. 나의 경우 아래와 같이 @/ 를 사용하면 루트가 지정되게 설정하였다.. 이게 static 자원이 있는 public 디렉토리와 영향이 있는지는... 좀 테스트를 해봐야할듯... 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.. 이전 1 2 3 4 ··· 7 다음
