프로젝트 기본사항
프론트엔드 프로젝트 개발을 위한 기본사항을 안내합니다.
사전 준비 사항
- 깃랩 계정
- 선호하는 IDE 또는 텍스트 에디터
- 안내되는 화면 캡쳐는 주로 VSCode 가 활용 되지만 상황에 따라서 IDEA(IntelliJ) 도 제공 합니다.
- 본문을 확인하는 데 5분 가량 소요될 것 같습니다.
기술 스택
이 프로젝트는 다음과 같은 기술 스택을 사용합니다.
- 프레임워크: Vue
- 라우팅: Vue Router
- 상태 관리: Pinia
- CSS 프레임워크: Tailwind CSS
- 빌드 도구: Vite
- 스타일링 도구: Sass
- UI 프레임워크: Element Plus
- HTTP 클라이언트: Axios
- 테스트: (추후 추가 예정)
- Git 커밋 관리: Husky
개발 환경 설정 및 설치
개발 환경
패키지 매니저는 pnpm, IDE는 Visual Studio Code를 기준으로 작성되어 있습니다.
프로젝트 설치
git repository에서 clone 합니다.
의존성 설치
pnpm install
- 실행 중
h를 누르면 도움말 확인 가능
개발 서버 실행
pnpm dev
# or
pnpm run preview
빌드 및 배포
빌드
pnpm run build:dev # 개발 모드
pnpm run build:test # 테스트 모드
pnpm run build:pro # 프로덕션 모드
배포 정보
- 배포 도구: Jenkins
- 배포 환경: (추후 추가 예정)
- 배포 스크립트: (추후 추가 예정)
프로젝트 구조
project
......
├── public - 정적 파일
└── src - 소스 코드
├── api - API 요청 모듈
....
├── apis - Rest call 작성 파일
└── services - business logic 작성 파일 (컴포넌트에서 API 호출시 사용)
├── assets - 이미지, 폰트 파일
├── components - 공용 컴포넌트
├── config - 환경 설정
├── hooks - 바인딩 된 데이터의 상태를 변경하기 위한 hook 메소드 모음
├── layouts - 공용 레이아웃
├── routers - Vue Router 설정 파일(동적, 정적 라우터)
├── stores - 저장소 및 상태 관리
├── styles - 레이아웃 및 ui 프레임워크 관련 scss 파일
├── typings - 타입 선언
├── utils - 유틸리티 함수
├── view - 페이지(화면) 영역 컴포넌트(파일 생성시 자동 라우팅)
├── App.vue - 루트 컴포넌트
├── envs.ts
├── main.ts
├── .env - 환경 변수 파일
├── .env.development - 개발 환경 설정 파일
├── .env.production - 운영 환경 설정 파일
├── .env.test - 스테이징 환경 설정 파일
└── vite.config.ts - Vite 설정 파일
......
컴포넌트를 배치하는 위치는 다음과 같습니다.
- 공용 컴포넌트는
/components디렉토리에 위치 - 페이지(화면) 컴포넌트는
/view디렉토리에 위치 - 페이지(화면) 전용 컴포넌트는 페이지 디렉토리 내
/view/components디렉토리에 위치
코딩 스타일
코딩 스타일
프로젝트의 일관성을 유지하고, 협업을 원활하게 하기 위해 필요합니다.
로깅
프론트엔드는 유저 데이터를 수집하지 않음, 디버깅 용도의 로그 or sourcemap은 자유롭게 사용