Skip to content
Snippets Groups Projects
Select Git revision
  • af4f7269314171b65cbdd1fa2c56aa7975f06208
  • main default protected
2 results

meanspec-frontend

  • Clone with SSH
  • Clone with HTTPS
  • 민재 조's avatar
    민재 조 authored
    refactor: uuid를 통해 공유할 수 있도록 변경
    
    See merge request !42
    af4f7269
    History

    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 페이지 전용 스타일