Update packages (react18, next12, typescript, styled-component)

Author: developer-choi

.gitignore

@@ -1,3 +1,4 @@
 /.idea/
 /node_modules/
 /.next/
+tsconfig.tsbuildinfo

next-env.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -26,27 +26,26 @@
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
     "moment": "^2.29.1",
-    "next": "^11.0.1",
+    "next": "12.3.1",
     "nookies": "^2.5.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.38.0",
     "react-redux": "^8.0.2",
     "react-toastify": "^7.0.4",
     "redux-saga": "^1.1.3",
     "reselect": "^4.0.0",
     "sha512-es": "^1.8.2",
-    "styled-components": "^5.3.0",
+    "styled-components": "5.3.6",
     "styled-reset": "^4.3.4",
     "video.js": "^7.14.3"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.2",
     "@types/lodash": "^4.14.172",
-    "@types/moment": "^2.13.0",
-    "@types/next": "^9.0.0",
-    "@types/react": "^17.0.16",
-    "@types/react-dom": "^17.0.9",
+    "@types/node": "18.7.23",
+    "@types/react": "18.0.21",
+    "@types/react-dom": "18.0.6",
     "@types/react-toastify": "^4.1.0",
     "@types/redux-saga": "^0.10.5",
     "@types/styled-components": "^5.1.12",
@@ -56,6 +55,6 @@
     "eslint": "^7.32.0",
     "eslint-config-next": "^11.0.1",
     "ts-node": "^10.2.0",
-    "typescript": "^4.7.4"
+    "typescript": "4.8.3"
   }
 }

pages/_app.tsx

@@ -16,8 +16,9 @@ import {thunkRefreshSetUser} from '@store/reducers/user';
 import {QueryClient, QueryClientProvider} from '@tanstack/react-query';
 
 export default function MyApp(props: AppProps) {
-  if (props.pageProps.notifyRedirect) {
-    return <NotifyRedirect notifyRedirect={props.pageProps.notifyRedirect as NotifyRedirectProps['notifyRedirect']}/>;
+  if ('notifyRedirect' in props.pageProps) {
+    const {notifyRedirect} = props.pageProps as NotifyRedirectProps;
+    return <NotifyRedirect notifyRedirect={notifyRedirect}/>;
   }
 
   return (
@@ -55,18 +56,22 @@ function InnerApp({Component, pageProps}: AppProps) {
 
   const Layout = 'layout' in Component ? (Component as any).layout : null;
 
+  //https://github.com/styled-components/styled-components/issues/3738
+  const ThemeProviderProxy: any = ThemeProvider;
+  const GlobalStyleProxy: any = GlobalStyle;
+
   return (
     <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={theme}>
-        <GlobalStyle/>
+      <ThemeProviderProxy theme={theme}>
+        <GlobalStyleProxy/>
         {Layout === null ? (
           <Component {...pageProps}/>
         ) : (
           <Layout>
             <Component {...pageProps}/>
           </Layout>
         )}
-      </ThemeProvider>
+      </ThemeProviderProxy>
     </QueryClientProvider>
   );
 }

pages/api/age.ts

@@ -2,7 +2,7 @@ import type {NextApiRequest, NextApiResponse} from 'next';
 
 export default function age(request: NextApiRequest, response: NextApiResponse) {
   try {
-    const age = request.query.name.length;
+    const age = request.query?.name?.length as number;
     response.json({age});
   } catch (error) {
     response.json({age: 0});

pages/examples/api/react-query/mutation-reset-error.tsx

@@ -37,8 +37,7 @@ export default function Page() {
   return (
     <StyledForm onSubmit={onSubmit}>
       <InputText value={title} onChangeText={onChangeTitle} placeholder="대충 수정하기전 제목"/>
-      {/* 이렇게 매번 assertion 하는게 최선인가? */}
-      {error && <ErrorMessage>{(error as Error).message}</ErrorMessage>}
+      {!error ? null : <ErrorMessage>{(error as Error).message}</ErrorMessage>}
       <Button type="submit">수정</Button>
     </StyledForm>
   );

src/util/custom-hooks/useCheckableList.ts

@@ -20,7 +20,7 @@ export interface UseCheckableListResult<T extends Object> {
 }
 
 // 별도의 체크 목록 state를 위한 custom hooks
-export default function useCheckableList<T>({pkExtractor, list}: UseCheckableListParam<T>): UseCheckableListResult<T> {
+export default function useCheckableList<T extends Object>({pkExtractor, list}: UseCheckableListParam<T>): UseCheckableListResult<T> {
   const [checkedList, setCheckedList] = useState(list.map(item => ({
     pk: pkExtractor(item),
     checked: false
@@ -116,7 +116,7 @@ export default function useCheckableList<T>({pkExtractor, list}: UseCheckableLis
   };
 }
 
-function useAnotherWay<T>({pkExtractor, list}: UseCheckableListParam<T>): UseCheckableListResult<T> {
+function useAnotherWay<T extends Object>({pkExtractor, list}: UseCheckableListParam<T>): UseCheckableListResult<T> {
   const [selectedList, setSelectedList] = useState<PkType[]>([]);
 
   useEffectFromTheSecondTime(useCallback(() => {

src/util/extend/object.ts

@@ -2,6 +2,7 @@ export function reverse<K extends string, V extends string>(target: Record<K, V>
   const targetKeys = Object.keys(target) as K[];
   return targetKeys.reduce((a, key) => {
     const value = target[key];
+    // eslint-disable-next-line no-param-reassign
     a[value] = key;
     return a;
   }, {} as Record<V, K>);

src/util/extend/state.ts

@@ -3,7 +3,7 @@
  * const [state, setState] = useState({key1: 'value1', key2: 'value2', ...rest});
  * setState(prevState => keepRestPrevState(prevState, ['key1'], {key1: 'changed-value1'}));
  */
-export default function keepRestPrevState<V>(prevState: V, changeKeys: (keyof V)[], value: Partial<V>): V {
+export default function keepRestPrevState<V extends Object>(prevState: V, changeKeys: (keyof V)[], value: Partial<V>): V {
   return Object.keys(prevState).reduce((a, b) => {
     if (changeKeys.includes(b as keyof V)) {
       // @ts-ignore

tsconfig.json

@@ -39,7 +39,8 @@
         "src/util/*"
       ]
     },
-    "importsNotUsedAsValues": "error"
+    "importsNotUsedAsValues": "error",
+    "incremental": false
   },
   "include": [
     "next-env.d.ts",