Overview
2차 과제
배포 과제 링크: https://1-mrcamel-team1.netlify.app/
GitHub 과제 링크: https://github.com/six-sense/1_mrCamel_team1
3차 과제
배포 과제 링크: https://jaranda.netlify.app/
GitHub 과제 링크: https://github.com/six-sense/jaranda
과제에 대한 자세한 설명보다는 제목 그대로 회고록에 가깝습니다.
주저리 주저리.. 2차 과제는 내겐 생각할 부분, 결정할 부분이 많았고, 빠른 템포의 협업을 처음 하는 중요한 프로젝트였다. 종합적으로 localStorage를 DB처럼 사용해 데이터를 다루는 능력에 대해 평가하는 과제였다고 생각한다.
아무튼, 크게 구현해야 할 기능은 다음과 같이 나누었다.
-
브랜드 별 / 낮은 가격 순 필터링
-
관심없는 상품 필터링
-
편리하게 Storage를 사용할 수 있는 Utils 생성
난 위 기능 중 첫번째 기능을 구현하였다. 그렇지만 난 이 회고록에서 3번째 부분에 대해 얘기하려고 한다. (다른 팀원분이 개발하셨습니다) 비록 내가 구현한 코드가 아니지만, PR 리뷰를 위해 읽었던 코드 + 프로젝트 끝나고 다시 utils 폴더를 보며 이해한 코드가 있어서.. 부족하지만 작성해보려 한다.
utils
utils 폴더는 주로 재사용되는 함수, API 등을 모아놓는다. 그 동안 개인적으로 공부할 때는 localStorage를 잘 활용하지 않아서(보안상 취약하다고 알고 있습니다) 제한적으로 사용했고, 사용한다 하더라도 기본 메소드만 구현해서 사용했었다.
이 과제에서는 DB를 사용할 수 없기 때문에 localStorage를 통해 데이터를 다루어야 했는데, '관심 없음'을 표현하는 속성을 추가하거나, 유저가 상품을 조회한 이력을 남기는 등의 작업을 진행해야 했다. 그러려면 데이터를 이렇게 저렇게 가공해야 하는 기능이 많이 필요했다.
데이터 구조를 설계하는 능력
3차 과제에 대해선 자세히 설명하지 않았지만 3차 과제에서도 동일한 부분을 느꼈습니다!
이렇듯 데이터를 직접적으로 접근해 다루는 부분에 대해 내 기능이 아니었지만 프로젝트 끝나고 팀원들의 코드를 보며 좀 더 이해했다. 여러 가지 부분이 있었겠지만 가장 크게 느낀건 '구체적인 데이터 구조를 설계, 가공할 수 있는 능력'이 크게 필요하다고 느꼈다.
말이 조금 애매한데.. 바꿔 말하면 자신이 원하는 대로 데이터를 가공하는 능력이라고 볼 수 있겠다! (지금도 애매한가?)
내가 이전의 프로젝트를 진행할 때 백엔드 작업을 했을 때는(지금까지 거의 혼자 개발해와서 백엔드도 해야 되었다..!) 내가 깊게 고민하고 생각하여 데이터 구조를 만들었다기보다는 잘 짜여져 있는 데이터 구조를 차용하는 식으로 DB를 설계했었다.
그렇다보니 설계된 데이터 구조에 대한 불편함을 느낀 적이 없었고, 개발할 때 당연하다고 여긴 적이 많았다. 그러나 2차 과제를 포함해, 3차 과제까지 직접 localStorage에 접근해 데이터를 다루면서 느낀점은, 프론트엔드 개발자라고 해서 DB와 서버에 대한 공부 또한 소홀히 해서는 안된다고 생각이 되었다. 아는 만큼 보인다고, 효율적, 생산적인 개발을 위해서라면 DB, 서버 등에 대한 공부도 꾸준히 해서 백엔드 개발자와 소통해서 최적의 응답 데이터를 받아내는게 중요할 것 같다.
프론트엔드 개발은 데이터 구조에 따라서 개발에 필요한 시간과 노력이 크게 바뀌게 되는 것 같다. 따라서 프론트엔드 개발, 더 나아가 요구사항에 적합한 개발을 위해서라면 프론트엔드 개발자라고 해도 반드시 DB, 데이터 구조에 대해 이해하고 있어야 후에 백엔드 개발자와 협업해 보다 생산성 높고 효율적인 결과물을 만들 수 있고, 개발 과정에서 예기치 못한 문제 또한 방지할 수 있다.
배운 것들
PR 리뷰를 하는게 정말 좋다고 생각했다! 2차 프로젝트도 그랬지만, 이번 3차 프로젝트에는 다른 팀원 분들의 코드를 리뷰하며(조금밖에 안 했지만?) 개인적으로 새롭게 알게 된 부분, 배운 부분이 매우 많았다. 앞으로 여유가 되는 한 더 적극적으로 코드 리뷰를 할 생각이다! 물론, 컨벤션에 대한 지적 혹은 함수명, 변수명에 대한 리뷰는 하지 않는다. 룰이 정해져 있지 않은 상태라면 그런 부분은 각 개발하는 사람마다 취향이 다르다고 생각하기 때문이다.
그리고 reudce의 활용과 객체를 다루는 메서드에 대해 새로 알게 되었다. 평소 데이터 관련 처리는 거의 map, forEach 등을 사용했었는데(reduce에 전혀 익숙하지 않았음), reduce를 사용했을 때 더 간결한 코드로 가독성이 좋게 로직을 구현할 수 있는걸 보고 앞으로도 더 적극적으로 사용할 예정이다.
그리고 객체 관련 메서드는 알고리즘 문제에서 해시 테이블 관련 문제를 제외하고는 거의 실제 프로젝트에서 써 본 적이 없는데.. 팀원 분의 코드를 리뷰하던 중 매우 적절하게 관련 메서드를 사용하시는 걸 보게 됐다. 객체보단 배열 관련 메서드가 더 익숙했었는데 잘만 쓴다면 특정 상황에서는 훨씬 효율적일 것 같다.
유저 테이블에서의 다중 선택 기능에 대해 이후 추가적으로 리뷰할 예정입니다. 다른 팀원분이 구현한 부분이었는데, 리뷰 과정에서 특히 많이 배우고 혼자였으면 정말 생각 못했을 방법으로 구현하신 기능이었습니다!
고생하신 팀원분들 수고 많으셨어요! 여러 팀원 분들 코드 보며 많이 배웠습니다 :)
