728x90

Sparta 95

웹개발 종합반 프로젝트 - 06 뉴스크롤링(네이버뉴스)

스크래핑 코드 Python 전과 다르게, 이번에는 DB안의 모든 news data를 날리고, 새로 넣어주고있다. from selenium import webdriver from bs4 import BeautifulSoup import time from selenium.common.exceptions import NoSuchElementException from pymongo import MongoClient import requests # 몽고 db에 저장 client = MongoClient('13.124.196.127', 27017, username="test", password="test") db = client.dbsparta_project_01_mss headers = {'User-Agent' ..

웹개발 종합반 프로젝트 - 05 진행상황&로그인&뉴스크롤링

로그인페이지, 회원가입페이지, 메인페이지, 총 3가지 페이지가 준비되었다 로그인 페이지 코드 (클라이언트) M S S My Small Space Duplication Check At Least 6 Letters of English or Numbers or Special Letters( . _ ), Maximum 15 Letters At Least 8 Letters of English or Numbers or Special Letters( !@#$%^&* ), Maximum 20 Letters Sign In Want to be a Member of MSS? Sign Up Verify Password Submit Cancel 로그인페이지 코드(서버) from pymongo import MongoClient ..

종합반 4주차 - Bulma, 로그인, 회원가입 기능

필요 패키지: Flask (서버), pymongo (DB), pyJWT(토큰생성- 로그인 후 사이트에 일정시간동안 로그인이 지속되게하는거 같은 자유이용권 같은 토큰) 파이참 기준 - 세팅에 TEMPLATE LANGUAGE 검색해서 jinja2 선택 Bulma - Bulma는 순수한 CSS 프레임워크 https://bulma.io/documentation/ Bulma: Free, open source, and modern CSS framework based on Flexbox Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and availabl..

종합반 플러스 - 3주차 - 네이버API, 셀레니움

새로배운점 python 파일을 두개를 만들고, 하나는 서버용, 다른거 하나는 스크래핑용으로 할수있다. 셀레니움은 조금 더 동적인 스크래핑을 할때 사용된다. (예: 스크롤 내리기, 버튼 누르기 등) 셀레니움은 자신에 맞는 드라이버설치가 필요하다. (구글 크롬 드라이버) 셀레니움을 이용해 http://matstar.sbs.co.kr/location.html 이 링크의 웹페이지 하단의 '더보기'라는 버튼을 10번 클릭해서 최대한 많은 데이터를 웹페이지에 보이고, 그 데이터들을 긁어오려고한다. # 크롬 드라이버를 실행 (셀레니움) driver = webdriver.Chrome('./chromedriver') url = "http://matstar.sbs.co.kr/location.html" # 드라이버에 해당 ..

웹개발 종합반 프로젝트 - 04 날씨&즐겨찾기

날씨는 도시이름을 검색하고, 최대 4개의 도시까지만 등록되게 하려고 계획했었다. 처음에는 일출/일몰, 최대/최저기온 등 모든걸 나타내고 싶었지만, 카드의 크기에 맞게 필요한 정보만 나타내게 되었다. 새로배운 내용은 ajax의 error처리 이다. 여기서는 도시이름이 검색에 안나올경우, 즉 url로 카드를 못 가져올 경우, error 처리가 된다. function addCard() { // 카드의 총 갯수를 제한한다. curCardCount++; if (curCardCount === maxCardCount + 1) { alert('The maximum number of cards is 4. ') curCardCount = 4; return } // 검색의 값을 가져오고, 값을 url의 도시이름부분에 끼워준..

웹개발 종합반 프로젝트 - 02 뉴스 API

프로젝트의 메인 부분에서 오른쪽에는 뉴스 API를 가져와서 총 4가지의 뉴스를 보여주려고 했다. 처음 세운 계획은 아래와 같다 - 틀 만들기 - 카드 만들고 카드에 뉴스 api 가져오기 - 뉴스 업데이트는 어떻게? - 뉴스는 시간마다 업데이트 주고싶은데 db가 필요할까? 먼저 틀을 만들었다. 처음에는 Bootstrap에서 가져오려 했으나, Card가 마음에 들지않고, 수정을 많이해야 했기때문에 그냥 처음부터 만들었다. 아래 코드는 Ajax로 API를 받아오는거까지 같이있다. ${source} ${published_at.substring(0, 10)} ${title} ${description} author: ${author} CSS는 아래와 같다. 새로 배운 CSS는 ellipsis를 사용해서 문자열이 일..

웹개발 종합반 프로젝트 - 01 헤더

프로젝터의 헤더에는 날짜, 명언, 인사말이 들어간다. 처음에 세운 목표는 아래와 같다. - 틀만들기 - 날짜: js Date -> setinterval 함수로 매초마다 실행시켜서 시간 변화주기 - 로그인인사: 로그인 기능을 만든 후 다시 생각하기. - 짧은명언: api가져와서 db 넣고 랜덤뽑아주기 - 틀: 명언나오고 아래에 (author) - 파이썬 flask로 서버 post -> quote_give, author_give 만들다 보니, JQuery를 쓰기 때문에 SetInterval() 을 사용하지 않아도 되는걸 알았다. - 연/월/일 얻어오는 함수 // When Load the Window $(document).ready(function () { getDate(); }); // Date for He..

종합반 플러스 - 1주차 - 파일 업로드

Python Flask 를 이용해서 서버를 만들고 데이터를 Mongo DB에 넣는다(Robo 3T) 1. HTML, CSS, JS 로 기본 틀을 구축 2. Python 파일에서 Flask로 서버를 구축 3. 서버(python) 과 클라이언트(html) 연결 코드를 만든다 - POST, GET - POST 할때는 DB에 POST했다가 GET 할때는 다시 DB에서 GET 해서 정보를 보여준다. ** 여기까지는 배운 내용. 4. 파일 업로드를 만들 예정 - 역시 틀부터 잡아야 함 - Static 폴더가 image를 관리하는 폴더 - 이미지 파일이므로 img 태그를 이용해서 태그르 하나 만든다 - src 는 static 폴더에 아무 이미지나 넣어두고 주소를 준다. - 부트스트랩에서 파일업로드 관련 코드 Choo..

웹개발 종합반 - 기획안

My Small Space 평소에 자주 들어가던 링크를 한군데에 모아놓고, 할일을 관리해 주는 나만의 작은 공간 입니다. 인터넷 브라우저 시작시 뜨는 창으로 서비스 할 예정입니다. 로그인 기능 이름만 적고 로그인? 비밀번호? 구글? -> 아직 고민중 입니다. 1. 헤더 • JS Date로 현재 날짜 구현 • Login을 구현해서 환영인사에 AAA대신 이름추가 • - local storage? 혹은 DB? -> 질문할 내용 •짧은 명언 • - https://api.adviceslip.com/#top 여기서 api 가져오기 2. 도시 별 날씨 • 검색 추가 삭제 기능은 HTML의 form 태그 사용 •검색 input에 required, max length 추가 •Maximum cards 를 4로 정해서, 카..

웹개발 플러스 이론 정리

서버는 특수한 컴퓨터다? No! 🙅 서버는 컴퓨터의 '역할' 이라고 했어요. 사람도 투 잡을 할 수 있는 것처럼, 컴퓨터도 여러 역할을 맡을 수 있죠. DB도 돌리고, 서버도 돌리고, 게임도 하고! 서버는 요청을 받으면 HTML+CSS+JavaScript 파일을 주기도 하고, JSON 형식으로 데이터를 주기도 하지요! JSON 형식으로 생긴 데이터 예시 💡 이거, 기억나세요? 서울시 미세먼지 데이터! 타고→타고 들어가서 값 가져오기! API란? 서버가 요청을 받게 위해 뚫어놓은 '창구'라고 했습니다. 요청에는 POST(주로 데이터를 수정할 때), GET(주로 데이터를 가져올 때) 요청 등 여러가지 타입이 있다고 했죠! HTML, CSS, JS는 각각 어떤 역할을 하죠? HTML은 뼈대 / CSS는 꾸미기..

728x90