Flask로 Replit DB를 활용하여 일기장 웹페이지를 개발해줘.
화면 구성
- 메인 화면은 제목과 달력으로 구성되어 있어.
제목은 'My Diary'야. H2와 Bold처리해서 써줘.
달력은 2024년 7월 전체의 날짜가 표 형식으로 되어 있어. 표의 가장 윗줄은 요일 영어로 써줘.
2024년 7월 1일부터 2024년 7월 31일까지 표에 칸칸이 날짜별로 써줘.
- 사용자가 한 날짜를 클릭하면 해당 날짜 일기 페이지로 이동해.
- 일기 페이지는 제목, 텍스트 박스, save 버튼, 메인화면으로 돌아가는 버튼 으로 구성되어 있어.
제목은 'Diary Entry for 해당 날짜'야. H2와 Bold처리해줘.
###ex) Diary Entry for 2024-07-03###
텍스트 박스는 사용자가 텍스트를 입력하는 곳이야. 테두리에 파란색 줄이 쳐져 있게 해줘.
save 버튼은 'save'라고 쓰고, 박스 형식이야. H4로 만들어줘. save 버튼을 누르면 DB에 저장해야해. 저장시 사용자가 다시 해당 날짜를 누르면 전에 써둔 일기가 텍스트 박스 안에 적혀있어야해.
메인화면으로 돌아가는 버튼은 'Back to Calender' 라고 쓰고, 밑줄쳐줘. H4로 만들어줘. 사용자가 이 버튼을 누르면 메인 화면으로 돌아가야해.
1.
아주 상세히 설명할 것
나는 큰 구조도를 그리면서 설명했어.
전체 구성 = 홈 화면 + 일기 쓰는 화면
홈 화면: -홈화면 특징1 -홈화면 특징2
일기쓰는 화면:
-일기쓰는 화면 특징 1
-일기쓰는 화면 특징 2
페이지 마다 있는 모든 것들을 하나하나 설명했어.
예를 들어, 홈 화면의 My Diary 를 설명해볼게.
기능은? : 제목
어떻게 생겼어? : "My Diary" 라고 쓰고, 크기 = H2, 두께 = Bold
(색이나 글씨체를 바꿀 수도 있어)
하나 더 예를 들면, 일기 쓰는 화면의 Back to Calendar 를 설명해볼게.
기능은? : 버튼
어떤 버튼인데? : 누르면 홈 화면으로 돌아가야해.
어떻게 생겼어? : "Back to Calendar" 라고 쓰고, 크기 = H4, 두께 = Regular, 밑줄치기
2.
데이터베이스를 쓰기 위해 "Flask 로 Replit DB 를 활용하여" 라는 말을 꼭 넣었어.
데이터베이스는 저장 파일이라고 생각하면 된대. 7월 1일에 쓴 일기는 → 7월 1일에 저장되어야 하고, 7월 2일에 쓴 일기는 → 7월 2일에 저장되어야 하니까 데이터베이스가 필요하대 (정확히는 잘 몰라 😛)
다음에 쓴다면 이렇게 쓰려고 해.
Flask로 Replit DB를 활용하여 일기장 웹페이지를 개발해줘.
#화면 구성
메인화면, 일기쓰는화면
##메인화면
제목 + 달력
###제목
"My Diary" 라고 쓰고, H2와 Bold 처리해줘.
메인 화면의 왼쪽 위에 써야해.
###달력
달력은 2024년 7월 달 전체가 나타나있으면 돼.
표 형식으로 구현해줘.
표의 가장 윗줄은 요일을 영어로 적어줘. 일요일부터 시작하게 해줘.
사용자가 한 날짜를 클릭하면 해당 날짜의 일기쓰는 화면으로 이동해야해.
##일기쓰는화면
제목 + 텍스트박스 + 저장 버튼 + 메인화면으로 돌아가는 버튼
###제목
"Diary Entry for 해당 날짜"라고 쓰고, H2와 Bold 처리해줘.
ex) Diary Entry for 2024-07-04
화면 왼쪽 가장 위에 써줘
###텍스트박스
사용자가 텍스트를 입력하는 곳이야.
사각형 모양이고, 테두리에 파란색 줄이 쳐져 있게 해줘.
가로 길이는 전체 페이지의 30%
세로 길이는 150px
테두리 두께는 2px
제목 아래에 써줘.
###저장버튼
"Save" 라고 쓰고, 박스로 된 버튼이야.
H4로 써줘.
사용자가 이 버튼을 누르면 해당 날짜 DB에 저장해야해.
저장시 사용자가 다시 해당 날짜를 누르면 전에 써둔 일기가 텍스트 박스 안에 적혀있어야해.
###메인화면으로 돌아가는 버튼
"Back to Calendar" 라고 쓰고, 밑줄쳐진 버튼이야.
H4로 써줘.
사용자가 이 버튼을 누르면 메인 화면으로 돌아가야해
배운 점
이번에 처음으로 ChatGPT에 쓰는 방법을 배웠거든
"#" 은 대제목
"##"은 중제목
"###"은 소제목
이걸 활용해서 구조를 써주면, 얘가 더 잘 이해할 것 같아.
GPT가 쓴 코드들을 읽어보니까, 다음에 디자인 할 때 이런 걸 고려해야 할 것 같아.
텍스트
옆에 회색으로 쓴 말은 '캡션'이래. 코드는 아니고, 그냥 설명?
텍스트박스 만들 때, 이런 걸 생각해야 하나봐.
width 가로 = 30% (전체 페이지의 30%를 요청할 수 있음)
height 세로 = 150px (저 정도가 150 픽셀, 아래로 더 페이지가 있다고 치면 아무튼 저정도)
border 테두리 = 2px (테두리 선의 크기도 정할 수 있는 듯)
버튼
아래 Save 버튼 만들고 나온 코드야.
버튼 만들 때, 이런 걸 생각해야 하나봐
display ? padding ? text-align 텍스트 위치 : 박스 안에서 center 에 있게 (왼,오,위,아래도 요구할 수 있을듯) text-decoration 텍스트 꾸미기 : (색, 글꼴,.. 또 무슨 선택지가 있지) background-clolr 버튼 배경색 border 버튼 테두리 두께 line-height ?
피드백 : savs 버튼을 누르면 다시 로딩이 되어 깜박이는 현상이 일어난다. 이 부분을 깜빡거리지 않게 수정하는 게 좋을 것 같다.
(아직 안해봤어. 해보고 공유할게)
3.
< 제목은 'My Diary'야. H2 와 Bold 처리해줘 > 라고 구체적으로 설명한 부분은 좋다.
희희 칭찬도 받았지 뭐야😁
4.
화면 별로 프롬프트를 확실히 분리하는 게 좋을 것 같다.
GPT 대제목,중제목,소제목 쓰는 방법을 알았으니 이렇게 수정해봐야지.
만들어보길 추천해! 궁금한 게 있다면 언제든지 얘기해줘
Subscribe to '해이든'
Welcome to '해이든'!
By subscribing to my site, you'll be the first to receive notifications and emails about the latest updates, including new posts.
Join SlashPage and subscribe to '해이든'!
