커리큘럼 목록으로
세션 개요
부서 내 의견 수렴, 행사 선호도 조사, 직원 만족도 조사 등 다양한 용도로 활용할 수 있는 설문조사 시스템을 만들어봅니다. 실시간 결과 집계 기능을 구현합니다.
학습 목표
다양한 입력 타입 구현 (라디오, 체크박스 등)
사용자 친화적인 폼 디자인
데이터 집계 및 시각화 (Chart.js)
유효성 검사 구현
동작 원리
사용자가 폼(Form)에 입력한 데이터를 서버로 전송하고, 서버는 이를 집계하여 통계 데이터를 만듭니다. 프론트엔드는 이 통계 데이터를 받아 차트 라이브러리로 그립니다.
실습 단계
1
📁 폼 UI 구성
설문조사 화면 만들기
PROMPT
직원 만족도 조사 폼을 만들어줘. 이름(텍스트), 부서(셀렉트), 만족도(1-5 라디오), 건의사항(텍스트에어리어)을 포함해줘.
2
🤖 서버 연동
응답 저장 API
PROMPT
설문 응답을 받아서 저장하는 POST /api/survey 엔드포인트와, 현재 결과를 집계해서 보여주는 GET /api/stats 엔드포인트를 만들어줘.
3
📊 시각화
Chart.js 연동
PROMPT
Chart.js CDN을 사용해서, 만족도 분포를 파이 차트로 보여주는 대시보드 페이지를 만들어줘.
완성 체크리스트
- 설문 제출 시 DB에 정상 저장됨
- 결과 페이지에서 차트가 그려짐
- 새로운 응답이 차트에 실시간 반영됨 (새로고침 시)
- 필수 항목 누락 시 경고창 뜸
자주 묻는 질문 (FAQ)
Q.차트가 안 나와요.
A.Canvas 태그의 ID가 스크립트와 일치하는지, 데이터 형식이 Chart.js가 요구하는 포맷과 맞는지 확인하세요.
준비사항
- •Session 7 완료
- •Chart.js 라이브러리 (CDN) 확인
사용 기술
HTML Forms
다양한 입력 양식 구현
(Radio, Checkbox)
Chart.js
데이터 시각화 라이브러리
(파이/막대 차트)
Backend Logic
데이터 집계 및 통계 처리
Next Session
이벤트 신청 앱 만들기
다음 단계로 넘어가기
Instructor Notes (강사 노트)
💡
팁
Chart.js 공식 문서를 함께 보며 옵션을 변경해보는 실습을 하면 흥미를 높일 수 있습니다.