뷰발자의 토이 프로젝트 진행기(WhoAmI)

토이 프로젝트 진행기

0. 토이를 진행하게 된 계기?

현재 회사는 vue.js를 사용하고 있다. 기존에는 react나 순수 js만 사용해본지라 처음에 많이 당황했던 것 같다.

다행히 좋은 사람들 덕분에 금방 업무와 vue에 적응할 수 있었지만, 막연한 불안감이 늘 있었던 것 같다.

기능 구현을 요청받았을 때, '내가 이 기능을 구현할 수 있을까?' 하는 일말의 생각이 늘 한켠에 있었고 이래선 안 되겠다는 판단이 들었다.

그래서 자발적으로 회사 외에서 진행할 만한 토이 프로젝트를 아주 소소하게 진행해보게 되었다.

덧붙여서 이미 기획 중인 토이 프로젝트가 따로 있었는데,
그 프로젝트는 이것보다는 규모가 있는(그래도 소소하지만) 프로젝트라 어느새 손에 익은 vue로 빠르게 구현할 수 있는 프로젝트를 진행하게 되었다.

1. 개발툴

위와 같은 이유로 개발은 only vue.js로 진행되었다.

2. 프로젝트 소개

감사한 분께서 오픈 API 레포를 한국어로 번역해주셨다. (https://github.com/dl0312/open-apis-korea)
다시 한 번 감사합니다. 🙇‍♀️
나는 여기서 Agify.io, Genderize.io API를 사용하였다.

그래서 내 프로젝트는

영어 이름을 입력하면 당신의 나이와 성별을 추측해서 알려드립니다!

라는 컨셉으로 진행하게 되었다.

2. 새로 도전해본 점

1. 현재 실무에서는 slot을 거의 사용하고 있지 않는데, 이번에 사용해보게 되었다.
   생각보다 사용법이 간단해서 괜히 쫄았다 싶었다. 머쓱... 😅

2. 카카오 링크 공유 API와 트위터 공유 API를 사용해보았다.
   카카오는 Map만 사용해본 적이 있는데, 공유 API를 사용하는 건 똑같았다.

   바로 이전 글에서 vue에서 사용한 예시는 잘 안 나온다고 했는데, 그 글 올리고 다시 찾아보니까 왜 또 수두룩 나오는지 ^_ㅜ.....?? 덕분에 막히는 부분에서 더 찾아볼 수 있었다...! 다행!

   트위터 공유 API는 카카오에 비하면 정말 쉬웠다.
   

3. netlify의 사용
   이건 아래에서 자세히 언급하겠다.

3. 프로젝트를 진행하면서 어려웠거나 수정하고 싶은 점

1. 처음에 경험이 있는 gh-pages로 배포를 진행하려 했다. 그런데 무슨 이유에서인지 배포가 되지 않았고(계속 404 에러를 뱉음), 여러 방법을 시도해봤으나 결국 다른 방법을 찾을 수밖에 없었다.

   netlify도 정적 배포툴 중에선 괜찮다는 평이 많아서 꼭 한 번 사용해보고 싶었는데, 이렇게 사용하게 될 줄은 몰랐다... 😀

   그래도 사용해보고 나니 개인적으로는 gh-pages보다 훨씬 간편하고, 자동 디플로이도 지원되어서 훨씬 이득이었다!

2. 지금 보니 반응형이 좀 깨진다. 급하게 하느라 제대로 체크를 못 했는데, 이후에 수정할 수 있도록 해야겠다. (12.21일 수정 * 반응형 처리 완료!)

   그리고 웹 사용자를 가정하고 프로젝트를 진행하였는데, 그래서 크기가 줄어들면 '...' 이런 식으로 내용을 숨김 처리하였다.

   문제는 태블릿까지는 내용이 무난히 보이지만, 모바일 기기에서는 무조건 '...' 이렇게 내용이 생략되어 보이게 되었다.

   프로젝트의 특성상 웹으로 진행하는 사람들보단 모바일로 진행하는 사람들이 많을 텐데, 초기에 가정을 할 때 프로젝트의 특성을 더 고려해보지 못 한 것 같아서 아쉽다. 이 부분도 차후 수정할 수 있도록 해야 되겠다. (12.21일 수정 * 모바일에서도 글자가 보이도록 처리 완료!)

4. 프로젝트를 마치고 나서

글을 시작할 때 언급했던 목표는 어느정도 이룬 것 같다.
이번에 진행해본 내용에 대해서는 업무 요청이 와도 자신감 있게 대응할 수 있을 것 같고, 혹여 그렇지 않더라도(이런 경우가 더 많겠지) 할 수 있다는 자신감이 생겼다.

그리고 프로젝트를 진행하면서 아쉬운 부분과 느낀 바를 이렇게 정리해둠으로써 이후 기획 중인 토이 프로젝트에서 더 좋은 결과물을 낼 수 있을 것 같다.

부록

제가 만든 토이의 링크를 남겨두고 갑니다.
미흡한 프로젝트이나 주니어 개발자가 나름대로 고군분투하며 만들어 보았습니다.
어떤 감상평이나 조언도 환영합니다. 그저 테스트를 즐기셔도 좋습니다. ^^

https://hellowhoami.netlify.app/#/