-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcommands.txt
66 lines (54 loc) · 4.74 KB
/
commands.txt
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
npx create-next-app --ts
CRA 문서에서는 아직 node-sass 를 설치하라고 되어 있다. 이건 deprecated 되어서 dart-sass 를 설치해야한다. npm install sass
그리고 CRA 문서에서는 node_modules 도 SASS_PATH 에 넣어주라고 되어 있다. nextjs 는 그냥 includePaths 에 node_modules 넣으라는 언급은 없다.
=> https://nextjs.org/docs/basic-features/built-in-css-support#import-styles-from-node_modules 이부분에 언급되어 있다. 기본적으로 node_modules 포함하고 있다.
그러니 nextjs 에서는 아래와 같이 ~ 붙이지 않아도 된다.
만약 필요하다면 차후 ~ 를 앞에 붙여서 node_modules 에 있는 것을 가져오는 방식으로 하자. CRA 의 경우 CRA 의 것 대로 node_modules 를 SASS_PATH 에 넣는 식으로 따르자.
https://nextjs.org/docs/basic-features/built-in-css-support#sass-support
https://create-react-app.dev/docs/adding-a-sass-stylesheet/
npm install babel-plugin-root-import -D
https://nextjs.org/docs/advanced-features/customizing-babel-config
eslint with prettier
https://nextjs.org/docs/basic-features/eslint#core-web-vitals
eslint-config-next 안에 https://www.npmjs.com/package/eslint-config-next 와 같이 이미 typescript 및 기본 설정 다 되어 있다.
prettier 와 함께 사용하는 설정은 안되어 있어서 그 부분만 추가해주면 된다.
npm install eslint-config-prettier eslint-plugin-prettier -D
styled-components
https://nextjs.org/docs/basic-features/built-in-css-support#css-in-js
npm install styled-components polished classnames
npm install @types/styled-components babel-plugin-styled-components -D
testing
https://nextjs.org/docs/testing ( 참고용: https://www.youtube.com/watch?v=W0cyIehV9_4 )
npm install --save-dev cypress
npm install --save-dev jest babel-jest @testing-library/react @testing-library/jest-dom identity-obj-proxy react-test-renderer
npm install --save-dev @types/jest @testing-library/user-event @testing-library/dom
image
https://velog.io/@pyo-sh/React-NextJS-에서-이미지-import-하기
https://nextjs.org/docs/api-reference/next/image
https://www.npmjs.com/package/next-images
https://velog.io/@yhg0337/Next-3zkhp8cb
https://nextjs.org/docs/api-reference/next.config.js/introduction
https://nextjs.org/docs/basic-features/typescript
npm install next-images
npm install next-compose-plugins --save-dev
npm install @next/bundle-analyzer --save-dev
다음과 같은 오류가 날 수 있다. disableStaticImages: true 해주면 된다.
error - ./src/assets/icons/heart-blank.png
TypeError: unsupported file type: undefined (file: undefined)
npm install react-hook-form yup @hookform/[email protected]
npm install uuid
npm install @types/uuid --save-dev
https://qnrjs42.blog/react/nextjs-redux-toolkit
https://github.com/kirill-konshin/next-redux-wrapper#usage-with-redux-persist
npm i react-redux next-redux-wrapper @reduxjs/toolkit redux-persist normalizr redux-logger
npm i -D @types/react-redux @types/redux-logger
일단 공식 문서를 참조해서 최대한 표준에 맞게 typescript, next-redux-wrapper 와 조합해보았다.
하지만 redux-persist 와 nextjs 는 궁합이 맞지 않아 보인다. getServerSideProps 를 사용해서 dispatch 된 store 가 redux-persist 의 REHYDRATE 로 리셋 된다.
그러면 ServerSide 쪽에서 redux store 미리 셋팅한 부분이 사라진다. 그냥 store 전체가 통으로 변경된다. 물론 store.ts 에 그렇게 되도록 했기 때문이지만.
또한 typescript 의 type 사용에 어려움을 준다. redux-persist 는 브라우저에서만 동작해야 해서 store 생성 로직을 typeof window 를 검사해서 isServer 인지 브라우저인지 구분해서
store 와 reducer 를 만들어 리턴하게 되는데 이렇게 lazy 하게 셋팅되면 type 을 정의하여 사용하기 까다롭다.
PersistGate 를 입히는 부분에 있어서도 type 에 ! 를 사용해야 한다. 서버사이드의 렌더링 dom 과 브라우저의 렌더링 dom 이 다를 경우 콘솔에 에러를 보여준다. 참고.
PersistGate 에 localstorage 에서 REHYDRATE 가 끝나기 전까진 loading 이 표시되는 것은 같기 때문에 nextjs 의 장점을 저하시킬 수 있지만 이건 큰 문제 같진 않다.
아무튼 둘의 궁합이 잘 맞지 않는다. 가장 큰 두가지가 typescript 를 난해하게 만들고 getServerSideProps 부분의 dispatch 부분을 다시 persist 가 리셋해버리는 부분이다.
물론 getServerSideProps 부분에서 dispatch 한 것을 리셋해버리는 것은 persist 하지 않을 것들은 골라서 리셋 안하도록 할 수도 있지만...
nextjs 의 경우 redux-persist 를 사용하기 보단 https://github.com/bjoluc/next-redux-cookie-wrapper 이런걸 참고해서 persist 할 것들을 따로 관리하도록 하는 것이 좋아 보인다.