[2025/07/01] 웹개발 강의

3주차

jQuery

• $ ('#id').text('text') : text 변경

• $ ('#id').append('tag') : html에 요소 추가

• $ ('#id').empty() : empty

• $ ('#id').toggle() : display on off

• $ ('#id').val() : input value return

• $ (document).ready(function () {}) : 페이지 열릴 때 함수 실행

클라이언트 - 서버

https://www.google.com/ search?     q=검색어
         (서버의위치)        (창구 이름) (데이터)

• OpenAPI : 각종 데이터를 JSON, XML 형식으로 제공해 준다.
• JSON : 데이터를 주고받는 형식, 딕셔너리와 리스트로 이루어져있다.

fetch

• jQuery필요
• fetch(url).then(res => res.json()).then(data => {
  console.log(data);
  }); //json 형식을 딕셔너리 형태로 받아옴
• $(document).ready(function () {}

4주차

Firebase

• NoSQL 비관계형 데이터베이스
• Json 형식으로 데이터 제공
• firebase 사용하려면 < script type="module" >필수, 선언하면 html 태그에 적힌 함수 작동 안함
  < body >에을 < script >에 $('#id').click(function(){ }); 형태로 기입해야함
• < script > 파이어 베이스 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";
• < script > 프로젝트 설정 > SDK 설정 및 구성 > 구성에 있는 firebaseConfig

const firebaseConfig = {
	apiKey: "",
	authDomain: "",
	projectId: "",
	storageBucket: "",
	messagingSenderId: "",
	appId: "",
	measurementId: ""
};

• < script > firebase 초기설정

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

• < script > firbase에 데이터를 넣음

$("#postingbtn").click(async function () {
let doc = { 'name': 'bob', 'age': 30 };
await addDoc(collection(db, "name"), doc); //컬렉션에 name의 그룹 추가되고 doc필드가 들어감
});

• < script > firbase에서 데이터를 가져옴

let docs = await getDocs(collection(db, "name")); //name콜렉션을 불러와 docs자료형에 넣음
docs.forEach((doc) => {
let row = doc.data(); //반드시 doc.data();를 해서 딕셔너리 형으로 변경해야함
console.log(row);
});

5주차

배포

• http, tcp/ip : 프로토콜, 자료를 주고받는 형식
• https : http에서 보안 강화, 자료 요청시 중간에서 정보를 알 수 없고 요청한 사람만 확인 가능
• github/project/setting/pages에서 index.html문서가 들어간 branch를 선택하면 깃허브 페이지 생성

firebase한계

• 서버 제어 제한 : 서버 인프라에 대한 직접적인 컨트롤 제한. 파이어베이스에서 제공하는 기능과 방식에 따라 작업을 수행해야 한다.
• 확장성 제한 : 규모에 따른 확장성 측면에서 제한이 있을 수 있다.
• 종속성 : 구글의 서비스에 의존하게 된다. 파이어베이스 외부의 다른 서비스나 기능을 활용하기 어렵거나 제한적일 수 있다.
• 파이썬을 이용하면 파이어 베이스의 제한 사항을 넘어선 다양성과 유연성을 가지고 더 많은 컨트롤을 가능하게 할 수 있다.

colab

https://colab.research.google.com
웹 파이썬 실행 도구

스크래핑

import requests
from bs4 import BeautifulSoup

URL = "https://bit.ly/web-movie"
headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get(URL, headers=headers)

soup = BeautifulSoup(data.content, 'html.parser')
title=soup.select_one('개발자 도구에서 copy>copy selector')
print(title)

과제

<input type="text" class="form-control" id="foodTitle" placeholder="제목">
<laber for="foodTitle">음식명</label> //label for= 은 <input>과 같은 셀프 클로징 태그에 용도를 명확하게 보여줄 때 사용합니다.

• ex)