☑️ 코드 컨벤션

<aside> <img src="https://cdn-icons-png.flaticon.com/512/3602/3602241.png" alt="https://cdn-icons-png.flaticon.com/512/3602/3602241.png" width="40px" /> 주석은 설명하려는 구문에 맞춰 들여쓰기 합니다.

// Good
function someFunction() {
  ...

  // statement에 관한 주석
  statements
}

</aside>

<aside> <img src="https://cdn-icons-png.flaticon.com/512/3602/3602241.png" alt="https://cdn-icons-png.flaticon.com/512/3602/3602241.png" width="40px" /> 변수명과 함수명은 카멜케이스 로, 타입명은 파스칼케이스 로 작성합니다.

const userName: UserName = "스타디움";

</aside>

<aside> <img src="https://cdn-icons-png.flaticon.com/512/3602/3602241.png" alt="https://cdn-icons-png.flaticon.com/512/3602/3602241.png" width="40px" /> 핸들러 메소드는 ~Handler 라고 작성합니다.

const editUserHandler = () => {
}

</aside>

<aside> <img src="https://cdn-icons-png.flaticon.com/512/3602/3602241.png" alt="https://cdn-icons-png.flaticon.com/512/3602/3602241.png" width="40px" /> 변수, 메소드, useEffect 순으로 작성합니다.

export default function Home({props}: {props: PropsType}) => {
	const userName = "asdf";
	
	const editUserHandler = () => {
		//
	} 
	
	useEffect(() =>{
		//
	},[])
	
	return (
		<>
		</>
	)
}

</aside>

🗂️프로젝트 구조

studium/
│
├── public/
│   
├── src/
│   ├── api/                    # api와 관련된 로직
│   │   
│   ├── app/                    # Next.js app 라우팅
│   │   └── page.tsx
│   │   └── layout.tsx
│   │  
│   ├── assets/
│   │   └── fonts/              # 폰트 에셋
│   │   └── images/             # 이미지 에셋
│   │   
│   ├── components/             # 재사용 가능한 컴포넌트
│   │   ├── common/             # 전역적으로 사용되는 컴포넌트 (버튼, 헤더, 푸터 등)
│   │   └── 기능별 폴더/
│   │
│   ├── store/                  # 전역 상태 관리 (Zustand)
│   │
│   ├── types/                  # 타입 관리
│   │
│   └── utils/                  # 유틸리티 함수
│