첫 Frontend 프로젝트

📽 시연 영상

---

🤔 only Backend?

작년부터 백엔드(스프링, jpa 등)를 공부하고 있었고 졸업 작품을 개발할 때도 백엔드 포지션을 맡아 진행하였다. 하지만 가슴 한편에 '프론트엔드 개발도 해보고 싶다..'라는 생각이 자리 잡고 있었다.
프론트엔드 쪽은 공부해 본 적이 거의 없었기 때문에 더 궁금하기도 하였고 다른 경험을 안 해보고 '내 진로는 백엔드 개발자다' 라고 덜컥 정하기엔 이상적이지 않다고 생각이 들었다.

따라서 여름 방학에는 우선 프론트엔드 공부를 먼저 해봐야겠다고 생각했다.

프론트엔드의 기본 중의 기본 HTML, CSS, JavaScript 기초를 공부하고 있던 도중, 내가 속한 동아리(InQ)에서 토이 프로젝트 인원을 모집한다는 공지가 올라왔다.

기초 문법 공부도 물론 중요하지만, 직접 코딩해 보고 부딪혀 보는 것이 개발 공부에 있어 더 잘 와닿는 경우가 많기 때문에 덜컥 프로젝트에 참여하겠다고 신청하게 되었다.

---

🚀 팀 프로젝트 시작

7월 중순쯤 프로젝트를 진행할 3개의 팀이 결정되었고, 각 팀마다 4~5명 정도로 인원이 구성되었다.
우리 팀은 백엔드 3명과 프론트엔드 2명, 총 5명으로 구성되었다.

7월 28일 전까지 요구사항 명세 등을 정리하고, 7월 28일부터 8월까지 한 달 동안 개발을 진행하는 것으로 일정이 정해졌으며, 주제는 "웹툰 통합 플랫폼"으로 결정되었다.

다양한 웹툰 플랫폼에서 독자적인 웹툰 서비스를 제공하고 있는데, 양질의 콘텐츠가 제공되는 것은 긍정적이나 웹툰을 집약적으로 볼 수 없기에 여러 사이트를 방문해야 하는 불편함이 존재한다.
이러한 불편함에 초점을 맞춰 각 플랫폼의 웹툰 컨텐츠를 한 곳에 모아 손쉽게 접근이 가능한 서비스 개발을 진행하게 되었다.

---

🛠 개발 진행

하지만 7월 30일 코로나 확진으로.. 8월 첫째 주까지 골골대며 일정에 차질이 생겼다.
(사실 공모전도 비슷한 시기에 시작하기로 했었는데 우선 급한 불부터..)
프론트엔드 개발은 처음인데 시간은 점점 더 촉박해지고 마음은 급해지고.. 다행히 같이 진행하는 팀원과 지속적으로 많은 대화를 나누며 가닥을 잡아나갈 수 있었다.

메인 페이지와 그 외 페이지(회원가입, 로그인 등) 크게 두 개로 구분하여 하나씩 맡아 진행하기로 하였고, 나는 이왕 하는 거 메인 기능들을 구현해 보고 싶어 메인 페이지를 맡게 되었다.

메인 페이지는 요일, 플랫폼을 선택하여 그에 해당하는 웹툰 목록들을 보여주는 것이 주 기능인 페이지이다. 또 찜 기능이나 인기순, 조회순으로 정렬하여 보여주는 기능이 있는 페이지이다.

요일, 플랫폼 등의 버튼을 누를 때마다 그 조건에 해당하는 웹툰들을 새로고침 없이 자연스럽게 보여줄 수 있으면 좋겠다 생각이 들어 Ajax를 활용한 비동기 처리를 학습하며 적용해 보았다.

---

🎇 소감

프론트엔드를 조금 만만하게 본 경향이 있었는데 생각이 많이 바뀌었다. 생각처럼 잘되지 않는 부분도 많았고, 왜지?? 왜 안되는 거지? 아예 이해가 안 되는 부분도 간혹 있었다..
강의도 듣고 다른 프로젝트도 진행해 보면서 숙련도를 더 쌓아봐야겠다고 생각했다.

사실 처음에는 바닐라 JS로만 구현해 보고자 했다. jQuery는 점차 사용하지 않는 추세라는 말을 듣기도 하였고, JS 만으로 구현을 하면 보다 더 JS 언어에 대한 이해도가 높아질 수 있으리라는 생각 때문이었다.
하지만 jQuery의 역사가 깊은 만큼 jQuery에 대한 정보가 많기도 했고.. 무엇보다 Ajax 비동기 통신에도 jQuery가 제격(?)이므로 jQuery를 많이 사용하게 되었다. 처음 생각과 다르게 개발이 진행된 것 같아 조금 아쉽긴 했다.

아 그리고 API 명세서의 중요성을 뼈저리게 느꼈다. 졸업 작품을 진행할 때 프론트 개발을 진행하는 팀원들이 dto에 어떤 필드들이 들어가는지, url은 어떻게 되는지, API 명세서는 언제 다 작성되는지, 명세서의 변경 사항은 없는지 자주 물어보고 확인하였는데 왜 그랬던 건지 이해하게 되었다..
물음표 살인마

데이터를 보내고 받는 과정에서 어디로 보내야 할지, 무엇을 보내야 할지, 내가 받는 데이터는 어떤 형태이고 무슨 값들을 받는지 그런 것들이 명확하게 정의되어 있지 않으면 프론트엔드 개발자들이 상당한 고생을 하겠구나 몸소 느꼈다.

실제로 잘 동작하지 않아 내가 작성한 코드에서 오류를 하루 꼬박 찾았는데 백엔드에서 넘겨주는 값이 달라서 그랬던 경우도 있고, URL 매핑이 잘못되어 있던 경우도 있었다. (URL이 추후에 수정됨) 또 관심 리스트에 추가하기 기능(찜) 관련 로직을 짤 때 분명 "value" 값이 "false"이면 삭제가 되어야 하는데 DB에 추가가 되길래 클릭 이벤트 오류인가 하고 되게 고민 많이 했던 기억도 있는데 백엔드의 쿼리가 "true"일 때 추가하게 되어 있더라..😂

막바지에 백엔드 분과 많은 얘기를 해가며 오류도 잡아내고 리팩터링 했는데 그냥 혼자 책보고 공부하는 것보다 훨씬 값진 경험이였다. 정말 많이 배웠다. (잘 하시더라..)

프론트엔드 개발에 첫 스타트를 끊는 프로젝트로 되게 적절했다는 생각이 들었다.
또 각자의 포지션에서 맡은 일을 잘하는 것도 물론 중요하지만, 서로 의사소통하며 같이 협업하는 것이 상상 이상으로 중요하다는 것을 알게 되는 좋은 활동이었던 것 같다.

---