설문지 만들기(NodeJS)

설문지 만들기(NodeJS)

설명

설문지 폼을 json 파일로 정의하면, 설문지를 만들어 주는 사이트이다.

요구사항

1. 설문지에는 다향한 컴포넌트들을 json으로 정의하여 사용할 수 있다. 참고) https://surveyjs.io/create-survey

2. 약속된 형식에 맞게 작성한 json을 입력하고 “설문지 만들기”를 하면 설문지를 보여준다.

3. 설문지 폼에서 입력을 받는다.

4. 작성한 응답을 json으로 출력한다.

개발 환경

화면 구성

설문지 리스트

• DB에 저장된 설문지 리스트 조회
• 설문지를 클릭하면 설문지 작성 페이지로 이동

• 결과 조회 클릭 시, 해당 설문지에 응답한 결과들을 조회 할 수 있다.

설문지 생성

• 설문지를 생성하기 위한 JSON을 입력

설문지 작성(응답)

• 설문지 작성

설문 결과

• 설문지 결과 출력

데이터 베이스

Table: survey

속성명	타입	키여부	설명
id	int	PK
survey_name	string		양식의 title
survey_json	json		설문지 생성을 위한 JSON 문자열
created_at	timestamp		생성된 날짜와 시간

Table: survey_result

속성명	타입	키여부	설명
id	int	PK
survey_id	int	FK	작성된 설문지의 PK
result	json		설문 결과에 대한 JSON 문자열
created_at	timestamp		생성된 날짜와 시간

기능 구현

NodeJS(Express)

BackEnd 구조

Http API를 통해 DB 접근 및 조작

• GET /api/survey
  • 설문지 리스트 조회
• GET /api/survey/:surveyId
  • 설문지 조회
• POST /api/survey
  • 설문지 저장
• POST /api/survey/:surveyId/result
  • 설문 결과 저장
• GET /api/survey/:surveyId/result
  • 설문 결과 리스트 조회
• GET /api/survey/:surveyId/result/:resultId
  • 설문 결과 조회

React

• 라라벨에서 api를 제외한 모든 접근을 react에 넘겨 화면에 대한 라우팅은 react에서 처리한다.

• DB 데이터 조회와 저장은 Express에서 정의된 api를 통해 axios(을)를 통해 api로부터 요청한다.

• 설문지 생성을 위한 json 입력 폼은 react-ace를 활용
• 설문지 생성은 survey-react를 활용

survey-nodejs