Project/관리하당4 코드리뷰로 클린하고 일관적인 프로덕트 만들기 1. 클린하고 일관적인 프로덕트를 위해 클린하고 일관적인 코드만을 프로덕트에 남기는 것은 중요하다. 이를 위해서 뭘 할 수 있을까? 코드 작성과정에서 유지보수하기 쉽고, 일관성있는 코드를 위해 재사용성이 뛰어난 컴포넌트 제작 중복되는 기능을 분리하여 모듈화하기 팀 단위 코드 컨벤션을 정하고, 이에 알맞게 코드를 작성 Eslint와 Pritter등 Linter와 Formatter를 사용 코드 병합과정에서 합의한 커밋, PR, Git 관리 컨벤션에 따라 작성 리뷰를 받을 때는 Pull Request(혹은 Merge Request)를 상세하고 이해하기 쉽게 작성 자신이 리뷰어라면 병합에 책임감을 가지고 의문이 생기면 적극적으로 질문 이번 글에서는 2번. 최근 진행한 프로젝트들에서 좋은 코드를 남기기 위해서 코.. 2023. 11. 30. 폴더구조의 Best Practice를 찾아서 1. Why? 잘 정리된 폴더구조는 깔끔하게 정리된 수납장과 같다. 깔끔하게 폴더구조를 정리해둠으로 인해서 통일된 '멘탈 모델'을 만들고, 이에 대한 리소스 투입을 줄여 개발에서의 능률을 향상시킬 수 있다고 생각한다. SSAFY에서의 첫 프로젝트인 스타게이트를 진행하면서 이를 크게 체감할 수 있었는데, Atomic 패턴 사용을 위해 컴포넌트들을 atoms, molecules, pages로 분리한 다음 src폴더에 플랫하게 두었다가 구조와 생각이 잔뜩 꼬이는 경험을 했다. 이 때, 폴더구조는 단순히 담아두는 것 이상의, 멘탈모델이라는 것을 실감할 수 있었다. 싸피에서의 첫 프로젝트였던 스타게이트 이후 두 차례의 프로젝트를 더 진행하면서 폴더구조 관련 고민한 포인트들을 작성해보고자 한다. 2. 모익(Next.. 2023. 11. 30. Debounce를 활용해서 api 요청 횟수 줄이기 0.TL;DR 검색 과정에서 지나치게 많은 api 호출이 일어나고 있었음 이에 Debounce를 사용해 0.5초간 추가적인 입력이 없다면 api 호출이 일어나도록 구현 하지만 비즈니스를 고려하지 못한 측면과 UX를 고려한 Loading UI를 구현하지 않아 아쉬움이 있음 1. Why? "관리하당"에서 음식 등록을 위한 검색 기능을 구현할 때, useEffect로 값이 변경될 때 마다 api를 호출해 검색 하도록 구현하니, 지나치게 api 전송이 자주 일어나고 있었다. 예를 들어 "삼겹살"을 검색한다면 ㅅ 사 삼 삼ㄱ 삼겨 삼겹 삼겺 삼겹사 삼겹살 삼겹살 한 번 검색하는데 api가 9번이나 전송되는 꼴이다. 또한 이 과정에서 검색 api가 실행되며 그 결과값을 나타내는 창이 9번이나 리랜더링이 일어나게 되.. 2023. 11. 30. 무한스크롤을 통해서 UX 개선하기 / React-Native 0.TL;DR 같은 데이터를 상단에는 그래프로, 하단에는 날짜별 카드 형식으로 보여줘야하는 화면이 있음 모든 정보 한번에 로딩 / 페이지네이션 / 무한 스크롤 중 무한 스크롤 방식이 가장 적절해 선택 React-Native의 ScrollView를 사용해 무한 스크롤 카드 리스트 구현 ScrollView가 하위 요소를 한번에 랜더링하기에 성능 이슈가 발생할 수 있다고 생각, FlatList를 사용하도록 수정 1. Why? 관리하당의 혈당 정보 페이지와 식사 정보 페이지 기획 과정은 다음과 같았다. 1. 재사용성을 높이기 위해 같은 카드 형식 styled component를 사용해서 날짜별로 보여주자. 2. 혈당 정보와 식사 정보를 그래프로 시각적으로 알 수 있으면 좋겠다. 결론적으로 상단에는 그래프, 하단.. 2023. 11. 30. 이전 1 다음
