wisePocket

1. 클라이언트와 서버 연결 확인하기(테스트용) GET 방식과 비슷하지만 요청 할 때 body를 추가하여 요청하는 부분이 다르다. body를 request.form으로 받게되는 부분이 추가된다. 어떤 이벤트에 함수를 연결 할 지 확인 "주문하기" button의 onclick 이벤트로 JavaScript의 save_order() 함수 호출 JavaScript의 save_order()라는 함수 실행 formData라는 객체를 생성 {'sample_give':'샘플데이터'}라는 Dictionary 형식 데이터를 .append()를 통해 formData에 담기 save_order()내부 fetch()를 통해 '/mars' URL에 대한 POST 방식 요청 (+ 위 formData 객체를 body로 추가하여 요청..

개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 URL에 접근 했을 때, View 페이지 로드"(document).ready()" 및 이벤트"onclick()"에서 JavaScript 요청에 대한 테스트용 메시지 알림창 생성을 확인해야 한다. Frontend와 병합하여 1차 테스트를 진행 0. 서버 실행을 위한 라이브러리 임포트와 서버 실행 포트 설정 Flask Framework 라이브러리 request 모듈 jsonify 라이브러리 port=5001(Mac이라 포트충돌 방지) # 라이브러리 임포트 # Flask Framework # view페이지 렌더링을 위한 render_template 메서드 # 요청 데이터에 접근 할 수 있는 flask.request 모듈 # dictionary를 json형..

개발하고자 하는 프로젝트의 View 페이지(HTML,CSS)와 JavaScript 연결 테스트용 작성 CSS, JavaScript 모듈화(Static) 및 참조 링크 설정 1. HTML 경로 : (project_root)mars/templates/index.html Body는 Header / Content 로 구분 Header : 간단한 타이틀과 주문 관련 설명 기록 Content : 이름(#name), 주소(#address)는 input 태그를 통해 value 획득 평수(#size)는 select박스에 5개 option을 선택하여 value 획득 table>thead 에 이름, 주소, 평수 컬럼명 3행 지정 table>tbody(#order-box) 에 추후 save_order() 함수의 결과가 1열씩..

(venv) 가상환경이 설정된 프로젝트 폴더의 터미널에서 해당 프로젝트에 필요한 프레임워크와 *라이브러리를 설치 한다. 1. Flask framework 설치 pip3 install flask Flask 2.3.2 설치 완료 2. Python으로 MongoDB 사용하는 PyMongo package 설치 pip3 install pymongo pymongo 4.4.0 설치 완료 3. Python용 DNS패키지 Dnspython library 설치 pip3 install dnspython dnspython 2.3.0 설치 완료 함수들이 뭉쳐진 하나의 .py 파일 안에 이루어진 것을 모듈이라고 합니다. 여러 개의 모듈을 그룹화 하면 패키지가 됩니다. 툴킷 또는 패키지는 종종 라이브러리라고도 불리웁니다. 프로젝트..

1. 프로젝트 폴더 생성 2. app.py 메인 파일 생성 3. venv 가상 환경 설정 python3 -m venv venv 4. 인터프리터 python 3.8.2 버전 선택 후 (venv)가상환경 적용 터미널 열기 5. view페이지용 templates 폴더 생성 6. 메인 뷰페이지 index.html 생성 7. .gitignore로 가상환경 추적 제외 venv/ 해당 프로젝트는 아래 깃을 통해 업데이트 되고 있습니다. https://github.com/yzpocket/Flask_project_mars GitHub - yzpocket/Flask_project_mars: [Flask] Flask framework 미니프로젝트(project mars) [Flask] Flask framework 미니프로젝..

# Flask_project_mars [Flask] Flask framework 미니프로젝트(project mars) ## 🖥️ 프로젝트 소개 "화성땅"을 주문하는 주제로 만드는 일종의 "Memo" 기능 웹 페이지 ## 🕰️ 개발 기간 * 23.07.09일 - 23.07.10일 ### 🧑‍🤝‍🧑 맴버구성 - 김인용 - 싱글 프로젝트 ### ⚙️ 개발 환경 - **MainLanguage** : `PYTHON` - **IDE** : VisualStudio Code 1.79.2 (Universal) - **Framework** : Flask Framework - **Database** : MongoDB(5.0.11) - **SERVER** : Flask ## 📌 주요 기능 #### View 구성 - top부분..

파이썬 입문 배운점: 함수, 변수, 조건문, 반복문 등이 Python에선 어떻게 표현되는지 기초 문법을 사용 주의해야 될 것은 함수는 def라는 명칭으로 시작하고 ' : ' 콜론을 사용한다. 또한 실행될 함수 내용은 ' ' 탭 빈공간으로 열맞춤이 꼭 맞춰줘야 한다는 점 가상환경 venv 구축법(python3 -m venv .venv) venv내 라이브러리 설치법 (pip install xxx) 라이브러리 임포트(import xxx) requests 라이브러리 사용해보기(js fetch와 비슷한 역할) 데이터 가져오기 (data = requests.get(’link’) 크롤링에서 **BeautifulSoup 라이브러리 사용해보기(**우리가 원하는 특정 부분 을 빠르고 쉽게 필터링 해주는 라이브러리) sou..

JavaScript 맛보기~jQuery 기초 배운점: 태그 내 함수 선언 해당 함수가 작동 될(event) 개체 지정 console.log로 event 없이 테스트 할 수 있음 a라는 변수에 선언된 값들을 불러오는것 Dictionary는 [{key, value}, {k,v}, … ] 를 불러올 수 있다. 어려운 점: Dictionary는 왜배우는지?? (→ JSON의 형식이다) 블로그 링크 : https://ohnyong.tistory.com/12 https://ohnyong.tistory.com/13 https://ohnyong.tistory.com/14 서버-클라이언트 통신 이해~Fetch이해하기 배운점: "서울의 미세먼지" 실시간 데이터를 통한 JSON 형식 확인 JSONVue를 설치한 후 확인하면..

HTML, CSS 기초 배운점: HTML, CSS과 Bootstrap 활용을 빠르게 복습 어려운 점: 태그 내의 여러 속성값을 지정하는 방법에 대해서 익숙해지고 검색을 생활화해야 한다. 블로그 링크 : https://ohnyong.tistory.com/3 https://ohnyong.tistory.com/4 CSS 활용 배운점: linear-gradient 를 사용하여 이미지를 어둡게 보정 division태그 내부의 콘텐츠 (Text, Input, Button 등) 을 가운데 정렬 백그라운드 색상 제거 (투명화) transprent 추가적으로 "hover"(마우스 커서가 올라간 경우) 테두리 강조 이벤트를 추가 어려운 점: 기초적인 CSS 꾸미는 태그, 속성 사용법 익혀야 한다. 부트스트랩을 활용하더라도..

3주차는 Python입문과 웹크롤링, MongoDB까지 과정을 배웠다. Python: 함수, 변수, 조건문, 반복문 등이 Python에선 어떻게 표현되는지 기초 문법을 사용 주의해야 될 것은 함수는 def라는 명칭으로 시작하고 ' : ' 콜론을 사용한다. 또한 실행될 함수 내용은 ' ' 탭 빈공간으로 열맞춤이 꼭 맞춰줘야 한다는 점 가상환경 venv 구축법(python3 -m venv .venv) venv내 라이브러리 설치법 (pip install xxx) 라이브러리 임포트(import xxx) requests 라이브러리 사용해보기(js fetch와 비슷한 역할) 데이터 가져오기 (data = requests.get(’link’) 크롤링에서 **BeautifulSoup 라이브러리 사용해보기(**우리가 원..

버튼만 달랑 있는 기초적인 웹 페이지를 만들어서 GET과 POST 요청, 응답이 이루어지는지 실습했다. 사실상 진짜는 여기부터.. 우선적으로 request와 jsonify 라이브러리를 임포트하고 '/test'로 라우트를 지정하고 'GET', 'POST' 예제를 실행해 보았다. 1. GET 방식 실습 '/test' URL에서 버튼을 눌러 GET 요청, 응답을 테스트했다. app.py의 코드 # 통상적으로 Flask framework를 사용할 때 가장 기본이되는 python파일을 app.py로 명칭한다. # 변경 가능하나 통상적으로 사용하니 그대로 따라하자. # render_template 를 추가로 임포트 했다. # request를 추가로 임포트 했다. # jsonify를 추가로 임포트 했다. from f..

render_template() 함수는 Flask에서 제공하는 templates폴더에 저장된 HTML을 불러올 때 사용하는 함수. 따라서 templates 폴더를 생성하고 index.html을 넣어두고자한다. 이 과정 전에 공식문서에서 Flask의 폴더 구조에 대한 글을 확인해보았다. 이 처럼 Flask Framework를 사용하고자 하기 때문에 프로젝트 내 폴더 구조를 맞춰주는 것이 좋다.(바꿔도 되지만 pip로 설치된 Flask 내부의 많은 config 파일들을 건들여야 한다.. 궂이? 절대적으로 안된다는 아니긴하다.) 1. templates 폴더 생성과 기본 index.html 작성 root/templates/ 구조로 폴더를 생성한다. 이후 아주 간단한 html을 작성했다. 버튼에는 onclick ..

첫 app.py를 만들고 commit을 하려하는데 까먹은 부분이있었다. 가상환경 설정시 "../venv/" 라는 폴더가 생성되고 안에 관련 파일들이 1000개 가까이 추가된다. 가상환경은 내 컴퓨터 로컬에서만 적용되도 상관없기 때문에 궂이 git으로 보낼 필요가 없다. 가상환경을 설정한 루트 폴더에 .gitignore를 생성하고 "venv" 폴더를 스테이징 조차 제외 시켜주면된다. .gitignore 파일에 내용은 별거없다. 이것 자체가 venv 폴더를 무시하겠다는거다. venv/ .gitignore를 넣자마자 깔끔하게 해당 폴더와 폴더내 파일들을 모두 추적하지 않는다. = 무시한다. 불필요한 파일이나 이전에 포트번호와 관련된 부분도 .gitignore에 등록하여 충돌이 발생하지 않게끔 관리 할 수 있다..

실습하고자하는 폴더를 venv로 가상환경을 잡은 것 까지 진행되었다. 본격적으로 Flask를 설치하고 사용해보자. 1. 패키지 매니저를 통한 Flask 설치 pip(Package Installer for Python)로 Flask Framework를 가상환경에 설치 할 수 있다. 원하는 폴더와 (venv)로 가상환경 터미널인지 확인한 후, pip install flask 성공적으로 설치 된다. 2. 설치된 Flask Framework 임포트와 첫 사용 통상적으로 Flask framework를 사용할 때 가장 기본이되는 python파일을 app.py로 명칭한다. 변경 가능하나 통상적으로 사용하니 그대로 따라하자. 아래 기본 코드를 기억하고 실행해본다. from flask import Flask app = ..

플라스크는 Python의 마이크로 웹 프레임워크이다. 다양한 웹 엔진과 붙여서 쓸 수 있고 또 가볍기도 해서 Django와 같이 쓰는 경우도 있다. 코드도 비교적 단순하고, 특히 API 서버를 만들기에 매우 편리하다. 원하는 폴더로 이동한다. /Users/inyongkim/Documents/sparta/projects/01.prac/ app.py를 만든다. /Users/inyongkim/Documents/sparta/projects/01.prac/app.py 터미널을 켠다. 터미널에서 해당 폴더에 가상환경을 잡는다.(venv) MacOS는 python3 python3 -m venv venv Windows는 python python -m venv venv 인터프리터 선택 -> Python 3.8.2 ('v..