-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
116 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,57 +1,137 @@ | ||
|
||
# KUSITMS Meetup Team A - 제대로 ( web ) | ||
[대학 제휴 사업을 활용해 대학 상권 활성화를 추구하는 서비스, 제대로] | ||
서비스 ‘제대로’는 학생회, 대학 상권 소상공인 그리고 대학생 간의 유기적인 연결을 통해 많은 대학에서 관례적으로만 진행되고 있는 제휴 사업을 활성화하여 대학 상권의 선순환을 촉진하는 서비스이다. | ||
본 서비스는 웹(Web)과 앱(App), 두 개의 플랫폼이 유기적으로 연결되어 있는 구조가 특징이다. 웹 서비스는 학생회를 타겟 유저로 삼아, 가게와 제휴를 맺은 이후 획득한 데이터를 쉽게 관리할 수 있는 기능을 중심적으로 제공하고 있다. 모바일 앱 서비스의 유저로는 대학생을 타겟으로 삼았으며, 언제 어디서든 소속을 인증하고 혜택 내역을 데이터로 받아볼 수 있는 기능을 중심적으로 제공한다. 이번 프로젝트는 학생회를 대상으로 한 웹(Web) 구축 기반 서비스에 초점을 두어 설명하고자 한다. | ||
|
||
### 핵심 기능 | ||
1) 적절한 제휴 파트너를 찾을 수 있도록 지원하는 가게찾기 기능 및 차후 운영을 위한 가게등록 기능 | ||
2) 학생회와 가게 간 운영 및 사업 현황을 직관적으로 확인하고 상세한 모니터링을 통해 더 나은 협력으로 이어주는 대시보드. | ||
3) 대시보드를 기반으로 매출 상승률 상위 가게를 대상으로 수수료를 청구하는 정산관리 기능 | ||
4) 마지막으로 제휴사업의 효과적인 홍보 및 혜택 제공을 위한 팝업/쿠폰 관리 기능으로 구성된다. | ||
|
||
## Authors | ||
### 배포 링크 | ||
https://jedero.site/ | ||
|
||
|
||
💻 Technology | ||
|
||
-[@EthanLim](https://github.com/Ethan-KerryFather) | ||
-[@SujinKim1127](https://github.com/SujinKim1127) | ||
WEB | ||
|
||
|
||
| FrontEnd | FrontEnd | | ||
| :------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------: | | ||
| <img src="https://avatars.githubusercontent.com/u/50680955?v=4" width=250px alt="임수원"/> | <img src="https://avatars.githubusercontent.com/u/123801984?v=4" width=250px alt="김수진"/> | | ||
| [임수원](https://github.com/Rimoosoo) | [김수진](https://github.com/SujinKim1127) | | ||
Next.js | ||
|
||
Typescript | ||
|
||
React Emotion | ||
|
||
Recoil | ||
|
||
MUI | ||
|
||
|
||
|
||
Server | ||
|
||
Server Application | ||
|
||
Spring Boot | ||
|
||
Spring Security | ||
|
||
Spring Data JPA | ||
|
||
MySQL | ||
|
||
Github Action | ||
|
||
Docker | ||
|
||
Docker Compose | ||
|
||
Co-working-tool | ||
|
||
개발진행상황 동기화 | ||
|
||
Trello | ||
|
||
의사소통 / 회의 | ||
|
||
Slack, Discord | ||
|
||
형상관리 | ||
|
||
Github | ||
|
||
|
||
## Tech Stack | ||
Next.js, Typescript, react-emotion, recoil, mui | ||
|
||
🐾 기술 스택 선정 이유 | ||
|
||
📘 Web 스택 선정 이유 | ||
|
||
## Installation | ||
next.js 선정이유 먼저 검색최적화가 손쉽습니다. html 틀을 받아서 먼저 렌더링 시킨 후 후에 안에 들어갈 내용이나 js코드를 주입하는 리액트와 달리 next.js는 서버에서 애초에 내용을 포함하여 빌드된 코드를 받습니다. 때문에 검색포털에서 봇이 검색엔진을 인덱싱할때 우리 사이트의 내용이 포함되어 검색 결과가 더 잘 노출됩니다. ( 하지만 구글의 검색 엔진은 리액트에도 최적화되어있다고 알려져 있습니다 ) | ||
|
||
Install Frontend with npm | ||
선택할 수 있는 렌더링 방식이 다양합니다. 클라이언트 사이드 렌더링, 서버사이드 렌더링, 정적 사이트 생성 등 페이지에 필요한 렌더링 방식을 선택하여 개발할 수 있습니다. 예시로 어떤 카테고리를 선택한 이후부터 새로고침 깜빡이 현상이 없는 것을 원한다면 그곳부터는 CSR로 개발이 가능합니다. | ||
|
||
```bash | ||
npm install | ||
``` | ||
|
||
## Run Locally | ||
더하여, 리액트의 모든 문법이 호환됩니다. 생명주기, 훅 등 모든 요소가 호환되어, 기존의 리액트에서 넘어오기 어렵지 않습니다. | ||
|
||
Clone the project | ||
api를 직접짤 수 있다는 장점이 있습니다. 이것을 직접 쓸지는 모르겠지만, 리액트에서 타 라이브러리를 불러와서 사용해야했던 것에 비하면 장점이라 칠 만합니다. 마지막으로 페이지 기반 라우팅또한 큰 장점 중 하나입니다. 기존에 라우터를 따로 작성해야했던 것과 달리 구조에 맞춰 파일을 생성하면 자동으로 라우팅된다는 장점이 있어 개발소요를 줄일 수 있고, 직관적인 라우팅이 가능합니다. | ||
|
||
```bash | ||
git clone https://github.com/KUSITMS-Team-A/Frontend-web.git | ||
``` | ||
|
||
Go to the project directory | ||
📗 Server 스택 선정 이유 | ||
|
||
```bash | ||
cd Frontend-web | ||
``` | ||
Spring Boot | ||
|
||
Install dependencies | ||
설정이 간편합니다. 기본 설정을 제공하여 개발자가 복잡한 설정 작업 없이 필요한 부분만 설정하여 애플리케이션을 개발할 수 있습니다. 자동 구성 기능을 통해 프로젝트의 종속성을 기반으로 설정을 자동으로 조정합니다. 스프링 부트에서 지원하는 라이브러리와의 버전이 설정되어있어 라이브러리 버전을 맞추기 위한 시간을 사용하지 않아도 됩니다. | ||
|
||
```bash | ||
npm install | ||
``` | ||
내장형 데이터베이스를 지원합니다. H2, HSQLDB를 사용하여 개발 및 테스트 단계에서 데이터베이스를 사용할 수 있습니다. 데이터베이스를 확인할 수 있는 콘솔을 제공합니다. 또한 메모리 형식으로 데이터베이스를 사용하여 빠르게 테스트를 진행해볼 수 있습니다. | ||
|
||
Start the server ( for dev ) | ||
풍부한 커뮤니티가 구축되어 있습니다. 구글 트렌드 검색 결과 Spring Boot, Node js, Django 세 프레임워크 명에 대한 검색 결과가 51퍼센트를 차지할 만큼 한국내 인기있는 프레임워크이며 그에 따른 다양한 지식들을 쉽게 접할 수 있습니다. 또한 많은 문서 및 튜토리얼이 제공되어 학습에 용이합니다. | ||
|
||
```bash | ||
npm run dev | ||
``` | ||
서비스를 분리하고 확장하기 용이합니다. 서비스의 사이즈가 작아 현재는 모놀리식으로 구성하지만 이후 트래픽의 증가와 서비스 추가로 인한 프로그램의 복잡도가 높아졌을 때 마이크로서비스로의 전환을 고려할 수 있으며, 스프링 클라우드(Spring Cloud)와 통합하여 분산 시스템을 구축할 수 있습니다. | ||
|
||
Spring Security | ||
|
||
Spring Boot과 손쉽게 통합할 수 있습니다. | ||
|
||
인증, 권한 부여, 세션 관리, CSRF(크로스 사이트 요청 위조) 및 보안 헤더 관리와 같은 다양한 보안 기능을 제공합니다. | ||
|
||
다양한 인증 및 인가 방식을 지원합니다. 폼 기반 인증, HTTP 기본 인증, OAuth, JWT(토큰 기반 인증) 등을 사용할 수 있습니다. | ||
|
||
다양한 사용자 정의 가능한 확장 포인트를 제공하므로 프로젝트의 고유한 보안 요구 사항을 충족시킬 수 있습니다. 다양한 인터페이스를 구현하여 사용하여 목적에 맞게 변경하여 사용할 수 있으며 다양한 필터에 필요한 작업들을 추가하여 인증, 인가에 필요한 작업을 수행할 수 있습니다. | ||
|
||
Spring Data JPA | ||
|
||
복잡한 JDBC 코드를 작성하지 않고도 데이터베이스에 쉽게 접근할 수 있도록 도와줍니다. 개발자는 JPA 엔티티 클래스를 정의하고 간단한 인터페이스를 작성하여 코드 추가 없이 CRUD(Create, Read, Update, Delete) 작업을 수행할 수 있습니다. 메소드 이름을 기반으로 쿼리를 자동으로 생성하는 기능을 제공합니다. 이를 통해 생산성을 향상할 수 있습니다. | ||
|
||
JPA를 사용하면 데이터베이스 테이블과 Java 객체 간의 매핑을 쉽게 수행할 수 있습니다. 이를 통해 객체지향적인 코드를 작성하면서 데이터베이스와의 일관성을 유지할 수 있습니다. | ||
|
||
다양한 데이터 소스 (예: MySQL, PostgreSQL, Oracle, MongoDB)와 함께 사용할 수 있으며, 데이터베이스 변경 시에도 코드를 수정하지 않고 데이터 소스를 교체할 수 있습니다. | ||
|
||
페이징 및 정렬을 처리하기 위한 내장 메소드와 애노테이션을 제공합니다. 이를 사용하여 대용량 데이터셋을 효과적으로 관리할 수 있습니다. | ||
|
||
MySQL | ||
|
||
MySQL은 오픈 소스 라이선스를 사용하며, 무료로 사용할 수 있습니다. | ||
|
||
국내 MySQL, PostgreSQL, MariaDB 세 관계형데이터베이스에 대한 검색 중 65%가 MySQL일 정도로 국내의 많은 사용자를 보유하고 있습니다. 따라서 MySQL에 대한 풍부한 해석된 문서와 활발한 개발자 커뮤니티가 존재하며, 문제 해결과 지원을 얻기 쉽습니다. | ||
|
||
|
||
main : develop 에서 테스트를 마친 후 운영 서버에 배포되는 브랜치 | ||
develop : 기능 구현 후 개발 서버에 배포되는 브랜치 | ||
feature : 각각의 기능을 개발 및 수정하는 브랜치 | ||
hotfix : 오류 등 main에 병합된 이후 수정이 필요한 경우 사용하는 브랜치 | ||
|
||
|
||
|
||
## Authors | ||
|
||
|
||
|
||
-[@EthanLim](https://github.com/Ethan-KerryFather) | ||
-[@SujinKim1127](https://github.com/SujinKim1127) | ||
|
||
|
||
| FrontEnd | FrontEnd | | ||
| :------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------: | | ||
| <img src="https://avatars.githubusercontent.com/u/50680955?v=4" width=250px alt="임수원"/> | <img src="https://avatars.githubusercontent.com/u/123801984?v=4" width=250px alt="김수진"/> | | ||
| [임수원](https://github.com/Rimoosoo) | [김수진](https://github.com/SujinKim1127) | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters