[TIL] 230209

😀 TIL # 230209

 

스파르타 코딩클럽 SWCamp 웹개발 프로젝트 마무리

 

장장 두 달간의 미니 웹개발 프로젝트가 끝이 났다. 🙌

기획 부터 개발 까지 짧은 기간동안 직접 경험해볼 수 있어 뜻 깊은 시간이 었다.

 

이번에 진행한 미니웹개발 프로젝트의 목적은 ‘독창적인 기획’이 아니라 개발을 실제로 진행하고 구현해보는 그 ‘과정’과 실행의 ‘완료’에 있다고 판단 했다. 따라서 '구현이 간단하고 구성원들의 이해도가 명료한가'에 중점을 두어 아이템을 선정하게 되었다.

 

반나절간의 치열한 회의 끝, 요즈음 핫한 MBTI 와 이상형월드컵 에 착안하여 '당신이 어쩔 수 없이 끌리는그 사람의 MBTI 💕' 라는 주제를 선정하게 되었다. 1) AI가 그린 각 MBTI 의 얼굴을 토대로 이상형 월드컵을 진행할 수 있고 2) 나와 같은 MBTI 사람들은 어떤 MBTI 를 이상형으로 지목했을까 확인할 수 있는 서비스이다.

 

다른 팀원들의 관심을 끌 수 있을만한 주제였고, 주위 지인들에게 부담없이 공유하기도 좋은 아이템이라 생각 했다.

 

 

가독성에 중점을 둔 IA

 

IA 와 와이어프레임은 그렸다. 하지만, 기획 뿐만 아니라 개발까지 해야 하기 때문에 그 다음부터가 더욱 문제였다.

 

MBTI 유형 목록과 이상형의 사진 등이 변하지 않는 ‘상수’ 데이터이므로

사실 굳이 API의 사용이 아니라, 프론트엔드에서 하드코딩을 해도 된다. 그러나,

1. 데이터베이스 내의 값을 변경하고 싶어질 경우,

2. 유저의 이상형 결과를 저장하여 그것으로 마지막 페이지의 값을 내는 로직을 만들기 위해

데이터베이스에 데이터를 저장하고 API로 데이터를 내려주는 방식을 사용했다. 이 결정을 내리는데 까지는 멘토님들의 도움을 많이 받았다.

 

 

필요한 API 작성. 노션을 활용했다.

 

그리고 나중에 mongoDB 에 수작업으로 밀어넣을 데이터를 스프레드 시트에 정리하는 작업을 했다.

DB 콜비용의 절감과 합리적인 코드 작성을 위해, 여러 개의 테이블로 나눠진 데이터를 하나의 테이블로 통합했으며,

그에 따라 한 번의 API 요청으로 최적화 할 수 있었다. (경제적인 관점에서 생각)

통합된 데이터를 불러와 브라우저 내의 로컬 스토리지에 저장함으로써, 여러 페이지에서 동일한 데이터를 재사용할 수 있었고,

JS를 통해 원하는 값만 불러서 보여주는 형태로 코딩했다. / 사실 이 부분은 개발 지식이 많은 팀원의 도움을 받아 이해했다. :)

 

나중에 DB 작업을 할 때 미리 정리해 둔 것이 정말 많이 도움이 되었다.

 

(왼) 테이블 통합 전 / (오) 테이블 통합 후

 

[MBTI에 따른 선호도 결과 불러오기]의 경우, 현재는 사용자의 데이터가 없기 때문에 임의로 결과를 추측하여 데이터 수기 입력했다.

💡 추후에는 유저 결과 데이터를 수집하여, [나와 같은 MBTI는 어떤 사람을 골랐을까?] 를 3순위까지 보여줄 수 있기를 목표 했다.

 

그렇게 나는 야매 프론트엔드 개발자로서 HTML, CSS, JavaScript 까지 일부 작성했다.

많은 우여곡절 끝에 내 아마존 EC2 서비스를 이용해 클라우드 우분투 서버에 app.py 파일을 올려 돌렸을 때, 웹페이지에서 서비스가 제대로 실행되었다, 그 뿌듯함이란 ..🥲❤️

진심으로 심장이 뛰었다.

 

그 와중에 스타 이미지에 이름 텍스트 일일히 합성한 디테일에 박수를 .. !

 

이번 프로젝트를 통해 특히, 개발자가 갖고 있는 고충을 어느 정도 느끼게 되었고,

특정 기능을 수정하게 될 때, 어느 정도의 공수가 들지 가늠할 수 있는 감을 익혔다.

개발자와의 커뮤니케이션에 한발자국 가까워 진 느낌을 받았다.

 

전체적인 기획 - 개발 플로우에 모두 참여하긴 했지만 오로지 내가 맡아 진행한 부분은 아래 세 부분이다.

- IA 작성

- 프론트 단 기획 및 개발

- AWS 통한 배포

 

지난 1년간 혼자 취미로 개발을 공부 했었는데, 그간 배운것보다 이번 두 달 동안 직접 부딪히며 학습한 것이 더욱 뜻깊다.

비개발자 네 명이서 무언가가 돌아가게 만들었다는 것에 큰 의의를 두며, 서비스 사용 녹화본을 첨부한다.

 

다음 프로젝트를 위해 내일부터도 화이팅 해보겠다 !! 가보자구 !! 🤩

 

 

// 사용 서비스(툴)

 mongoDB, AWS, PyCharm, 스프레드시트, notion, Figma ...