본문 바로가기

웹 개발/웹개발플러스

(4)
웹 개발 플러스 4 - 회원가입, 로그인 기능 추가하기 0. 프로젝트 셋팅 - 보안, 로그인, 암호화 기능의 필요성 : 주소만 알면 누구나 들어와 내용을 추가/수정/삭제가 가능합니다. 이를 방지하기위해 비밀번호를 입력해야만 내용을 볼 수 있는 식으로 보안을 강화할 수 있습니다. 여러 사람들이 한 서비스를 이용해야 하며 공개된 내용이 달라져야 한다면 로그인 기능이 필요합니다. - 패키지 설치 : flask, pymongo, pyJWT 1. Bulma 로 웹사이트를 꾸미기 Bulma는 미리 정해진 클래스를 가져다 쓰는 무료 CSS 프레임 워크입니다. Bulma는 Bootstrap과 달리 순수 CSS 프레임워크이기 때문에 기능을 직접 구현해야 하지만 더 자유롭게 커스터마이징이 됩니다. 또한 커서, 테마, 플러그인 등 많은 부분이 개발되어 있고 질문과 답, 예시를 ..
웹 개발 플러스 3 - 맛집지도 만들기 0. 목표 Selenium을 활용한 브라우저 제어 및 웹 스크래핑 네이버 지도 API 적용 네이버 지도 API의 다양한 기능을 활용 8000원 미만 가성비 지도 가능? 브라우저 제어? : 로그인, 스크롤 내리기 등 브라우저의 동작을 할 때 Selenium 같은 브라우저 제어 프로그램을 이용해 정해진 시간에 게시판 글을 작성하는 등 자동화에 쓰일 수 있다. 프로젝트 셋팅 : requests, bs4, pymongo, flask, selenium 패키지 설치 필요한 기능 : 맛집 정보 스크래핑, 지도 보여주기, 각 맛지 별 마커, 정보창, 카드 만들기 from flask import Flask, render_template, request, jsonify, redirect, url_for from pymon..
웹 개발 플러스 2 - 나만의 단어장 0. 동적 웹 페이지, 정적 웹 페이지 정적 웹 페이지란 서버에 저장되어 있는 HTML + CSS 파일을 그대로 보여 주는 것입니다. 반면 동적 웹 페이지는 데이터의 추가/ 가공을 통해 저장된 HTML의 모습이 변합니다. 정적인 웹 페이지는 추가적 통신, 계산이 필요가 없기 때문에 속도가 빠르고 서버의 부담이 적지만 추가, 수정, 삭제 등의 내용 변경이 필요하면 HTML 자체를 수정해야 하기 때문에 번거로우며 서비스가 한정적입니다. 따라서 변화가 적은 회사 소개, 음식메뉴, 포트폴리오 등이 정적인 웹 페이지로 만들기에 적합합니다. 반면 동적 웹 페이지는 상황, 시간, 사용자의 요청에 따라 다른 모습을 보여줘야 합니다. 하지만 보안에 취약하고 모습이 계속 변하기 때문에 검색엔진 최적화(SEO, Search..
웹 개발 플러스 1 - 나만의 일기장 만들기 0. 복습 클라이언트란 휴대폰, 브라우저 등 html, css, javascript, 데이터 등을 서버로부터 요청을 합니다. 서버는 API 창구를 통해 클라이언트와 소통을 합니다. 정해진 규칙에 따라 각 기능에 맞춰서 HTML, CSS, JS 등을 응답하거나 데이터를 전달합니다. 이 때 Json의 형태로 전송합니다. 본 프로젝트에서 서버는 Flask, 데이터베이스는 MongoDB를 활용합니다. 서버와 클라이언트는 컴퓨터의 역할을 의미합니다. 특수한 어떤 장치가 아닌 우리가 흔히 쓰는 컴퓨터임에도 데이터를 요청하는 소프트웨어 혹은 하드웨어를 클라이언트, 응답하는 소프트웨어 혹은 하드웨어를 서버라고 합니다. 이러한 클라이언트와 서버 간의 통신에는 여러가지 방식이 있습니다. HTTP, WebSocket, TC..