아 ㅡㅡ 배경을 모든 화면에 채우기 위해 배경을 body의 높이 전체로 지정하고 화면을 줄였을 때 자식 요소중 flex box에서 flex-wrap을 사용하고 flex-box의 자식이 flex-shrink: 0인 경우에 body 밖으로 튀어나가서 배경화면 밖 하얀 화면으로 삐져나가는 경우가 있다! 아래처럼 모든 화면이 검은색으로 보이게 하고 싶지만 갑자기 flex 요소들이 화면 body 밖으로 튀어나가는 경우가 있다!!! 이런 경우에 body에 overflow: auto 옵션을 주면 해결 가능하다!!! 이거 모르고 개삽질함 ; body, html { margin: 0; padding: 0; height: 100%; background: black; } body{ -ms-overflow-style: non..

Why? 사용자가 프로필 사진을 선택해서 서버에 전송하기 전에 해당 이미지를 미리 보여주고 싶을 경우에 사용! 사용자가 자기가 무슨 사진을 올렸는지 확인할 수 있도록! How? input 태그의 type이 file인 경우에 사용자가 파일을 선택하면 onchange 이벤트가 발생한다! onchage이벤트가 일어났을 때 실행되는 함수에서 이벤트가 일어난 객체(파일이 변경된 input)을 가져온 후에 files 객체로 실제 파일의 객체를 뽑아온다. 뽑아온 파일을 filereader로 읽어서 img 태그의 src 값에 넣을 수 있는 경로로 변경시킨 후에 미리보기 이미지 jquery 등을 이용하여 attribute 값을 변경시켜준다!! +++ 추가로 사용자에게 지정된 크기의 이미지만들 보여주고 싶으면 src에 이..

Why? 로그인을 하지 않은 사용자가 로그인 후 이용할 수 있는 페이지로 들어감 → 로그인 화면으로 전환된 로그인 → 원래 접속하려고 했던 로그인 후 이용할 수 있는 페이지로 돌아옴! 위와 같은 기능이 있으면 사용자가 편리하다! ex) 로그인 후 홈에 갔다가 다시 들어가지 않고 원래 페이지로 이동 리액트를 이용하지 않더라도 url을 파싱해서 가지고 있다가 원하는 페이지로 이동시킬 때 유용할듯!! How Flask 서버를 이용한 예시이다! 만약 서버에서 로그인 정보가 없는 사용자가 로그인이 필요한 페이지에 접속하려 했을 때, jwt-token을 이용해서 이를 감지한다! jwt-token이 유효하지 않으면 로그인 페이지로 redirect하면서 쿼리 파라미터로 기존에 접속하려고 했던 페이지의 url을 보낸다...

설치할 라이브러리 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? 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에 ..