[REFACTOR] Barrel Pattern 적용 #446

novice0840 · 2024-12-26T16:58:30Z

Issue Number

#439

As-Is

파일들이 많아지면서 최상단에 import 문들이 많아지고 있어 Barrel Pattern을 적용해 코드를 읽기 좋게 변경한다.

Barrel Parttern이란?

여러 곳에서 export 되고 있는 모듈들을 한 파일에 모아서 한 번에 export하는 방식의 패턴

To-Be

여러 곳에서 export 되고 있는 모듈들을 한 파일에 모아서 한 번에 export하는 방식의 패턴

각 폴더에 index.ts 생성 후 한 번에 export 하도록 변경
이미지 확장자를 png -> webp로 바꾸면서 사용하지 않게 된 png 이미지들 삭제
hook과 component의 depth를 같게 유지
기존에는 hooks 폴더와 각 컴포넌트가 같은 depth에 있어 어색한 폴더구조라 생각되어 다른 폴더에서와 일관성을 지키기 위해 똑같이 hooks, components 폴더로 변경

Check List

테스트가 전부 통과되었나요?
모든 commit이 push 되었나요?
merge할 branch를 확인했나요?
Assignee를 지정했나요?
Label을 지정했나요?

Test Screenshot

Before

After

여러 줄에서 import 해 오던 컴포넌트를 한 줄에서 불러올 수 있게 되었다.

(Optional) Additional Description

기능이 변경되거나 추가된 부분은 없고 리팩토링만 되었습니다. 파일 체인지 자체는 많긴한데 로직이 추가되거나 한 부분은 없습니다.

🌸 Storybook 배포 주소

https://woowacourse-teams.github.io/2024-ddangkong/storybook/

rbgksqkr

리팩토링 감사합니다 포메~!~ 몇가지 코멘트 남겼어요!!!
해당 PR을 통해 import문은 많이 짧아질 것 같아서 좋네요 근데 코멘트에도 남겼지만 파일을 찾아가기 어려워졌고, import문을 줄이기 위해 디렉토리가 많이 생겨 복잡할 수도 있겠다는 생각이 드네용
너무 추상화되어 있어서 이해하기 어려워질 수 있다는 것과 비슷한 맥락인 것 같아요 한번 확인해주시면 감사하겠습니다:)

rbgksqkr · 2024-12-27T05:10:28Z

frontend/src/assets/index.ts

+  SillyDdangkongMedium,
+  SillyDdangkongSmall,
+  SpinDdangkong,
+};


🌸 칭찬 🌸

오 이렇게 export 하면 import할 때 편할 것 같네용

rbgksqkr · 2024-12-27T05:26:13Z

frontend/src/components/index.ts

+  ReadySkeleton,
+  Spinner,
+  Toast,
+};


🙏 제안 🙏

이렇게 하나로 묶어서 export하면 import문은 한줄로 표현할 수 있어서 복잡도를 줄일 수 있지만, 파일을 수정할 때 그 파일을 찾아가기가 어려워졌다는 단점이 있을 것 같아요! 계층 구조를 파악하기도 어렵고, 일부 파일을 보면 index에서 안가져오고 export한 파일에서 가져오기도 하구요
대안이 있다면 common과 layout, 그리고 나머지로 따로 export하는 방식은 어떤가요?? components에 여러 곳에서 사용되는 것만 남겨두긴 했지만 common, layout과 나머지는 성격이 다르다고 생각이 듭니다!

스읍 vscode에서 써봐야 알 것 같긴 한데 import한 파일을 찾아갈 때 depth가 복잡하면 개인적으로 생산성이 많이 떨어질 거라고 생각이 들어요 그래서 이런 구조가 조심스럽긴 합니다! 포메는 어떻게 생각하시나용

음, 무슨 얘기인지 알 것 같아요. 우선 common, layout를 준비해서 정리해보았습니다!
그 import한 파일을 찾을 때는 VSC 기준으로 ctrl + 마우스 왼클릭을 하면 곧바로 해당 파일로 찾아가지 괜찮지 않을까합니다.

rbgksqkr · 2024-12-27T05:26:59Z

frontend/src/components/layout/Header/Header.tsx

+  RoomSettingHeader,
+  RoundResultHeader,
+  MatchingResultHeader,
+} from './components';


🌸 칭찬 🌸

헤더 분리 굿굿 각각의 헤더에서 필요한 import문만 남았네용

rbgksqkr · 2024-12-27T05:28:21Z

frontend/src/hooks/index.ts

+  useRoundVoteResultQuery,
+  useThrottle,
+  useToast,
+};


🌸 칭찬 🌸

공통 훅은 확실히 이런 방식이 이쁘네요

🌸 칭찬 🌸

그러네요 진짜 공통 훅 싹 정리되니 편-안

rbgksqkr · 2024-12-27T05:37:07Z

frontend/src/pages/GamePage/components/SelectContainer/SelectContainer.tsx

 import useSelectOption from './hooks/useSelectOption';
 import { selectContainerLayout, selectSection } from './SelectContainer.styled';
-import SelectOption from './SelectOption/SelectOption';
-import Timer from './Timer/Timer';
-import SelectButton from '../SelectButton/SelectButton';


🙏 제안 🙏

components안에 components를 둔 이유가 있나요?
PR에서만 봐서 그런지 모르겠는데 너무 헷갈릴 것 같아요 처음에 페이지 안에 components 폴더를 둔 이유는 페이지에서 사용되는 컴포넌트를 확인하기 쉽게 하자였고, A컴포넌트 안에서만 사용되는 하위 컴포넌트는 A 디렉토리에 넣기로 했었습니다!
근데 컴포넌트 안에 하위 컴포넌트가 있다고 모두 components 폴더로 묶는다면 �depth가 너무 깊어질 것 같고, 오히려 가독성을 헤치는 것 같다는 느낌이 들어요,,,
그래서 components 폴더는 *-page 바로 하위에만 있었으면 좋겠는데 어떻게 생각하시나용

계층이 계속 많아지는 부분은 사실 저도 우려하긴했었습니다. components 폴더 안에 components 폴더가 또 있는게 이상하긴하더라고요.
저렇게 둔 이유는 hooks 라는 이름의 폴더가 이미 있어서 hooks와 component가 같은 depth에 있는게 맞는가에 대해 의문이 들어 components 폴더를 추가로 만들었습니다.
우선, components 폴더는 하나만 두고 컴포넌트 안에 곧바로 내부 컴포넌트 폴더가 있는 방식으로 변경하였습니다!

아하아하 아니면 hooks도 컴포넌트마다 두지 말고 페이지별로 hooks를 두는 방법도 있을 것 같아요!

그러면 페이지 별로 hooks폴더는 하나이고 하위 컴포넌트에서 hook이 여러 개인 경우 hooks 폴더 없이 각 hook을 파일로 놔두는 방식인가요 ??!

useon

포메 ! 이렇게 수정해서 import 를 줄일 수 있게 되어 좋은 것 같아요 ! ! ! 불 필요한 파일 및 폴더명 수정과 같이 놓치기 쉬운 부분도 정리해주어 감사합니다 ^ .^

useon · 2025-01-02T09:39:12Z

frontend/src/components/common/A11yOnly/A11yOnly.styled.ts

@@ -1,6 +1,6 @@
 import { css } from '@emotion/react';

-export const a11yOnlyLayout = css`
+export const A11yOnlyLayout = css`


💭 질문 💭

다른 스타일 컴포넌트 내부의 각각의 변수명이 다 소문자로 적혀 있는데 대문자로 수정한 이유가 있을까요?

replaceAll을 하면서 A11yOnly가 다 바뀐 것 같네요 ㅎㅎ....
style 코드들은 소문자로 시작하는게 맞으므로 원래대로 되돌리겠습니다!

useon · 2025-01-02T09:53:16Z

frontend/src/components/layout/Header/Header.tsx

-interface HeaderProps {
-  title: string;
-}
+import { TitleHeader, RoomSettingHeader, RoundResultHeader, MatchingResultHeader } from '.';


🌸 칭찬 🌸

헤더 분리해서 이렇게 사용하니 좋네요 !!

useon · 2025-01-02T09:58:10Z

frontend/src/hooks/index.ts

+  useRoundVoteResultQuery,
+  useThrottle,
+  useToast,
+};


🌸 칭찬 🌸

그러네요 진짜 공통 훅 싹 정리되니 편-안

useon · 2025-01-02T10:01:49Z

frontend/src/pages/GamePage/components/SelectContainer/Timer/Timer.tsx

@@ -13,7 +13,7 @@ import { formatLeftRoundTime, isAlertTimer } from './Timer.util';
 import useVoteIsFinished from '../hooks/useVoteIsFinished';

 import DdangkongTimer from '@/assets/images/ddangkongTimer.webp';
-import A11yOnly from '@/components/common/a11yOnly/A11yOnly';
+import A11yOnly from '@/components/common/A11yOnly/A11yOnly';


🌸 칭찬 🌸

오오 혼자 소문자인 폴더 대문자로 수정한 꼼꼼함 칭찬 ~ ! !

novice0840 added 11 commits December 26, 2024 18:27

refactor: ReadyPage Components에 Barrel Pattern 적용 #439

4cbc7cf

refactor: GamePage hooks Barrel Parttern 적용 #439

aa43b7c

refactor: GameResult Component Barrel Pattern 적용 #439

f9fe481

refactor: SelectContainer import 부분 수정 #439

f5102e2

refactor: GameResult Component Barrel Pattern 적용 #439

aea3139

refactor: NicknamePage Barrel Pattern 적용 #439

7f932d6

refactor: hooks 폴더 Barrel Pattern 적용 #439

946f8d8

refactor: Header 컴포넌트 분리 #439

c14dfba

fix: jest mock 경로 수정정 #439

019b22c

refactor: provider 폴더 Barrel Pattern 적용 #439

9fe8d60

refactor: component 폴더 Barrel Pattern 적용 #439

d5c0a0b

novice0840 added ♻️ refactor 리팩토링 🫧 FE front end labels Dec 26, 2024

novice0840 requested review from rbgksqkr and useon December 26, 2024 16:58

novice0840 self-assigned this Dec 26, 2024

novice0840 linked an issue Dec 26, 2024 that may be closed by this pull request

[REFACTOR] Barrel Pattern 적용 #439

Closed

3 tasks

fix: msw 설정 파일 복구 #439

c52fd37

rbgksqkr requested changes Dec 27, 2024

View reviewed changes

github-actions bot added D-2 2일 안에 리뷰 부탁드려요:) D-1 1일 안에 리뷰 부탁드려요:) and removed D-2 2일 안에 리뷰 부탁드려요:) labels Dec 29, 2024

novice0840 added 5 commits December 31, 2024 23:28

refactor: SelectContainer Components 폴더 제거 후 폴더구조 개편 #439

22e4f88

refactor: layout, common 폴더 components 분리 #439

5de92d7

refactor: Header 안쪽 components 폴더 제거 #439

737c2b5

refactor: A11yOnly 폴더명 대문자로 변경 #439

f84a86a

fix: a11yOnly 폴더 대문자 시작으로 변경 #439

1b90ae3

github-actions bot added D-0 이제 그냥 머지합니다? and removed D-1 1일 안에 리뷰 부탁드려요:) labels Dec 31, 2024

refactor: 폴더명 임시 변경 #439

78e9665

novice0840 added 6 commits January 1, 2025 01:21

refactor: 폴더명 복구 #439

15631e7

refactor: 폴더명 임시 변경 #439

16537de

refactor: 폴더명 임시 변경 #439

4e5b3f9

refactor: Header 안쪽 components 폴더 제거 #439

fddd6ae

refactor: 겹치는 폴더 제거 #439

563c45a

fix: 대소문자 버그 해결 #439

b2e58df

useon approved these changes Jan 2, 2025

View reviewed changes

fix: A11yOnlyLayout -> a11yOnlyLayout으로 변경 #439

5ba8e50

novice0840 merged commit f0d465f into develop Jan 14, 2025
2 checks passed

novice0840 deleted the refactor/#439 branch January 14, 2025 00:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[REFACTOR] Barrel Pattern 적용 #446

[REFACTOR] Barrel Pattern 적용 #446

novice0840 commented Dec 26, 2024 •

edited by rbgksqkr

Loading

rbgksqkr left a comment

rbgksqkr Dec 27, 2024

rbgksqkr Dec 27, 2024

novice0840 Dec 31, 2024

rbgksqkr Dec 27, 2024

rbgksqkr Dec 27, 2024

useon Jan 2, 2025

rbgksqkr Dec 27, 2024

novice0840 Dec 31, 2024

rbgksqkr Jan 1, 2025

useon Jan 2, 2025

useon left a comment

useon Jan 2, 2025

novice0840 Jan 14, 2025

useon Jan 2, 2025

useon Jan 2, 2025

useon Jan 2, 2025

[REFACTOR] Barrel Pattern 적용 #446

[REFACTOR] Barrel Pattern 적용 #446

Conversation

novice0840 commented Dec 26, 2024 • edited by rbgksqkr Loading

Issue Number

As-Is

Barrel Parttern이란?

To-Be

Check List

Test Screenshot

Before

After

(Optional) Additional Description

🌸 Storybook 배포 주소

rbgksqkr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

🌸 칭찬 🌸

Choose a reason for hiding this comment

🙏 제안 🙏

Choose a reason for hiding this comment

Choose a reason for hiding this comment

🌸 칭찬 🌸

Choose a reason for hiding this comment

🌸 칭찬 🌸

Choose a reason for hiding this comment

🌸 칭찬 🌸

Choose a reason for hiding this comment

🙏 제안 🙏

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

useon left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

💭 질문 💭

Choose a reason for hiding this comment

Choose a reason for hiding this comment

🌸 칭찬 🌸

Choose a reason for hiding this comment

🌸 칭찬 🌸

Choose a reason for hiding this comment

🌸 칭찬 🌸

novice0840 commented Dec 26, 2024 •

edited by rbgksqkr

Loading