function q1() {
let url = 'http://spartacodingclub.shop/sparta_api/seoulair'
$('#names-q1').empty();
fetch(url).then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row'];
rows.forEach(a => {
let gu_name = a['MSRSTE_NM'];
let gu_mise = a['IDEX_MVL'];
let temp_html = ``;
if (gu_mise > 40) {
let temp_html = `<li class = "bad">${gu_name} : ${gu_mise}</li>`;
} else {
let temp_html = `<li>${gu_name} : ${gu_mise}</li>`;
}
$('#names-q1').append(temp_html);
});
})
}
예상결과: 서울 각 구별 미세먼지 농도가 나온다
실제결과: 아무것도 안나옴
이유: if절의 temp_html에 let을 붙여서 선언문을 쓴게 이유였다
-> style 태그에 .bad 컬러 red로 설정 안 해놨었다.
$(document).ready(function () {
let url = "http://spartacodingclub.shop/sparta_api/seoulair";
fetch(url).then(res => res.json()).then(data => {
let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM'];
$('msg').text(mise);
})
})
$('msg') 라고만 써있어서 바뀌지 않았다. $('#msg') 라고 써야함.
<div class="header">
<div class="p-5 mb-4 bg-body-tertiary rounded-3">
<h1 class="display-5 fw-bold" style= "font-family: 'Black Han Sans', sans-serif";> 스파르타 푸드파이터 </h1>
<p class="col-md-8 fs-4">나만의 쩝쩝박사 기록을 만들어보자!</p>
</div>
</div>
틀리고 틀린 끝에 방법을 알아냈다!
1. style 태그에 @import로 넣어준다
2. 인라인 태그로 h1 태그에 걸린 형태와 같이 써준다
내 구글계정으로 로그인해서 생성한 서버이므로 Firebase 설정 부분을 고대로 갖다붙여도 잘 작동.
안된다면 뭔가 틀린 것이니 오탈자가 없는지 살펴볼 것.
이건 일종의 규약. 스크립트 태그에 타입을 module로 걸어줘야 Firebase를 쓸 수 있다.
그러나 이걸 걸게 됨으로 인해 더이상 onclick은 작동하지 않는다. 그는 좋은 함수였습니다...
$(document).ready(function () { // 페이지가 로딩되면 자동으로 fetch를 해준다
let url = "http://spartacodingclub.shop/sparta_api/weather/seoul";
fetch(url).then(res => res.json()).then(data => {
let temp = data['temp'];
$('#temper').text(temp);
})
})
그래서 위와 같이 $(document).ready(function ()~ 가 어차피 먹히지 않아서 쓸 필요가 없답니다.
-> $(document).ready(function () 안쪽 내용을 드래그하여 함수 바깥으로 빼주면 OK (그래도 작동함)
<button onclick="openclose()" type="button" class="btn btn-outline-light">영화 기록하기</button>
그러니 이렇게 생긴 친구가 있다면 지워주고 id = "~~btn" 타입으로 id를 써주도록 합니다.
그러니 동적으로 기능을 넣어줘야 한다능
$("#postingbtn").click(async function () {
let image = $('#image').val();
let title = $('#title').val();
let content = $('#content').val();
let date = $('#date').val();
let doc = {
'image': image,
'title': title,
'content': content,
'date': date
};
await addDoc(collection(db, "albums"), doc);
alert('저장 완료!');
window.location.reload();
})
위와 같이 '이 아이디를 가진 버튼을 클릭하면 이렇게 해줘' 라는 코드로 고쳐주면 OK
그러니 의심하지 말고 스스로를 믿고 추억앨범 카드를 불러와서 붙이면 됩니다. (?)
이런 와이어 프레임과
이런 ERD를 가지고 첫 스타트를 끊으려고 합니다. 과연 잘 될것인가
아무튼 우리팀 화이팅! 개발자가되구15! 팀장님만 믿습니다(?)