[데모 발표] week3

時務二十八條

프로젝트 소개

• Google Forms 클론 코딩

배경 (Background)

• Google Forms는 상당히 많은 기능들을 제공하지만 설문조사에 필수적으로 요구되는 기능들은 많지 않고 구현 난이도가 적절하다
• 필수기능들을 구현하고나서 추가적으로 도전해볼 기능들이 다양하다고 생각해 프로젝트를 진행함에 수월하다
• 비정형 데이터 구조 관리 방법에 대한 학습
• 설문지 응답에 대한 트래픽이 발생하는 상황에서 서버의 부하 관리 경험

https://www.figma.com/file/sywCENjtG6eLJKRrmzOtBi/web28?node-id=0%3A1

프로젝트 목표

• 설문조사를 위한 필수적 기능들을 모두 구현
  • 설문조사를 만들 수 있다.
  • 설문조사를 제공할 수 있다.
  • 설문조사 결과를 확인 할 수 있다.
• 설문조사에 대한 동시 응답자가 몰리는 경우를 대비하여 스트레스 테스트를 진행
• 백엔드에서 할 수 있는 다양한 개선 방안을 찾고 시도하며 대용량 트래픽 처리에 대한 경험

계획 변경

기존 계획	변경된 계획
Week3
• 설문조사 작성 페이지
• 설문조사 응답 페이지
Week3
• 설문조사 작성 페이지 - FE/BE
• 설문조사 응답 페이지 - BE
• 설문조사 결과 페이지 - BE
• 설문조사 게시판 - BE
Week4
• 설문조사 결과 페이지
• 게시판 구현 시도
• 설문조사 게시판	Week4
• 설문조사 응답 페이지 - FE
• 설문조사 게시판 - FE
• 스트레스 테스트
Week5
• 스트레스 테스트
• 백엔드 성능 개선
• 스트레스 테스트 및 로드 밸런싱 구현	Week5
• 스트레스 테스트
• 백엔드 성능 개선

◦ 캐싱
◦ 로드 벨런싱
◦ 메시지 큐
◦ DB 분산 |

현재 아키텍처

스트레스 테스트

• 아틸러리 사용

• 시나리오

  {
    "config": {
      "target": "<http://localhost:8080>",
      "phases": [
        {
          # 10초동안 초마다 1개의 요청을 보냄
          "name": "phase1",
          "duration": 10,
          "arrivalRate": 1
        },
        {
          # 4초동안 4개까지 요청을 점진적으로 증가시킴
          "name": "phase2",
          "duration": 4,
          "rampTo": 4
        }
      ],
      "payload": {
        "path": "options.csv",
        "fields": ["question1", "question2", "question3"]
      },
      "variables": {
        "formId": "637e2d988defe2cc0404ff2c"
      }
    },
    "scenarios": [
      {
        "name": "Response and update",
        "flow": [
          {
            # 설문지 페이지 요청
            "get": { 
              "url": "/api/responses/{{formId}}/response-page"
            }
          },
          { 
            # 10초 대기
            "think": 10
          },
          {
            # 설문지 응답 제출
            "post": {
              "url": "/api/responses/{{formId}}",
              "json": {
                "answerList": [
                  {
                    "questionId": 1,
                    "answer": ["{{question1}}"]
                  },
                  {
                    "questionId": 2,
                    "answer": ["{{question2}}"]
                  },
                  {
                    "questionId": 3,
                    "answer": ["{{question3}}"]
                  }
                ]
              },
              "capture": [
                {
                  "json": "$.responseId",
                  "as": "responseId"
                }
              ]
            }
          },
          {
            # 설문지 수정을 위해 이전에 작성한 응답 가져오기
            "get": {
              "url": "/api/responses/{{formId}}/{{responseId}}"
            }
          },
          {
            # 5초 대기
            "think": 5
          },
          {
            # 설문지 수정 요청
            "patch": {
              "url": "/api/responses/{{formId}}/{{responseId}}",
              "json": {
                "answerList": [
                  {
                    "questionId": 1,
                    "answer": ["{{question1}}"]
                  },
                  {
                    "questionId": 2,
                    "answer": ["{{question2}}"]
                  },
                  {
                    "questionId": 3,
                    "answer": ["{{question3}}"]
                  }
                ]
              }
            }
          }
        ]
      }
    ]
  }
  

이번주 이슈

• 변수명 변경 (formID ⇒ formId)
  • 구현 전에 변수명을 정확하게 정하자
• 응답 json 형식 지정하기

1. chart.js 데이터 형식에 맞게

{
	total_res_cnt: 전체 응답자,
  응답 받기: on/off
	result: [
		{
			type: checkbox or multiple,
		  title: 좋아하는 동물?
		  answer: [고양이, 호랑이, 사자 ...],
		  count: [3, 6, 8 ...],
		  res_cnt: 응답 개수
		},
		{
		  type: 서술형,
		  title: 취미?,
		  answer: [답1, 답2, 답3, ...],
			count: []
		  res_cnt: 응답 개수
		}
	]
}

1. api 사용하는 사람이 보기 좋게

{	
	totalResCnt: 전체 응답자,
  acceptResponse: on/off,
	result: [
		{
		  type: 'checkbox',
		  title: '좋아하는 동물',
		  resCnt: 3,
		  answers: {
		   호랑이: 1,
		   사자: 1,
		   고양이: 1
		   }
		},
		{
		  질문타입: 'multiple',
		  질문제목:  '좋아하는 동물',
		  응답자수: 3,
		  답: {
		    호랑이: 2,
		    사자: 1,
		    고양이: 2
		  }
		},
		{
		  질문타입: 'paragraph',
		  질문제목: '좋아하는 동물',
		  응답자수: 4,
		  답: {
		    호랑이: 2,
		    사자: 1,
		    고양이: 2
		  }
		}
	]
}

최종적으로 2번이 선택되었다.

이번주 구현

• 배포 링크: http://101.101.208.135:3000/
• Client
  • 설문조사 만들기 페이지
• Server
  • 필수적인 api 구현 완료

다음 주 목표

• 서버 터트리기