나의 모바일 청첩장 @ToyProject

<start>
중간 문구를 어떻게 작성할지 고민이 돼서 그냥 아이언맨 명언 가져왔다
</start>

💻개발 환경

• Backend, Frontend: Django (HTML/CSS, Javascript, Python) -> 원래는 FastAPI, React로 하려했지만 변경
• DB: SQLite -> 원래는 MYSQL이나 PostgreSQL로 하려했지만 Django에서 제공하는 것으로 사용
• AWS (nginx + uwsgi + django)
• Github

📅개발 기간

약 3주

📝모바일 청첩장 기능 기획

• 영구적으로 보관할 수 있도록
• BGM
• 스크롤해서 보여주도록
• 모바일 사이즈로 -> 반응형
• 웨딩 사진을 보여줄 수 있어야함 - 클릭하면 확대 슬라이드 형식으로 (확대안돼서 좋다고 하시는 분들도 있다)
• 지도
• 방명록 (페이지네이션 or 스크롤 - 더 간단한 것으로)
• 축의금 계좌 - 클릭하면 복사
• 사용자가 웨딩 사진을 원하는 것으로 변경할 수 있어야함 -> 관리자 페이지에서 가능
• D-day

📌개발 순서

• 처음 토이프로젝트를 기획할때 작성했던 부분으로 개발하면서 변경된 부분들이 많음
• 처음 기획한 부분들 기록을 위해 추가

Frontend

• html/css로 기본적인 구조 잡기
  • 모바일 청첩장
  • 관리자 페이지 -> Django의 관리자 페이지로 사용

Backend

• 모바일 청첩장 API
  • 댓글 작성
  • 댓글 조회
  • 댓글 수정(?) → 그러면 비밀번호도 받아야함 → 테이블에 hash값으로 저장하는 것 필요
  • 지도
  • D-day 전달
  • 웨딩 사진 조회
• 관리자 페이지 API -> Django의 관리자 페이지로 사용
  • 날짜 입력
  • 신랑 신부 이름 및 계좌 번호 입력
  • 위치 지정
  • 웨딩 사진 넣기
  • 웨딩 사진 변경

DB

• 웨딩 전체 관리하는 테이블 필요
  • 웨딩 id
  • 날짜
  • 계좌 id - 외래키
  • 위치
• 계좌 테이블
  • 계좌 id
  • 계좌 예금주(신랑/신부)
  • 계좌번호
• 댓글 저장하는 테이블
  • 댓글 no
  • 웨딩 id
  • 댓글 작성자(id)
  • 댓글 내용
  • 댓글 등록 시간

실제 구현된 테이블

🤔개발 후 느낀점

fastapi, react로 하려고 했지만 react에 대한 사용이 미숙하여 프로젝트 진척에 문제가 있었다.

이번 토이프로젝트는 토이프로젝트에 재미를 붙이기 위함이 먼저였기 때문에 조금더 쉽게 사용할 수 있으면서 많은 개발자들이 사용하고 있는 django 프레임워크를 사용하여 프론트와 백엔드, DB까지 한번에 구현하는 것으로 변경하였다.

이후 Javascript 언어 공부를 생활코딩 강의로 시작하였다. 2배속으로 해서 2시간 정도 듣고 나니 어느정도 이해가 되었다.

예전에 대학생때 Django를 사용해서 프로젝트를 진행한 적이 있었지만 나는 html/css 및 크롤링 부분만 담당했었기 때문에 실질적으로 Django를 사용한 적이 없었다.

프론트, 백엔드, DB까지 한번에 사용할 수 있다는 장점이 있어서 선택한 프레임워크였는데 좋은 선택이었던 것 같다.

Django의 경우 관리자 페이지도 제공이 되기 때문에 프로젝트를 구상하면서 개발하려고 했던 관리자 페이지 부분이 쉽게 해결되었다. (나중에 추가로 개발하고 싶어진다면 관리자 페이지도 따로 개발해도 좋을 것 같다.)

처음에는 html/css, javascript만 사용해서 로컬에서 구현을 한 후 django에 적용하는 방식으로 진행했는데 만약 django에서 바로 개발을 시작하려고 했다면 조금 애먹었을 것 같다는 생각이 든다.

프론트 개발이 익숙하지 않은 상황에서 django의 설정 부분이나, 페이지를 보여주는 부분 등 헷갈리는 부분들을 이해하며 개발을 진행했다면 조금 더 시간이 많이 걸렸을 것 같다.

모바일 청첩장 기능이라고 말할 수 있는 부분은 아래와 같다.

• 모달창 기능
• 버튼 클릭시 전화 가능
• JS로 달력 구현되어 날짜만 변경하면 달력 자동으로 생성
• D-day 기능
• 이미지 슬라이드 기능
• 계좌 복사 기능
• 방명록 추가/삭제/전체보기

python이 익숙한 상황에서 JS로 구현하려 할 때 “python으로 로직을 구상한다면…” 이라는 생각이 계속 들었다. python과 JS는 비슷한 언어라고 하는데 python에서 사용하는 메서드나 라이브러리를 JS로 검색하면서 개발을 진행했던 것 같다.

개발을 하면서 가장 오랜 시간이 들었던 부분은 연락처, 방명록 모달창 부분이었다. 생각해보면 엄청 간단한 문제였지만 역시 이런 문제를 찾는 것은 삽질이 답이다 ㅎ..

방명록 모달창을 추가하는 순간 연락처 버튼을 클릭할때 방명록 입력창이 보여지는 문제가 있었다.

class,id에 중복이 있는 걸까? 설마 애니메이션을 같이 사용하면 안되는 건가? 계좌 쪽 코드를 재사용한 것 뿐인데 문제가 뭐지… script를 가져올때 잘 못가져오는 건가? 등등 여러 생각을 하며 코드를 바꾸고 고치고 반복했다.

결론은 각각 다른 js파일을 호출하더라도 변수명이 같으면 안되는 거였다.

querySelector로 가져오는 class와 id가 다르기만 하면 문제가 없을 꺼라고 생각했었는데 변수가 같으니 덮어쓰기가 되는 것이었다..

삽질이 점점 힘들어져서 console.log로 다 찍어보면서 알게 되었다…

엄청 간단한 부분이었지만 역시 해결되었을때의 쾌감은 개발하는데 힘을 주는 것 같다 ㅎㅎ

방명록 부분은 원래 페이지네이션이 되도록 하고 싶었는데 해당 페이지내에서 페이지 네이션을 하는 방법보다 전체보기 버튼으로 페이지를 이동해서 보여주는 방법도 좋은 것 같다고 생각이 들어 그러한 구성으로 개발을 진행했다.

개발을 진행하면서 많은 분들의 청첩장을 보고 심플하고 간단하게 개발을 진행했다.

아직 반응형으로는 개발이 되어있지 않은게 문제라고 할 수 있지만, 앞으로 해당 부분까지 개발을 진행할 예정이다.

그리고 처음으로 AWS에 업로드까지 완료해봤다. AWS의 경우 설명이 너무 잘되어있어서 서버를 구동하고 django 서비스를 실행하는데 큰 어려움은 없었다.

나는 nginx + uwsgi + django로 서비스를 구동하였는데 url로 검색해서 보는 첫 페이지는 너무 감동적이였다… ㅋㅋㅋㅋㅋㅋ…

토이프로젝트를 이런 맛에 하는 건가 하는 생각도 들고, 더 잘 만들어서 누군가가 사용할 수 있는 정도까지 되었으면 좋겠다는 생각이 들었다.

토이프로젝트를 시작할때 그래도 개발자인데 모바일 청첩장 정도는 내가 만드는 것도 좋지 않을까 하는 생각이 들어서 시작했는데, 주변 사람들에게도 도움이 될 수 있다는 생각이 들어 더 열심히 개발하려고 했던 것 같다.

그리고 모바일 청첩장의 경우 일정한 시간이 지나면 사라지기 때문에 캡쳐해두지 않으면 나중에 볼 수 없게 되는데 이 부분이 아쉽다고 생각되어 개발하려고 한 것도 있다.

시간으로만 따지면 24시간씩 4일?정도 개발한 것 같은데 적당한 시간이었던 것 같다.

느낀점을 주저리주저리 적었는데 지금 느끼는 감정들을 그냥 다 기록하고 싶다!!

이제 다른 토이프로젝트는 어떤 것을 할지 고민하고 있는 요즘인데, 누군가에게 도움이 될 수 있는 프로젝트를 개발한다는 것은 가슴이 설레는 일인 것 같다.

📚참고

• https://velog.io/@hyeoneedyou/django-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD%EC%84%B8%ED%8C%85#5-%EC%84%9C%EB%B2%84-%EC%8B%A4%ED%96%89
• https://kante-kante.tistory.com/8
• https://github.com/dkyou7/TIL/blob/master/%ED%8C%8C%EC%9D%B4%EC%8D%AC/Django/6.%20%5BDjango%5D%20%ED%8F%BC%20%EB%A7%8C%EB%93%A4%EA%B8%B0.md // models.py에서 참고
• AWS서버 세팅 및 nginx/uwsgi/django 연동: https://nerogarret.tistory.com/48
• 카카오 지도: https://bos.kr/kwa-manual_v-1668?pc=p