Moon Blog

사전학습 3주차 - Flask / 응답 만들기 / 파일 관리 / 다양한 기능 본문

신한투자증권 프로 디지털 아카데미

사전학습 3주차 - Flask / 응답 만들기 / 파일 관리 / 다양한 기능

문블룸 2023. 1. 7. 21:27

- Flask

Micro - 마이크로 서비스

Routing - 특정 주소로 접속했을때 주소마다 다른 컨텐츠를 보여줌

Rendering - 

 

flaks 설치시 

  WARNING: The script flask.exe is installed in 'C:\Users\사용자명\AppData\Roaming\Python\Python310\Scripts' which is not on PATH.
  Consider adding this directory to PATH or, if you prefer to suppress this warning, use --no-warn-script-location.

다음과 같은 경고문이 뜰 경우 환경변수 설정을 해줘야 함

 

윈도우 검색으로 '시스템 환경 변수 편집' 입력

다음과 같은 창이 뜨고 환경 변수 -> 사용자 변수에 'Path' 누르고 편집 클릭 -> 새로만들기 클릭 -> 'C:\Users\사용자명\AppData\Roaming\Python\Python310\Scripts' 입력 후 확인하면 오류 해결

 

- 서버 실행

https://flask-docs-kr.readthedocs.io/ko/latest/quickstart.html

 

빠르게 시작하기 — Flask 0.11-dev documentation

웹 어플리케이션에 있어서 클라이언트에서 서버로 보내는 데이타를 처리하는 것은 중요한 일이다. Flask에서 이 정보는 글로벌한 request 객체에 의해 제공된다. 여러분이 파이썬 경험이 있다면,

flask-docs-kr.readthedocs.io

flask 기본 애플리케이션 코드 복사 후 붙여넣기 

 

- 응답 만들기(html, api)

flask로부터 render_template 추가

문자열 대신 html returnd은 render_template이 함

return 자리에 render_template(파일명.html)로 불러오기 가능

이때 flask는 'templates' 라는 폴더명 안에 있는 파일만 불러옴 그러므로 templates라는 폴더명을 갖는 폴더를 생성하고 그 안에 파일을 만들어야(Flask에서 정의해놓은 이름)

 

웹 페이지는 결과로 어떤 페이지를 주는 거고

api는 결과로 어떤 데이터를 전달함

flask로부터 jsonify 추가

api는 json 형식임으로 jsonify(딕셔너리형태)로 실

 

- 파일 관리

'static' 폴더 생성(Flask에서 정의해놓은 이름)

css, javascript와 이미지 등 html 관련 요소들이 위치하는 폴더

routing시 html 파일은 templates 폴더에 존재하기 때문에 <link>로 경로 지정시 '/static'이 맨 앞에 들어가야함

 

- 아이콘 제공 사이트

https://materialdesignicons.com/

 

Material Design Icons

Material Design Icons' growing icon collection allows designers and developers targeting various platforms to download icons in the format, color and size they need for any project. Loading... Sponsored by Icons8 Material Icon Sets

materialdesignicons.com

view svg 누르고 svg 코드 복사 후 사용 가능 - 색이랑 크기 지정 가능해서 편리

 

- 지도 불러오기 

https://apis.map.kakao.com/

카카오맵에서 위치 검색 후 공유에서 html 태그 복사 - 소스 생성 - 복사 후 코드에 붙여넣기

이미지를 100%로 채우기 위해서 'root_daum_roughmap' 클래스의 width를 100%로 지정

 

- 이미지 슬라이드 

https://kenwheeler.github.io/slick/

 

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

kenwheeler.github.io

이미지 슬라이더 제공 사이트

 

- 텍스트 편집기

https://quilljs.com/docs/quickstart/

 

Quickstart - Quill

Quickstart The best way to get started is try a simple example. Quill is initialized with a DOM element to contain the editor. The contents of that element will become the initial contents of Quill. Hello World! Some initial bold text var quill = new Quill

quilljs.com

텍스트 편집기 제공 사이트

 

- 이미지 업로드

form 태그에서 이미지를 전달하기 위해 enctype="multipart/form-data" 입력 필요

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/enctype

 

HTMLFormElement.enctype - Web APIs | MDN

The HTMLFormElement.enctype property is the MIME type of content that is used to submit the form to the server. Possible values are:

developer.mozilla.org

python - mport os (경로 표현하는 패키지 )

 

 

- 주소 검색 기능

https://postcode.map.daum.net/guide#upgrade

 

Daum 우편번호 서비스

우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.

postcode.map.daum.net

기본 사용법 참고해서 활용

'신한투자증권 프로 디지털 아카데미' 카테고리의 다른 글

사전학습 4주차 - AWS / 백그라운드 실행 / 도메인 연결  (0) 2023.01.08
사전학습 2주차 - 웹 스크래핑(크롤링) / 몽고DB  (0) 2023.01.02
사전학습 1주차 - jQuery / 서버 통신 / API / Ajax  (0) 2023.01.01
사전학습 1주차 - 웹 사이트 구성 원리 / Bootstrap / CDN  (0) 2022.12.25
'신한투자증권 프로 디지털 아카데미' Related Articles more