23.11.24 TIL(Today I Learned) - CDN정리, JQuery 문법(실습), fetch, firebase
TIL(Today I Learned)
1. Bootstrap, JQuery, fetch 링크
- JQuery CDN
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>- Bootstrap CDN
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">- fetch 기본 골격
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})2. 혼자 실습
- 와 혼자힘으로 toggle 해냈다..!!! ㅠㅠㅠ
<과정>
1. JQuery CDN head안에 추가
2. postbox에 id 지정
(처음에 누르는 버튼에다가 id 지정하는 바람에 버튼 누르니까 버튼이 사라짐 ㅋㅋㅋ)
3. function hey() script안에 작성
4. 버튼에 주기
5. function에 $('# )로 postbox 불러온다음, .toggle();로 마무리!!!!!
혼자 했는데 되니까 엄청 뿌듯하다
- 앨범에 카드추가 append 혼자 시도해봤는데 추가가 되긴 됐는데 엉뚱한 사이즈로 카드 추가됨 ㅠㅠ ㅋㅋㅋ
다 지우고 강사님 따라하니까 되긴하는데... 아직 원인을 찾을만한 레벨은 아닌것 같다. 열심히 연습만이 살길..!
그래도 얼추 비슷하게 다가간게 희망적인 사실!
2-1) 실습 중 새로운 지식
① 카드추가 관련 지식
- post box 각 항목에 입력된 값 가져오기 : .val();
let image = $('#image').val();-> id image 지칭된 부분의 value(입력되는 값)를 가져온다.
② 스파르타플릭스에서 별점 항목 선택값 가져오는 방법
- 스파르타플릭스에서 별점 value값 가져오는 방법
- select 부분에 id 지정(label에 주는거 아님 주의)
항목 선택하면 value값은 내가 선택한 ⭐이 아닌 <optionvalue="1"의 1이 출력됨
-> option value값을 ⭐개수에 맞춰 수정해야 함
3. 외부에 있는 데이터 가져오기 fetch
-
서버에서 클라이언트가 데이터를 가져올때의 준 형식 - JSON
(딕셔너리와 유사하게 생김) -
JSON view 확장프로그램 설치하면 보기 수월해짐
-
fetch쓸땐 JQuery import 해놓기
3-1) fetch 기본골격
1) 설명과 함께
fetch("여기에 URL을 입력")
// 이 URL로 웹 통신을 요청한다. 괄호 안에 다른 것이 없다면 GET!
.then(res => res.json())
// 통신 요청을 받은 데이터는 res라는 이름으로 JSON화 한다
.then(data => {
console.log(data) // 개발자 도구에 찍어보기
}) // JSON 형태로 바뀐 데이터를 data라는 이름으로 붙여 사용한다
2) 설명없이 기본골격
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})
<서울시 미세먼지 API 활용>
3) 실 사용 예시
function hey() {
let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
fetch(url).then(res => res.json()).then(data => {
console.log(data['RealtimeCityAir']['row'][0])
})
}=> data부분에 딕셔너리처럼 [ ][ ] 사용하여 특정 데이터만 가져올 수 있음
4) 응용
function hey() {
let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
fetch(url).then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row'];
rows.forEach(a => {
let gu_name = a['MSRSTE_NM'];
let mise = a['IDEX_MVL'];
console.log(gu_name, mise);
});
})
}=> 반복문 활용, data중 특정 key 지칭 -> 특정 key의 value값만 반복하여 출력하기 가능
(😮 함수 안에 fetch가 들어가는게 신기하네)
3-2) 혼자 실습
헐 혼자 성공했다!!!!
기존 작성된 미세먼지 내용 없애고, fetch 불러와서 기존 내용 형식으로 API 반영된 미세먼지 내용 불러와서 작성하기!!!! 미쳤다
=과정=
-onclick할 function 작성
-일단 기존내용 없애기 작성
-fetch 불러오기
-불러온 fetch data에서 뭘 반복할건지 반복할 data 지정
(let rows = data['RealtimeCityAir']['row'];)
-해당 데이터 토대로 반복문 forEach 작성
(변수에 반복할 데이터 중 불러올 key값 미리 부여)
(ex. let gu_name = a['MSRSTE_NM'];
let mise = a['IDEX_MVL'];)
-없앤 자리에 덧붙일 html 지정
-덧붙일 자리의 id값 기입 후 html append 하면 끝!!!!!!
=1차시도 동작X 원인=
: id값 불러올때
('# ')해야되는데{'# '}함
이거 수정하니까 바로 동작됨
혼자서 오류 발견하고 수정해서 혼자 힘으로 성공하니까 완전 짜 릿 해
혼자 성공한 코드
function q1() {
$('#names-q1').empty();
let url = 'http://spartacodingclub.shop/sparta_api/seoulair';
fetch(url).then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row'];
rows.forEach(a => {
let gu_name = a['MSRSTE_NM'];
let mise = a['IDEX_MVL'];
let html = `<li>${gu_name} : ${mise}</li>`
$('#names-q1').append(html);
});
})
}- 아직은 반복문 안에 html변수가 들어가야 하는지, fetch 안에서부터 시작해야 하는지 어떤건 밖에 나와야 하는지 이런 소속관계가 헷갈린다.
=두번째 혼자 했을때 오류남=
- 오류: 지워지는거까지만 작동하고 출력이 안됨
-> append문이 fetch안에는 있었는데 반복문 밖에 있었더니 출력이 아예 안됐음 - 해결: append에 들어가는 html만 반복문 안에 있는게 아니라 append까지 전부다 반복문 안에 넣었더니 정상 작동됨
(미세먼지를 row마다 하나씩 계속 가져오기 & row 마지막꺼까지 반복해서 출력 => 출력까지 반복문에 들어가는게 맞지)
<< 강사님과 함께한 완성 코드>>
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 mise = a['IDEX_MVL'];
let temp_html = `<li>${gu_name} : ${mise}</li>`
$('#names-q1').append(temp_html);
});
})
}<조건문>
미세먼지 농도가 40보다 크면 글자를 빨간색으로
-
계속 추가할 html 지정 & aapend 하는 그 부분 전에 추가함
-
추가할 html링크 태그 안에 class로 글자색 빨갛게 하는것 적용
-
조건문 작성할때 if 옆에 소괄호() 있음 주의
ex)
if (mise > 40) {
} -
변수 html 값을 `` 빈칸으로 두고 조건문 걸기
if 미세먼지 농도가 40보다 크면
-> 반복해서 붙일 html의 태그에 class 적용된 html로 붙여라
else
-> 기존의 html 그대로 붙여라
<<강사님과 완성한 코드>>
fetch(url).then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row'];
rows.forEach(a => {
let gu_name = a['MSRSTE_NM'];
let mise = a['IDEX_MVL'];
let temp_html = ``;
if (mise > 40) {
temp_html = `<li class="bad">${gu_name} : ${mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${mise}</li>`
}
$('#names-q1').append(temp_html);
});
})<<추억앨범 타이틀 밑에 미세먼지 농도 뜨게 하기>>
- 혼자시도 실패
$(document).ready(function () {
$('#seoul').empty();
let url = 'http://spartacodingclub.shop/sparta_api/seoulair'
fetch("url").then(res => res.json()).then(data => {
let mise = data['RealtimeCityAir']['row'][0]['IDEX_NM']
let html = `<p id="seoul">현재 서울의 미세먼지: ${mise}</p>`;
$('#seoul').append(html);
})
})- 수업듣고 2차시도 실패
원인 : url을 변수로 지정해놓고 fetch에 fetch("url")이라고 적음
-> url 변수가 없을땐 url주소를 "" 에 적는게 맞지만, url주소를 url이라는 변수로 지정해놓았을땐 fetch(url)로 쓰는게 맞다
<<완성코드>>
$(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']
$('#seoul').text(mise);
})
})- 메세지 중 일부만 계속 바뀌게 하고싶으면
해당 메세지에만 태그를 주면 됨!!! - $('# ).text();
-> 해당 부분의 텍스트를 ()로 출력해라!
(기존의 텍스트는 자동으로 없어짐 -> 텍스트 갈아끼우기!!)
- 페이지가 로딩되면 자동으로 나타나서 유지되게 하는 JQuery
$(document).ready(function () {
alert('안녕!');
})
-> alert('안녕!'); 이 부분만 원하는 동작으로 바꿔주면 됨
다른부분 건드리지 xX
💡 3주차 2차 숙제
- 스파르타플릭스 배너에 현재 서울의 온도 20도보다 높으면 '더워요', 낮으면 '추워요' 출력하기
혼자 성공!!
$(document).ready(function () {
let url = 'http://spartacodingclub.shop/sparta_api/weather/seoul'
fetch(url).then(res => res.json()).then(data => {
let temper = data['temp'];
if (temper > 20) {
$('#temp').text('더워요');
} else {
$('#temp').text('추워요');
}
})
})- 한번 실패함
원인 : text안에 ''안쓰고 그냥 (더워요) (추워요)라고 써서 문구 출력이 안됐음
4. firebase란?
4-1) 파이어베이스(Firebase)란?
https://firebase.google.com/?hl=ko
-
구글이 개발한 플랫폼
백엔드 인프라 구축, 관리 등의 작업 없이 프론트엔드 할수있게 도와줌 -
DB있으면 데이터 저장 & 가져와쓰기 가능
4-2) 사용법
- 사이트 접속 & 로그인
- 프로젝트 만들기
- 웹 선택 > 앱 등록
- script사용 > 콘솔로 이동
💡 이해에 도움되는 정보
-
웹페이지 상에서 작성하는 데이터를 어딘가에 적재해놓자!
- 보관 & 언제든 가져와서 보기
- 데이터 보관되는 곳 = 서버
-
구글이 만들어놓은 백엔드 firebase를 사용하여 배워보기
-
Front End와 Back End의 관계성
Front End(눈에 보이는 부분!)
HTML, CSS, Javascript
-> 요청
<- 응답
Back End(안보이는 부분!)
Server
DB
API
4-3) 데이터베이스란?
-
데이터를 저장하는곳 ^^
-
왜 필요할까?
잘 찾으려고!
- 데이터베이스의 종류(장단점 O)
<관계형 데이터베이스>
SQL
(like Excel)
표가 이미 다 그려져있음, 정형화되어있음
-> 규격에 안맞는 데이터는 못넣음
-> 실수 있으면 안되는 곳에 적합
ex) 은행
<비관계형 데이터베이스>
NoSQL(Not Only)
정형화 X
자유도 높음 ,유연 유동적
-> 바뀔 여지가 많은 곳에 적합
ex) 스타트업
- DB의 실체?!
데이터베이스는 사실 프로그램이다!
Excel같은거 편하게 관리하는 프로그램
But 데이터 불러오는 속도가 엄청 빠름!
-> index(ex.주문번호, 회원번호 1억개 있어도 바로 가져올수 있음)
