nat

여자친구를 만난지 1주년이 되어서 무슨 선물을 해줄까 하는데 예전에 velog에서 hanbinleejoy님 포스트를 감명 깊게 봐서 저도 도전해 보고 싶었습니다.😁

저희 커플은 국제 + 장거리 커플이라서 NaverAPI는 사용 못하고 GoogleAPI로 사용하기로 해서 열심히 찾아보고 공부하고, 여자친구가 감동할걸 생각하면서 열심히 작업했습니다…😭

✔ 기술

가장 먼저 목표를 몇가지 세워서 작업을 했습니다.

📄AWS배포를 최종 목적으로 하자

📄최소 map에서 추억을 회상 할 수 있는 app을 만들자

📄지금까지 사진으로 추억회상용 동영상을 제작하자

📄✨기념일이 지나기 전에 완성하자✨

📄Spring boot framework를 이용하자

📄Amazon RDS를 이용하자

(어찌어찌 전부 달성 하긴 했지만 디자인 부분에서 너무 아쉬운 감이 있습니다….😭)

🖥기술스택

위 Web app에서 사용한 기술스택은 다음과 같습니다.

HTML, CSS, JS
- 어찌보면 웹애플리케이션에서는 당연한 기술스택이죠… 여기서 MVC 패턴을 이용하려하니 Intellj에서는 JSP를 지원하지 않더라고요 그래서 jsp대신 mustache를 이용했습니다.

P92 IT Solutions - HTML, CSS and JavaScript

Bootstrap
- 디자인 부분은 React.js or Flutter를 사용해 보고 싶었지만 서버를 만드느라 시간을 너무 허비하는 바람에 이걸로 하는 방법밖에는 없었습니다.

부트스트랩 4 브라우저 크기별 요소 가리기/보이기 (hidden, visible) - JooTC

MySQL
- Oracle을 주로 사용해 보았지만, 서버쪽에서 통신이 안되는 바람에 찾다가 MySQL을 선택하게 되었습니다. DB table을 생성하고 연동에 성공하는 순간 소리를 질렀던것같은데…

Google Map API
- 처음 사용해 보는 API여서 정말 다루기가 무섭더라고요 돈도 내야 된다고 들어서. 처음에는 어떻게 작동되는지 알아보느라 시간이 걸렸는데 이리 저리 만지다 보니 결국은 정상작동을 하더라고요(localhost에서 돌려보는데도 Server에서 Client의 파일을 접근 못하더라고요)

Google Maps Platform API from CLOUDFRESH

AWS
- 이 프로젝트의 최종 목적인 AWS입니다. 처음 Linux는 회사 다닐때 종종 사용해 봤지만, AWS에서 사용하는 건 처음 해봤습니다. 그래서 시행 착오도 많았고 제일 시간과 노력을 쏟았던 부분이였네요(디자인에 더 몰두 할걸…)
기타
- Nginx
  - 톰켓을 사용하려다가 구글 API가 클라이언트 이미지를 접근 못하는 바람에 이미지 파일을 올려야 됐는데, 찾아보니 Nginx가 ftp서버에 최적화 되었다고 들어서 사요하게 되었습니다.
- GIT
  - 배포시에 파일을 Filezilla에서 수동으로 업로드 하던 회사생활이 떠올라서, GIT을 사용해 배포 자동화를 했습니다.
- YoutubeAPI
  - API를 사용했다고 말하기 부끄러울 정도로 복.붙이네요. 그래도 이 웹 애플리케이션에서 가장 중요한 영상 편지를 올릴 수 있도록 큰 도움을 줬네요

✔개선점

1. 앱개발 계획

문제점
- 앱 개발을 하는데 있어서 가장 중요한 개발 계획을 세우지 않고 하다보니, 시간적으로 너무 타이트 했습니다
개선 방향
- 개발을 하기 전에 기술적인 스택과 시간적인 목표를 먼저 세우고 해야겠습니다.

2. 컨텐츠 부족

문제점
- 서버에만 시간을 많이 투자해서 디자인적 부분하고, 미리 만들고자 했던 컨텐츠들을 구현하지 못해 너무 허술한 Web app이 되었습니다.
개선 방향
- 결국에는 실력이…모자른것 같습니다..

✔마무리

제 시간 안에 절대 못할 것 같았는데 결국에는 해냈다는 것이 너무 뿌듯 했습니다.

처음부터 끝까지 프로젝트를 혼자서 해본적이 없어서 시행 착오가 많았지만 그래도 여자친구가 행복해하고 가족들에게 자랑하는 모습을 보니 괜히 뿌듯했습니다.🎉🎉

지금까지 학교를 거치고 잠깐이나마 회사생활을 하면서, 이일이 적성에 맞나 많이 방황했는데 처음으로 스스로 목적에 맞게 계획하고 구현하고 배포를 해보니 그 후로는 공부하는 것이 너무 즐겁고 새로운 것들을 만들고 싶다는 생각이 처음으로 드네요!😁 긴글 읽어주셔서 감사하고 특별히 hanbinleejoy님께 감사합니다.👍

✔번외

EC2랑 RDS를 처음 써보는 거라… AWS야 Free Tier라며….🤦‍♂️ 만원이라 다행이다…😭

(해당 포스트는 Velog hanbinleejoy님의 https://velog.io/@hanbinleejoy/%ED%95%98%EB%82%98%EB%BF%90%EC%9D%B8-%EC%97%AC%EC%9E%90%EC%B9%9C%EA%B5%AC%EC%97%90%EA%B2%8C-%ED%95%98%EB%82%98%EB%BF%90%EC%9D%B8-web-app-%EC%84%A0%EB%AC%BC%ED%95%98%EA%B8%B0 포스트를 참조하여 만든 것입니다.)