[프로젝트]News Search App

내 첫 팀 프로젝트!

New York Times의 기사 api를 활용해 검색어에 해당하는 기사결과를 보여주는 간단한 웹이다.

좋아하는 기사를 북마크에 추가할 수 있고, 그 기사들만 따로 볼 수 있다.

 

새로 배운 것

- 아무것도 없는 상황에서 4명이 코드를 짜려니 막막했다. 그래서 내가 먼저 큰 그림을 그리고(어떤 라이브러리를 사용할지, 추상화된 유스케이스), 폴더구조를 나누고, 리덕스로 action을 정의해서 각개의 기능구현이 서로 종속되지 않고 개발할 수 있도록 했다. 이를 통해 팀프로젝트의 흐름을 조금 익힌 것 같다.

 

- redux를 이해해서 redux-toolkit을 활용할 수 있게 되었다. 전역상태관리를 redux-toolkit library를 통해 했고 거의 모든 데이타를 redux store에서 관리했다. 그래서 상태를 변경할때는 dispatch를, 값을 가져올때는 useSelector 함수를 사용하며 적절하게 값을 관리했다.

 

- redux-persist library로 local storage에 원하는 값만 저장할 수 있었다. 

 

- git 사용이 수월해졌다. 혼자서 프로젝트를 할 때는 아무래도 branch, pull, merge가 잘 이해가지 않았는데 확실히 팀프로젝트로 팀으로서 git을 사용해보니 실제 경험으로 체득이 되고 이해가 되서 정말 좋았다. pull request나 issue등 github도 적극 활용할 수 있었다. 참고로 우리는 git flow를 사용했다.

 

- eslint와 prettier를 활용해보려고 개발쪽에서 유명한 airbnb eslint를 시도했다가 너무 많은 오류가 나서 애를 먹었다. 지금 단계에서 높은 수준의 eslint를 사용하는 게 오히려 스트레스를 받게해서 결국 기본적인 수준의 eslint와 prettier를 사용했다. 그러면서 내가 얼마나 오류가 발생하기 쉬운 코드를 작성하고 있는지 짧게 경험해 볼 수 있었다. 점진적으로 eslint를 공부해서 내 코드에 적용해 가야겠다. 

 

잘한 것 (뿌듯🥰)

• 높은 시간복잡도를 가진 로직을 낮은 시간복잡도를 갖도록 리팩토링을 진행했다.

북마크를 해놓은 기사는 계속 북마크한 상태로 남아있어야 했다. 그래서 api로 데이타를 받아오고  받아온 각각의 기사가 clippedArticles에 들어있는지 확인 후, 있다면 clipped 속성을 true로 변경한 후 값을 반환하도록 했다.

 

두개의 배열(everyArticles, clippedArticles)을 돌아야 하기 때문에 time complexity가 O(n2)이 되었다.

이를 해결하기 위해 기존에 배열(array)로 저장했던 data를 객체(object)로 저장했다.

 

객체는 key값을 가지고 있어서 indexing 할 수 있다. everyArticles 객체 안에 id를 key로, value는 나머지 속성을 객체 안에 넣어서 저장했다.

 

Array가 Object로 변했으니 dispatch action도 변경해주도록 하자.

 

객체로 바꾸어주니 해당 key가 clippedArticles에도 존재하는지 한번에 찾을 수 있다. clippedArticles를 전부 돌지 않아도 indexing으로 한번에 찾을 수 있어서 time complexity가 O(n)으로 줄었다.

 

• 멘토님께 코드리뷰를 받았는데 전반적으로 잘했다는 평을 받았다! 

 

아쉬운 점 & 앞으로 개선할 점

- PR을 merge할 때 조장인 내가 코드를 확인하고 큰 이상이 없다면 그냥 merge하고 나서 조원들에게 pull 한번씩 해달라고 이야기하며 진행했다. 조금 후에는 모두가(몇 명 되지 않으니) 코드를 보고 review를 한 후에 merge를 했다면 좋았겠다고 생각이 들었다. 각자가 가진 코드에 대한 생각을 확인할 수 있는 좋은 수단이기도 하면서 팀프로젝트이기 때문에 코드 상황을 모두가 파악하고 있는 게 좋은 것 같다. 

 

- 모든 값을 redux로 관리하다보니 dispatch와 useSelector를 쓸일이 많았다. 상호의존없이 개발을 목표로 했던 점에서는 유용했지만 쓸데 없는 메모리소비이기도 했던 것 같다. component에서 관리할 수 있는 값도 분명 있었을 텐데 그 부분에 최적화를 하지 못한 게 아쉽다.

 

- 위와 같은 이유로 한 함수 안에서 dispatch를 연달아 쓰기도 했는데 

api호출과 연관되어 있는 부분이라  이 부분을 thunk로 처리했다면 좋았을 것 같다. 공부가 덜 되어서 비동기처리 thunk를 쓰지 못하고 dispatch를 남발했다. 후에 리팩토링을 시도해봐야겠다.

 

- useMemo나 useCallback같은 최적화 hook을 많이 사용 못했다. 기능 구현을 하는 데 포커스가 맞춰지기도 했고 아직 다양한 hook에 대한 이해가 부족한 것 같다. 더 공부해야지. 

 

후기

팀프로젝트 너무 재밌었다. 프론트엔드로만 구성되었지만 여러명이 함께 하나의 결과물을 내려고 소통을 하고 버그를 해결해보려고 애써보는 과정도 너무 즐거웠다. 여럿이 함께 하면 공부의 지평도 넓어진다는 걸 느꼈다.

조장으로서 큰 흐름을 파악해 볼 수 있었고 조원들이 어려워하는 부분들을 같이 공부하면서 도와줄 수 있었던 것도 좋았다. 

많은 기능이 있는 복잡한 앱은 아니었지만 앞으로 팀프로젝트를 할 수있겠다는 자신감을 얻게 해줬고 함께 일한다는 것에 대한 기쁨도 느끼게 해줬다는 점에서 나에게 의미가 큰 프로젝트였다. 🐼

 

프로젝트 github Link: https://github.com/ReactMiniProject-team1/News-Search-App