71 lines
2.0 KiB
Markdown
71 lines
2.0 KiB
Markdown
### 기본 환경
|
|
- vue 3.x(5.0.8)
|
|
- node (v20.17.0)
|
|
- vue-router(최신)
|
|
- pinia(최신) - store
|
|
- Nuxt(최신) - 프레임워크
|
|
- antd 4.x - UI/UX
|
|
- yarn (1.22.22)
|
|
- 추후 환경은 변경될 수 있음
|
|
|
|
## 최초 세팅
|
|
- terminal(혹은 command창): yarn install
|
|
- 실행 시 yarn dev
|
|
|
|
## 개발 시 중요 사항
|
|
- 모든 파일은 업무 기준으로 작성됨(예: 사용자 > user)
|
|
- 공통사항으로 적용되는 경우 utils 사용할 것!
|
|
- 모든 네이밍은 명확한 단어로 사용할 것!
|
|
- 반드시 저장할 경우 Eslint, Prettier 적용
|
|
|
|
## 공통 단어 주의사항
|
|
- 비즈니스 로직은 공통이 아님(불허)
|
|
- 공통은 언제든지 사용할 수 있는 라이브러리성을 말하는 것임
|
|
|
|
## Commit 금지 파일 및 디렉토리
|
|
- /node_modules/
|
|
- 기타 IDE 환경 파일(.classpath 등등)
|
|
|
|
### 페이지 작성
|
|
- pages/도메인/index.vue
|
|
- 페이지는 controller와 같은 역할을 함
|
|
- useHead를 이용하여 html head 영역을 설정함
|
|
|
|
### 페이지 내 컴포넌트
|
|
- /src/components/도메인/컴포넌트명.vue
|
|
|
|
### store 작성 위치
|
|
- 디렉토리: /src/stores/도메인/index.ts
|
|
|
|
### api 작성 위치
|
|
- 디렉토리: /src/apis/도메인/index.ts
|
|
|
|
### Type 지정
|
|
- type 및 interface로 타입을 지정하는 경우가 많음
|
|
- 법률구조공단은 type으로 모든 객체의 타입을 지정하는 것을 원칙으로 함
|
|
- 최대한 undefined를 사용하지 않는 선으로 개발할 것
|
|
- 예로 userId: string의 경우 빈값을 표현할 때 userId: '' 형식으로 사용할 것!
|
|
- 타입 import 시 아래와 같이 type을 지정해야 함
|
|
```
|
|
import type {UserItemType} from 'types'
|
|
```
|
|
|
|
|
|
### Toast UI Calendar
|
|
```
|
|
// ES MODULE
|
|
import Calendar from '@toast-ui/calendar';
|
|
|
|
// CSS 적용
|
|
import '@toast-ui/calendar/dist/toastui-calendar.min.css';
|
|
```
|
|
|
|
### Toast UI Grid
|
|
```
|
|
// ES MODULE
|
|
import 'tui-grid/dist/tui-grid.css';
|
|
import 'tui-date-picker/dist/tui-date-picker.min.css';
|
|
|
|
// CSS 적용
|
|
import Grid from 'tui-grid';
|
|
``` |