웹개발 종합반 3,4,5주차 수강
클라이언트 - 서버 개념 이해하기
JSON
Javascript 객체 문법으로 구조화된 데이터를 표현하기 위한 문자 기반의 표준
서버→클라이언트로 주는 Key:Value로 이루어진 데이터
Get 요청
클라이언트가 서버에게 데이터 조회(Read)를 요청
Fetch
JavaScript에서 서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 해주는 매서드(method)
fetch("여기에 URL을 입력").then(res => res.json()).then(data => {
console.log(data)
})fetch의 기본 골격
Fetch 연습 코드1
fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
console.log(a['MSRSTE_NM'], a['IDEX_MVL'])
})
})fetch를 통해 가져온 데이터의 'RealtimeCityAir'의 'row'에서 MSRSE_NM, IDEX_MVL을 추출해서 콘솔에 출력
Firebase
Firebase: 구글이 개발한 모바일 및 웹 애플리케이션 개발 플랫폼. 개발자들이 백엔드 인프라를 구축하거나 관리하는 복잡한 작업 없이 핵심 기능에 집중할 수 있도록 도와줌
데이터베이스 개념 이해하기
데이터베이스: 데이터를 저장하고 여러 사람들이 관리하는 데이터의 모음. 데이터를 잘 찾기 위해서 미리 정리해두는 것
데이터베이스의 종류
Firestore Database
Firestore Database: 구글의 클라우드 기반 NoSQL 데이터베이스 서비스로 데이터를 저장하고 관리할 수 있는 기능을 제공
- 컬렉션(Collection): 하나의 서랍장이라고 생각하자. 여러 개의 문서들이 특정한 주제 또는 유형으로 그룹화되어 있어, 컬렉션 안에는 문서들이 저장될 수 있음
- 문서(Document): 서랍장 안에 들어있는 작은 종이. 하나의 종이는 여러 개의 필드(Field)로 구성되어 있음
- 필드(Field): 문서 안에 있는 데이터의 작은 부분. 각 필드는 "내용", "날짜", "이미지주소", “제목” 등의 값으로 구성됨
추억앨범에 Firestore 활용해보기
// Firebase SDK 라이브러리 가져오기
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";
import { collection, addDoc } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
import { getDocs } from "https://www.gstatic.com/firebasejs/9.22.0/firebase-firestore.js";
// Firebase 구성 정보 설정
const firebaseConfig = {
본인 설정 내용 채우기
};
// Firebase 인스턴스 초기화
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);기본적으로 <head>의 <script>를 <script type="module">로 바꾸고, 안에 위의 코드를 넣어서 세팅해줘야함
본인의 설정은 Firebase에서 본인 프로젝트의 설정에서 확인할 수 있다
<script type="module">로 바뀌게 되면서 html 내의 onclick이 작동하지 않게 되므로 코드를 수정해줘야했음
$("#savebtn").click(async function () { // savebtn이라는 id가 있는 태그를 클릭하면
$('#postingbox').toggle() // postingbox라는 id가 있는 태그가 toggle됨
})
$("#postingbtn").click(async function () { // postingbtn id를 가진 태그를 클릭하면
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
}; // doc이라는 딕셔너리에 저장
await addDoc(collection(db, "albums"), doc); // doc을 firestore의 albums 컬렉션에 저장
alert('저장 완료!')
window.location.reload()
})사용자가 입력한 데이터를 Firestore database에 저장하는 코드
let docs = await getDocs(collection(db, "albums"));
docs.forEach((doc) => {
let row = doc.data();
let image = row['image']
let title = row['title']
let content = row['content']
let date = row['date']
let temp_html =
`<div class="col">
<div class="card h-100">
<img src="${image}"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">${title}</h5>
<p class="card-text">${content}</p>
</div>
<div class="card-footer">
<small class="text-body-secondary">${date}</small>
</div>
</div>
</div>`
$('#card').append(temp_html)
});데이터베이스의 데이터를 가져와 카드로 추가하는 코드
GitHub 특강
github - 온라인 코드 저장소
git - github에 코드를 업로드하고 받을 때 사용되는 도구
필수 명령어
| 개인 작업 | 협력 작업 |
| git init | git clone |
| git add | git pull |
| git commit | git branch |
| git push | git checkout |
| git merge |
잘 이해하지 못함.. 내일 녹강 돌려보기
'TIL' 카테고리의 다른 글
| 8/9 TIL - 코드카타, JavaScript 문법 종합반 조금 (0) | 2024.08.09 |
|---|---|
| 8/8 TIL - SQL 4,5주차 수강 (0) | 2024.08.08 |
| 8/7 TIL - SQL 1~3주차 수강 (0) | 2024.08.07 |
| 8/5 TIL (0) | 2024.08.05 |
| 스타터 노트 작성 (0) | 2024.08.02 |