02. Javascript 입문 - JQuery, fetch, firebase

1. JQuery, fetch 링크

• JQuery CDN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

• fetch 기본 골격

fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
                console.log(data)
            })

2. JS문법 새로운 지식

① 카드추가 관련 지식

• post box 각 항목에 입력된 값 가져오기 : .val();

let image = $('#image').val();

-> id image 지칭된 부분의 value(입력되는 값)를 가져온다.

② 스파르타플릭스에서 별점 항목 선택값 가져오는 방법

• 스파르타플릭스에서 별점 value값 가져오는 방법
• select 부분에 id 지정(label에 주는거 아님 주의)
  항목 선택하면 value값은 내가 선택한 ⭐이 아닌 <option value="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가 들어가는게 신기하네)

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억개 있어도 바로 가져올수 있음)