SSAFY 공통PJT 회고록 2편 (4-6주차): 개발은 어려워

조금 늦었지만 오늘이 최종 발표가 끝나서 쓴다고 핑계대는 회고록!

 

 

드디어 공통 PJT 끝났다! 사실 저번 주말에 쓰려고 했는데 일정이 있어버렸다😢

그런데 마침 수요일에 최종 발표가 있어서 최종 발표 끝나고 쓰는 회고록이라고ㅎㅎ... 딱 끝나고 쓰는겁니다!

 

사실은 일주일에 한번은 쓰려고 했는데 4주차 회고록 쓸 것을 정리하며 느꼈는데 4주차에는 문제들만 잔뜩 발생했는데 이걸 해결도 안하고 그냥 써도 되나? 하는 생각이 들었다. 하지만 지금 생각해보면 썼어도 됐을 것 같다. 나의 개발은 대게 주차별로 이렇게 진행되었다.

4주차: 어려움 발생 및 FE 개발
5주차: FE개발 및 어려움 하나씩 열심히 해결
6주차: 막판 스퍼트!

 

아무튼 진짜 개발단계에서의 회고록 시작!

(그런데 써놓고 마무리 안 짓고 있다가 끝난지 좀 지나서 올린다ㅎㅎ) 

 

 

📱 어려움 1. 모바일 페이지 구성하기

우리는 AR을 사용했기 때문에 웹페이지만 모바일만 고려하여 구현하기로 했다.

물론 안드로이드를 이용해서 모바일로 구현하면 좋겠지만 원래부터 우리 pjt는 웹페이지 만드는 프로젝트니까!

(아직은 Vue.js를 해보고 싶긴 했다)

 

1. 반응형 웹페이지 만들기

처음에 flex를 많이 쓰지 않았다.

사실 FE팀장은 AR을 열심히 하고 있었고 html을 구현하며 화면 크기 맞춰야하냐고 물어보니 크기 정해놓고 하라고 해서 크게 고려하지 않았었다. 그런데 페이지 하나를 구현하고 싸피 동기들과 질문하고 페이지에 대해서 코드리뷰를 해보고 있었을 때

여러 화면에 맞춰야하잖아요. 그러면 flex를 쓰세요!

 

해서 아차 싶었다...!

내가 한 휴대폰에만 맞출게 아닌데, 팀장이 대충 그렇게 하라고 했어도 내 일인데 주도적으로 생각했어야지!

아무래도 조금의 귀찮음으로 합리화를 한게 아닐까 싶다. 어차피 다 고칠거면서...

주도적으로 하자!!!

고려해야 하는구나!

그래서 flex랑 그 외에 css단위, 예를들면 vw, vh, % 등을 배워서 사용했다!

 

 

2. 모바일 웹앱이란?

웹 앱은 모바일에 최적화시킨 것이다. 겉으로 보이는 모습이나 구동방식을 앱처럼 보이도록 만들어둔 것이기 때문에 모바일로 사이트를 이용하는 사용자는 더욱 익숙하게 사용할 수 있다. 하지만 겉모습만 앱일 뿐 브라우저를 통해 들어가는 웹이기 때문에 사용자가 검색과 URL 등을 통해 들어와야 한다.

 

결론적으로는 시간이 부족해서 구현하지 못했지만 초반에 모바일 웹앱을 만들고 싶어서 방법을 찾아봤다.

 

내가 만들고 싶은 모바일 웹앱은 인프런 모바일 웹앱같은 사이트였다.

분명 웹이지만 정말 앱처럼 구동하는 사이트!

 

https://www.inflearn.com/pages/inflearn-mobile-pwa

인프런을 모바일 웹앱에서 만나보세요. - 인프런 | 스토리

 

그래서 어떻게 만드는지 방법을 찾아보았는데 프로그래시브 웹앱(PWA) 으로 만들 수 있었다. PWA에 대한 글이 아니니 그렇다는 것만 말하겠다. 아무튼 PWA로 구현해보고 싶었지만 하지 못해 아쉬움이 있지만 언젠간 써먹어 봐야지 하고 keep!

 

그래서 이번에 개발한 서비스는 모바일 웹에 가까운 것 같다.

 

 

 

📁 어려움 2. 안주 추천을 위한 데이터 전처리

 

기획단계 처음에는 어플을 사용할 때 안주를 추천받고, 그 데이터를 기반으로 추천한 안주를 사용자에게 보여주려고 했다.

하지만 팀원 2명이 나가고 기능 다이어트를 하면서, 안주 추천을 임의로 넣어준 데이터에서 구현해보기로 했다. 

 

설문지 캡처를 깜박하고 안 했는데 구글 설문지가 기한이 다 되어 닫혀버렸다ㅠ 

그래서 그냥 끄적이는 구글 설문지 질문 내용은 이렇다.

1. 연령대
2. 휴대폰 번호(상품 추첨용)
3. 좋아하는 맥주 이름 1
4. 이 맥주와 즐겨먹는 "편의점" 안주 1
5. 좋아하는 맥주 이름 2 (선택)
6. 이 맥주와 즐겨먹는 "편의점" 안주 2  (선택)
7. 좋아하는 맥주 이름 3  (선택)
8. 이 맥주와 즐겨먹는 "편의점" 안주 3  (선택)
9. 그 외 추천 맥주-안주 조합  (선택)

한 사람당 좋아하는 맥주와 추천 편의점 안주를 3개까지 받을 수 있는데, 첫번째는 필수 나머지는 선택이었다.

 

이를 데이터로 받은 결과는 다음과 같다.

 

그리고 내가 여기서 느낀 가장 핵심은

데이터를 어떻게 넣을지부터 구상하고 설문지를 작성하자.

 

이다. 통계학도로써 학교에서 배운게 있는데 부끄럽지만, 더 고민을 하고 설문지를 작성해야 했는데 너무 막 작성해서 반성이다.

 

안주를 추천해주는 것이 너무 어려웠다.

 

맥주마다 너무 종류가 다양하고, 과자도 너무 다양했다. 처음에는 안주의 카테고리를 나누어보려고 했다. 소시지는 소시지 카테고리에 넣어도 크게 나쁘지 않을 수 있지만, 새우깡, 홈런볼을 같은 과자 카테고리에 분류하는 것은 은 맥주에 맞는 안주 추천에 맞지 않다고 생각했다.

 

그래서 원래 계획대로 전문가의 안주 추천을 참고하기로 했다.

전문가의 안주 추천 내용을 보면 "라거는 매운 음식과 어울리지만 어떤 안주와 마셔도 좋다. 기름진 안주와 함께 마시면 느끼함을 상쇄시켜준다."와 같이 맛을 표현한 경우가 많았다. 그래서 생각한 것이 안주를 형용사 단어(담백한, 짭짤한, 고소한, 기름진, 자극적인, 훈제한, 달달한, 새콤한)로 분류하고 각 맥주에 어울리는 맛을 정하는 것이었다. 이러면 안주추천 페이지에서 이 안주를 추천하는 이유까지 설명할 수 있다고 생각했다.

맥주-안주 데이터에 안주 카테고리를 작성

맥주 별로 안주 카테고리 수를 세었다.

맥주에 추천받은 안주마다 카테고리를 달아 각 맥주 종류 별 안주카테고리 수를 표로 정리했고, 전문가 안주 추천을 참고하여 임의로 맥주 종류마다 어울리는 안주 카테고리를 2,3개씩 부여했다. 그리고 맥주 종류별로 안주 카테고리도 랜덤, 해당 안주 카테고리의 안주도 랜덤으로 나타나 사용자의 지루함을 없애려고 했다.

그렇게 완성된 안주 페이지

 

이렇게 구현할 거였다면 카테고리 또한 설문에서 데이터로 받았다면 더 좋지 않았을까 하는 생각이 들었다. 지금은 좀 되어 생각이 많이 안 나지만 당시에는 이런 방식으로 추천할까 라고 말 할 때마다 설문지가 아쉬웠기 때문에 다음에 설문을 통헤 데이터를 받는다면 설문지 문항을 더 많이 고민할거다.

 

 

 

🚀 어려움 3. 배포

새로운 것은 늘 어렵다!

그래도 위의 내용들은 경험으로 얻은 교훈들이라면 이것은 정말 찐으로 어려웠던 내 프로젝트 스토리이다.

 

나는 배포를 처음 해본다.

 

그래서 AWS, 리눅스, ubuntu 등을 프로젝트 전 부트캠프(SSAFY에서 프로젝트 시작 전 공부하는 기간, 강의를 보여준다) 에서 해보았지만 감은 잘 안 잡힌 상태였다. 사실 지금도 아주 잘 잡혔다고 생각이 안든다.

 

그리고 배포를 할 때 어떤 소프트웨어를 사용해야하는지도 전혀 몰랐다.

프로젝트하며 우리 FE팀장님이 AR을 오래 붙잡으면서 나홀로 외딴 섬~~ 이런 느낌이 가끔 들었다.

사실 배포도 AR로 바쁜 FE팀장님을 위해 내가 할 수 밖에 없겠다는 생각이 들었고, 결론적으로 새로운 것을 할 수 있어서 너무 좋다.

 

그래서 배포를 알아보면서 nginx, aws s3, netlify, SPA 등 다양한 단어들이 나타났는데 이것들은 나중에 자세히 다루기로 하고, 우리는 SSAFY로 부터 aws EC2를 받아서 nginx로 배포하기로 했다. 그리고 나중에 웹 기반 AR 개발 도구인 Letsee를 사용하면서 https로 꼭 바꿔야만 했다.

 

그 과정은 다음과 같다

• vue.js에서 `yarn build` 로 dist 파일 추출
• ubuntu에서 Nginx 설치 및 환경설정
• FilZila를 사용하여 aws에 dist 파일 업로드
• https로 배포 위해 letsencrypt 설치 후 cerbot 사용해서 무료 인증서 발급
• ubuntu에서 `$ sudo systemctl start nginx`명령어로 nginx 시작

 

생각보다 간단한 작업인데 아무것도 모르는 상태에서 찾아보려니 한참 걸렸다. 환경설정 코드에 대해서 꽤 살펴봤지만 조금 더 자세히 정리해보아야겠다

 

아! 그리고 ubuntu 에서 환경설정할 때, 백엔드 코드랑 같이 쓰여져 있으니 프론트만 배포하면 잘 봐야한다. https로 바꾸는 과정에서 백엔드의 환경설정 코드를 지워버려서 BE 배포자가 다시 환경설정 했다. 너무 미안했다. 여기서 교훈. 아무거나 지우지말자. 지울거면 복사라도 해놓자.

 

배포가 잘 되지 않을때는 나는 이것도 못하나 우울했지만, 다음날 아침 배포에 성공했을땐 진짜 하루종일 웃음이 마르지 않을 정도로 기뻤어서 특별한 경험이었고, 이 때 개발자로서의 즐거움에 대해서 이런 것일까? 조금 느낄 수 있었다.

 

 

 

📝어려움 4. $router.push

raking page는 raking main page와 ranking category page로 나눠지는데 다음과 같았다.

• ranking main page: 맥주 카테고리 목록이 나옴
• ranking category page: 각 카테고리별 맥주 랭킹이 나옴

이 때 ranking category 로 이동할 때 각 버튼마다 각 맥주 카테고리로 어떻게 이동하지 싶었다.

 

그래서 엄청 찾아나섰는데 그렇게 찾은 것이 router.push 였다.

html

script

그러면 이미지의 alt를 다음 페이지에 넘겨줄 수 있었다.

이걸 구현하며 공부가 부족하다 많이 해야겠다는 생각이 들어 간단한 코딩 과정이지만 굳이 써본다.

 

 

 

🐛 어려움 5. 최종발표 직전 element+ 경로 바뀜

짧게 말하면 element + 쓰지마세요는 아니고

최종발표 직전 아무것도 건드린게 없는데 페이지가 다 깨지고 난리난리가 났다.

ERROR

 

너무 당황스럽고 진짜 최종발표 직전에 이러니 무슨일인가 싶었는데... 결론은 엘리먼트 플러스가 경로를 업데이트 한 것 같다. 그래서 바꿔주었다.

 

 

 

🔨 어려움 7. git 어려워 화이팅

 

git이 자꾸 merge를 하면 rebase가 떠서 애를 먹었다. rebase에 대해 추후에 포스팅. 

그래도 이번에 git을 사용하면서 rebase도 써보고 정말 많이 발전했다. 역시 해보는게 중요해.

 

 

 

📰 결론

짧게 써볼려고 했는데 어려운 점이 한두가지가 아니라서 너무너무 길어졌다. 정리하면

 

- 주도적으로 꼼꼼히 개발하자.

- 알고리즘을 짤 때, 데이터를 구할 때, 설문 할 때. 조금 더 고민해보자.

- 무언가를 함부로 지우지 말자. 지우려면 복사라도 해놓자.

- java script가 부족한 것 같다ㅠ 다음 프로젝트를 위해서라도 공부하기

 

어쩌다 보니 프로젝트 중 개발하면서 생긴 어려움에 대해 적어봤다. 개발은 처음이라 어려운 게 많지만.. 갈수록 더 많아지겠지?

동공지진

어쩔 수 없이 화이팅이얍...!

 

그리고 최종적으로 공통 프로젝트에 대한 설명은 하나 더 포스팅 해야할 것 같다.

지체하지말고 바로 써야지ㅎㅎ

 

 

 

 

참고 사이트

 

웹과 앱 개발 방식 종류: https://6u2ni.tistory.com/25