캘린더 웹사이트를 만들기 위해 Javascript로 캘린더를 직접 구현하게 만들었다.  [HTML]calendar-container에는 그게 유저 정보를 나타내는 user-info와 달력을 표시하는 calendar가 있다.user-info는 current_user에서 받아와 사용자 프로필을 표시하도록 만들어 주었다. calendar는 calendar-header에 월, 년도를 표시하고 달력을 넘길 수 있는 버튼과, 일정을 추가하는 버튼을 달아주었다.그리고 실제 달력을 출력하는 calendar-grid는 Javascript에서 구현을 담당한다. {{ user.username }} {{ us..

0. 드롭다운드롭다운에서 프로필 수정, 계정 정보 수정, 로그아웃을 선택할 수 있다.[HTML] Profile Account Logout   1. 프로필 정보 수정[HTML] 계정 정보 Name Description Birthday ..

기본적인 템플릿은 이전에 만들었던 register-form을 참고하였다.  이메일 비밀번호 로그인  1. flask-login 라이브러리를 가상머신 활성화 후 설치source venv/Scripts/activate # 가상머신 활성화pip install flask-login # flask-login 설치pip list --format..

기존 폴더 구조는 다음과 같다.calendar_app/ # 프로젝트 루트 디렉토리├── app/ # 애플리케이션 패키지│ ├── __init__.py # 앱 초기화 (Flask 앱 생성, 설정 로드, DB 초기화)│ ├── models/ # 데이터베이스 모델 폴더│ │ └── __init__.py # 모델 패키지 초기화│ ├── routes/ # URL 라우트 처리 폴더│ │ └── main.py.│ ├── static/ # 정적 파일 폴더│ │ ├── css/ # CSS 파일들 (스타일링)│ ..

필수 입력, 선택 입력, 프로필 설정의 3단계로 회원가입 시스템을 구현해 보았다.1. 필수 입력우선 필수 입력 파트에서는 이메일. 비밀번호. 비밀번호 확인. 휴대폰 번호를 입력받고 유효성 검사를 거친 후 다음 필드인 선택 입력 파트로 넘어간다.1-1. Email 중복확인이메일을 입력 받은 후 이메일이 데이터베이스에 저장된 이메일과 중복되는지 확인한다. 이메일 중복 확인 우선 이메일 형식이 올바른지 검증한 후, 올바르지 않으면 경고..

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