meanspec-frontend
실행 방법
설치
npm install
실행
npm run start
코딩 시 참고
리액트 프로젝트 구조
src/
├── assets/ # 이미지, 폰트, 스타일과 같은 정적 파일
├── components/ # 재사용 가능한 컴포넌트
├── pages/ # 페이지 단위 컴포넌트
├── hooks/ # 커스텀 훅
├── contexts/ # React Context API 관련 코드
├── utils/ # 유틸리티 함수
├── api/ # API 호출 및 비즈니스 로직
├── styles/ # 전역 스타일 또는 CSS 파일 (안 쓸 수도 있음)
├── App.tsx # 메인 컴포넌트
├── index.tsx # 진입점
└── AppRoutes.js # 라우팅 관련 파일 (React Router 사용 시)
또한 아래와 같이 한 page내에서 해당 page만의 components 폴더 만들어서 하는 것도 컴포넌트 분리 측면에서 편합니다. 한 페이지 내에서 components 폴더 활용 예시
src/
├── pages/
│ ├── AboutPage/
│ │ ├── components/
│ │ │ ├── TeamMemberCard.jsx # 팀 멤버 카드 컴포넌트
│ │ │ ├── MissionStatement.jsx # 미션 설명 컴포넌트
│ │ │ └── VisionSection.jsx # 비전 섹션 컴포넌트
│ │ ├── AboutPage.jsx # About 페이지 메인 컴포넌트
│ │ └── AboutPage.module.css # About 페이지 전용 스타일