소개
첫번째 주에 배웠던, Web front-end 개발 AI을 이용해서 필요성이 있어서 고민 하던 프로그램을 만들어 봤습니다.
프로그램의 목적은 API 호출을 위한 API키 관리와 웹싸이트 접속을 위한 나만의 Password생성관리 프로그램
진행 방법
1, PRD.md 파일은 Product Requirement Documents Writer 라는 GPTs의 어플 사용 했습니다.
[사용한 Prompt]
아래 기능을 웹으로 만들려고 하는데, PRD 만들어줘
- API 키를 관리 하는 프로그램
- 입력항목은 Key, value로 되어 있음
- 입력항목은 sql-lite에 저장하고, 추가/업데이트/삭제 기능필요
- 첫페이지는 password 입력 기능 필요, password는 db에 암호화 하여 저장
- 저장된 Key값도 복호화 가능한 암화화 방법을 사용하여 저장
- 저장된 키값은 별도의 페이지에서 볼 수 있도록 하나, default는 암호화로 표시 하시, 별도의 icon click시 값이 보이도록 함
- 추가 기능으로 웹싸이트 password 생성 및 관리 기능 필요, 추가/삭제 조회 기능 및 원 click 복사 기능 필요
- password생성 기능은 random으로 숫자 대소 문자 포함하여 10자리로 자동 생성 후 저장 기능 연계
- password 관리 기능을 url도 같이 관리 필요함.
결과
구현 시 배운 부분
토요일 모임시 GUI 구현은 Lovable/Bokt/V0등을 사용 해서 Cursor에서 구현 방식을 알려 주셨는데, 큰 도움이 되었습니다.
웹페이지와 Data을 연결시 Prompt는 "/programs path을 pargrams 테이블과 연결 해줘" 형태임
일요일 3시 부터 3~4시간 만에 이 정도 프로그램을 짤수 있다는 게 놀랍네요.
backend 개발은 해봤지만, front-end 개발 능력이 되니, 날개를 단것 같은 느낌 이였습니다.
