✍ 프로젝트 소개

Link

ETON 바로가기

1. LOGO

2. About

답답한 원격 회의, 칸반 보드를 통해 작업을 시각화해보세요.
노트(NOTE) 작성의 혁명 ETON 입니다.

3. 기술 스택 소개

✍ 팀원 소개 및 역할 분배

김선미 Front-end, 팀장

• Board Page (Drag & Drop 기능 구현), 전체적인 CSS 통일 작업, 업무 분배 및 스케줄 조정
• github 바로가기
• 회고록 포스팅

임재현 Full

메인페이지, 회원가입, 서버

이창섭 Back-end

API 작성, 배포

✍ 기획

I. 핵심 기능

1-1. Drag & Drop

1-2. 알고리즘

II. Flow Chart

III. Wireframe

IV. DB Schema

V. API 문서 요약 리스트

• method, Restful API 고민 흔적

Restful API를 만들기 위한 회의기록

1차

페이지별로 나눠서 분기하자!

 GET /board/:board_id
 GET /board/progress/:board_id/member/:progress_id
 GET /board/task/:board_id/:progress_id/:task_id
 GET /board/member/:board_id

2차

1차에서의 문제점

• 1 : 보드페이지에 많은 기능이 있기 때문에 거의 모든 api의 엔드포인트가 /board로 시작해 분별이 어려움.
• 2 : 다른 페이지에서도 보드 페이지에서 쓰이는 api들을 쓸 경우가 있음. (ex.메인 페이지에서도 보드 목록과 태스크 목록을 요청한다.)
• 3 : /board/progress/:board_id/member/:progress_id 처럼 엔드포인트 중간에 board_id등으로 Path Variable를 넣어 분기해줄 경우, 분별하기가 어렵고, 분기도 잘 되지 않는다.

해결책

• 1 : 페이지 별로 분기하는 것이 아니라 기능별로 분기
• 2 : Path Variable을 제일 마지막으로

  GET /boards/:board_id
  POST /boards/:board_id
  GET /progress/:board_id 
  POST /progress/:board_id

3차(최종)

2차에서의 문제점

• 1 : 여러가지 변수들을 POST Method가 아닌 다른 방식으로 보낼 수 없다. (ex.Delete Task 의 경우 여러가지 board_id , progress_id 등 여러 변수가 필요하지만 Delete Method 의 경우 Request Body 에 변수를 담아 보낼 수 없다)
• 2 : 각 분기별 router 는 method (get, post, patch, delete)로 대부분 분리가되지만 분기가 더 필요한 경우가 있다. (ex.patch 의 경우 한번더 분기가 필요)

해결책

• 1 : Query Parameter를 활용하여 여러가지 변수를 담아 보내준다. (ex.https://geteton.ga/taskboard_id=BOARD_ID&progress_id=PROGRESS_ID&task_id=TASK_ID&task_priority=TASK_PRIORITY)
• 2 : 필요한 경우 중간에서 한번 더 분기해준다. (ex. 보드 하나의 정보를 가져오는 엔드포인트와 유저의 모든 정보를 가져오는 엔드포인트 GET https://geteton.ga/boards/one?board_id=BOARD_ID, https://geteton.ga/boards/all?user_id=USER_ID)

GET /progress/order/boardId?=BOARD_ID
GET /progress/title/boardId=?BOARD_ID&progressId=PROGRESS_ID
DELETE /task?board_id=BOARD_ID&progress_id=PROGRESS_ID&task_id=TASK_ID&task_priority=TASK_PRIORITY

• 회의 기록 codestates/ETON-server#54 (comment) 더 자세한 내용은 API 문서 PDF

VI. Deploy

AWS EC2

• Ubuntu Server 18.04 LTS (HVM), SSD Volume Type
• 루트 디바이스 유형: ebs
• 가상화 유형: hvm
• ENA 활성화

AWS Load Balancer

Application Load Balancer

• HTTP 및 HTTPS 트래픽을 사용하는 웹 애플리케이션을 위한 기능 제공
• 애플리케이션 아키텍처를 대상으로 하는 고급 라우팅 및 표시 기능 제공

AWS RDS

• 엔진 옵션: MySQL (v8.0.20)
• DB 인스턴스 크기: db.t2.micro (1 vCPUs, 1 GiB RAM, Not EBS Optimized
• 스토리지: 범용(SSD), 20GiB

Amazon S3 + CloudFront

• HTTPS 배포
• S3 직접 공유에 비해 비용 절감

Route 53

도메인

• S3: eton-project.ga
• EC2: geteton.ga

✍ Final App view

1. Intro page

2. SignUp

3. SignIn

4. Main Page

정보 수정

새 보드 추가

5. Board Page

Drag & Drop

추가

Task 수정

Board / Progress 이름 변경

삭제

회고록 및 시행착오

• 김선미 회고록 포스팅