diff --git a/en/code/examples/code-directory.md b/en/code/examples/code-directory.md index 3cc9f1c1..6411de47 100644 --- a/en/code/examples/code-directory.md +++ b/en/code/examples/code-directory.md @@ -34,11 +34,12 @@ Additionally, if a specific component, hook, or utility function is no longer us As the project grows, the dependencies between code can become significantly more complex, doubling, tenfold, or even a hundredfold. A single directory might end up containing over 100 files. ## ✏️ Work on Improving + The following is an example of improving the structure so that code files that are modified together form a single directory. ```text └─ src - │ // 전체 프로젝트에서 사용되는 코드 + │ // Code used in the entire project ├─ components ├─ containers ├─ hooks @@ -46,7 +47,7 @@ The following is an example of improving the structure so that code files that a ├─ ... │ └─ domains - │ // Domain1에서만 사용되는 코드 + │ // Code used only in Domain1 ├─ Domain1 │ ├─ components │ ├─ containers @@ -54,7 +55,7 @@ The following is an example of improving the structure so that code files that a │ ├─ utils │ └─ ... │ - │ // Domain2에서만 사용되는 코드 + │ // Code used only in Domain2 └─ Domain2 ├─ components ├─ containers @@ -62,6 +63,7 @@ The following is an example of improving the structure so that code files that a ├─ utils └─ ... ``` + If you place code files that are modified together under a single directory, it becomes easier to understand the dependencies between the code. For example, consider a case where the sub-code of one domain (`Domain1`) references the source code of another domain (`Domain2`). @@ -69,6 +71,7 @@ For example, consider a case where the sub-code of one domain (`Domain1`) refere ```typescript import { useFoo } '../../../Domain2/hooks/useFoo' ``` + When you encounter such an import statement, you can easily recognize that the wrong file is being referenced. Additionally, when deleting code related to a specific feature, you can delete the entire directory, ensuring that all related code is removed cleanly, leaving no unused code in the project. diff --git a/en/code/examples/login-start-page.md b/en/code/examples/login-start-page.md index 2d96aa72..25b0c014 100644 --- a/en/code/examples/login-start-page.md +++ b/en/code/examples/login-start-page.md @@ -12,18 +12,18 @@ The following `` component contains logic to check if the user ```tsx function LoginStartPage() { - useCheckLogin({ - onChecked: (status) => { - if (status === "LOGGED_IN") { - location.href = "/home"; - } - }, - }); - - /* ... login related logic ... */ - - return <>{/* ... login related components ... */}; - } + useCheckLogin({ + onChecked: (status) => { + if (status === "LOGGED_IN") { + location.href = "/home"; + } + } + }); + + /* ... login related logic ... */ + + return <>{/* ... login related components ... */}; +} ``` ### 👃 Smell the Code @@ -45,30 +45,30 @@ Additionally, by preventing the logic within the separated component from refere ```tsx function App() { - return ( - - - - ); - } - - function AuthGuard({ children }) { - const status = useCheckLoginStatus(); - - useEffect(() => { - if (status === "LOGGED_IN") { - location.href = "/home"; - } - }, [status]); - - return status !== "LOGGED_IN" ? children : null; - } - - function LoginStartPage() { - /* ... login related logic ... */ - - return <>{/* ... login related components ... */}; - } + return ( + + + + ); +} + +function AuthGuard({ children }) { + const status = useCheckLoginStatus(); + + useEffect(() => { + if (status === "LOGGED_IN") { + location.href = "/home"; + } + }, [status]); + + return status !== "LOGGED_IN" ? children : null; +} + +function LoginStartPage() { + /* ... login related logic ... */ + + return <>{/* ... login related components ... */}; +} ``` #### Option B: Using a Higher-Order Component (HOC) @@ -134,12 +134,13 @@ function FriendInvitation() { return ( <> - + {/* JSX markup for UI... */} ); } ``` + ### 👃 Smell the Code #### Readability @@ -203,6 +204,7 @@ function InviteButton({ name }) { ); } ``` + The `` component only contains the logic for inviting users and the UI, so it can maintain a low amount of information to be aware of at once, increasing readability. Additionally, the button and the logic executed after clicking are very close together. ## 🔍 Learn More: Abstraction diff --git a/en/code/examples/use-bottom-sheet.md b/en/code/examples/use-bottom-sheet.md index c485338f..44f26f3b 100644 --- a/en/code/examples/use-bottom-sheet.md +++ b/en/code/examples/use-bottom-sheet.md @@ -20,10 +20,10 @@ export const useOpenMaintenanceBottomSheet = () => { const logger = useLogger(); return async (maintainingInfo: TelecomMaintenanceInfo) => { - logger.log('점검 바텀시트 열림'); + logger.log("Maintenance bottom sheet opened"); const result = await maintenanceBottomSheet.open(maintainingInfo); if (result) { - logger.log('점검 바텀시트 알림받기 클릭'); + logger.log("Maintenance bottom sheet notification clicked"); } closeView(); };