프로젝트 후기라고 쓰고 그냥 주저리라고 읽는다.

👉 https://anyweatherplaylist.netlify.com

✨ 동기

루미 서울만 만들다가 너무 지겹기도하고 혼자만들기엔 너무 큰 프로젝트를 시작한 것 같아 도저히 끝날 기미가 안보여서 리프레시 할겸 평소에 만들어 볼까 했던 웹사이트를 만들기로 했다.

기본 컨셉은 사용자의 위치를 가져와서 날짜/온도를 찾은 다음에, 이에 맞는 플레이리스트를 재생시켜주는 웹사이트이다.

평소에 날씨에 따라 기분이 쉽게 좌우되는 편이라, 날씨마다 듣는 플레이리스트가 있는데 좋은 건 나누는 마음(?)으로 프로젝트를 시작하게 되었다. 백엔드는 전혀 만들 필요가 없고, 필요한 정보는 API로 받아오면 되기 때문에 오직 프론트만 신경쓰면 돼서 시작할 때 마음이 한결 가볍고 편했다. 만약에 백엔드도 만들었다면, 내 플레이리스트에 대한 의견이나 방명록처럼 웹사이트를 다녀간 사람들이 흔적을 남길 수 있도록 간단한 댓글 기능 같은걸 넣었을 것 같다.

 

🔥 프로젝트를 진행하면서...

이번 프로젝트에는 클래스 컴포넌트를 전혀 사용하지 않고 react-hooks와 redux-hooks를 같이 사용하면서 hooks개념에 좀 익숙해지려고 했다. 확실히 react와 redux 모두 hooks를 사용하니 코드가 훨씬 깔끔해졌다. 단지 exhaustive-deps 개념에서 꼬리에 꼬리를 문다던가, infinite loop에 걸리는 경우가 있어서 헷갈리기도하고, 이 부분은 확실히 알기 위해 더 공부를 해야겠다. 오늘 마침 리액트를 다루는 기술 개정판이 도착했다 크크크 개정되기 전 책은 이북으로 구매해서 몰랐는데, 실물 책으로 받아보니 거의 사전 급으로 두껍다ㅋㅋㅋ

 

프로젝트를 진행하면서 가장 어이 없었던 삽질은, 구글 api 키를 받고, postman으로 geolocation api요청을 보냈는데, daily limitation exceeds 라는 이유로 한번 보내고나면 요청이 바로 막혔다.(이것 때문에 api키를 한 3번인가 재발급 받음) 한 두세시간을 계속 검색했는데도 도저히 못 찾겠어서 아니 왜안되지? 하면서 답답해했는데 가이드에 결제수단을 등록해야 사용할 수있다고 highlight해서 써놨는데도 못본건지 무의식적으로 못본 척한건지 아무튼 떡하니 써있었다. ^^...후 결제수단 등록하고나니 아주 스무스하게 응답이 받아와졌다.

 

사운드 클라우드에서 위젯을 embed 할 수 있게 iframe 태그로 아주 편하게 제공해줘서 나는 받아온 날씨에 따라 플레이리스트를 보여주기만 하면되서 매우매우 편했다.

 

반응형 웹으로 만들기 위해서 include-media 라이브러리를 사용해서 맞춰봤는데, 잘한건지 모르겠다. 워낙 사이트가 간단하고, 컴포넌트도 몇개 없어서 일단 볼때는 괜찮은데 코드상으로는 어떻게 깔끔하고 직관적으로 짜는지를 잘 모르겠다. 컴포넌트가 많아지면 진짜 아래 짤처럼 될 것 같다.

🚀 배포

배포는 netlify로 했는데, 깃허브 repo에서 바로 배포할 수 있다. 회원가입부터 UI/UX 까지 정말 심플하고 직관적이게 되어있어서 정말 편했다. 그리고, 깃에서 푸쉬하면 자동으로 업데이트해서 deploy해주기 때문에 그점도 정말 편하다. 깃에서 deploy할까 하다가 궁금해서 한번써봤는데 충분히 써봄직(?)하다.

 

🎉 후기

프로젝트 기간은 요즘 밤낮이 바껴서 정확히는 잘 모르겠지만, 한 이틀 좀 넘게 걸린 것 같다. 아주아주 간단한 사이트인데도 얼추 다 만들고나서 deprecated 된 코드에 대한 warning 처리나 굳이 필요없는 코드 수정/삭제하기, production 모드에서는 로그 안나오게 하기 등등 하다보면 생각보다 시간이 훨씬 오래 걸린다. 그러니 항상 일정은 넉넉하게 생각해야한다. 생각보다 빠르게 끝나면 좋지만 대부분의 경우 항상 촉박하거나 모자라다.

 

루미서울 만들다가 정신이 좀 피폐해져있었는데 만드는동안 너무 재밌었다. 디자인도 딱 내가 생각했던 그대로 심플하고 직관적으로 만들었다. 정적 사이트이긴 하지만 최대한 유저가 interactive 하다고 느끼게 하려고 이것저것 easter egg마냥 넣으려고 했는데, 또 넣다보니까 너무 난잡하기도하고 약간 설명충(?)이 된 기분이라 다 삭제하고 그나마 날씨에 따라 인사메세지가 바뀌는 정도로 줄였다.

 

또, 코딩하면서 루미서울 코드는 정말 난잡하구만... 이런생각도해봤다. 워낙 초기 코드는 리액트 개념도 잘 모를때 공부해가면서 만든거라 진짜 지저분한데, 처음부터 다 엎고 다시시작하고 싶어졌다ㅋㅋㅋㅋㅋㅋ후 하지만 이러면 영영 끝낼 수 없겠지...이래서 완벽한 코드란 없는 것같다. 만들면 만들수록 더 나은 코드가 생각 나서 계속 제자리에서 고치기만하다가 뭔가 앞으로 나아갈 수 없는?

 

세상에는 정말 다양한 API들이 많고, 이걸 공짜로 제공해주는 사람들은 👼천사다. 다시 루미서울 만들어야하는데 보면서 다음에 또 뭐 만들만한거 있는지 생각하고있다. 퓨