오늘 학습한 내용
- 콘텐츠모델, 시멘틱마크업
- (미니프로젝트) fine dust 앱 기획
HTML
콘텐츠 모델
html5는 html 요소의 성격에 따라 요소의 종류를 정의하는 규칙이 있다. 그것이 콘텐츠 모델이다.
콘텐츠 모델은 위와 같이 7개로 나눌 수 있다.
metadata
메타데이터는 콘텐츠의 style, script를 설정하거나 다른 문서와의 관계 등의 정보를 포함하는 요소이다.
특징은 이 태그 대부분이 head태그에 들어가는 태그이다.
<meta>
<title>
<style>
<script>
<link>
<base>flow
대부분의 요소들이 flow모델에 해당한다. 문서 내에 자연스러운 흐름에 의해 배치되는 태그들이고 일부 메타데이터 태그들만 플로우 모델에서 제외된다.
sectioning
문서의 구조와 관련된 모델들이 들어가게 된다. header, nav, footer, section 등의 태그가 포함된다.
heading
섹션의 헤더를 정의하는 요소들이다. h1~6태그들이 해당된다.
phrasing
문서의 텍스트이며, 문단 내부 레벨로 마크업하는 요소들이다.
embedded
이미지, 비디오, 플래시 등 외부 콘텐츠를 문서 내에 표현하는 요소들이 해당된다. 임베디드 모델들은 모두 프레이싱 모델에 포함된다.
interactive
사용자와 상호작용 하는 요소들이다. form 요소들이 여기에 해당된다.
시멘틱 마크업
시멘틱 마크업은 컴퓨터가 잘 이해할 수 있는 코드를 의미한다. 아래의 예시를 보면,
<b>굵은</b> vs <strong>중요한</strong>
<i>기울어진</i> vs <em>강조하는</em>
<u>밑줄친</u> vs <ins>새롭게 추가된</ins>
<s>중간선이 있는</s> vs <del>삭제된</del>굵은 vs 중요한
기울어진 vs 강조하는
밑줄친 vs 새롭게 추가된 //착한 사람 눈에만 보이는 밑줄입니다
중간선이 있는 vs 삭제된
각각 사용된 태그가 다르지만 실제 출력된 결과물은 같은 효과가 적용된 것을 볼 수 있다. 왼쪽 글씨들은 단순히 글자에 효과가 붙은 것이고, 오른쪽 글씨들은 의미 있는 태그가 붙은 것이다.
세일하는 상품의 가격표를 예로 들면
<s>$100</s> vs <del>$100</del>
<u>$30</u> vs <ins>$30</ins>$100
$30 //착한 사람 눈에만 보이는 밑줄입니다
결과물의 형태는 같지만 컴퓨터는 왼쪽 글씨는 단순히 중간선이 있고 밑줄이 붙은 글씨라고 인식하는 반면 오른쪽 글씨는 삭제되었고 새롭게 추가된 글씨라고 인식한다.
퀴즈 세개 통과
fine dust 프로젝트
api 호출
서울시에서 제공하는 공공 api를 활용해 실시간 미세먼지 정보를 보여주는 간단한 프로젝트를 기획했다.
기획의도는 친구들과 만날 때 이 사이트를 제공해 재미를 추구하는 것이었는데, 약속 당일에 약속장소에서 볼 수 있게 만들 것이므로 개발이 끝나면 모바일 전용 css를 입혀줄 것이다.
서울시 웹사이트에 회원가입하고 간단하게 인증키를 발급받아 순조롭게 시작했다.
import { useState, useEffect } from "react";
function App() {
const API_KEY = "6d6963625639326336367955437056";
const [dust, setDust] = useState();
const [loading, setLoading] = useState(true);
const getDust = async () => {
const response = await fetch(`http://openAPI.seoul.go.kr:8088/${API_KEY}/json/RealtimeCityAir/1/5/도심권/용산구`);
const json = await response.json();
//console.log(json.RealtimeCityAir.row);
setDust(json.RealtimeCityAir.row);
setLoading(false);
}
useEffect(() => { getDust() }, []);
console.log(dust);
return (
<div>
<div>{loading ? <span>loading ...</span> :(
<h1>서울시 미세먼지 정보</h1>
<h2>{dust.MSRSTE_NM}</h2>
<span>미세먼지 : {dust.PM10} ㎍/㎥</span>
<span>초미세먼지 : {dust.PM25} ㎍/㎥</span>
<span>통합 대기 환경 등급 : {dust.IDEX_NM}</span>
)}
</div>
</div>
);
}
export default App;이전에 학습했던 것의 복습 차원이라 쉬울 줄 알았더니 내가 원하는 값이 출력되지 않는 문제가 발생했다. 내가 원하는 값이 아니라 api로 받아온 어떤 값도 출력이 안 됐다.
혹시 경로 실수인가 하고 console.log 로 위치를 찍어봤는데 딱히 문제 없어보였다.
(*오류를 찾는 와중에 인접한 요소들을 태그로 묶어주지 않은 것을 발견해서 div로 묶어주었다.)
다만 console.log 했을 때 걸렸던 것은, 실사용시 console.log(json.RealtimeCityAir.row); 이 부분의 하위경로에 바로 원하는 값들이 저장된 것이 아니라 0:으로 묶여있었다는 것이었는데, 객체의 값에 접근하는 .으로는 접근이 안 됐다. (json.RealtimeCityAir.row.0)
더 걸리는게 없어서 객체에 접근하는 다른 방식으로 수정했다.
<div>
<h2>{dust[0].MSRSTE_NM}</h2>
<span>미세먼지 : {dust[0].PM10} ㎍/㎥</span>
<span>초미세먼지 : {dust[0].PM25} ㎍/㎥</span>
<span>통합 대기 환경 등급 : {dust[0].IDEX_NM}</span>
</div>
고쳐주니까 정상적으로 출력된다.
1차 목표는 성공했다. 다만 내가 처음에 구상했던 것은 원하는 위치의 미세먼지 정보를 보는 것이었다. 이를 위해 select 태그를 이용해 원하는 지역을 선택해주면 될 것 같다.
조금 더 생각해보면, 지역 선택 시 정보가 넘어가며 새로운 페이지가 렌더링되므로 react router를 사용하면 될 것 같다.
react router
react router를 사용하기 위해 파일을 쪼개자마자 빨간 오류 덩어리들을 마주쳤다. 허허.
(error) Objects are not valid as a React child
컴포넌트로 전달된 데이터와 표시하려는 데이터의 타입이 일치하지 않으면 위와 같은 에러가 발생한다고 한다.
객체를 그대로 렌더링하려고 할 때 생기는 문제라고 한다. 분명 Home route에서 값을 제대로 보내줬는데 왜 문제일까 한참 고민했다.
꽤 오랜 시간 이 문제로 골머리 앓았는데 의외의 곳에서 오류를 찾았다. Home 라우터에 문제가 없으니 화면에 출력하는 부분이 문제였던 것이다.
function Dust(region, state, pm10, pm25) {
return (
<div>
<h2>{region}</h2>
<div>통합 대기 환경 등급 : {state}</div>
<div>미세먼지 : {pm10} ㎍/㎥</div>
<div>초미세먼지 : {pm25} ㎍/㎥</div>
</div>
);
}컴포넌트에 인자를 감싸지 않고 그대로 줘서 발생한 오류였다. 객체 형태로 받고 있으니 배열로 받으라길래 return 내부를 이야기하는 줄 알았는데 prop 부분이었다.
function Dust({region, state, pm10, pm25}) 이렇게 고치니 오류를 잡을 수 있었다. 다행히 잘 해결됐다^^... Objects are not valid as a React child 오류가 나오면 확인해야 하는 부분 한 네가지는 파악했다.
select 태그 option 선택하면 해당 지역의 정보가 담긴 페이지로 이동하는건 내일의 나에게 맡김
