From 074c66e8a79b0a4afa750de82c607afe6083e5ad Mon Sep 17 00:00:00 2001
From: milliwonkim <rldnjs9347@gmail.com>
Date: Thu, 22 Jun 2023 16:17:20 +0900
Subject: [PATCH 01/10] =?UTF-8?q?docs:=20=EC=B4=88=EC=95=88=20=EC=9E=91?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04-styling/01-css-modules.mdx             | 114 ++++++++++--------
 1 file changed, 61 insertions(+), 53 deletions(-)

diff --git a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
index 41063ff08..dbf15c0c4 100644
--- a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
+++ b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
@@ -1,27 +1,29 @@
 ---
-title: CSS Modules
-description: Style your Next.js Application with CSS Modules.
+title: CSS 모듈
+description: CSS 모듈로 Next.js 앱에 스타일 적용하기
 ---
 
 <PagesOnly>
 
 <details open>
-  <summary>Examples</summary>
+  <summary>예시</summary>
 
-- [Basic CSS Example](https://github.com/vercel/next.js/tree/canary/examples/basic-css)
+- [기본 CSS 예시](https://github.com/vercel/next.js/tree/canary/examples/basic-css)
 
 </details>
 
 </PagesOnly>
 
-Next.js has built-in support for CSS Modules using the `.module.css` extension.
+Next.js는 `.module.css` 확장자를 사용하여 CSS 모듈을 기본적으로 지원합니다.
 
-CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same class name in different files without worrying about collisions. This behavior makes CSS Modules the ideal way to include component-level CSS.
+CSS 모듈은 고유한 클래스 이름을 자동으로 생성해서 CSS를 로컬로 범위를 지정합니다.
+따라서 충돌에 대한 걱정 없이 다른 파일에서 동일한 클래스 이름을 사용 가능합니다.
+이 방식으로 CSS 모듈을 컴포넌트 단위로 CSS를 적용할 수 있습니다.
 
-## Example
+## 예시
 
 <AppOnly>
-CSS Modules can be imported into any file inside the `app` directory:
+CSS 모듈은 app 폴더 안에서 어떤 파일이든 임포트할 수 있습니다.
 
 ```tsx filename="app/dashboard/layout.tsx" switcher
 import styles from './styles.module.css'
@@ -57,14 +59,12 @@ export default function DashboardLayout({
 
 <PagesOnly>
 
-For example, consider a reusable `Button` component in the `components/` folder:
-
-First, create `components/Button.module.css` with the following content:
+components 폴더 안의 재사용 가능한 Button 컴포넌트로 예를 들어봅시다.
+먼저, 다음의 코드를 `components/Button.module.css` 파일 안에 만듭니다.
 
 ```css filename="Button.module.css"
 /*
-You do not need to worry about .error {} colliding with any other `.css` or
-`.module.css` files!
+다른 .css 혹은 .module.css 파일과 충돌하는 .error {} 대해서 고려할 필요는 없습니다.
 */
 .error {
   color: white;
@@ -72,7 +72,7 @@ You do not need to worry about .error {} colliding with any other `.css` or
 }
 ```
 
-Then, create `components/Button.js`, importing and using the above CSS file:
+그리고, `components/Button.js` 파일을 만들고, 다음의 CSS 파일을 자바스크립트 파일에 임포트합니다.
 
 ```jsx filename="components/Button.js"
 import styles from './Button.module.css'
@@ -81,8 +81,7 @@ export function Button() {
   return (
     <button
       type="button"
-      // Note how the "error" class is accessed as a property on the imported
-      // `styles` object.
+      // 어떻게 error 클래스가 임포트한 styles object의 속성으로 접근되었는지 확인해 주세요.
       className={styles.error}
     >
       Destroy
@@ -93,20 +92,22 @@ export function Button() {
 
 </PagesOnly>
 
-CSS Modules are an _optional feature_ and are **only enabled for files with the `.module.css` extension**.
-Regular `<link>` stylesheets and global CSS files are still supported.
+CSS 모듈은 _선택적 기능_ 이면서, **`.module.css` 확장자로만 파일 안에서 사용 가능합니다**
+일반적으로 `<link>` 스타일시트, 전역 CSS 파일들도 물론 사용 가능합니다.
+
+프로덕션 단계에서 모든 CSS 모듈 파일들은 자동으로 **최소한의 용량과 코드 분할 형식**으로 수많은 `.css` 파일들로 연결됩니다.
 
-In production, all CSS Module files will be automatically concatenated into **many minified and code-split** `.css` files.
-These `.css` files represent hot execution paths in your application, ensuring the minimal amount of CSS is loaded for your application to paint.
+이 `.css` 파일들은 앱에서 실시간 실행 경로(hot execution paths)를 나타내고, 브라우저의 페인트 단계에서 최소한의 CSS 코드가 로드됩니다.
 
-## Global Styles
+## 전역 스타일
 
 <AppOnly>
-Global styles can be imported into any layout, page, or component inside the `app` directory.
 
-> **Good to know**: This is different from the `pages` directory, where you can only import global styles inside the `_app.js` file.
+전역 스타일은 `app` 폴더 안의 layout, page, component 폴더에 모두 임포트할 수 있습니다.
 
-For example, consider a stylesheet named `app/global.css`:
+> **알아두면 좋은 것**: 전역 스타일을 `_app.js` 파일 안에만 임포트할 수 있는 `pages` 폴더와는 다릅니다.
+
+`app/global.css`라는 스타일시트로 예를 들어봅시다.
 
 ```css
 body {
@@ -116,10 +117,10 @@ body {
 }
 ```
 
-Inside the root layout (`app/layout.js`), import the `global.css` stylesheet to apply the styles to every route in your application:
+루트 레이아웃(`app/layout.js`)안에, 앱 안의 모든 라우트에 스타일을 적용하기 위해 `global.css` 스타일 시트를 임포트합니다.
 
 ```tsx filename="app/layout.tsx" switcher
-// These styles apply to every route in the application
+// 이 스타일은 앱 안의 모든 라우트에 적용됩니다.
 import './global.css'
 
 export default function RootLayout({
@@ -136,7 +137,7 @@ export default function RootLayout({
 ```
 
 ```jsx filename="app/layout.js" switcher
-// These styles apply to every route in the application
+// 이 스타일은 앱 안의 모든 라우트에 적용됩니다.
 import './global.css'
 
 export default function RootLayout({ children }) {
@@ -152,9 +153,9 @@ export default function RootLayout({ children }) {
 
 <PagesOnly>
 
-To add a stylesheet to your application, import the CSS file within `pages/_app.js`.
+앱에 스타일시트를 적용하기 위해, `pages/_app.js` 안에 CSS 파일을 임포트하세요.
 
-For example, consider the following stylesheet named `styles.css`:
+`styles.css` 라는 다음의 스타일 시트로 예를 들어봅시다.
 
 ```css filename="styles.css"
 body {
@@ -166,29 +167,34 @@ body {
 }
 ```
 
-Create a [`pages/_app.js` file](/docs/pages/building-your-application/routing/custom-app) if not already present.
-Then, [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) the `styles.css` file.
+[`pages/_app.js` 파일](/docs/pages/building-your-application/routing/custom-app)이 존재하지 않는다면, 이 파일을 만드세요.
+
+그 후, `styles.css` file을 `pages/_app.js`에 [`임포트하세요.`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)
 
 ```jsx filename="pages/_app.js"
 import '../styles.css'
 
-// This default export is required in a new `pages/_app.js` file.
+// 이 default export는 새로운 `pages/_app.js`파일에 필요합니다.
 export default function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }
 ```
 
-These styles (`styles.css`) will apply to all pages and components in your application.
-Due to the global nature of stylesheets, and to avoid conflicts, you may **only import them inside [`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app)**.
+이 스타일은(`styles.css`) 앱 안의 모든 페이지와 컴포넌트들에 적용됩니다.
+스타일시트의 글로벌 특성을 고려했을 때, 또 충돌을 방지하기 위해, **[`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app)안에만 이 스타일들을 import**할 수 있습니다.
 
-In development, expressing stylesheets this way allows your styles to be hot reloaded as you edit them—meaning you can keep application state.
+개발 단계에서 이런 방식으로 스타일시트들을 이용한다면 수정 시 스타일을 실시간으로 반영할 수 있습니다. 즉, 앱의 스테이트를 계속해서 유지할 수 있습니다.
 
-In production, all CSS files will be automatically concatenated into a single minified `.css` file. The order that the CSS is concatenated will match the order the CSS is imported into the `_app.js` file. Pay special attention to imported JS modules that include their own CSS; the JS module's CSS will be concatenated following the same ordering rules as imported CSS files. For example:
+프로덕션 배포 단계에서 모든 CSS 파일들은 자동으로, 하나의 최소화된 `.css` 파일로 연결됩니다. CSS가 연결되는 순서는 `_app.js` 파일에 CSS가 임포트한 순서와 같습니다.
+
+특히 임포트한 JS 모듈 중 고유의 CSS를 가지는 JS 모듈을 주의해주세요. JS 모듈 안의 CSS는 임포트한 CSS 파일들의 연결 순서 방식에 따라 연결될 것입니다.
+
+예를 들면,
 
 ```jsx
 import '../styles.css'
-// The CSS in ErrorBoundary depends on the global CSS in styles.css,
-// so we import it after styles.css.
+// ErrorBoundary 안의 CSS는 style.css의 전역 CSS에 의존합니다.
+// 그렇기 때문에 styles.css 다음에 CSS를 임포트해야합니다.
 import ErrorBoundary from '../components/ErrorBoundary'
 
 export default function MyApp({ Component, pageProps }) {
@@ -202,11 +208,11 @@ export default function MyApp({ Component, pageProps }) {
 
 </PagesOnly>
 
-## External Stylesheets
+## 외부 스타일시트
 
 <AppOnly>
 
-Stylesheets published by external packages can be imported anywhere in the `app` directory, including colocated components:
+외부 패키지에 의한 스타일시트는 함께 위치한 컴포넌트들을 포함해서, `app` 폴더 안의 어디서든 임포트할 수 있습니다.
 
 ```tsx filename="app/layout.tsx" switcher
 import 'bootstrap/dist/css/bootstrap.css'
@@ -236,21 +242,22 @@ export default function RootLayout({ children }) {
 }
 ```
 
-> **Good to know**: External stylesheets must be directly imported from an npm package or downloaded and colocated with your codebase. You cannot use `<link rel="stylesheet" />`.
+> **알아두면 좋은 것**: 외부 스타일시트는 npm 패키지를 이용하거나, 다운로드되거나, 코드베이스에 지정된 곳을 이용해서 직접 import 되어야 합니다. `<link rel="stylesheet" />`를 사용할 수 없습니다.
 
 </AppOnly>
 
 <PagesOnly>
 
-Next.js allows you to import CSS files from a JavaScript file.
-This is possible because Next.js extends the concept of [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) beyond JavaScript.
+Next.js는 자바스크립트 파일 안에 있는 CSS 파일을 임포트할 수 있습니다.
+Next.js가 자바스크립트의 [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)의 컨셉을 확장했기 때문에 가능합니다.
+
+### `node_modules`에서 스타일을 임포트하기
 
-### Import styles from `node_modules`
+Next.js **9.5.4** 버전부터, 앱 안의 어디서든 `node_modules`의 CSS 파일을 임포트할 수 있습니다.
 
-Since Next.js **9.5.4**, importing a CSS file from `node_modules` is permitted anywhere in your application.
+`bootstrap` 혹은 `nprogress` 같은 전역 스타일시트를 이용하려면, `pages/_app.js` 안에 그 파일을 임포트해야합니다.
 
-For global stylesheets, like `bootstrap` or `nprogress`, you should import the file inside `pages/_app.js`.
-For example:
+예를 들어
 
 ```jsx filename="pages/_app.js"
 import 'bootstrap/dist/css/bootstrap.css'
@@ -260,7 +267,8 @@ export default function MyApp({ Component, pageProps }) {
 }
 ```
 
-For importing CSS required by a third-party component, you can do so in your component. For example:
+서드파티 컴포넌트에 필요한 CSS를 임포트 할 경우 본인의 컴포넌트에 임포트할 수 있습니다.
+예를 들어
 
 ```jsx filename="components/example-dialog.js"
 import { useState } from 'react'
@@ -290,10 +298,10 @@ function ExampleDialog(props) {
 
 </PagesOnly>
 
-## Additional Features
+## 추가 기능
 
-Next.js includes additional features to improve the authoring experience of adding styles:
+Next.js는 스타일 작업 경험을 개선하기 위한 추가 기능들을 포함합니다.
 
-- When running locally with `next dev`, local stylesheets (either global or CSS modules) will take advantage of [Fast Refresh](/docs/architecture/fast-refresh) to instantly reflect changes as edits are saved.
-- When building for production with `next build`, CSS files will be bundled into fewer minified `.css` files to reduce the number of network requests needed to retrieve styles.
-- If you disable JavaScript, styles will still be loaded in the production build (`next start`). However, JavaScript is still required for `next dev` to enable [Fast Refresh](/docs/architecture/fast-refresh).
+- `next dev`로 로컬 실행 단계에서, 로컬 스타일시트(아니면 전역 혹은 CSS 모듈)은 수정된 스타일시트를 즉시 반영하게 해주는 [Fast Refresh](/docs/architecture/fast-refresh)를 사용할 수 있다는 것이 이점입니다.
+- `next build`로 프로덕션 배포를 위한 빌드단계에서, CSS 파일들은 스타일을 반환 받기 위해 필요한 네트워크 요청 수를 최소화 하기 위해 최소한의 갯수와 최소한의 용량으로 구성된 `css` 파일들로 번들링됩니다.
+- 자바스크립트를 비활성화할 경우에도, 스타일은 여전히 프로덕션 배포를 위한 빌드(`next start`)안에 로드 됩니다. 다만, [Fast Refresh](/docs/architecture/fast-refresh)를 사용하려면 `next dev`를 위한 자바스크립트가 여전히 필요합니다.

From 12247612b2add87261beb83b03ba2ba4f547f995 Mon Sep 17 00:00:00 2001
From: milliwonkim <rldnjs9347@gmail.com>
Date: Thu, 22 Jun 2023 20:52:34 +0900
Subject: [PATCH 02/10] =?UTF-8?q?fix:=20=EC=8A=A4=ED=85=8C=EC=9D=B4?=
 =?UTF-8?q?=ED=8A=B8=EB=A5=BC=20=EC=83=81=ED=83=9C=EB=A1=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=ED=95=9C=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../01-building-your-application/04-styling/01-css-modules.mdx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
index dbf15c0c4..f43d339dd 100644
--- a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
+++ b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
@@ -183,7 +183,7 @@ export default function MyApp({ Component, pageProps }) {
 이 스타일은(`styles.css`) 앱 안의 모든 페이지와 컴포넌트들에 적용됩니다.
 스타일시트의 글로벌 특성을 고려했을 때, 또 충돌을 방지하기 위해, **[`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app)안에만 이 스타일들을 import**할 수 있습니다.
 
-개발 단계에서 이런 방식으로 스타일시트들을 이용한다면 수정 시 스타일을 실시간으로 반영할 수 있습니다. 즉, 앱의 스테이트를 계속해서 유지할 수 있습니다.
+개발 단계에서 이런 방식으로 스타일시트들을 이용한다면 수정 시 스타일을 실시간으로 반영할 수 있습니다. 즉, 앱의 상태를 계속해서 유지할 수 있습니다.
 
 프로덕션 배포 단계에서 모든 CSS 파일들은 자동으로, 하나의 최소화된 `.css` 파일로 연결됩니다. CSS가 연결되는 순서는 `_app.js` 파일에 CSS가 임포트한 순서와 같습니다.
 

From cc9b936a9e6dbf5f4515ba71cdcc3e0ec9fb106f Mon Sep 17 00:00:00 2001
From: milliwonkim <39076645+milliwonkim@users.noreply.github.com>
Date: Fri, 23 Jun 2023 13:57:22 +0900
Subject: [PATCH 03/10] Update
 docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이채준 - CJ Lee <chaejunlee@knu.ac.kr>
---
 .../01-building-your-application/04-styling/01-css-modules.mdx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
index f43d339dd..c4586749d 100644
--- a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
+++ b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
@@ -185,7 +185,7 @@ export default function MyApp({ Component, pageProps }) {
 
 개발 단계에서 이런 방식으로 스타일시트들을 이용한다면 수정 시 스타일을 실시간으로 반영할 수 있습니다. 즉, 앱의 상태를 계속해서 유지할 수 있습니다.
 
-프로덕션 배포 단계에서 모든 CSS 파일들은 자동으로, 하나의 최소화된 `.css` 파일로 연결됩니다. CSS가 연결되는 순서는 `_app.js` 파일에 CSS가 임포트한 순서와 같습니다.
+모든 CSS 파일은 프로덕션 배포 단계에서 자동적으로 하나의 최소화된 `.css` 파일로 연결됩니다. CSS가 연결되는 순서는 `_app.js` 파일에 CSS를 임포트한 순서와 같습니다.
 
 특히 임포트한 JS 모듈 중 고유의 CSS를 가지는 JS 모듈을 주의해주세요. JS 모듈 안의 CSS는 임포트한 CSS 파일들의 연결 순서 방식에 따라 연결될 것입니다.
 

From 34cbcb45809cc5a3c7ffa6b7adb50cdccc02b1f6 Mon Sep 17 00:00:00 2001
From: milliwonkim <39076645+milliwonkim@users.noreply.github.com>
Date: Fri, 23 Jun 2023 13:58:19 +0900
Subject: [PATCH 04/10] Update
 docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이채준 - CJ Lee <chaejunlee@knu.ac.kr>
---
 .../01-building-your-application/04-styling/01-css-modules.mdx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
index c4586749d..dd7582606 100644
--- a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
+++ b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
@@ -117,7 +117,7 @@ body {
 }
 ```
 
-루트 레이아웃(`app/layout.js`)안에, 앱 안의 모든 라우트에 스타일을 적용하기 위해 `global.css` 스타일 시트를 임포트합니다.
+앱 안의 모든 라우트에 스타일을 적용하기 위해 `global.css` 스타일시트를 루트 레이아웃(`app/layout.js`) 안에 임포트합니다.
 
 ```tsx filename="app/layout.tsx" switcher
 // 이 스타일은 앱 안의 모든 라우트에 적용됩니다.

From 85f9682da94a9253f738135c3996964f52e386de Mon Sep 17 00:00:00 2001
From: milliwonkim <39076645+milliwonkim@users.noreply.github.com>
Date: Fri, 23 Jun 2023 13:58:28 +0900
Subject: [PATCH 05/10] Update
 docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이채준 - CJ Lee <chaejunlee@knu.ac.kr>
---
 .../01-building-your-application/04-styling/01-css-modules.mdx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
index dd7582606..63e524bbe 100644
--- a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
+++ b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
@@ -180,7 +180,7 @@ export default function MyApp({ Component, pageProps }) {
 }
 ```
 
-이 스타일은(`styles.css`) 앱 안의 모든 페이지와 컴포넌트들에 적용됩니다.
+이 스타일(`styles.css`)은 앱 안의 모든 페이지와 컴포넌트에 적용됩니다.
 스타일시트의 글로벌 특성을 고려했을 때, 또 충돌을 방지하기 위해, **[`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app)안에만 이 스타일들을 import**할 수 있습니다.
 
 개발 단계에서 이런 방식으로 스타일시트들을 이용한다면 수정 시 스타일을 실시간으로 반영할 수 있습니다. 즉, 앱의 상태를 계속해서 유지할 수 있습니다.

From cb8580c4ece613ec27854c4e6e691da783e5a474 Mon Sep 17 00:00:00 2001
From: milliwonkim <39076645+milliwonkim@users.noreply.github.com>
Date: Fri, 23 Jun 2023 13:58:52 +0900
Subject: [PATCH 06/10] Update
 docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이채준 - CJ Lee <chaejunlee@knu.ac.kr>
---
 .../01-building-your-application/04-styling/01-css-modules.mdx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
index 63e524bbe..5a284254e 100644
--- a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
+++ b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
@@ -194,7 +194,7 @@ export default function MyApp({ Component, pageProps }) {
 ```jsx
 import '../styles.css'
 // ErrorBoundary 안의 CSS는 style.css의 전역 CSS에 의존합니다.
-// 그렇기 때문에 styles.css 다음에 CSS를 임포트해야합니다.
+// 그렇기 때문에 styles.css 다음에 CSS를 임포트해야 합니다.
 import ErrorBoundary from '../components/ErrorBoundary'
 
 export default function MyApp({ Component, pageProps }) {

From fa4f35cd019480bb1126ea882ada9f609d38701b Mon Sep 17 00:00:00 2001
From: milliwonkim <39076645+milliwonkim@users.noreply.github.com>
Date: Fri, 23 Jun 2023 13:59:20 +0900
Subject: [PATCH 07/10] Update
 docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이채준 - CJ Lee <chaejunlee@knu.ac.kr>
---
 .../01-building-your-application/04-styling/01-css-modules.mdx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
index 5a284254e..fc7eb5ced 100644
--- a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
+++ b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
@@ -187,7 +187,7 @@ export default function MyApp({ Component, pageProps }) {
 
 모든 CSS 파일은 프로덕션 배포 단계에서 자동적으로 하나의 최소화된 `.css` 파일로 연결됩니다. CSS가 연결되는 순서는 `_app.js` 파일에 CSS를 임포트한 순서와 같습니다.
 
-특히 임포트한 JS 모듈 중 고유의 CSS를 가지는 JS 모듈을 주의해주세요. JS 모듈 안의 CSS는 임포트한 CSS 파일들의 연결 순서 방식에 따라 연결될 것입니다.
+특히 임포트된 JS 모듈 중 고유의 CSS를 가지는 JS 모듈에 주의하세요. JS 모듈 안의 CSS는 임포트된 CSS 파일과 동일한 정렬 방식으로 연결됩니다.
 
 예를 들면,
 

From bb73f8a2ff304f9e8553436391c3553342a82e4d Mon Sep 17 00:00:00 2001
From: milliwonkim <39076645+milliwonkim@users.noreply.github.com>
Date: Fri, 23 Jun 2023 13:59:39 +0900
Subject: [PATCH 08/10] Update
 docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이채준 - CJ Lee <chaejunlee@knu.ac.kr>
---
 .../01-building-your-application/04-styling/01-css-modules.mdx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
index fc7eb5ced..3d63ab649 100644
--- a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
+++ b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
@@ -249,7 +249,7 @@ export default function RootLayout({ children }) {
 <PagesOnly>
 
 Next.js는 자바스크립트 파일 안에 있는 CSS 파일을 임포트할 수 있습니다.
-Next.js가 자바스크립트의 [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)의 컨셉을 확장했기 때문에 가능합니다.
+자바스크립트 파일에서 CSS를 임포트할 수 있는 이유는 자바스크립트의 [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import)의 컨셉을 Next.js가 확장했기 때문입니다.
 
 ### `node_modules`에서 스타일을 임포트하기
 

From 7a46cc5c85f0d5a21e6ea184a291c9029d3e2735 Mon Sep 17 00:00:00 2001
From: milliwonkim <rldnjs9347@gmail.com>
Date: Fri, 23 Jun 2023 14:00:31 +0900
Subject: [PATCH 09/10] =?UTF-8?q?fix:=20=EC=9E=90=EC=97=B0=EC=8A=A4?=
 =?UTF-8?q?=EB=9F=AC=EC=9A=B4=20=EB=B2=88=EC=97=AD=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=ED=95=9C=EB=8B=A4.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04-styling/01-css-modules.mdx                  | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
index f43d339dd..7bd8eea2b 100644
--- a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
+++ b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
@@ -23,7 +23,7 @@ CSS 모듈은 고유한 클래스 이름을 자동으로 생성해서 CSS를 로
 ## 예시
 
 <AppOnly>
-CSS 모듈은 app 폴더 안에서 어떤 파일이든 임포트할 수 있습니다.
+CSS 모듈은 app 디렉토리 안에서 어떤 파일이든 임포트할 수 있습니다.
 
 ```tsx filename="app/dashboard/layout.tsx" switcher
 import styles from './styles.module.css'
@@ -59,7 +59,7 @@ export default function DashboardLayout({
 
 <PagesOnly>
 
-components 폴더 안의 재사용 가능한 Button 컴포넌트로 예를 들어봅시다.
+components 디렉토리 안의 재사용 가능한 Button 컴포넌트로 예를 들어봅시다.
 먼저, 다음의 코드를 `components/Button.module.css` 파일 안에 만듭니다.
 
 ```css filename="Button.module.css"
@@ -103,9 +103,9 @@ CSS 모듈은 _선택적 기능_ 이면서, **`.module.css` 확장자로만 파
 
 <AppOnly>
 
-전역 스타일은 `app` 폴더 안의 layout, page, component 폴더에 모두 임포트할 수 있습니다.
+전역 스타일은 `app` 디렉토리 안의 layout, page, component 디렉토리에 모두 임포트할 수 있습니다.
 
-> **알아두면 좋은 것**: 전역 스타일을 `_app.js` 파일 안에만 임포트할 수 있는 `pages` 폴더와는 다릅니다.
+> **참고**: 전역 스타일을 `_app.js` 파일 안에만 임포트할 수 있는 `pages` 디렉토리와는 다릅니다.
 
 `app/global.css`라는 스타일시트로 예를 들어봅시다.
 
@@ -117,7 +117,7 @@ body {
 }
 ```
 
-루트 레이아웃(`app/layout.js`)안에, 앱 안의 모든 라우트에 스타일을 적용하기 위해 `global.css` 스타일 시트를 임포트합니다.
+앱 안의 모든 라우트에 스타일을 적용하기 위해 `global.css` 스타일시트를 루트 레이아웃(`app/layout.js`) 안에 임포트합니다.
 
 ```tsx filename="app/layout.tsx" switcher
 // 이 스타일은 앱 안의 모든 라우트에 적용됩니다.
@@ -212,7 +212,7 @@ export default function MyApp({ Component, pageProps }) {
 
 <AppOnly>
 
-외부 패키지에 의한 스타일시트는 함께 위치한 컴포넌트들을 포함해서, `app` 폴더 안의 어디서든 임포트할 수 있습니다.
+외부 패키지에 의한 스타일시트는 함께 위치한 컴포넌트들을 포함해서, `app` 디렉토리 안의 어디서든 임포트할 수 있습니다.
 
 ```tsx filename="app/layout.tsx" switcher
 import 'bootstrap/dist/css/bootstrap.css'
@@ -242,7 +242,7 @@ export default function RootLayout({ children }) {
 }
 ```
 
-> **알아두면 좋은 것**: 외부 스타일시트는 npm 패키지를 이용하거나, 다운로드되거나, 코드베이스에 지정된 곳을 이용해서 직접 import 되어야 합니다. `<link rel="stylesheet" />`를 사용할 수 없습니다.
+> **참고**: 외부 스타일시트는 npm 패키지를 이용하거나, 다운로드되거나, 코드베이스에 지정된 곳을 이용해서 직접 import 되어야 합니다. `<link rel="stylesheet" />`를 사용할 수 없습니다.
 
 </AppOnly>
 

From 5c05375b466a6e1dfe9ad8838e2cd130ea3873bd Mon Sep 17 00:00:00 2001
From: milliwonkim <rldnjs9347@gmail.com>
Date: Fri, 23 Jun 2023 22:42:33 +0900
Subject: [PATCH 10/10] =?UTF-8?q?fix:=20=EC=9E=90=EC=97=B0=EC=8A=A4?=
 =?UTF-8?q?=EB=9F=AC=EC=9A=B4=20=EB=B2=88=EC=97=AD=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=ED=95=9C=EB=8B=A4.=20-=20=EA=B7=B8=EB=9F=AC?=
 =?UTF-8?q?=EB=AF=80=EB=A1=9C,=20=EC=98=88=EB=A5=BC=EB=93=A4=EC=96=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../04-styling/01-css-modules.mdx                      | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
index 6754967c7..25bd33540 100644
--- a/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
+++ b/docs/02-app/01-building-your-application/04-styling/01-css-modules.mdx
@@ -59,7 +59,7 @@ export default function DashboardLayout({
 
 <PagesOnly>
 
-components 디렉토리 안의 재사용 가능한 Button 컴포넌트로 예를 들어봅시다.
+예를 들어, components 디렉토리 안의 재사용 가능한 Button 컴포넌트를 생각해 봅시다.
 먼저, 다음의 코드를 `components/Button.module.css` 파일 안에 만듭니다.
 
 ```css filename="Button.module.css"
@@ -107,7 +107,7 @@ CSS 모듈은 _선택적 기능_ 이면서, **`.module.css` 확장자로만 파
 
 > **참고**: 전역 스타일을 `_app.js` 파일 안에만 임포트할 수 있는 `pages` 디렉토리와는 다릅니다.
 
-`app/global.css`라는 스타일시트로 예를 들어봅시다.
+예를 들어, `app/global.css`라는 스타일시트를 생각해 봅시다.
 
 ```css
 body {
@@ -155,7 +155,7 @@ export default function RootLayout({ children }) {
 
 앱에 스타일시트를 적용하기 위해, `pages/_app.js` 안에 CSS 파일을 임포트하세요.
 
-`styles.css` 라는 다음의 스타일 시트로 예를 들어봅시다.
+예를 들어, `styles.css` 라는 다음의 스타일 시트를 생각해 봅시다.
 
 ```css filename="styles.css"
 body {
@@ -183,7 +183,7 @@ export default function MyApp({ Component, pageProps }) {
 이 스타일(`styles.css`)은 앱 안의 모든 페이지와 컴포넌트에 적용됩니다.
 스타일시트의 글로벌 특성을 고려했을 때, 또 충돌을 방지하기 위해, **[`pages/_app.js`](/docs/pages/building-your-application/routing/custom-app)안에만 이 스타일들을 import**할 수 있습니다.
 
-개발 단계에서 이런 방식으로 스타일시트들을 이용한다면 수정 시 스타일을 실시간으로 반영할 수 있습니다. 즉, 앱의 상태를 계속해서 유지할 수 있습니다.
+개발 단계에서 이런 방식으로 스타일시트들을 이용한다면 수정 시 스타일을 실시간으로 반영할 수 있습니다. 즉, 앱의 스테이트를 계속해서 유지할 수 있습니다.
 
 모든 CSS 파일은 프로덕션 배포 단계에서 자동적으로 하나의 최소화된 `.css` 파일로 연결됩니다. CSS가 연결되는 순서는 `_app.js` 파일에 CSS를 임포트한 순서와 같습니다.
 
@@ -194,7 +194,7 @@ export default function MyApp({ Component, pageProps }) {
 ```jsx
 import '../styles.css'
 // ErrorBoundary 안의 CSS는 style.css의 전역 CSS에 의존합니다.
-// 그렇기 때문에 styles.css 다음에 CSS를 임포트해야 합니다.
+// 그러므로 styles.css 다음에 CSS를 임포트해야 합니다.
 import ErrorBoundary from '../components/ErrorBoundary'
 
 export default function MyApp({ Component, pageProps }) {