프로필 사진을 User 테이블에 저장해야 한다. 우선 사용자가 로컬 컴퓨터에서 이미지를 선택하면 선택된 이미지가 미리보기에 나타나고, 이를 데이터 베이스에 저장해야 한다. 보톤 이미지를 저장하는 방식은 이미지 파일을 텍스트 형식으로 인코딩하여 저장하거나, 이미지 경로만 데이터 베이스에 저장하는 두가지 방식이 있다. 이미지 파일을 직접 저장하는 방법은 데이터베이스의 용량이 커지므로, 이미지 경로를 데이터 베이스에 저장하겠다. HTML의 form에는 미리보기 이미지와 type="file"인 입력 필드를 만들어준다. 이 때 입력 필드는 display:none으로 설정하여 파일 선택 창이 안보이도록 설정한다.  우선 미리보기 이미지를 클릭하면 입력 필드도 같이 클릭되게 설정한다. 이렇게 하면 미리보기를 ..

AXIOS는 Javascript와 Flask 사이에 데이터를 주고 받는 AJAX 통신 방식 중 하나이다. 1. JSON 데이터 전송AXIOS 통신은 자동으로 데이터를 JSON 형식으로 변환시켜 준다. JSON은 {key: vaue} 배열로 형식이 간단하여 데이터를 읽고 쓰기 쉽다. HTML에서 user-email 값을 받아와 JSON 형식으로 자동으로 변환하여 Flask 서버로 전달할 수 있다. Fetch API를 사용한다면 수동으로 JSON.stringify()을 사용하여 변환해야 한다.  이메일 중복 확인  confirm-email 버튼을 클릭하면 함수가 실행된다. 이메일 형식 검증 후, 이메일 형식이 올바르지 않으면 텍스트를 띄우고 함수가 종료된다. 검증이 통과되면, AXIOS 통신(POS..

AJAX( Asychronous Javascript And XML) AJAX( Asychronous Javascript And XML)는 Javascript가 백엔드 서버(Flask)와 통신하는 방법 중 하나이다.AJAX 통신은 비동기 통신이기 때문에 서로 다른 요청을 하더라도 응답을 대기하지 않아도 된다. 따라서 페이지를 리로드하지 않아도 HTML에 데이터를 받아오거나 업로드할 수 있는 것이다. 브라우저 전체가 아닌 일부만 수정할 때 AJAX 통신을 사용한다. AJAX 통신을 구현하는 방법은 XHR, fetch API, AXIOS 등이 있다. 1. XHR (XMLHttpRequest)XHR은 AJAX의 가장 기본적인 구현 방식으로, 브라우저에 내장된 객체를 사용하기 때문에 모든 브라우저에서 지원된다. ..

2025년을 맞이하여 캘린더, 투두리스트, 다이어리 등의 기능을 통합한 웹사이트를 개발하려고 한다. 나는 이전에 파이썬 플라스크를 이용한 웹사이트를 개발한 후, AWS로 배포한 경험이 있기 때문에 똑같은 기술 스택을 사용하여 빠르게 개발해보려고 한다. 1. 프로젝트 폴더 깃허브 업로드 우선 프로젝트 폴더를 준비한다. 이전에는 C:\Program Files\PostgreSQL\15\data\CrimeManagementSystem 폴더 안에 테이블 스페이스와 프로젝트 폴더를 동시에 준비하였으나 이번에는 둘을 분리하였다. - 프로젝트 폴더 경로 : C:\Project\calender_app 이제 깃허브에 폴더 업로드를 진행한다. 미리 깃허브에서 레포지토리를 만들어 주소를 준비한다.깃허브에 폴더를 업로드 하는 ..

전에 포스트에서는 통계 자료를 문자열로 만들어 SweetAlert 하였고 이번에는 그래프로 만들어 HTML에 출력한다. 파이썬 코드는 동일하다.우선 html에 Chart.js를 사용할 수 있도록 다음 코들르 추가해준다.  그리고 그래프를 띄울 div를 만들고 canvas를 추가해준다. 다음으로 Javascript이다.우선 파이썬에서 전달받은 데이터를 변수에 저장해준다. const year_list = response.data.year_crime_data.map(item => item.year); const year_cnt_list = response.data.year_crime_data.map(item =..

Citizen은 각 지역의 범죄 및 사건을 열람할 수 있다. 우선 Citizen의 ID를 입력하면 자신이 속한 지역을 안내해준다,열람 기능은 2가지로 나뉘는데, 첫번째로 연간, 월간 범죄 통계 자료 열람이고 두번째가 범죄 내역 상세열람이다.두번째 기능은 저번에 이미 구현한 것으로 설명을 생략하겠다.첫번째 기능인 연도별, 월별 범죄 통계자료의 경우 데이터베이스에서 해당 지역의 범죄 횟수를 가져와야 한다.자바스크립트에서 region값을 파이썬 플라스크로 보내준다. 통신 방식은 AXIOS const region = document.getElementById('region').value; axios.post('/crime_data_lookup', { region : region })..