카카오테크캠퍼스 2기 | STEP2 | 10일차(24-07-05) 회고

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 10일차(24-07-05) 회고

📝 React 네이밍 규칙

• 모든 파일과 폴더를 컴포넌트에 맞추어 PascalCase로 작성하다 보니, 어떤 기능을 하는지 파악하기 어려웠다. 예를 들어, 컴포넌트와 유틸리티 파일이 같은 형식으로 작성되어 구분이 쉽지 않았다. 이러한 문제를 해결하기 위해, 폴더와 파일 네이밍 규칙을 좀 더 세분화할 필요가 있었다.

---

폴더 및 파일 네이밍 규칙

1. 디렉토리 폴더명
   • 컴포넌트 폴더: PascalCase (대문자로 시작) - 컴포넌트임을 한눈에 파악할 수 있도록
     • 예: Header, Footer, UserProfile
   • 일반 폴더: CamelCase (소문자로 시작)
     • 예: components, services, utils
   • 서브폴더: CamelCase (소문자로 시작)
     • 예: hooks, context, assets
2. 파일명
   • 컴포넌트 파일: PascalCase (대문자로 시작)
     • 예: UserCard.tsx, NavBar.tsx
   • 유틸리티 파일 및 일반 자바스크립트 파일: CamelCase (소문자로 시작)
     • 예: formatDate.ts, apiClient.ts

---

코드 네이밍 규칙

1. 컴포넌트: PascalCase (대문자로 시작)
   • 예: UserCard, NavBar, MainContainer
2. 함수, 변수, Hook: CamelCase (소문자로 시작)
   • 예: getUserName, handleSubmit, useAuth

📦src
 ┣ 📂components
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📂Button
 ┃ ┃ ┃ ┣ 📜Button.stories.tsx
 ┃ ┃ ┃ ┗ 📜Button.tsx
 ┃ ┃ ┣ 📂Form
 ┃ ┃ ┃ ┗ 📂Input
 ┃ ┃ ┃ ┃ ┣ 📜UnderlineTextField.stories.tsx
 ┃ ┃ ┃ ┃ ┗ 📜UnderlineTextField.tsx
 ┃ ┃ ┣ 📂GoodsItem
 ┃ ┃ ┃ ┣ 📜GoodsItemDefault.stories.tsx
 ┃ ┃ ┃ ┣ 📜GoodsItemDefault.tsx
 ┃ ┃ ┃ ┣ 📜GoodsItemRanking.stories.tsx
 ┃ ┃ ┃ ┗ 📜GoodsItemRanking.tsx
 ┃ ┃ ┣ 📂Image
 ┃ ┃ ┃ ┣ 📜Image.stories.tsx
 ┃ ┃ ┃ ┗ 📜Image.tsx
 ┃ ┃ ┗ 📂layouts
 ┃ ┃ ┃ ┣ 📂Container
 ┃ ┃ ┃ ┃ ┣ 📜Container.stories.tsx
 ┃ ┃ ┃ ┃ ┗ 📜Container.tsx
 ┃ ┃ ┃ ┗ 📂Grid
 ┃ ┃ ┃ ┃ ┣ 📜Grid.stories.tsx
 ┃ ┃ ┃ ┃ ┗ 📜Grid.tsx
 ┃ ┣ 📂Footer
 ┃ ┃ ┗ 📜Footer.tsx
 ┃ ┗ 📂Header
 ┃ ┃ ┣ 📜Header.tsx
 ┃ ┃ ┣ 📜Nav.tsx
 ┃ ┃ ┣ 📜HeaderThemes.ts
 ┃ ┃ ┗ 📜HeaderTypes.ts
 ┣ 📂context
 ┃ ┣ 📜AuthContext.tsx
 ┃ ┣ 📜AuthProvider.tsx
 ┃ ┣ 📜ContextTypes.ts
 ┃ ┗ 📜useAuth.ts
 ┣ 📂pages
 ┃ ┣ 📂LoginPage
 ┃ ┃ ┣ 📜handleLogin.ts
 ┃ ┃ ┣ 📜LoginPage.tsx
 ┃ ┃ ┗ 📜useLoginState.ts
 ┃ ┣ 📂MainPage
 ┃ ┃ ┣ 📜getItems.ts
 ┃ ┃ ┣ 📜handleCount.ts
 ┃ ┃ ┣ 📜MainPage.tsx
 ┃ ┃ ┣ 📜MainItemList.tsx
 ┃ ┃ ┣ 📜sortItems.ts
 ┃ ┃ ┗ 📜MainPageTypes.ts
 ┃ ┣ 📂MyAccountPage
 ┃ ┃ ┣ 📜MyAccountPage.tsx
 ┃ ┃ ┗ 📜useLogout.ts
 ┃ ┗ 📂ThemePage
 ┃ ┃ ┣ 📜getItems.ts
 ┃ ┃ ┣ 📜ThemePage.tsx
 ┃ ┃ ┣ 📜ThemeItemList.tsx
 ┃ ┃ ┗ 📜ThemePageTypes.ts
 ┣ 📂styles
 ┃ ┣ 📂variants
 ┃ ┃ ┗ 📜StyleVariants.ts
 ┃ ┣ 📜Styles.ts
 ┃ ┗ 📜reset.css
 ┣ 📜App.tsx
 ┣ 📜index.tsx
 ┣ 📜react-app-env.d.ts
 ┗ 📜Router.tsx

 

 

📝 Daily Scrum 

• 남은 기능(STEP2) 구현 마무리
• 작업 내용을 정리하고 학습 일지 작성

 

😋 Today 회고

• 지난주와 같이 이번 주에도 STEP1은 목요일까지, STEP2는 금요일까지 제출해야 해서 매우 정신이 없었다. 특히, 리뷰 반영과 STEP2 작업을 동시에 진행하다 보니, 코드의 기능 요구사항은 만족했지만 UI 부분은 제대로 관리하지 못했다. 기능 구현에 집중하다 보니 UI는 후순위로 밀리게 되어, 결국 손도 대지 못한 상태로 제출하게 되었다.
• 다음 주에는 작업 일정을 더 효율적으로 관리해야겠다고 생각했다. 구체적인 계획은 다음과 같다. 이런 계획을 통해, 각 단계마다 충분한 시간을 확보하고, 기능과 UI 모두에 신경 쓸 수 있도록 하겠다.

 

➡️ 참고 링크

https://velog.io/@asj1966/React-%ED%8F%B4%EB%8D%94-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%ED%95%A8%EC%88%98-%EB%AA%85%EB%AA%85-%EA%B7%9C%EC%B9%99

[React] 폴더, 컴포넌트, 함수 명명 규칙

 

https://myung-ho.tistory.com/100

[React] React 코딩 컨벤션 정리