HTML+CSS+JS+Flask

간단한 회원가입 / 로그인 / 보안

설치할 라이브러리 Flask: 서버 pymongo, dnspython: atlas pymongo 조작 PyJWT: jwt token 사용 - (사용 시에는 import jwt) datetime: jwt token생성 시 payload에 만료시간을 넣음 hashlib: 회원가입시에 비밀번호를 암호화해서 DB에 저장함 회원가입 API 클라이언트로부터 아이디, 비밀번호, 닉네임을 받아서 mongoDB에 저장한다. 만약 DB에 중복되는 아이디가 있을시에 클라이언트에게 오류 메시지를 보낸다! # 회원가입 @app.route('/api/signup', methods=['POST']) def api_register(): id_receive = request.form['id_give'] pw_receive = requ..

Jinja2

Jinja2? SSR기반인 Flask 프레임워크에서 사용하는 HTML 템플릿 언어이다. 템플릿이 될 HTML 문서에 데이터가 들어갈 곳을 표시해 놓은 역할을 한다 How to use? ajax가 클라이언트에서 HTTP 메서드를 이용해서 api를 호출하는 것과 다르게 Flask에서 render_template 함수로 html 파일과 데이터를 넘겨주면 HTML에 표시한 부분에 데이터가 들어간다. 기본적인 대입 아래와 같이 render_template 함수로 index.html이라는 HTML 파일과 name이란 변수에 duckgugong이라는 데이터를 넣어보자. @app.route('/') def main(): return render_template("index.html", name='duckgugong')..

정적/동적 웹페이지

정적 웹페이지 서버에 저장되어 있는 HTML을 그대로 전송한다 속도가 빠르고 서버 부담이 적다 내용 변경이 어렵다 동적 웹페이지 요청 정보에 따라 HTML을 가공해서 전송한다 상황에 맞게 변하고 관리가 쉽다 보안에 약하고 SEO 최적화가 힘들다 동적 웹페이지 종류 참고: https://miracleground.tistory.com/165 Client-side rendering (CSR) 클라이언트에서 렌더링하는 방식 서버는 요청을 받으면 클라이언트에게 HTML과 JS를 보내준다. 클라이언트는 이것들을 받아 렌더링을 시작한다 Sever-side rendering (SSR) 서버로부터 완전하게 만들어진 HTML 파일을 받아와서 페이지를 렌더링하는 방식 서버쪽에서 렌더링 준비를 끝낸 상태로 템플릿 HTML에 ..

DB에 사진 업로드하고 화면에 나타내기

What to do? 이미지 업로더로 이미지를 프로젝트 static 폴더 내에 저장하고 DB에 이미지의 이름, 코멘트, static 폴더에 저장할 이미지의 이름과 확장자를 DB에 저장한 후 이를 이용해서 static 폴더내에 저장된 이미지를 불러와서 화면에 나타내보자! file은 일반 json 형식의 데이터와 다르게 formdata 형식으로 넣어서 보내자! static 폴더에 저장된 이미지 이름이 겹치면 안되므로 이미지 이름을 datetime 함수를 이용해서 날짜-시간으로 저장해주자!! 예시화면 순서 1-1. 클라이언트가 파일을 서버에 보내는 코드를 작성 Tip. 파일을 서버에 보낼때는 일반 JSON 형식의 파일이 아닌 formdata에 데이터를 넣어서 POST 요청으로 보낸다! Tip. 클라이언트가 P..