컴포넌트를 재활용 하자 ♻️
현재, 공식 서비스에서는 중복되는 UI가 여러개 존재한다
대표적으로는 게시글 리스트를 보여주는 곳이 있다.
메인 홈페이지
질문 카테고리 페이지
검색결과 페이지
위의 그림에서 알 수 있듯이 게시글 리스트를 보여주는 UI가 메인 홈 페이지와 카테고리별로 글을 보여주는 페이지, 검색결과 페이지에서 모두 동일하게 사용되고 있다.
헤당 게시글 리스트의 경우 아래와 같이 3가지로 이루어져 있다.
- IntersectionObserver (유저의 스크롤 감지)
- ArticleList (반응형 로직이 들어가 있다)
- ArticleItem이 3가지가 묶여서 같이 다니는 것은 항상 동일하고, 안에 들어가는 내용들의 경우에만 각각 다른 로직을 가지고 서버에서 부터 받아오게 된다.
그렇다는 것은 서버로부터 받아오는 정보를 prop으로 넘겨받는 공통적인 컴포넌트를 만든다면 여러 페이지에서 사용이 재사용이 가능해지게 된다는 것이다.
그런데 문제는 이 재사용되는 컴포넌트를 어느 폴더에 넣어야 한다는 것이였다.
이 문제에 대해서 페어와 의견차이가 있었다.
페어의 경우 ArticleList이기 때문에,
Article이라는 도메인 폴더에 해당 컴포넌트를 위치시키기를 바랬다.
다른 도메인 간에서 사용되고 있지만, 결국 보여주는 내용은 Article이기 때문에 Article 도메인에 속한다고 보았다.
하지만 나의 경우에는
이를 common에 위치시켜야 한다고 생각했다.
이유로는 두 가지가 있었다.
첫 번째로, 재사용이 많이 되고 있다는 점이였다.
해시테그 도메인, 검색 도메인 등의 우리가 다르게 분리하기로 약속된 도메인에서도 해당 컴포넌트를 사용하고 있는데 Article 도메인에만 종속되어있다고 보기 어려운 것 같았다.
물론, 게시글을 내용을 보여주는 것이긴 하지만 해당 게시글을 가지고 오는 로직이 해시테그, 검색, 일반 게시글 조회 등이 따로 있었고 여러 페이지에서 사용되고 있다.
만약 우리의 도메인을 처음 접한 사람이 분리된 컴포넌트의 위치를 찾는다면 여러 페이지에서 사용되고 있으므로 자연스럽게 common으로 먼저 접근해서 파일을 찾지 않을까 라는 추측도 함께 섞여 있었다.
두 번째로, Article 도메인과 관련된 컴포넌트들이 이미 너무 많다!
우리의 서비스는 Article을 작성하고 보고 수정하고 삭제하는 것이 주 기능이다. 그렇다 보니 Article 관련된 컴포넌트들이 많았다. 그래서 내 기준굳이 Article 도메인에 포함시키지 않아도 될 컴포넌트를 해당 곳에 추가시켜 관리 비용을 늘릴 필요가 없다고 생각하였다.
물론 누가 맞고 누가 틀리다는 생각은 들지 않았다. 페어의 의견에도 충분히 동의를 할 수 있었다. 이름이 ArticleList이니깐 Article일 수 있는 거 아닌가
둘 만 이야기 해서는 이야기의 결론이 나지 않을 것 같아 다른 사람들의 의견을 들으러 다녔다.
그 중 태태가 Card라는 common Component를 만들면 어떠냐고 의견을 주었다.
Article 이라는 이름에서 벗어나서 일반적인 이름 Card와 같은 이름을 붙이고 보니 컴포넌트가 다르게 보이게 되었다.
이렇게 각각의 게시글을 보여주는 부분이 컴포넌트를 Card로 해서 공통 컴포넌트로 만든다면, 해당 컴포넌트에 들어가는 내용들을 Article이 아니라 다른 내용이 들어간다 하여도 Card component를 재사용 할 수 있게 된다.
무언가 유레카!를 얻은 것 같은 기분으로 이 의견을 페어에게 전달하였고 어느 정도 합의가 이루어졌다.
그래서 ArticleList, ArticleItem을 각각 ResponsiveCardList, Card 등으로 공통적으로 사용될 만한 이름으로 탈 바꿈하여 사용하게 될 예정이다
리액트 공식문서 다시 읽기 🔄
현재, peep-peep 스터디를 통해서 Javascript와 Network 등을 공부하고 있는데 리액트에 대해서는 레벨 2 이후로 공식문서를 제대로 살펴볼 기회가 없었다.
그래서 요즈음 리액트 공식 문서를 틈틈이 다시 보고 있는데 약간은 놀라웠다.
레벨 2때에 리액트 공식 문서를 읽을 때에는 이해도 잘 되지 않고 용어 하나하나가 낯설어 읽는데 오랜 시간이 걸렸었다.
그런데 현재에는 리액트 공식 문서가 이해가 되고 재미가 있다!
레벨 2 때 부터 리액트를 접하고 계속해서 리액트로 개발을 하는 틈틈이 구글링을 한 덕인지 이미 알고 있는 내용이 꽤나 있었다.
나 조금은 성장해버린걸까? 라는 뿌듯함이 드는 경험이 되었다.
페이먼츠를 되돌아 보기 👀
이 곳 우테코에 오고 나서 처음으로 리액트로 구현한 미션은 페이먼츠이다.
그 때 당시만 하여도 리액트를 활용해서 개발한 경험이 많지 않다보니, 페이먼츠 미션을 할 때에는 리액트의 문법을 익히는 것에 바빴다. 게다가 커스텀 훅과 타입스크립트는 처음 사용해봐서 말 그대로 버벅이면서 커스텀 훅을 구현하게 되었다.
그렇다 보니 계속해서 아쉬움으로 남은 미션이였다.
그 때에 받은 리뷰가 이제는 무슨 말인지 알 것 같아서 이제 하면 잘 할 수 있을 것 같아! 라는 생각이 맴돌았다.
그래서 해당 프로젝트의 webpack 설정 부터해서 차근차근 정리해 보고 그 때는 하지 못한 생각들을 더 적어보고 싶은 마음이 계속 커져갔다.
결국 저지르고 말았다. 페이먼츠 ver2 저장소 를 만들게 되었다.
틈틈이 시간이 빌 때마다 들어가서 개발을 할려고 한다
이슈로 개발 과정에 대해서 들었던 생각들이나 의견들에 대해서 등록하고 홀로 채택하고 놀 예정이다. 하고 싶으면 해야지 어쩔 수 없다
물론 바빠서 언제 구현이 완료 될지는 나도 모르겠다
