프론트엔드 절차

1. 프로젝트 기획

• 디자인과 개발의 기준을 설정하는 과정
• 목적/목표 설정
• 타겟 설정
• 컨셉 설정

2. 웹/앱 설계

• 디자인과 개발을 위한 구체적인 설계
• 플로우 설계
• 화면 설계
• 시스템 설계

3. 디자인

• 기획/설계 기반 디자인 작업 및 리소스 제작
• 디자인 컨셉 설정
• 디자인
• 리소스 제작

4. 개발
   기능 구현 및 배포/운영 환경 구축

• 프론트 엔드 구현
• 백엔드 구현

👉 프론트엔드는 웹/앱 설계와 개발을 맡게 된다.

기획 및 앱 설계 단계에서 개발자가 기여하는 부분

• 프로젝트 기획(디자인과 개발의 기준을 설정하는 과정) -> 웹/앱 설계(디자인과 개발을 위한 구체적인 설계)

• 스펙 제한

• 구현 가능성 여부 검토

• 외부 솔루션 사용 검토

• 개발 일정 관리

기획 및 앱 설계 결과물 검토사항

• 개발 기획/설계를 위한 정보 취득

  • 필요 데이터 모델 확인
  • 필요 기능 확인
  • API 리스트업
  • UI Library 검토

• 프로젝트 툴과 개별 문서 등을 통해 사이트맵, 화면설계, 정책 등을 확인한다.

대시보드

확인한 정보

• 메인 페이지
• 레이아웃 확인
  - 좌측 메뉴, 우측 콘텐츠
• 디바이스 온/습도 컴포넌트
• 디바이스 조회
• 디바이스 별 실시간 온/습도 조회

히스토리

확인한 정보

• 디바이스 선택 컴포넌트
• 날짜 선택 컴포넌트
• 데이터 차트 컴포넌트
• UI 라이브러리 리서치 필요
• 디바이스 조회
• 디바이스 온/습도 데이터 조회
  쿼리 조건(시간)
  

관리

확인한 정보

• 디바이스 선택 컴포넌트
• 디바이스 조회
• 버튼 컴포넌트
• 펌프 동작/중지 요청

API 리스트업 및 스펙 결정

• 필요한 API

• 디바이스 조회
• 디바이스별 실시간 온/습도 조회
• 디바이스 온/습도 조회
• 펌프 동작/중지 요청

• API 리스트
  • [GET]{host}/devices
  • [GET]{host}/data/realtime
  • [GET]{host}/data/devices/:device_id
    👉 query parameters
  • [POST]{host}/cmd/devices/:device_id
    👉 request body
    

---

레이아웃

• 사전적 의미 : 그림이나 글을 제한된 공간에 효과적으로 정리하고 배치하는 일
• 프론트엔드에서 추가적인 의미 : 렌더링되는 컴포넌트 레이어를 배치하는 일

레이아웃 설계

• 화면 설계 문서와 사용환경을 고려하여 레이아웃 설계 가능
• UI 라이브러리의 기능에 따라 디자이너와 협의하여 레이아웃 구현 과정을 줄일 수 있음

config.js

const BASE_URL = "http://localhost:8080/api";

export const API = {
  GET_REALTIME_DATA: `${BASE_URL}/data/realtime`,
  GET_HISTORY_DATA: `${BASE_URL}/data/devices`,
  GET_DEVICES: `${BASE_URL}/devices`,
  POST_CMD: `${BASE_URL}//cmd/devices`,
};

👉 API URL 정보를 config.js를 통해서 받기

---

실시간 대시보드 컴포넌트

컴포넌트 설계

디바이스 실시간 데이터 조회 👉 map 함수로 디바이스 상태 생성 👉 실시간 데이터 조회 인터벌 생성 👉 언마운트 시 인터벌 삭제

실시간 데이터를 가져오는 방법 - polling

데이터를 가져가야할지 말지는 서버가 결정하지만, 그것을 확인하는 건 클라이언트쪽에서 수행해야 한다.

실시간 데이터를 가져오는 방법 - websocket

컴포넌트에서 REST API 요청

• axios npm 패키지 사용
  프로미스 기반의 HTTP 클라이언트
  

// 방법 1
axios.get('/user?ID=12345')
	.then(function (response) {
  // handle success
  	console.log(response);
})
	.catch(function (error) {
  // handle error
  	console.log(error);
})
	.finally(function () {
  // always executed
});

// 방법 2 (조금 더 간단)
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}