Skip to content

rlajiun/common-PJT-button-up

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

첫단추💰

logo

👋Introduction

우리 아이의 경제 교육 첫 단추를 꿰어줍니다.
가정에서의 경제 조기 교육을 통해 성인이 되어서 경험할 경제 활동을 이론이 아닌 실제 활동으로 쉽고 재밌게 체험해 볼 수 있습니다.

🤳Simulation

Landing

image

Sign In

image image

Login

image image

부모 튜토리얼

image image image image

입금

image image

투자

image image

적금

image

환전

image image

할 일

image image

경제공부방

image


✨Developed by

Name 김응철 김지언 우정연 유현수 정은이 황승연
Profile image image image image image image
Position Jira
Assignee
Git
Assignee
Release
Assignee
Frontend
Leader
Team
Leader
Backend
Leader
Git GitHub GitHub GitHub GitHub GitHub GitHub

📃Tech Specifications

📚기술 스택

Tech Stack
Language Java, JavaScript
Backend Spring Boot, JPA, Spring Security, JWT
Frontend Vue.js, Vuetify, Vuex
Database MariaDB
Server AWS EC2, NginX
DevOps Git, Docker
🖥Backend 기술 자세히 보기
- Spring-Boot: 2.6.3
- spring-boot-starter-data-jpa
- spring-boot-starter-security
- spring-boot-starter-web
- p6spy-spring-boot-starter:1.8.0
- springfox-swagger2:2.9.2
- springfox-swagger-ui:2.9.2
- swagger-annotations:1.5.21
- io.swagger:swagger-models:1.5.21
- io.jsonwebtoken:jjwt:0.9.1
- lombok
- spring-boot-devtools
- mariadb-java-client
🎨Frontend 기술 자세히 보기
- vue
- vue/cli
- vue-router
- vuex
- vuex-persistedstate
- vuetify
- axios

시스템 아키텍처

시스템 아키텍처


ERD


📂Package Structure

🖥Backend

계층, 컴포넌트, 기능 순으로 패키지 구성

Backend 구조 자세히 보기
📦buttonup
 ┣ 📂config
 ┃ ┣ 📂security
 ┃ ┃ ┣ 📜JwtAuthenticationFilter.java
 ┃ ┃ ┣ 📜JwtTokenProvider.java
 ┃ ┃ ┗ 📜WebSecurityConfig.java
 ┃ ┣ 📜SwaggerConfig.java
 ┃ ┗ 📜WebConfig.java
 ┣ 📂controller
 ┃ ┣ 📂account
 ┃ ┃ ┗ 📜AccountController.java
 ┃ ┣ 📂economy
 ┃ ┃ ┗ 📜EconomyController.java
 ┃ ┣ 📂invest
 ┃ ┃ ┣ 📜InvestController.java
 ┃ ┃ ┣ 📜NewsController.java
 ┃ ┃ ┗ 📜SharePriceController.java
 ┃ ┣ 📂job
 ┃ ┃ ┣ 📜JobController.java
 ┃ ┃ ┣ 📜ToDoCheckController.java
 ┃ ┃ ┗ 📜ToDoController.java
 ┃ ┣ 📂request
 ┃ ┃ ┗ 📜RequestController.java
 ┃ ┣ 📂saving
 ┃ ┃ ┗ 📜SavingController.java
 ┃ ┣ 📂user
 ┃ ┃ ┣ 📜ChildController.java
 ┃ ┃ ┗ 📜ParentController.java
 ┃ ┗ 📜ExceptionController.java
 ┣ 📂domain
 ┃ ┣ 📂model
 ┃ ┃ ┣ 📂dto
 ┃ ┃ ┃ ┣ 📂account
 ┃ ┃ ┃ ┃ ┣ 📂request
 ┃ ┃ ┃ ┃ ┃ ┗ 📜HistoryRequest.java
 ┃ ┃ ┃ ┃ ┗ 📂response
 ┃ ┃ ┃ ┃ ┃ ┗ 📜HistoryResponse.java
 ┃ ┃ ┃ ┣ 📂economy
 ┃ ┃ ┃ ┃ ┣ 📂response
 ┃ ┃ ┃ ┃ ┃ ┣ 📜PostResponse.java
 ┃ ┃ ┃ ┃ ┃ ┗ 📜QuizResponse.java
 ┃ ┃ ┃ ┃ ┗ 📜Quiz.java
 ┃ ┃ ┃ ┣ 📂invest
 ┃ ┃ ┃ ┃ ┣ 📂request
 ┃ ┃ ┃ ┃ ┃ ┣ 📜InvestRequest.java
 ┃ ┃ ┃ ┃ ┃ ┣ 📜InvestStatusRequest.java
 ┃ ┃ ┃ ┃ ┃ ┣ 📜NewsRequest.java
 ┃ ┃ ┃ ┃ ┃ ┗ 📜SharePriceRequest.java
 ┃ ┃ ┃ ┃ ┗ 📂response
 ┃ ┃ ┃ ┃ ┃ ┣ 📜InvestPresetResponse.java
 ┃ ┃ ┃ ┃ ┃ ┣ 📜InvestStatusResponse.java
 ┃ ┃ ┃ ┃ ┃ ┣ 📜NewsResponse.java
 ┃ ┃ ┃ ┃ ┃ ┣ 📜RoughInvestResponse.java
 ┃ ┃ ┃ ┃ ┃ ┗ 📜SharePriceResponse.java
 ┃ ┃ ┃ ┣ 📂job
 ┃ ┃ ┃ ┃ ┣ 📂request
 ┃ ┃ ┃ ┃ ┃ ┣ 📜JobHistoryRequest.java
 ┃ ┃ ┃ ┃ ┃ ┣ 📜JobRequest.java
 ┃ ┃ ┃ ┃ ┃ ┗ 📜ToDoCheckRequest.java
 ┃ ┃ ┃ ┃ ┗ 📂response
 ┃ ┃ ┃ ┃ ┃ ┣ 📜JobResponse.java
 ┃ ┃ ┃ ┃ ┃ ┣ 📜ToDoCheckResponse.java
 ┃ ┃ ┃ ┃ ┃ ┗ 📜ToDoResponse.java
 ┃ ┃ ┃ ┣ 📂request
 ┃ ┃ ┃ ┃ ┣ 📂request
 ┃ ┃ ┃ ┃ ┃ ┗ 📜ExchangeRequest.java
 ┃ ┃ ┃ ┃ ┗ 📂response
 ┃ ┃ ┃ ┃ ┃ ┗ 📜RequestHistoryResponse.java
 ┃ ┃ ┃ ┣ 📂saving
 ┃ ┃ ┃ ┃ ┣ 📂request
 ┃ ┃ ┃ ┃ ┃ ┣ 📜SavingCloseRequest.java
 ┃ ┃ ┃ ┃ ┃ ┗ 📜SavingRequest.java
 ┃ ┃ ┃ ┃ ┗ 📂response
 ┃ ┃ ┃ ┃ ┃ ┣ 📜SavingBalanceResponse.java
 ┃ ┃ ┃ ┃ ┃ ┣ 📜SavingCloseResponse.java
 ┃ ┃ ┃ ┃ ┃ ┣ 📜SavingDetailResponse.java
 ┃ ┃ ┃ ┃ ┃ ┗ 📜SavingHistoryResponse.java
 ┃ ┃ ┃ ┗ 📂user
 ┃ ┃ ┃ ┃ ┣ 📂request
 ┃ ┃ ┃ ┃ ┃ ┣ 📜ConnectRequest.java
 ┃ ┃ ┃ ┃ ┃ ┣ 📜JoinRequest.java
 ┃ ┃ ┃ ┃ ┃ ┣ 📜LoginRequest.java
 ┃ ┃ ┃ ┃ ┃ ┗ 📜TutorialRequest.java
 ┃ ┃ ┃ ┃ ┗ 📂response
 ┃ ┃ ┃ ┃ ┃ ┣ 📜ChildResponse.java
 ┃ ┃ ┃ ┃ ┃ ┣ 📜LoginResponse.java
 ┃ ┃ ┃ ┃ ┃ ┣ 📜ParentResponse.java
 ┃ ┃ ┃ ┃ ┃ ┗ 📜TutorialResponse.java
 ┃ ┃ ┗ 📂entity
 ┃ ┃ ┃ ┣ 📂account
 ┃ ┃ ┃ ┃ ┣ 📜AccountHistory.java
 ┃ ┃ ┃ ┃ ┣ 📜AccountHistoryCategory.java
 ┃ ┃ ┃ ┃ ┗ 📜AccountHistoryType.java
 ┃ ┃ ┃ ┣ 📂economy
 ┃ ┃ ┃ ┃ ┣ 📜EconomyPost.java
 ┃ ┃ ┃ ┃ ┣ 📜EconomyTopic.java
 ┃ ┃ ┃ ┃ ┣ 📜Quiz.java
 ┃ ┃ ┃ ┃ ┣ 📜QuizHistory.java
 ┃ ┃ ┃ ┃ ┗ 📜QuizType.java
 ┃ ┃ ┃ ┣ 📂invest
 ┃ ┃ ┃ ┃ ┣ 📜Investment.java
 ┃ ┃ ┃ ┃ ┣ 📜InvestPreset.java
 ┃ ┃ ┃ ┃ ┣ 📜InvestStatus.java
 ┃ ┃ ┃ ┃ ┣ 📜News.java
 ┃ ┃ ┃ ┃ ┗ 📜SharePrice.java
 ┃ ┃ ┃ ┣ 📂job
 ┃ ┃ ┃ ┃ ┣ 📜Job.java
 ┃ ┃ ┃ ┃ ┣ 📜JobHistory.java
 ┃ ┃ ┃ ┃ ┣ 📜JobImage.java
 ┃ ┃ ┃ ┃ ┣ 📜PayTerm.java
 ┃ ┃ ┃ ┃ ┣ 📜ToDo.java
 ┃ ┃ ┃ ┃ ┗ 📜ToDoCheck.java
 ┃ ┃ ┃ ┣ 📂product
 ┃ ┃ ┃ ┃ ┣ 📜Product.java
 ┃ ┃ ┃ ┃ ┗ 📜ProductType.java
 ┃ ┃ ┃ ┣ 📂request
 ┃ ┃ ┃ ┃ ┣ 📜RequestHistory.java
 ┃ ┃ ┃ ┃ ┣ 📜RequestHistoryStatus.java
 ┃ ┃ ┃ ┃ ┗ 📜RequestHistoryType.java
 ┃ ┃ ┃ ┣ 📂saving
 ┃ ┃ ┃ ┃ ┣ 📜Saving.java
 ┃ ┃ ┃ ┃ ┗ 📜SavingHistory.java
 ┃ ┃ ┃ ┗ 📂user
 ┃ ┃ ┃ ┃ ┣ 📜Child.java
 ┃ ┃ ┃ ┃ ┗ 📜Parent.java
 ┃ ┣ 📂repository
 ┃ ┃ ┣ 📂account
 ┃ ┃ ┃ ┗ 📜AccountRepository.java
 ┃ ┃ ┣ 📂economy
 ┃ ┃ ┃ ┣ 📜EconomyPostRepository.java
 ┃ ┃ ┃ ┣ 📜EconomyTopicRepository.java
 ┃ ┃ ┃ ┣ 📜QuizHistoryRepository.java
 ┃ ┃ ┃ ┗ 📜QuizRepository.java
 ┃ ┃ ┣ 📂invest
 ┃ ┃ ┃ ┣ 📜InvestPresetRepository.java
 ┃ ┃ ┃ ┣ 📜InvestRepository.java
 ┃ ┃ ┃ ┣ 📜InvestStatusRepository.java
 ┃ ┃ ┃ ┣ 📜NewsRepository.java
 ┃ ┃ ┃ ┗ 📜SharePriceRepository.java
 ┃ ┃ ┣ 📂job
 ┃ ┃ ┃ ┣ 📜JobHistoryRepository.java
 ┃ ┃ ┃ ┣ 📜JobImageRepository.java
 ┃ ┃ ┃ ┣ 📜JobRepository.java
 ┃ ┃ ┃ ┣ 📜ToDoCheckRepository.java
 ┃ ┃ ┃ ┗ 📜ToDoRepository.java
 ┃ ┃ ┣ 📂request
 ┃ ┃ ┃ ┗ 📜RequestHistoryRepository.java
 ┃ ┃ ┣ 📂saving
 ┃ ┃ ┃ ┣ 📜SavingHistoryRepository.java
 ┃ ┃ ┃ ┗ 📜SavingRepository.java
 ┃ ┃ ┗ 📂user
 ┃ ┃ ┃ ┣ 📜ChildRepository.java
 ┃ ┃ ┃ ┗ 📜ParentRepository.java
 ┃ ┗ 📂service
 ┃ ┃ ┣ 📂account
 ┃ ┃ ┃ ┗ 📜AccountService.java
 ┃ ┃ ┣ 📂common
 ┃ ┃ ┃ ┗ 📜ImageService.java
 ┃ ┃ ┣ 📂economy
 ┃ ┃ ┃ ┗ 📜EconomyService.java
 ┃ ┃ ┣ 📂invest
 ┃ ┃ ┃ ┣ 📜InvestService.java
 ┃ ┃ ┃ ┣ 📜InvestStatusService.java
 ┃ ┃ ┃ ┣ 📜NewsService.java
 ┃ ┃ ┃ ┗ 📜SharePriceService.java
 ┃ ┃ ┣ 📂job
 ┃ ┃ ┃ ┣ 📜JobService.java
 ┃ ┃ ┃ ┣ 📜ToDoCheckService.java
 ┃ ┃ ┃ ┗ 📜ToDoService.java
 ┃ ┃ ┣ 📂request
 ┃ ┃ ┃ ┗ 📜RequestService.java
 ┃ ┃ ┣ 📂saving
 ┃ ┃ ┃ ┗ 📜SavingService.java
 ┃ ┃ ┗ 📂user
 ┃ ┃ ┃ ┣ 📜ChildService.java
 ┃ ┃ ┃ ┣ 📜CustomuserDetailService.java
 ┃ ┃ ┃ ┣ 📜ParentService.java
 ┃ ┃ ┃ ┗ 📜TutorialService.java
 ┣ 📂exception
 ┃ ┣ 📜BalanceOverException.java
 ┃ ┣ 📜ExistInvestException.java
 ┃ ┗ 📜NullJobException.java
 ┗ 📜ButtonUpApplication.java

🎨Frontend

api: axios 인스턴스를 활용한 API 모듈
views: Router에서 default로 지정된 컴포넌트
components: views에서 사용하는 컴포넌트, children으로 사용하는 컴포넌트, header, footer

Frontend 구조 자세히 보기
📦src
 ┣ 📂api
 ┃ ┣ 📜accountsAPI.js
 ┃ ┣ 📜checkListAPI.js
 ┃ ┣ 📜childrenAPI.js
 ┃ ┣ 📜economyAPI.js
 ┃ ┣ 📜index.js
 ┃ ┣ 📜investAPI.js
 ┃ ┣ 📜jobsAPI.js
 ┃ ┣ 📜parentAPI.js
 ┃ ┣ 📜requestAPI.js
 ┃ ┣ 📜savingsAPI.js
 ┃ ┣ 📜todoListAPI.js
 ┃ ┗ 📜userAPI.js
 ┣ 📂assets
 ┃ ┣ 📂image
 ┃ ┃ ┣ 📜mockup-child-home-crop.png
 ┃ ┃ ┣ 📜mockup-child-home.png
 ┃ ┃ ┣ 📜mockup-child-invest-crop.png
 ┃ ┃ ┣ 📜mockup-child-invest.png
 ┃ ┃ ┣ 📜mockup-child-study.png
 ┃ ┃ ┣ 📜mockup-parent-exchange-crop.png
 ┃ ┃ ┣ 📜mockup-parent-exchange.png
 ┃ ┃ ┣ 📜mockup-parent-job-crop.png
 ┃ ┃ ┗ 📜mockup-parent-job.png
 ┃ ┣ 📂scss
 ┃ ┃ ┗ 📜style.scss
 ┃ ┗ 📂svg
 ┃ ┃ ┣ 📜child-work.svg
 ┃ ┃ ┣ 📜finance-app-animate.svg
 ┃ ┃ ┣ 📜growing.svg
 ┃ ┃ ┗ 📜piggy-bank-animate.svg
 ┣ 📂components
 ┃ ┣ 📂child
 ┃ ┃ ┣ 📂activity
 ┃ ┃ ┃ ┣ 📜InvestBtmSheet.vue
 ┃ ┃ ┃ ┣ 📜InvestGraph.vue
 ┃ ┃ ┃ ┣ 📜InvestTable.vue
 ┃ ┃ ┃ ┣ 📜NewsList.vue
 ┃ ┃ ┃ ┗ 📜StudyCard.vue
 ┃ ┃ ┣ 📂home
 ┃ ┃ ┃ ┣ 📜AccountHistoryBtmSheet.vue
 ┃ ┃ ┃ ┣ 📜AccountHistoryList.vue
 ┃ ┃ ┃ ┣ 📜MainAccountCard.vue
 ┃ ┃ ┃ ┗ 📜SavingHistoryBtmSheet.vue
 ┃ ┃ ┣ 📜InstallmentSaving.vue
 ┃ ┃ ┗ 📜NotSync.vue
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📂headers
 ┃ ┃ ┃ ┣ 📜BackHeader.vue
 ┃ ┃ ┃ ┣ 📜GreetingHeader.vue
 ┃ ┃ ┃ ┗ 📜IndexHeader.vue
 ┃ ┃ ┣ 📜BottomNav.vue
 ┃ ┃ ┣ 📜BottomSheet.vue
 ┃ ┃ ┣ 📜CardMenu.vue
 ┃ ┃ ┣ 📜JobWithTodoListCard.vue
 ┃ ┃ ┣ 📜Modal.vue
 ┃ ┃ ┗ 📜TodoList.vue
 ┃ ┗ 📂parent
 ┃ ┃ ┣ 📂activity
 ┃ ┃ ┃ ┣ 📂NewInvest
 ┃ ┃ ┃ ┃ ┣ 📜priceInput.vue
 ┃ ┃ ┃ ┃ ┗ 📜selectInput.vue
 ┃ ┃ ┃ ┗ 📜JobCard.vue
 ┃ ┃ ┣ 📂home
 ┃ ┃ ┃ ┣ 📜ChildAccount.vue
 ┃ ┃ ┃ ┣ 📜ChildCardInfo.vue
 ┃ ┃ ┃ ┣ 📜Deposit.vue
 ┃ ┃ ┃ ┗ 📜Tutorial.vue
 ┃ ┃ ┣ 📂tutorial
 ┃ ┃ ┃ ┣ 📜TutorialChildSync.vue
 ┃ ┃ ┃ ┣ 📜TutorialDanchoo.vue
 ┃ ┃ ┃ ┣ 📜TutorialJob.vue
 ┃ ┃ ┃ ┗ 📜TutorialStock.vue
 ┃ ┃ ┗ 📜BottomNav.vue
 ┣ 📂config
 ┃ ┗ 📜index.js
 ┣ 📂plugins
 ┃ ┗ 📜vuetify.js
 ┣ 📂router
 ┃ ┣ 📂child
 ┃ ┃ ┣ 📜activity.js
 ┃ ┃ ┣ 📜home.js
 ┃ ┃ ┣ 📜shop.js
 ┃ ┃ ┗ 📜userInfo.js
 ┃ ┣ 📂common
 ┃ ┃ ┗ 📜common.js
 ┃ ┣ 📂parent
 ┃ ┃ ┣ 📜activity.js
 ┃ ┃ ┣ 📜home.js
 ┃ ┃ ┣ 📜requestList.js
 ┃ ┃ ┣ 📜tutorial.js
 ┃ ┃ ┗ 📜userInfo.js
 ┃ ┗ 📜index.js
 ┣ 📂sass
 ┃ ┗ 📜variables.scss
 ┣ 📂store
 ┃ ┣ 📂modules
 ┃ ┃ ┣ 📜accountStore.js
 ┃ ┃ ┣ 📜investStore.js
 ┃ ┃ ┣ 📜parentStore.js
 ┃ ┃ ┣ 📜savingStore.js
 ┃ ┃ ┗ 📜userStore.js
 ┃ ┗ 📜index.js
 ┣ 📂views
 ┃ ┣ 📂child
 ┃ ┃ ┣ 📂Activity
 ┃ ┃ ┃ ┣ 📜Invest.vue
 ┃ ┃ ┃ ┣ 📜Main.vue
 ┃ ┃ ┃ ┣ 📜News.vue
 ┃ ┃ ┃ ┣ 📜Saving.vue
 ┃ ┃ ┃ ┣ 📜Study.vue
 ┃ ┃ ┃ ┗ 📜StudyDetail.vue
 ┃ ┃ ┣ 📂home
 ┃ ┃ ┃ ┣ 📜AccountHistory.vue
 ┃ ┃ ┃ ┗ 📜Main.vue
 ┃ ┃ ┗ 📜Shop.vue
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📜Index.vue
 ┃ ┃ ┣ 📜Login.vue
 ┃ ┃ ┣ 📜Signup.vue
 ┃ ┃ ┗ 📜UserInfo.vue
 ┃ ┗ 📂parent
 ┃ ┃ ┣ 📂activity
 ┃ ┃ ┃ ┣ 📜AddJob.vue
 ┃ ┃ ┃ ┣ 📜InvestDetail.vue
 ┃ ┃ ┃ ┣ 📜InvestManage.vue
 ┃ ┃ ┃ ┣ 📜JobManage.vue
 ┃ ┃ ┃ ┣ 📜Main.vue
 ┃ ┃ ┃ ┗ 📜NewInvest.vue
 ┃ ┃ ┣ 📂home
 ┃ ┃ ┃ ┣ 📜ChildInfo.vue
 ┃ ┃ ┃ ┗ 📜Home.vue
 ┃ ┃ ┣ 📜RequestList.vue
 ┃ ┃ ┗ 📜Tutorial.vue
 ┣ 📜App.vue
 ┗ 📜main.js

🔥Team Rules

🖥Backend

1. Entity Annotation

@Entity  // table과 매핑할 클래스에 붙여주는 어노테이션
@Table(name = "table_name") // 엔티티와 매핑할 테이블 지정 - 동일해도 name 속성 필수 작성
@Getter // 클래스 위에서 붙여주면 클래스가 가지는 모든 멤버변수에 대한 get 함수생성
@DynamicInsert // INSERT구문 생성 시점에 null인 필드 제외 - 필요시에만 추가
@DynamicUpdate // update 시에 null인 필드 제외 - 필요시에만 추가
@NoArgsConstructor // 기본생성자 생성해주는 어노테이션

2. Entity Strategy

  • FK 설정시
    ManyToOne 쪽만 설정시, 반대 컬럼에 OneToMany 설정시 양방향 관계를 가지게 됨.
    양방향 지양 , 반대 컬럼에 명시 X 해주고 단방향 연관 관계 로 사용!

3. DTO Annotation

@ApiModel(value = "table data 추가 요청 정보") // swagger용 설명 수정
@Getter // 위와 동일
@Builder // DTO 생성 패턴
@NoArgsConstructor // 기본생성자
@AllArgsConstructor // 모든 필드값을 가지는 생성자
  • ResponseDTO

    • 클라이언트에서 api를 호출해서 서버에서 받는 데이터
    • 서버에서 보내줘야하는 데이터
  • RequestDTO

    • 클라이언트의 요청을 처리하기 위해 서버에서 받아야하는 데이터
    • 프론트에서 보내줘야하는 데이터

🎨Frontend

컴포넌트 구조

  • views: router에서 default로 등록되는 컴포넌트
  • components
    • views 내부에서 사용되는 컴포넌트
    • router에서 header, footer, children으로 연결되는 컴포넌트

함수 작성 시 접두사

함수명만 보고 어느 모듈에서 온 함수인지 구분할 수 있도록

// 컴포넌트 내에서 만든 메서드 - 별도 접두사 없음
getUserInfo();

// vuex actions - vuex 접두사
vuexGetUserInfo();

// API function - api 접두사
apiGetUserInfo();

라우터, vuex, api 모듈화

코드 가독성과 유지보수를 위해 router, vuex, api 파일을 모듈화



빌드 및 배포

1. 사용한 JVM, 웹서버, WAS 제품 등의 종류와 설정값, 버전(IDE 버전 포함) 기재

종류

웹서버 - Nginx

WAS - Tomcat

버전

Backend

Java - OpenJDK 11.0.14.1

spring-boot - 2.6.3

spring 내장 tomcat - 2.6.3

gradle - 7.3.3

Frontend

node - 14.18.1

npm - 6.14.15

nginx - 1.21.6(Ubuntu)

IDE

intelliJ IDEA - 2021.3.1

Visual Studio Code - 1.64.2

2. 빌드 시 사용되는 환경변수 등의 주요 내용 상세 기재

Backend

backend/ButtonUp/src/main/resources/application.yml 파일 추가
spring:
  datasource:
    url: jdbc:mariadb://i6b205.p.ssafy.io:5000/buttonup
    username: ssafy
    password: ssafy
    driver-class-name: org.mariadb.jdbc.Driver
  mvc:
    pathmatch:
      matching-strategy: ant_path_matcher
jpa:
  generate-ddl: false
  open-in-view: false
  hibernate:
    ddl-auto: validate
  properties:
    hibernate:
      format_sql: true
logging.level:
  org.hibernate.SQL: debug
AWS에서 빌드 과정
  1. Git 설치 및 연동(/home/ubuntu 경로에서)

    apt-get install git
    git clone https://lab.ssafy.com/s06-webmobile2-sub2/S06P12B205.git
    # 로그인
  2. build

    cd front 폴더로
    npm install
    npm run build

Frontend

frontend/src/config/index.js 파일 추가
const API_BASE_URL = "http://localhost:8080";

export { API_BASE_URL };
AWS에서 빌드 과정
  1. Java 설치

    apt-get install openjdk-11-jdk
  2. build

    sudo chmod 777 ./gradlew  # 폴더나 파일에 권한부여(777 - 모든 권한)
    sudo ./gradlew build      # build

3. 배포 시 특이사항 기재

Frontend

방법 - AWS에서 nodejs로 빌드 후, Docker에서 NGINX로 실행
  1. image 다운

    docker pull nginx
  2. nginx의 conf파일 필요! - /home/ubuntu/nginx.conf 생성

    server {
    	listen 80 default_server;
    	listen [::]:80 default_server;
    
    	root /usr/share/nginx/html;  # 실행시킬 html이 있는 위치
    
    	index index.html index.htm;
    
    	server_name _;
    	location / {
    		root /usr/share/nginx/html   # html 폴더 위치
    	  try_files $uri $uri/ /index.html;  # vue의 히스토리 모드 해결
    	}
    }
  3. container 실행 - docker 내의 html 폴더와 default.conf 파일에 volumn 설정

    docker run --name nginx -d -p 80:80
    -v /home/ubuntu/nginx.conf:/etc/nginx/conf.d/default.conf
    -v /home/ubuntu/S06P12B205/frontend/dist:/usr/share/nginx/html nginx

Backend

방법 - AWS에서 Gradle로 빌드 후, Docker에서 Spring 내장 tomcat로 실행
  1. Backend 프로젝트 내에 Dockerfile 파일 생성(src 폴더나 gradlew 있는 곳)

    Dockerfile

    FROM openjdk:11-jdk
    EXPOSE 8080
    ARG JAR_FILE=build/libs/ButtonUp-0.0.1-SNAPSHOT.jar  # jar파일 경로
    COPY ${JAR_FILE} app.jar    # docker 내의 app.jar로 복사
    ENTRYPOINT ["java","-jar","/app.jar"]
  2. Docker image 생성(빌드)

    # Dockerfile 있는 곳에서
    docker build . -t back:0.1  # -t : 태그
  3. Docker Container 실행

    docker run --name back -d -p 8080:8080 back:0.1

4. DB 접속 정보 등 프로젝트(ERD)에 활용되는 주요 계정 및 프로퍼티가 정의된 파일 목록

DB명

buttonup

관리자 계정

사용자 : buttonup

암호 : danchu

해당 db에 대한 권한만 가진 사용자 계정

사용자 : ssafy

암호 : ssafy

프로퍼티

--character-set-server=utf8mb4

--collation-server=utf8mb4_unicode_ci



첫단추 Wiki 바로가기


기획

🤝첫 단추의 철학
📜기능 명세서
🖼와이어 프레임
🎾API 설계서


🤝Convention



😚 1주차 : 2022.01.08-2022.01.14

아이디어 회의 진행

😊 2주차 : 2022.01.15-2022.01.21

1월 17일 회의록
1월 18일 회의록
1월 19일 회의록
1월 21일 회의록

🤔 3주차 : 2022.01.22-2022.01.28

1월 24일 회의록
1월 25일 회의록
1월 26일 회의록

About

SSAFY 6기 공통PJT - 우리 아이의 첫 경제 교육

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published