목차

소개	구현	마치며
📖 개요	🎯 주요 페이지 및 기능	👦 팀원
💡 프로젝트 기획	🚀 기능시연	📣 소감
🌵 빌드 환경	👀 산출물	🌱 회고 기록
	📚 파일 구조도

소개

📖 개요

👏 SSAFY 9기 2학기 자율 프로젝트 👏
PostMan의 오픈소스 서비스를 개발해보자

2023.10.09 ~ 2023.011.17 (6주)

🔼 목차로 돌아가기

💡 프로젝트 기획

배경

"프로젝트 개발에서 PostMan을 필수로 이용하는데, 4명 이상부터는 요금이 나오는게 부담 돼.."

기존의 API 테스트 서비스로 가장 유명한 PostMan은 4명 이상부터 요금이 발생합니다. 최저 요금이 인당 월 14달러(약 18,000원)로 간단한 프로젝트에서는 부담이 될 수 있습니다. SAPIER에서는 이러한 API 테스트 서비스를 오픈소스로 구현하는 것을 주제로 하였으며, 무료로 서비스를 이용할 수 있습니다.

"프론트 개발에서 API 명세서, VScode, 크롬 창, 메신저...등 켜놔야 할 창이 너무 많아 불편해"

프론트엔드 개발자는 켜놔야 하는 창이 많아 창 관리가 필수입니다. SAPIER는 크롬 익스텐션 기능을 지원해, API 명세서를 크롬 창 안에서 볼 수 있도록 해서 열린 창 수를 줄일 수 있습니다.

"워크스페이스가 많아지면 이름으로 구분해야해서 UI가 조금 불편해지는 것 같아"

PostMan의 워크스페이스 리스트나 각 요청들의 메소드 및 결과가 직관적인 UI가 아니어서 한 눈에 구분하기 어렵다는 단점이 있습니다. MatterMost의 채널 리스트 UI 등을 참고해 좀더 직관적이고 단순한 UI로 디자인을 개선해보고자 했습니다.

🔼 목차로 돌아가기

🌵 빌드 환경

FrontEnd	BackEnd	Database	Infra
Vue 3.3.7	Java 17 (Azul Zulu version 17.0.9)	MongoDB 7.0.2	AWS EC2 (Ubuntu 20.04 LTS)
Vite 5.0.0-beta.12	Spring Boot 3.1.5	Redis 7.2.2	Nginx 1.18.0
VueUse(core) 10.5.0	Gradle 8.3		GitLab CICD
UnoCSS 0.57.1	JPA		Jenkins 2.429
vite-plugin-vue-devtolls 1.0.0-rc	IntelliJ IDEA 2023.2.5 (Ultimate Edition)		Docker 24.0.6
typescript 0.57.1	Lombok
Pnpm 8.9.2	Mail
Pinia 2.1.7	JWT
Pinia-plugin-persist 1.0.0	Spring Data MongoDB
Pinia-plugin-persistedstate 3.2.0	Swagger
vue-json-pretty 2.2.4
vue-router 4.2.5
vue3-ts-jsoneditor 2.9.0

🔼 목차로 돌아가기

구현

🎯 주요 페이지 및 기능

Intro

인트로 페이지 입니다. '시작하기' 버튼을 누르면 로그인 페이지로 이동합니다.
로그인이 되어있다면 메인 페이지로 이동합니다.

Login & Regist

로그인 페이지입니다. 구글과 깃허브 소셜 로그인이 가능합니다.
첫 로그인시 회원가입됩니다.

Main

메인페이지입니다. 좌측에 워크스페이스 리스트와 로그인한 소셜 계정의 정보가 나타납니다.
최근 방문한 워크스페이스 정보와 알람 리스트가있습니다.

Workspace

Overview	Document 생성
워크스페이스 첫 화면입니다. 간단한 설명 및 내부 컬렉션을 즐겨찾기 해둘 수 있습니다.	좌측 상단의 '+' 버튼으로 Document를 생성할 수 있습니다.

Workspace 수정	Workspace 세팅
워크스페이스에 대한 설명란을 수정한 모습입니다.	setting탭에 들어간 모습입니다. 워크스페이스 이름과 색상 등을 변경할 수 있습니다.

Workspace 초대	초대 수락	초대 확인
이메일로 다른 사용자를 워크스페이스에 초대할 수 있습니다.	이메일 온 모습이며, 링크를 누르면 수락됩니다.	초대를 수락하면 Overview 우측 하단에 Contributors에 사용자 목록이 나타납니다.

사용자 권한 설정	Workspace 나가기
워크스페이스 멤버의 권한을 admin, member, viewer로 나누어 설정할 수 있습니다.	setting 란 최하단에서 워크스페이스를 떠나거나 삭제할 수 있습니다.

Collection

Document 옵션	Collection 옵션
document의 옵션에서 하위 컬렉션추가, 도큐먼트 삭제, 도큐먼트 이름 변경이 가능합니다.	collection의 옵션에서 하위 컬렉션 추가, 컬렉션 삭제, 리퀘스트 추가, 컬렉션 이름 변경이 가능합니다. 리퀘스트 옵션에선 삭제가 가능합니다.

Request

Request 전송	Request Params
메서드를 선택하고 URL을 입력 후 'Send' 버튼을 누르면 API 요청을 보낼 수 있습니다. 응답 결과는 하단 Response 란에 나타납니다.	Params 탭에서 파라미터를 수정할 수 있습니다. API요청 시 쿼리 파라미터로 전송됩니다.

Request 메서드	Request 저장
http 메서드를 수정할 수 있습니다.	리퀘스트에 입력 된 정보를 바꾸면 우측 상단 'Save' 버튼이 활성화 되고, 누르면 저장됩니다.

Request Headers	Request Body
리퀘스트의 헤더를 설정할 수 있습니다. active 체크박스를 통해 행의 활성/비활성을 설정 할 수 있습니다. key-value로 헤더를 설정하고 Description에 설명을 적을 수 있습니다.	바디에는 json형식으로 데이터를 담을 수 있습니다. vue3-ts-jsoneditor의 에디터로 데이터를 텍스트 및 트리구조로 확인 및 수정할 수 있습니다.

Request 400 error	Request 500 error
응답 결과가 404인 모습입니다. 상태코드가 붉은색 바와 함께 보여집니다.	응답 결과가 503인 모습입니다. 상태코드가 노란색 바와 함께 보여집니다.

History

보낸 리퀘스트 요청들을 확인할 수 있습니다. 어느 워크스페이스의 무슨 메서드 요청인지 확인할 수 있고, 응답 상태코드와 걸린 시간이 표시됩니다.
히스토리 목록에서 요청기록을 클릭하면, Request와 똑같이 요청정보가 나타나고, 저장이나 요청으로 응답을 확인할 수 있습니다.

Extenstion

팝업	로그인 성공
크롬 확장프로그램으로 SAPIER 서비스를 이용할 수 있도록 구현했습니다. 로그인 페이지와 같이 소셜로 로그인할 수 있습니다.	로그인이 성공하면, 로그인 성공 페이지로 이동합니다.

플로팅 1	플로팅 2
확장프로그램에서 소셜로그인하면 우측 하단에 버튼이 나타납니다. 버튼을 클릭하면 플로팅 페이지가 나타나서 SAPIER 서비스를 이용할 수 있습니다.	확장프로그램에서 Request를 보내고 응답을 받은 모습입니다.

🔼 목차로 돌아가기

🚀 기능시연

로그인
- 소셜 로그인 시 메인 페이지 이동

워크스페이스
- 워크스페이스 Overview에서 설명 편집 가능 - Setting에서 이름, 색상 설정 가능 - 이메일로 멤버 초대 가능 - 워크스페이스 떠나기 및 삭제 가능

컬렉션
- 컬렉션 생성 및 이름 수정, 삭제 가능 - 하위 컬렉션 및 리퀘스트 생성 가능 - 리퀘스트 삭제 가능

리퀘스트
- 컬렉션 리스트에서 리퀘스트를 누르면 우측에 정보 표시 - 리퀘스트 제목, 메서드, URL, 파라미터, 헤더, 바디 수정 가능. 수정하면 'Save'버튼이 활성화 되고 누르면 저장 됨 - 파라미터와 헤더는 표 형식으로 active를 통해 행 활성/비활성 가능 - 입력 된 정보로 요청을 보내 응답 확인가능 - 응답은 200대는 초록, 400대는 빨강, 500대는 노랑으로 상태코드와 함께 색상이 표시 됨 - 응답 정보는 헤더와 바디로 표시되고, 각각 key-value와 json형식으로 표시 됨

히스토리
- 보낸 요청 기록을 확인할 수 있음 - 날짜별로 구분되고, 요청이 소속된 워크스페이스가 표시 됨 - 요청마다 메서드와 제목이 표시되고, 응답 결과의 상태코드와 소요시간이 나타남 - 요청기록을 클릭하면, Request와 마찬가지로 정보가 입력되고, 같은 기능을 사용할 수 있음

팝업 로그인	플로팅 컬렉션	플로팅 리퀘스트
팝업 소셜로그인 및 성공 페이지	플로팅에서 컬렉션 생성/수정/삭제	플로팅에서 리퀘스트 요청 및 응답화면

🔼 목차로 돌아가기

👀 산출물

요구사항명세서	API 명세서

와이어 프레임	목업 디자인	데이터플로우

시스템 구조도	지라 이슈

지라 번다운 차트

2주차 스프린트	3주차 스프린트	4주차 스프린트

5주차 스프린트	6주차 스프린트

최종발표 ppt

🔼 목차로 돌아가기

마치며

👦 팀원

강수민	김승용	김재원	조성락(팀장)	천원준	최경인
FE Leader BackEnd PM Design	BackEnd FrontEnd	FrontEnd Extension	BackEnd FrontEnd DataBase	BackEnd FrontEnd Infra	BackEnd FrontEnd

팀원 역할 상세

강수민

• BE : Request API 요청 처리
• FE
  • Request 컴포넌트 구현
  • Params 컴포넌트 구현
  • Headers 컴포넌트 구현
  • Body 컴포넌트 구현
  • Response 컴포넌트 구현
  • JSON Viewer & Editor 적용
  • Request, Response 창 조절 이벤트 구현
  • Category, Collection Tree 컴포넌트 리펙토링
    • 재귀 구조 정리
    • Props 및 이벤트 정리
• 와이어 프레임, 목업 디자인
• 스크럼, 데일리 회고 관리

김승용

• Spring Boot 와 mongo data JPA를 활용한 Workspace 기능 API 구현

• Spring Boot를 활용한 메일 초대 기능 구현

• Vue3를 활용한 페이지 구현

  • WorkSpace 생성 컴포넌트
  • overview 컴포넌트
  • setting 컴포넌트

김재원

• Vue3를 사용한 프론트엔드 구현

  • Pinia를 사용한 상태관리
  • 메인 페이지 구현
  • 라우트 네비게이션 가드 구현

• 크롬 익스텐션 개발

  • 팝업페이지, 인젝션 스크립트 페이지 구현
  • 로그인 팝업, 워크스페이스 플로팅 페이지 구현

조성락

• Spring Security를 이용한 인증/인가
  • Oauth2.0을 이용한 소셜로그인 구현(구글, 깃헙)
  • 유저 권한에 따른 허용가능 API 분리
• JWT 토튼 발급, 재발급 및 커스텀 필터 구현
• Vue3를 이용한 홈페이지 화면구현
  • 로그인 화면
  • 인트로 화면
  • 유저정보 화면

천원준

• Docker, Jenkins를 활용한 Front-End, Back-End CI/CD 파이프라인 구축
• Spring Boot 및 MongoDB 활용한 History 기능 API 구현
• Vue.js3 활용한 History 페이지 화면 구현

최경인

• UCC 촬영/제작
• collection의 트리형식 폴더 구조를 중첩리스트와 Vue.js를 사용하여 구현
• spring boot와 mongo data JPA 를 활용한 folder 구조 CRUD REST API 구현

🔼 목차로 돌아가기