Update corrections file

Author: velopert

_old_corrections/개정판-4쇄.md

@@ -0,0 +1,279 @@
+# 오탈자 및 개선사항
+
+여기에 있는 내용은 개정판 3쇄 이상 기준입니다.
+개정판 1~3쇄에 기준한 업데이트 사항은 다음 링크에서 확인하세요:
+
+- [개정판-1쇄.md](https://github.com/velopert/learning-react/blob/master/_old_corrections/%EA%B0%9C%EC%A0%95%ED%8C%90-1%EC%87%84.md)
+- [개정판-2쇄.md](https://github.com/velopert/learning-react/blob/master/_old_corrections/%EA%B0%9C%EC%A0%95%ED%8C%90-2%EC%87%84.md)
+- [개정판-3쇄.md](https://github.com/velopert/learning-react/blob/master/_old_corrections/%EA%B0%9C%EC%A0%95%ED%8C%90-3%EC%87%84.md)
+
+### 모든 프로젝트의 index.js
+
+기존에는 src/index.js 파일에 serviceWorker.js 파일을 불러와서 `serviceWorker.unregister()` 가 있었는데 CRA가 업데이트 되면서 해당 부분이 사라졌습니다. 따라서 해당 부분은 모두 무시하시면 됩니다. 또한, `import * as serviceWorker from './serviceWorker';` 부분도 무시하시면 됩니다.
+
+영향이 가는 페이지
+
+- pg. 61
+- pg. 327
+- pg. 382
+- pg. 443-444
+- pg. 445
+- pg. 474
+- pg. 479
+- pg. 480-481
+- pg. 484
+- pg. 507
+- pg. 509
+- pg. 544
+- pg. 566
+- pg. 580
+- pg. 723
+- pg. 730-731
+- pg. 768
+- pg. 799-800
+- pg. 893
+
+## 8.2.3 오탈자 pg.197
+
+useEffect 부분에 deps 배열이 빠져있습니다.
+
+```javascript
+useEffect(() => {
+  console.log('effect');
+  console.log(name);
+  return () => {
+    console.log('cleanup');
+    console.log(name);
+  };
+}, [name]);
+```
+
+## 8.2.3 오탈자 pg.199
+
+배열을 비워야 합니다.
+
+```javascript
+useEffect(() => {
+  console.log('effect');
+  console.log(name);
+  return () => {
+    console.log('cleanup');
+    console.log(name);
+  };
+}, []);
+```
+
+### 20.3.2 업데이트 (pg.546 - pg.547)
+
+CRA 업데이트됨에 따라 paths 파일이 변경되었습니다.
+
+```diff
+module.exports = {
+  dotenv: resolveApp('.env'),
+  appPath: resolveApp('.'),
+  appBuild: resolveApp('build'),
+  appPublic: resolveApp('public'),
+  appHtml: resolveApp('public/index.html'),
+  appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appPackageJson: resolveApp('package.json'),
+  appSrc: resolveApp('src'),
+  appTsConfig: resolveApp('tsconfig.json'),
+  appJsConfig: resolveApp('jsconfig.json'),
+  yarnLockFile: resolveApp('yarn.lock'),
+  testsSetup: resolveModule(resolveApp, 'src/setupTests'),
+  proxySetup: resolveApp('src/setupProxy.js'),
+  appNodeModules: resolveApp('node_modules'),
++  swSrc: resolveModule(resolveApp, 'src/service-worker'),
+  publicUrlOrPath,
+  ssrIndexJs: resolveApp('src/index.server.js'),
+  ssrBuild: resolveApp('dist'),
+};
+```
+
+### 20.30.2 업데이트 (pg.548 - 550)
+
+CRA 업데이트됨에 따라 webpack.config.server.js 파일이 변경되었습니다.
+
+```javascript
+const paths = require('./paths');
+const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
+
+const cssRegex = /\.css$/;
+const cssModuleRegex = /\.module\.css$/;
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+const env = getClientEnvironment(paths.publicUrlOrPath.slice(0, -1));
+
+module.exports = {
+  mode: 'production',
+  entry: paths.ssrIndexJs,
+  target: 'node',
+  output: {
+    path: paths.ssrBuild,
+    filename: 'server.js',
+    chunkFilename: 'js/[name].chunk.js',
+    publicPath: paths.publicUrlOrPath,
+  },
+  module: {
+    rules: [
+      {
+        oneOf: [
+          // 자바스크립트를 위한 처리
+          // 기존 webpack.config.js 를 참고하여 작성
+          {
+            test: /\.(js|mjs|jsx|ts|tsx)$/,
+            include: paths.appSrc,
+            loader: require.resolve('babel-loader'),
+            options: {
+              customize: require.resolve(
+                'babel-preset-react-app/webpack-overrides'
+              ),
+              presets: [
+                [
+                  require.resolve('babel-preset-react-app'),
+                  {
+                    runtime: 'automatic',
+                  },
+                ],
+              ],
+              plugins: [
+                [
+                  require.resolve('babel-plugin-named-asset-import'),
+                  {
+                    loaderMap: {
+                      svg: {
+                        ReactComponent:
+                          '@svgr/webpack?-svgo,+titleProp,+ref![path]',
+                      },
+                    },
+                  },
+                ],
+              ],
+              cacheDirectory: true,
+              cacheCompression: false,
+              compact: false,
+            },
+          },
+          // CSS 를 위한 처리
+          {
+            test: cssRegex,
+            exclude: cssModuleRegex,
+            //  exportOnlyLocals: true 옵션을 설정해야 실제 css 파일을 생성하지 않습니다.
+            loader: require.resolve('css-loader'),
+            options: {
+              importLoaders: 1,
+              modules: {
+                exportOnlyLocals: true,
+              },
+            },
+          },
+          // CSS Module 을 위한 처리
+          {
+            test: cssModuleRegex,
+            loader: require.resolve('css-loader'),
+            options: {
+              importLoaders: 1,
+              modules: {
+                exportOnlyLocals: true,
+                getLocalIdent: getCSSModuleLocalIdent,
+              },
+            },
+          },
+          // Sass 를 위한 처리
+          {
+            test: sassRegex,
+            exclude: sassModuleRegex,
+            use: [
+              {
+                loader: require.resolve('css-loader'),
+                options: {
+                  importLoaders: 3,
+                  modules: {
+                    exportOnlyLocals: true,
+                  },
+                },
+              },
+              require.resolve('sass-loader'),
+            ],
+          },
+          // Sass + CSS Module 을 위한 처리
+          {
+            test: sassRegex,
+            exclude: sassModuleRegex,
+            use: [
+              {
+                loader: require.resolve('css-loader'),
+                options: {
+                  importLoaders: 3,
+                  modules: {
+                    exportOnlyLocals: true,
+                    getLocalIdent: getCSSModuleLocalIdent,
+                  },
+                },
+              },
+              require.resolve('sass-loader'),
+            ],
+          },
+          // url-loader 를 위한 설정
+          {
+            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
+            loader: require.resolve('url-loader'),
+            options: {
+              emitFile: false, // 파일을 따로 저장하지 않는 옵션
+              limit: 10000, // 원래는 9.76KB가 넘어가면 파일로 저장하는데
+              // emitFile 값이 false 일땐 경로만 준비하고 파일은 저장하지 않습니다.
+              name: 'static/media/[name].[hash:8].[ext]',
+            },
+          },
+          // 위에서 설정된 확장자를 제외한 파일들은
+          // file-loader 를 사용합니다.
+          {
+            loader: require.resolve('file-loader'),
+            exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
+            options: {
+              emitFile: false, // 파일을 따로 저장하지 않는 옵션
+              name: 'static/media/[name].[hash:8].[ext]',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
+```
+
+### 20.30.2 업데이트 (pg.552)
+
+CRA 업데이트됨에 따라 nodeExternals에 allowlist 설정이 필요해졌습니다.
+
+```javascript
+const nodeExternals = require('webpack-node-externals');
+
+(...)
+module.exports = {
+  (...)
+  resolve: {
+    modules: ['node_modules'],
+  },
+  externals: [
+    nodeExternals({
+      allowlist: [/@babel/],
+    }),
+  ],
+}
+```
+
+## 22.9.2 업데이트 pg.669
+
+@hapi/joi 에서 joi 로 변경되었습니다.
+
+```
+$ yarn add @hapi/joi
+```
+
+```javascript
+import Joi from 'joi';
+```
+
+영향 가는 페이지: 691, 861, 862,