프로젝트25 앱 개발 - 프로젝트 1 - 1. 돈 관리 앱 flutter 요즘 돈을 너무 낭비하고 있다는 생각이 들어서 가계부를 작성해 볼까 하고 있습니다.근데 대부분 가계부는 다 작성하기 귀찮게 되어 있더라고요. 그래서 최대한 간단하게 사용할 수 있는 용돈 관리 앱을 만드려고 합니다.프레임 워크 선정돈은 대부분 음식점이나 편의점처럼 밖에서 사용하는데 웹으로 만들면 쓰기가 불편하다는 생각이 들었습니다. 그래서 이번에는 앱으로 만들 예정입니다. 안드로이드와 ios 모두 지원하기 위해 flutter를 사용할 것입니다. 저번 프로젝트에서 서버를 만들어서 사용했더니 저 혼자 사용했는데도 aws 비용이 달에 6만원이 나왔습니다. 돈 관리를 하려고 하는 건데 돈을 쓰기에는 부담이 되어서 이번에는 firebase를 적극 활용할 예정입니다.fvm프로젝트를 만들다 보면 버전들이 충돌하는 경우.. 2025. 2. 7. 웹 개발 - 프로젝트 2 - 15. ec2에 react 올리기 프로젝트를 만들었으면 이제 사람들이 쓸 수 있게 배포를 해야합니다. aws의 ec2를 만들었다 가정하고 진행하겠습니다.ec2 세팅우선 vscode에 ec2를 연결하고sudo -i 를 이용해 관리자 계정으로 전환합니다. nginx를 이용해 홈페이지를 실행할 것입니다.amazon-linux-extras install nginx1 으로 설치합니다. 그럼 이런 에러가 저를 반깁니다. Amazon Linux 2023로 버전이 올라가면서 저 명령어가 사용이 안되는 것 같습니다. 대신dnf install nginx 로 설치해 봅시다.rpm -qa | grep nginx 명령어로 잘 설치가 되었는지 알 수 있습니다.프론트 빌드이제 프론트 코드로 이동합니다. 여기서npm run build 를 이용해서 코드를 빌드합니다... 2025. 1. 17. 웹 개발 - 프로젝트 2 - 14. firebase 알림 전송 firebase를 이용해서 사용자에게 리마인드 알림을 보내려 합니다. 앱이 닫혀 있어도 메세지를 보내야 하므로 firebase를 사용해 보도록 하겠습니다.firebase가 최근에 바뀐 것으로 보입니다. GPT한테 물어보면서 만들면 오류가 발생합니다. 공식 문서를 확인하는 것을 추천드립니다.firebase 설정firebase에서 웹 프로젝트를 하나 만듭니다. 프로젝트 개요 오른쪽 톱니바퀴를 누르고 서비스 계정으로 갑니다. 화면 아래 새 비공개 키를 누릅니다. 그러면 json 파일 하나가 다운받아 집니다. 그리고 클라우드 메시징으로 이동해서 웹 푸시 인증서를 받습니다. 이 정보는 프론트에서 사용됩니다.프론트react에 firebase를 인스톨해 줍니다.npm install firebase 그리고 fireba.. 2024. 12. 6. 웹 개발 - 프로젝트 2 - 13. 이메일 인증 회원가입 기능이 있는 서비스에서 아무런 인증 없이 사람들을 받으면 계정을 막 만들어서 DB를 터트리거나 유령 계정이 만들어지는 등 문제가 생길 수 있습니다. 그래서 이메일 인증 같은 방식을 적용을 합니다. 물론 이정도 크기의 서비스에서는 큰 문제가 없겠지만 그래도 한번 적용해 봅시다.메일 전송이메일 인증은 보통 다음 과정으로 이루어 집니다. 1. 유저가 입력한 이메일로 코드 전송 ex) NSDG-JEIT2. 유저는 이메일에 있는 코드를 입력3. 코드가 일치하면 인증 완료 메일 전송은 이전 포스트를 참조하면 세팅을 할 수 있습니다.우선 request부터 만듭니다. 회원가입과 비밀번호 찾기 2개를 지원할 것이기 때문에 type을 넣어줍니다. 이메일 전송 기능을 만듭니다. setTo : 받는 사람setSubj.. 2024. 11. 1. 웹 개발 - 프로젝트 2 - 12. work 삭제 db에서 유저나 게시판 같은 것을 삭제하는 경우가 있습니다. 이럴 때 db에서 그 값을 정말 제거하면 문제가 생길 수 있습니다.A유저가 B 게시글을 썼다고 가정해 보겠습니다 이제 A유저가 탈퇴를 했다고 가정하겠습니다. 그럼 만약 이 게시글에 접근한다면 해당 유저를 찾을 수 없고 엄청난 오류가 발생하게 됩니다. 이런 경우 유저의 상태를 이용해 관리합니다.상태 관리work를 제거하는 작업으로 예를 들어 보겠습니다.work의 상태를 저장하는 ENUM을 만듭니다. 현재는 NORMAL과 DELETE로 예를 들겠습니다.데이터베이스에도 상태를 저장하는 컬럼을 만듭니다. 이제 WorkEntity에서 상태를 가져올 수 있게 합니다. 기본적으로 모든 상태는 NORMAL로 둡니다. 그리고 삭제한 work는 DELETE로 바.. 2024. 10. 28. 웹 개발 - 프로젝트 2 - 11. 프론트 디자인 이제 프론트를 개발해야 합니다. gpt에게 디자인을 잡아달라고 합시다.로그인 유저가 비밀번호를 잘못 입력할 수도 있기 때문에 비밀번호 확인 창을 넣습니다.그리고 비밀번호가 같을 때만 진행하도록 합니다. 플로팅 버튼스트릭을 추가하는 버튼을 넣습니다. gpt한테 만들어 달라고 하면 코드까지 만들어 줍니다. 복붙한 다음 자신에게 맞는 스타일로 수정합니다. 오른쪽 아래에 버튼이 생겼습니다. 이 버튼을 누르면 일정 등록 탭으로 이동합니다.일정 등록이제 일정 등록 페이지를 만들어 봅시다. gpt가 말이죠. 해당 디자인을 복붙한 다음 고장난 부분을 수정해 줍니다. gpt는 만능이 아니기 때문에 마지막에는 사람이 꼭 검증해 주는 것이 좋습니다. 그렇게 수정하면 이렇게 나옵니다. 이정도면 제가 디자인 한 것 보다 훨씬.. 2024. 10. 19. 이전 1 2 3 4 5 다음
