시작하기 전에...
HTML/CSS 열심히 복습하는 요즘 페이지의 배포 직전까지의 강의들을 수강했다. 오늘은 그 강의들의 요점만 적고자 한다.
프론트엔드 웹개발 종합반 3주-4주차 강의 요약
Fetch (API)
API(Application Programming Interface)는 쉽게 생각하면 누군가 이미 정리해 놓은 데이터로, OpenAPI로 공개가 되는 경우 누구나 쉽게 그 데이터를 열람 할 수 있다.
이를 로컬 프로젝트에 불러올때 Fetch를 사용하게 된다. 이렇게 불러온 데이터는 JSON 형태로 불러지며 저번 강의에서 나온 딕셔너리(dictionary)와 형태가 유사하다.
불러오는 코드 (서울의 미세먼지 농도 예시):
let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
fetch(url).then(res => res.json()).then(data => {
let temp = data['temp'];
$('#degree').text(temp);
})Firebase, 데이터베이스 이해하기
이제는 데이터를 영구 저장하는 방법을 배운다. 새로운 데이터가 새로고침을 할때마다 사라지는 것이 아닌 어딘가에 저장되어서 불러오는 일, 이것이 데이터베이스를 사용하는 중요한 이유 중에 하나이다.
구글에서 제공하는 Firebase가 가장 이용하기 편하다. 졸업과제 때도 도움을 많이 받았다.
먼저 <script type="module"> 태그를 달아주고 파이어베이스 DB에 연결을 시켜주면 데이터를 저장/불러오기를 할 수가 있다.
<script type="module">
// Firebase SDK library 가져오기
import { initializeApp } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-app.js";
import { getFirestore } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
// 추가로 필요한 기능 가져오기
// 개인 DB config 가져오기
const firebaseConfig = {
// config
}
// Firbase instance initialization
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
// 페이지 코드
</script>추가적으로 module 태그를 다는 순간 이전에 사용하던 onClick 기능은 사용이 불가하다. 그래서 click을 동적으로 코딩해서 만들어줄 필요가 있다.
.click() 예시
$("#id1").click(async function () {
$('#id2').toggle();
})이런식으로 id에 클릭을 주면 onclick 없이 잘 동작한다.
마치며...
강의 내용은 적은 것은 아니었으나 어쨌든 복습하는 느낌으로 듣고 있었기에 최대한 요점만 적어보았다. 5주차 강의도 오늘 반 정도 수강해서 다음에는 5주차 강의 요약을 적고 밀린 과제를 할 듯 싶다.
