09. SuerveyPie 설계

9-1 요구사항 분석

 

9-2 컴포넌트 구조 설계

리액트는 컴포넌트 단위로 개발이 이루어지기 때문에 컴포넌트를 잘 구성하는게 중요하다.

 

 

 

9-3. 데이터 정의

데이터 정의

 

설문조사 데이터

(각 질문 데이터, 고유 번호, 생성 날짜)

 

질문 데이터

(질문 내용, 설명, 필수 여부, 옵션)

 

응답 데이터

 

 

9-4 프로젝트 세팅 및 환경설정

프로젝트 생성 : npx create-react-app survey-pie

 

prettier, eslint 설정 먼저 진행

 

{

  "trailingComma": "all",

  "singleQuote": true,

  "tabWidth": 2,

  "semi": true

}

 

 

 

아래 명령은 dev-dependency에 설치를 하는 커멘드

npm install --save-dev eslint-plugin-simple-import-sort

아래 package.json에 추가된 것 확인 가능

 

https://github.com/lydell/eslint-plugin-simple-import-sort

import 명령어들 sort 잘 되도록 지원해주는 라이브러리(플러그인)

 

 

 

 

9-5 기본 컴포넌트 구현