- 프론트엔드(김혁준)
$ git clone https://github.com/hyukjunkim1116/foodmap-Vue3
$ cd foodmap-Vue3
$ npm i
$ npm run dev- Vue3
- 낮은 러닝커브를 가지고 있고 와 SPA, 반응형 렌더링을 사용하기 위해 도입했습니다.
- quasar
- Quasar에서 제공하는 css 기능을 사용하여 디자인 시간을 절약하기 위해 도입했습니다.
- 그 외 파일 업로드 폼, boot 기능을 사용하여 프로젝트 전역을 관리하기 위해 도입했습니다.
- 최상위 컴포넌트를 만들어 props로 유저 정보를 내려주는 방식의 경우 불필요한 props 전달이 발생합니다. 따라서, 필요한 컴포넌트 내부에서만 상태 값을 가져다 사용하기 위해 상태 관리 라이브러리를 사용하기로 했습니다.
- 직관적이고 가독성있는 디렉토리 구조를 만들기 위해 파일의 위치에 따라 라우팅 경로가 설정되는 방식을 도입하였습니다.
├── App.vue
├── assets
│ └── quasar-logo-vertical.svg
├── boot
│ ├── axios-config.js
│ ├── darkmode.js
│ └── navigation-guard.js
├── components
│ ├── StickySideBar.vue
│ ├── apps
│ │ ├── chat
│ │ │ ├── NotificationList.vue
│ │ │ ├── WebChat.vue
│ │ │ └── WebChatItem.vue
│ │ ├── comment
│ │ │ ├── CommentItem.vue
│ │ │ └── CommentList.vue
│ │ ├── payment
│ │ │ └── PaymentsHistory.vue
│ │ └── post
│ │ ├── PostForm.vue
│ │ ├── PostIcon.vue
│ │ ├── PostItem.vue
│ │ ├── PostList.vue
│ │ └── PostWriteDialog.vue
│ ├── auth
│ │ ├── AuthDialog.vue
│ │ ├── FindPasswordForm.vue
│ │ ├── SignInForm.vue
│ │ ├── SignUpForm.vue
│ │ └── SuccessFindPassword.vue
│ ├── base
│ │ └── BaseCard.vue
│ ├── book
│ │ ├── BookItem.vue
│ │ └── BookList.vue
│ ├── map
│ │ └── KakaoMap.vue
│ ├── report
│ │ └── ReportForm.vue
│ ├── skeletons
│ │ ├── PostItemSkeleton.vue
│ │ └── PostListSkeleton.vue
│ └── tiptap
│ ├── TiptapEditor.vue
│ ├── TiptapEditorMenu.vue
│ └── TiptapViewer.vue
├── composables
│ └── usePostQuery.js
├── css
│ ├── app.scss
│ ├── quasar.variables.scss
│ └── tiptap.scss
├── layouts
│ └── default.vue
├── pages
│ ├── [...path].vue
│ ├── books
│ │ ├── [isbn]
│ │ │ └── index.vue
│ │ └── index.vue
│ ├── components
│ │ ├── PostHeader.vue
│ │ └── PostRightBar.vue
│ ├── index.vue
│ ├── mypage
│ │ ├── bookmark.vue
│ │ ├── password.vue
│ │ ├── payment.vue
│ │ └── profile.vue
│ ├── mypage.vue
│ ├── payments
│ │ ├── certification.vue
│ │ ├── index.vue
│ │ └── result.vue
│ ├── posts
│ │ └── [id]
│ │ ├── components
│ │ │ ├── PostComments.vue
│ │ │ └── PostDetails.vue
│ │ ├── edit.vue
│ │ └── index.vue
│ ├── social
│ │ └── kakao.vue
│ └── verify
│ └── [token]
│ └── index.vue
├── router
│ └── index.js
├── services
│ ├── auth.js
│ ├── book.js
│ ├── chat.js
│ ├── comment.js
│ ├── image.js
│ ├── index.js
│ ├── notification.js
│ ├── payment.js
│ ├── post.js
│ └── report.js
├── stores
│ ├── auth.js
│ ├── index.js
│ └── store-flag.d.ts
└── utils
├── payments
│ ├── constants.js
│ └── util.js
├── relative-time-format.js
└── validate-rules.js
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent