상수 : CAPITAL_SNAKE_CASE 변수 / 함수 : camelCase 클래스 / 컴포넌트 / 인터페이스 : PascalCase [Front] 상위 디렉토리명 : camelCase [Front] 하위 컴포넌트 디렉토리명 : PascalCase

이벤트핸들러

• [Front] : camelCase ( handleLoginButtonClick / onCllickLoginButton )

적용 예시

`상수`

const MY_NAME = 'thomas';

`변수, 함수`

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

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

class Person{}

const Person = () => {}

interface Person{}

Front-End 디렉토리 구조

├── assets
│   └── button-icon.png
├── components
│   └── Header
│       └── Header.tsx
│   └── Footer
│       └── Footer.tsx
├── contexts
│   └── userContext.tsx
├── pages
│   └── Main
│       └── index.tsx
├── styles
│   ├── GlobalStyle.scss
│   └── Theme.scss
│   └── Main.scss
├── utils
│   └── utils.tsx
├── _app.tsx
├── _document.tsx
└── index.tsx