[240731] 웹개발 기초 강의

[UX 기획 및 리서치 강의]

3주차

01. JQuery 활용 실습

- JQuery를 이용하여 열고 닫기

 

영화 기록하기 버튼을 눌러, 포스팅 박스 열기

 

추억 저장하기 버튼을 눌러, 포스팅 박스 열기

 

function openclose() {

     $('#postingbox').toggle();

}

로 함수를 만든 후,

 

<button onclick="openclose()">버튼 이름</button>

 

에 함수를 넣어 클릭하면 함수가 실행될 수 있도록 함.

 

- JQuery를 이용하여 카드 추가하기

사진 정보 입력하여 카드 추가하기

 

영화평 입력하여 카드 추가하기

 

 

float label과 card 열에 ID 값을 부여한 후, 

 

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

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

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

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

 

로 value 값 정의하기

 

let temp_html = `

<div class="col">

     <div class="card">

          <img src="${image}"

               class="card-img-top" alt="...">

          <div class="card-body">

               <h5 class="card-title">${title}</h5>

               <p class="card-text">${comment}</p>

          </div>

     </div>

</div>`;

 

로 정의한 값을 변수로 임시 저장하기

 

$('#card').append(temp_html);

 

로 카드 열에 추가하기

 

* 해당 데이터는 서버에 저장된 것이 아니므로, 새로고침 시에 추가한 정보가 다시 사라짐.

---

 

02. 클라이언트 - 서버 개념 이해하기

✅ JSON

Key:Value로 이루어진 형태.

ex.

 

RealtimeCityAir(키 값): 딕셔너리 형 value/ 그 안에 row(키 값) 리스트형 value

 

✅ GET 요청 이해하기

서버가 은행 지점이라면 API는 은행 창구와 같은 것이라고 이해할 수 있음.

예를 들어, 우리 은행 강남역지점이 서버라면, 강남역 지점 안에 있는 창구가 API라고 할 수 있음.

 

https://www.lottecinema.co.kr/NLCHS/Movie/MovieDetailView?movie=21258

 

위의 롯데시네마 영화 정보에서 

* 서버 주소: https://www.lottecinema.co.kr/NLCHS/Movie/MovieDetailView?movie=21258

* 영화 정보: movie=21258

로 나눌 수 있음. 영화 정보에서 숫자를 바꾸면 다른 영화 정보로 이동이 됨.

 

---

 

03. Fetch 이해하기

fetch를 이용하여 데이터를 불러와서 적용할 수 있음.

이 때, $(document).ready(function() { } 을 적용하면

별도의 동작을 하지 않고도 미리 적용을 할 수 있음.

 

버튼을 누르면, 미세먼지 지수가 업데이트 되도록

 

 

 

$(document).ready(function () {

     let url = "http://spartacodingclub.shop/sparta_api/seoulair";

     fetch(url).then(res => res.json()).then(data => {

          console.log(data);

     })

})

 

와 같이, 코드를 작성하면, 서울시의 미세먼지 데이터를 이용가능함.

 

---

 

04. Fetch 활용 실습

추억 저장 사이트/ OTT 서비스에 미세먼지 지수와 서울시 기온 추가하기

 

 

각각 추가한 코드

실제 추가된 부분 - 현재 미세먼지 상태와 기온이 반영되어 표시됨.

 

---

3주차 과제

조건에 부합하도록 헤더, 포스팅박스, 카드를 포함하여 사이트 구성하기

 

---

 

4주차

 

01. 데이터베이스 개념 이해하기

여러 사람이 함께 데이터를 저장하고 관리할 수 있는 데이터 모음. 관계형 데이터베이스와 비관계형 데이터 베이스로 나뉨.

 

- 관계형 데이터 베이스는 정형화된 형태로, 명확한 구조적 틀 안에 정보 값을 입력하게 되어 있음. 새로운 값을 입력하기 위해서는 새로운 데이터 타입이 필요함.

 

-비관계형 데이터 베이스는 비정형화된 형태로, 구조적인 틀 없이 값을 모두 입력함.

 

---

 

02. Firebase 이해하기

구글(Google)이 개발한 데이터 베이스. 백엔드 인프라 구축 과정 없이 이용 가능함.

정해진 사용량을 초과하지 않는 범위 내에서 무료.

 

🔥 파이어 베이스

 

---

 

03. Firestore Database 이용하기

파이어스토어 데이터 베이스 = 구글의 클라우드 기반 NoSQL 데이터베이스.

 

1. 파이어 베이스 설정하기

 

파이어 베이스 이용 전, 스크립트의 타입을 "module"로 설정하고 파이어베이스 적용에 필요한 정보를 불러오기.

 

2. 입력 데이터를 저장하는 함수 추가

 

클릭하면 파이어스토어에 데이터가 저장이 될 수 있도록 함수를 추가하기.

 

 

2. 모듈 타입에 적합한 함수로 수정

 

스크립트 타입을 모듈로 바꾸게 되면, onclick="함수()"의 형태로 사용할 수 없게 됨.

이에 따라, id를 설정한 후, 불러와서 함수를 적용할 수 있는 형태로 변경하기.

 

---

 

💭 이전에 유니티로 게임을 만들었을 때에는 event manager와 playerpref을 이용해서 가장 간단한 수준에서 데이터 저장을 했었는데, 파이어베이스를 이용하는 방법을 배우게 돼서 좋았다.