본문 바로가기

Web

(7)
Firebase를 이용하여 이미지 및 데이터 저장하기 // 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..
웹개발 종합반 5주차 파이썬 크롤링import requestsfrom bs4 import BeautifulSoupURL = "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('#boxoffice_list_content > ul > li:nth-child(1) > a > div...
웹개발 종합반 4주차 DataBase데이터를 쉽게 찾고 업데이트 하기 위해서 데이터를 저장하고 관리하는 데이터의 모음관계형 DB(sql) : 정리된 정보를 다룰 때 사용하는 데이터베이스, (A라는 엔티티는 사람정보만 저장)비관계형 DB(nosql) : 복잡하거나 유연한 정보를 다룰 때 사용하는 데이터베이스, (A라는 엔티티에 사람, 동물, 식물 정보 모두 저장)firebase?구글이 개발한 개발 플랫폼friestore database?구글 클라우드를 기반으로 한, nosql 데이터베이스firebase 연동 코드 firebase를 이용하여 create$("#postingbtn").click(async function () { let image = $('#image').val(); let ..
HTML, CSS를 활용하여 화면 만들기 Foodcourt 홈 한식 일식 중식 양식 Login Sign-up 스파르타 푸드파이터 본인만의 맛집을 소개하는 사이트입니다. 맛집을 소개해주세요! ..
웹개발 종합반 3주차 Fetch네트워크 요청을 보내고 데이터를 가져오기 위해 사용하는 비동기 함수비동기 : 함수의 리턴값을 기다리지 않고 다음 작업을 실행하는 것, 싱글 스레드에서 동작하는 자바스크립트를 보완하기 위해서 나옴get 요청을 통한 fetch$(document).ready(function () { let url = "http://spartacodingclub.shop/sparta_api/weather/seoul"; fetch(url).then(res => res.json()).then(data => { let temp = data['temp'] $('#tem').text(temp); }) }..
웹개발 종합반 2주차 Jqurey$('#q2').empty();  -> id값으로 타겟을 잡고 뒤에 이벤트를 걸어서 변화시키고 싶은 행위를 걸어줌forEach -> 반복문의 핵심, 주로 리스트를 for each문을 통해서 순회함people[0]['name'] -> 리스트 내부의 딕셔너리를  접근하는 방법, 키에 접근할 때는 ''로 꼭 묶어줘야 함 자바스크립트 문법 연습하기! 1. 함수 결과 확인하기! 2. 붙이기 사과 귤 감 3. 붙이기 영수는 24살입니다. 세종은 3..
웹개발 종합반 1주차 브라우저의 역할 : api에 요청을 보내고, 받은 html파일 혹은 데이터를 화면에 그려주는 것padding : 내부 여백 / margin : 외부 여백padding-top: 30px;margin: 50px auto 0px auto ->  *auto -> 끝까지 주겠다는 의미, 좌우에 auto를 줘야 중간으로 위치*박스 안에 있는 내용물을 정렬할 때 세트로 가는 애들, column은 세로정렬, row는 가로정렬/*박스 안에 있는 내용물을 정렬할 때 세트로 가는 애들, column은 세로정렬, row는 가로정렬*/ display: flex; flex-direction: column; align-items: center; justify-content: center;이미지를 불러올 때 필수적으로 쓰는 css ..