Project 기록/대기정보알리미웹 (6) 썸네일형 리스트형 대기정보알리미 UML diagram(usecase, class, sequence) 대기 정보알리미 웹 프로그램의 UML 다이어그램이다 과제 제출용이니 전문성 없다. UML다이어그램은 통합 모델링 언어를 사용하여 시스템 상호작용, \업무흐름, 시스템 구조, 컴포넌스 관계등을 그린도면이다 프로그래밍을 단순화 시켜 표현하여 의사소통하기 좋고 대규모 프로젝트 구조의 로드맵을 만들거나 개발을 위한 시스템 구축에 기본을 마련한다. 사용자 요구사항 요구 사항이란, 소프트웨어를 사용할 고객 또는 그것의 개발과 관계되는 사람들이 출시 될 소프트웨어에 대해 바라는 모든 것들을 말한다. 이것을 수집하는 것은 소프트웨어를 개발하기 위한 시작점이고 어떤 사항들이 수집되는지, 그 중 어떤 것들을 구현하기로 결정하는가에 따라 소프트웨어의 개발 방향이 달라질 수 있다. customer에게 제안 받은 요구사항이다 .. 상태(state값)에 따라 출력 이미지를 다르게 해보자 (React) 과제로 프로젝트 진행 중이다. 미세먼지 농도 데이터를 받아 오는데 API명세를 보면 등급 값에 따라 1,2,3,4(좋음,보통,나쁨, 매우나쁨)으로 나뉜다. 나는 이것을 받아온 Grade값에 따라 이미지를 다르게 하여 그림으로 보여주고싶다 그림 4개를 준비해야한다. 교수님이 스타를 좋아하신다 // default 이미지 우선 사용할 .js파일에 import import bad from '../marine/bad.jpg';//bad 나쁨 import good from '../marine/good.jpg';//good 좋음 import middle from '../marine/middle.jpg';//middle 보통 import sobad from '../marine/sobad.jpg';//sobad 매우나쁨.. 빙글빙글 돌아가는 프로그레스(progress)를 만들자 (React,meterial-ui) 데이터를 요청하고 받을 때 까지 뭐가 ui적으로 눈에 보이면 좋다. 이게 돼가는지 안돼가는지 봐야 된다. 얘를 들면 요론거 버튼을 눌러 데이터를 요청하고 받아오기 전까지 저 프로그레스가 떴으면 좋겠다. 해보자 난 react에서 제공해주는 material-ui를 사용했다 여기가면 무료로 사용할 수 있다 material-ui.com/ 먼저 material ui를 사용하기 위해 패키지 설치 npm install @material-ui/core 좌측 메뉴 Component - Feedback 에 가면 Progress 보인다 나 이걸 사용하고 싶다. 소스코드와 함께 친절하게 있다 사용하고 싶은 .js파일에 import 해주기 // style은 안쓸거다 저거만으로 예쁘니깐 import CircularProgress.. 공공데이터API(미세먼지경보발령) 웹에 사용해보자(react,node.js) 저번 포스트와 같은 프로젝트이기 때문에 생략된부분이 있을 수 잇습니다. 내가 사용 할 공공데이터포털의 API다 공공데이터포털: www.data.go.kr/index.do 검색창에 ↓요래 치면 나온다 사용자가 "지역"을 검색했을 때 그 "지역"의 가장 최근 발령 현황을 알려주고 싶다. 왜냐하면 과제이기 때문이다. API명세를 보면 아래 글을 찾을 수 있다. 문제가 있다. 나는 '지역'을 검색하고 싶은데 "조회연도"를 입력하여 경보조회를 한다. 가공해 보자 그래서 나는 조회연도를 2020으로 하고 최근 100개 데이터를 뽑아오고 , 제일 최근 데이터를 보여줄꺼다 먼저 프론트앤드이다. '경남'을 선택 후 "클릭"버튼을 누르면 서버에 요청을 하고 빈공간에 내용이 출력되게 한다 우선 state 값 construc.. 공공데이터API(미세먼지) 활용하여 웹을 만들어보자②(react,node.js) 이제 서버페이지에서 공공데이터와 연결해보자 나의 서버페이지의 경로는 요래생겼다 왜이렇게했는지는 모른다 걍 익숙하다. body-parser, cors, express 모듈을 사용했다. const express = require('express'); //익스프레스 모듈 가져오기 const app = express(); const cors = require('cors'); //cors를 사용하고 싶다 const bodyParser = require('body-parser'); //body-parser을 사용하고 싶다 const port =5000; //서버포트는 5000번 포트 const route = require('./routes/index'); //router가 있는 곳이다 만들 index.js다 app.. 공공데이터API(미세먼지) 활용하여 웹을 만들어보자①(react,node.js) 소프트웨어 공학 수업 과제이다. 상대방의 요구사항 제안서를 살펴보자 custumer가 요구하는 usecase이다 . 지역선택 후 -> 그 지역의 미세먼지 검색과 미세먼지 주의보 발령상황, 생활기상지수를 조회 할 수 있어야한다. 다음은 custumer의 기능적/비기능적/도메인 요구사항이다. 잘 참고하자 . 1) 기능적 요구사항 - 현재 미세먼지 및 초미세먼지 수치를 출력한다. - 현재 생활기상정보를 출력한다. - 현재 주의보 발령 상황을 출력한다. 2) 비기능적 요구사항 - 전국 도 별 정보를 알려 준다. - 지수를 알려주되 좋고, 나쁨의 기준은 WHO에서 권고하는 기준을 따른다. - 미세먼지의 농도는 실시간으로 업데이트된다. 3) 도메인 요구사항 - 한국에서만 사용할 수 있어야한다. - 웹에서 사용이 가.. 이전 1 다음
