캐나다 개발자

로그인페이지, 회원가입페이지, 메인페이지, 총 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 ..

필요 패키지: 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..

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

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

중간점검으로부터 배운내용 정리 1. width: 100% !important - !important는 말 뜻 그대로 '중요한 속성' 을 의미하고, 해당 속성이 변경되지 않도록 하는 역할을 한다 2. reset cdn 3. 도메인이 같을때 브라우저에서 성능상 문제, 데이터를 미리 받아놔서. 캐시를 비워줘야함. ctrl shift r->강제 캐시삭제 4. ajax 에러처리방법 url = "https://api.openweathermap.org/data/2.5/weather?q=" + searchData + "&appid=3de474db76b0433d7c350250d3e62508" $.ajax({ type: "GET", url: url, data: {}, success: function (response) {..

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

프로젝터의 헤더에는 날짜, 명언, 인사말이 들어간다. 처음에 세운 목표는 아래와 같다. - 틀만들기 - 날짜: 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..

페이지 2개인 웹사이트 서버 작업 서버 from flask import Flask, render_template, request, jsonify, redirect, url_for from pymongo import MongoClient import requests # 플라스크 웹앱 설정 app = Flask(__name__) # Mongo DB에 연결 client = MongoClient('13.124.196.127', 27017, username="test", password="test") db = client.dbsparta_plus_week2 @app.route('/') def main(): # 없는 단어 검색시, detail에서 보내온 msg를 html로 넘겨 주기 위한 함수. msg = requ..

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로 정해서, 카..