Front-End 디렉토리 구조

**public**
├── index.html
**src**
├──api
|   └── drf.js
****├──assets
|   └── icons
|        └── tear1.png
|   └── logos
|        └── o-an-wan1.png
|
├── components
|   ├── Navbar.vue 
│   ├── MainIntro.vue (인삿말, 슬로건, 운동사진들)
|   ├── MainInfo.vue (실시간 혹은 어제 운동왕/분석, 운동왕 혹은 나의 기록, 운동일지)
|   ├── MainRoomSearch.vue
|   ├── MainFreeRoomList.vue
|   ├── MainVideoRoomList.vue
|   ├── MainCompeteRoomList.vue
|   ├── MyNavbar.vue (내정보, 내정보수정, 운동일지)
|   ├── MyInfo.vue (운동레벨, 운동비율, 목표달성률, 신체분석, 운동일지달력)
|   ├── MyScheduleDetail.vue (운동일지 - 일별 상세 페이지)
|   ├── MyScheduleCarousel.vue (운동일지 - 그간의 기록, 사진위주)
|   ├── WorkoutVideoList.vue (운동페이지 - 비디오)
|   ├── WorloutChat.vue (운동페이지 - 채팅)
|   ├── WorkoutMenu.vue (운동페이지 - 메뉴)
|   └── WorkoutSet.vue (운동페이지 - 설정모달?)
|
├── router
│   ├── GlobalStyle.tsx
│   └── Theme.tsx
├── store
│   └── modules
|      ├── accounts.js
|      ├── accounts.js
|      └── 어쩌구.js
|   └── index.js
├── views
│   ├── MainView.vue (메인페이지)
|   ├── WorkoutView.vue (운동 페이지. 밑에는 3개로 나눈다면,)
|   ├── FreeWorloutview.vue (자유모드 페이지)
|   ├── VideoWorkoutView.vue (영상모드페이지)
|   ├── CompeteWorkoutView.vue (경쟁모드 페이지)
|   ├── MypageView.vue (마이페이지)
|   ├── MyInfoUpdateView.vue (내정보수정페이지)
|   ├── MyScheduleView.vue (운동일지)
|   ├── OtherPageView.vue (타인 마이페이지)
|   ├── AdminPageView.vue
|   └── NotFount404View.vue
|   
└── App.vue

(아래부터 예시)

상수 : CAPITAL_SNAKE_CASE

변수/함수 : snake_case

클래스/컴포넌트/인터페이스 : PascalCase

[Front, Server] 상위 디렉토리명 : camelCase

[Front] 하위 컴포넌트 디렉토리명 : PascalCase

[Server] 디렉토리 구조 : 도메인 - 레이어 구조

[ETC] 통신 규격 : JSON(camelCase)

이벤트핸들러

• [Front] : camelCase(handleLoginButtonClick / onCllickLoginButton)
• [Socket] : camelCase

적용 예시

`상수`

const MY_NAME = 'thomas';

`변수, 함수`

const roomNumber = 3;
const getYourData = ()=> console.log("hello world");

`클래스, 컴포넌트, 인터페이스 예시`

class Person{}

const Person = () => {}

interface Person{}

Front-End 디렉토리 구조

**public**
├── index.html
**src**
├──api
|   └── drf.js
****├──assets
|   └── icons
|        └── tear1.png
|   └── logos
|        └── o-an-wan1.png
|
├── components
|   ├── Navbar.vue 
│   ├── MainIntro.vue (인삿말, 슬로건, 운동사진들)
|   ├── MainInfo.vue (실시간 혹은 어제 운동왕/분석, 운동왕 혹은 나의 기록, 운동일지)
|   ├── MainRoomSearch.vue
|   ├── MainFreeRoomList.vue
|   ├── MainVideoRoomList.vue
|   ├── MainCompeteRoomList.vue
|   ├── MyNavbar.vue (내정보, 내정보수정, 운동일지)
|   ├── MyInfo.vue (운동레벨, 운동비율, 목표달성률, 신체분석, 운동일지달력)
|   ├── MyScheduleDetail.vue (운동일지 - 일별 상세 페이지)
|   ├── MyScheduleCarousel.vue (운동일지 - 그간의 기록, 사진위주)
|   ├── WorkoutVideoList.vue (운동페이지 - 비디오)
|   ├── WorloutChat.vue (운동페이지 - 채팅)
|   ├── WorkoutMenu.vue (운동페이지 - 메뉴)
|   └── WorkoutSet.vue (운동페이지 - 설정모달?)
|
├── router
│   ├── GlobalStyle.tsx
│   └── Theme.tsx
├── store
│   └── modules
|      ├── accounts.js
|      ├── accounts.js
|      └── 어쩌구.js
|   └── index.js
├── views
│   ├── MainView.vue (메인페이지)
|   ├── WorkoutView.vue (운동 페이지. 밑에는 3개로 나눈다면,)
|   ├── FreeWorloutview.vue (자유모드 페이지)
|   ├── VideoWorkoutView.vue (영상모드페이지)
|   ├── CompeteWorkoutView.vue (경쟁모드 페이지)
|   ├── MypageView.vue (마이페이지)
|   ├── MyInfoUpdateView.vue (내정보수정페이지)
|   ├── MyScheduleView.vue (운동일지)
|   ├── OtherPageView.vue (타인 마이페이지)
|   ├── AdminPageView.vue
|   └── NotFount404View.vue
|   
└── App.vue