SlideShare a Scribd company logo
1 of 26
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
봄 카페
종합학술제
정보통신융합공학부
학번: 1860029
이름: 육인혁
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
목차
1 작품소개
2 시스템구성
3 서비스시나리오
4 API테이블
table of contents
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
5 UI설계및소스
6 개선할점
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
1
작품 소개
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 1
작품소개
봄 카페
1.1 개발동기 및 목적 : 카페 홈페이지에서 쉽게 판매 등록을
하기 위해서 만들게 되었습니다.
1.2 작품 특징 : 상시 판매하고 있는 커피를 등록하거나 수정
및 삭제할 수 있습니다.
계절 한정 판매하는 커피를 등록하고 수정및 삭제할 수 있습
니다.
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
2
시스템 구성
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 2
시스템구성
웹 클라이언트
Web
- 커피 리스트 관리
- 한정 커피 리스트
관리 커피 테이블 DB
카페 첫화면
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
3
서비스 시나리오
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 3
서비스시나리오
카페 홈페이지
접속
관리페이지
접속
커피 리스트 수정 및
작성
한정 판매 커피 리스
트 수정 및 작성
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
4
API 테이블
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 4
API테이블
메소
드
경로 설명
GET /coffees
카페에서 판매하는 커피의 리스트를 조회한
다.
GET
/coffees/:coffeeI
d
카페에서 판매하는 커피 중 특정 커피를 조회
한다.
POST /coffees
카페에 신규 커피를 메뉴에 등록한다.
{
“coffeeId”:
“name”:
“price”:
“feature”:
}
PUT
/coffees/:coffeeI
d
커피의 데이터 값을 수정한다.
DELE
TE
/coffees/:coffeeI
d
카페에서 판매하고 있는 커피를 선택해서 삭
제한다.
메소
드
경로 설명
GET /coffees1
카페에서 판매하는 한정 판매 커피의 리스트
를 조회한다.
GET
/coffees1/:coffe
eId
카페에서 판매하는 한정 판매 커피 중 특정
커피를 조회한다.
POST /coffees1
카페에 신규 한정 판매 커피를 메뉴에 등록한
다.
{
“coffeeId”:
“name”:
“price”:
“feature”:
}
PUT
/coffees1/:coffe
eId
한정 판매 커피의 데이터 값을 수정한다.
DELE
TE
/coffees1/:coffe
eId
카페에서 판매하고 있는 한정 판매 커피를 선
택해서 삭제한다.
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 4
API테이블
API 라우터
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
5
UI 설계 및 소스
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 5
UI설계및소스
메인페이지
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 5
UI설계및소스
메인페이지
AboutView.vue
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 5
UI설계및소스
메인페이지
Introduce.vue
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 5
UI설계및소스
관리페이지
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 5
UI설계및소스
관리페이지
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 5
UI설계및소스
관리페이지
CoffeeTable.vue
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 5
UI설계및소스
관리페이지
CoffeeTable.vue
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 5
UI설계및소스
관리페이지
Coffee1Table.vue
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 5
UI설계및소스
관리페이지
Coffee1Table.vue
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 5
UI설계및소스
db관련
coffee.controller.j
s
coffee.model.js
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 5
UI설계및소스
db관련
coffee1.controller.js
coffee1.model.js
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
6
개선할 점
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
Part 6
개선할점
수정, 삭제 뿐만 아니라 조회 버튼을 만들어
버튼을 클릭했을때 일별 판매 수량을
socket을 활용하여 차트로 보여주는 기능이
있었으면 좋았을 껏 같다.
ⓒSaebyeol Yu. Saebyeol’s PowerPoint
감사합니다.

More Related Content

Featured

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 

Featured (20)

Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
 

1860029_육인혁_종합학술제.pptx

  • 1. ⓒSaebyeol Yu. Saebyeol’s PowerPoint 봄 카페 종합학술제 정보통신융합공학부 학번: 1860029 이름: 육인혁
  • 2. ⓒSaebyeol Yu. Saebyeol’s PowerPoint 목차 1 작품소개 2 시스템구성 3 서비스시나리오 4 API테이블 table of contents ⓒSaebyeol Yu. Saebyeol’s PowerPoint 5 UI설계및소스 6 개선할점
  • 3. ⓒSaebyeol Yu. Saebyeol’s PowerPoint 1 작품 소개
  • 4. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 1 작품소개 봄 카페 1.1 개발동기 및 목적 : 카페 홈페이지에서 쉽게 판매 등록을 하기 위해서 만들게 되었습니다. 1.2 작품 특징 : 상시 판매하고 있는 커피를 등록하거나 수정 및 삭제할 수 있습니다. 계절 한정 판매하는 커피를 등록하고 수정및 삭제할 수 있습 니다.
  • 5. ⓒSaebyeol Yu. Saebyeol’s PowerPoint 2 시스템 구성
  • 6. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 2 시스템구성 웹 클라이언트 Web - 커피 리스트 관리 - 한정 커피 리스트 관리 커피 테이블 DB 카페 첫화면
  • 7. ⓒSaebyeol Yu. Saebyeol’s PowerPoint 3 서비스 시나리오
  • 8. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 3 서비스시나리오 카페 홈페이지 접속 관리페이지 접속 커피 리스트 수정 및 작성 한정 판매 커피 리스 트 수정 및 작성
  • 9. ⓒSaebyeol Yu. Saebyeol’s PowerPoint 4 API 테이블
  • 10. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 4 API테이블 메소 드 경로 설명 GET /coffees 카페에서 판매하는 커피의 리스트를 조회한 다. GET /coffees/:coffeeI d 카페에서 판매하는 커피 중 특정 커피를 조회 한다. POST /coffees 카페에 신규 커피를 메뉴에 등록한다. { “coffeeId”: “name”: “price”: “feature”: } PUT /coffees/:coffeeI d 커피의 데이터 값을 수정한다. DELE TE /coffees/:coffeeI d 카페에서 판매하고 있는 커피를 선택해서 삭 제한다. 메소 드 경로 설명 GET /coffees1 카페에서 판매하는 한정 판매 커피의 리스트 를 조회한다. GET /coffees1/:coffe eId 카페에서 판매하는 한정 판매 커피 중 특정 커피를 조회한다. POST /coffees1 카페에 신규 한정 판매 커피를 메뉴에 등록한 다. { “coffeeId”: “name”: “price”: “feature”: } PUT /coffees1/:coffe eId 한정 판매 커피의 데이터 값을 수정한다. DELE TE /coffees1/:coffe eId 카페에서 판매하고 있는 한정 판매 커피를 선 택해서 삭제한다.
  • 11. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 4 API테이블 API 라우터
  • 12. ⓒSaebyeol Yu. Saebyeol’s PowerPoint 5 UI 설계 및 소스
  • 13. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 5 UI설계및소스 메인페이지
  • 14. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 5 UI설계및소스 메인페이지 AboutView.vue
  • 15. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 5 UI설계및소스 메인페이지 Introduce.vue
  • 16. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 5 UI설계및소스 관리페이지
  • 17. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 5 UI설계및소스 관리페이지
  • 18. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 5 UI설계및소스 관리페이지 CoffeeTable.vue
  • 19. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 5 UI설계및소스 관리페이지 CoffeeTable.vue
  • 20. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 5 UI설계및소스 관리페이지 Coffee1Table.vue
  • 21. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 5 UI설계및소스 관리페이지 Coffee1Table.vue
  • 22. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 5 UI설계및소스 db관련 coffee.controller.j s coffee.model.js
  • 23. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 5 UI설계및소스 db관련 coffee1.controller.js coffee1.model.js
  • 24. ⓒSaebyeol Yu. Saebyeol’s PowerPoint 6 개선할 점
  • 25. ⓒSaebyeol Yu. Saebyeol’s PowerPoint Part 6 개선할점 수정, 삭제 뿐만 아니라 조회 버튼을 만들어 버튼을 클릭했을때 일별 판매 수량을 socket을 활용하여 차트로 보여주는 기능이 있었으면 좋았을 껏 같다.
  • 26. ⓒSaebyeol Yu. Saebyeol’s PowerPoint 감사합니다.