wisePocket

해당 백엔드 요청 응답 흐름은 이전 프로젝트인 project mars와 유사하다. https://ohnyong.tistory.com/57 1. 클라이언트와 서버 연결 확인하기(테스트용) GET 방식과 비슷하지만 요청 할 때 body를 추가하여 요청하는 부분이 다르다. body를 request.form으로 받게되는 부분이 추가된다. 어떤 이벤트에 함수를 연결 할 지 확인 "댓글 남기기" button의 onclick 이벤트로 JavaScript의 save_comment() 함수 호출 JavaScript의 save_comment()라는 함수 실행 formData라는 객체를 생성 {'sample_give':'샘플데이터'}라는 Dictionary 형식 데이터를 .append()를 통해 formData에 담기 sa..

개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 URL에 접근 했을 때, View 페이지 로드"(document).ready()" 및 이벤트"onclick()"에서 JavaScript 요청에 대한 테스트용 메시지 알림창 생성을 확인해야 한다. Frontend와 병합하여 1차 테스트를 진행 해당 백엔드 요청 응답 흐름은 이전 프로젝트인 project mars와 유사하다. https://ohnyong.tistory.com/56 [Flask] Flask framework 미니프로젝트(project mars) 04 (Backend 기초 테스트 GET 요청 및 응답) 개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 URL에 접근 했을 때, View 페이지 로드"(document).ready()" 및..

개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 URL에 접근 했을 때, View 페이지 로드"(document).ready()" 및 이벤트"onclick()"에서 JavaScript 요청에 대한 테스트용 메시지 알림창 생성을 확인해야 한다. Frontend와 병합하여 1차 테스트를 진행 해당 백엔드 요청 응답 흐름은 이전 프로젝트인 project mars와 유사하다. https://ohnyong.tistory.com/56 [Flask] Flask framework 미니프로젝트(project mars) 04 (Backend 기초 테스트 GET 요청 및 응답) 개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 URL에 접근 했을 때, View 페이지 로드"(document).ready()" 및..

개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 URL에 접근 했을 때, View 페이지 로드"(document).ready()" 및 이벤트"onclick()"에서 JavaScript 요청에 대한 테스트용 메시지 알림창 생성을 확인해야 한다. Frontend와 병합하여 1차 테스트를 진행 해당 백엔드 요청 응답 흐름은 이전 프로젝트인 project mars와 유사하다. https://ohnyong.tistory.com/56 [Flask] Flask framework 미니프로젝트(project mars) 04 (Backend 기초 테스트 GET 요청 및 응답) 개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 URL에 접근 했을 때, View 페이지 로드"(document).ready()" 및..

개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 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형..

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를 설치한 후 확인하면..

본문 card 부분도 하드코딩이 아니라 제공된 소스를 API를 받은 것 처럼 받아와서 card 형태로 붙이는것을 해보자. 리뷰들이 담긴 API를 받아오기부터 시작. 1. 기존 작업한 웹 페이지에 fetch에 OpenAPI 링크 설정 기초 HTML 뼈대는 다음과 같다. 내 생애 최고의 영화들 현재 서울의 날씨 : 20도 영화 기록하기 URL Review Score Select Your Score ⭐ ⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ Comment Write Close 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니..

이전 실습들을 활용해서 "서울시 실시간 온도" 를 기존 작업 된 웹페이지에 넣어보자. 1. 기존 작업한 웹 페이지에 fetch에 OpenAPI 링크 설정, 요소를 추가한 span 추가 기초 HTML 뼈대는 다음과 같다. 내 생애 최고의 영화들 현재 서울의 날씨 : 20도 영화 기록하기 URL Review Score Select Your Score ⭐ ⭐⭐ ⭐⭐⭐ ⭐⭐⭐⭐ ⭐⭐⭐⭐⭐ Comment Write Close 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 영화 제목이 들어갑니다 여기에 영화에 대한 설명이 들어갑니다. ⭐⭐⭐ 나의 한줄 평을 씁니다 영화 제목이 ..

이전 "서울시 실시간 미세먼지 상태" 와 비슷한 예제이다 따라서 이전 코드를 재활용해서 어느 부분을 고쳐나가는지 실습해봤다. 1. "서울시 따릉이" 위치를 확인할 수 있는 간단한 HTML 페이지를 생성 기초 HTML 뼈대는 다음과 같다. 이전 예제와 특별히 다른 부분은 없지만 button 태그에서 onclick event로 q1이라는 함수를 불러오고 fetch가 작동하는 방식이 똑같다. 하지만 리스트 태그를 이용한것과 달리 table태그로 좀 더 보기좋게? 항목을 보여주는 방식이 변경되었다. 하지만 주요 목표는 동일하게 데이터를 불러오고 불러온 데이터를 html에 기록하도록 하는 것이 목표이다. 현재 데이터처럼 보여지는 내용들은 아직 데이터 통신 없이 직접 텍스트가 하드코딩된 예시일 뿐이다. Fetch ..

이전 "서울시 실시간 미세먼지 상태" 데이터를 받아오고 개발자도구 console창에 수신 여부를 확인하는 Fetch를 연습해왔다. 이제 실제로 HTML 웹페이지에서 받은 데이터를 필요한 부분을 뽑아내서 표현까지 할 수 있는지 실습했다. 1. 지역구마다 미세먼지 농도를 체크 할 수 있는 간단한 HTML 페이지를 생성 기초 HTML 뼈대는 다음과 같다. 특별한것은 없지만 button 태그에서 onclick event로 q1이라는 함수를 불러오는데 이때 fetch가 작동하고 데이터를 불러오고 불러온 데이터를 html에 기록하도록 하는 것이 목표이다. Fetch 연습하자! 1. 서울시 OpenAPI(실시간 미세먼지 상태)를 이용하기 모든 구의 미세먼지를 표기해주세요 업데이트 버튼을 누를 때마다 지웠다 새로 씌여..