본문 바로가기

전체 글41

👨‍⚕️가족과 함께하는 당뇨관리 <관리하당> 회고 1. Why?SSAFY(삼성 SW아카데미)의 마지막 프로젝트 에 대한 회고를 작성해보고자 한다. 처음으로 모바일 App으로 개발한 프로젝트로, React-Native를 사용했다. 이번 글에서도 프로젝트를 회고하면서 Keep, Problem, Try를 정리해보고자 한다.프로젝트 요약👨‍⚕️프로젝트 Github기간 : 23.10.09~23.11.25(7주간)팀원 : 6명(Frontend 2인, Backend 4인)역할 : Frontend 개발자사용 기술Frontend : React-Native, TypeScript, Styled-Component, Redux, React QueryCollaboration : Notion, Figma, Git, GitLab2. 기획문제점젊은 당뇨인구 급증 및 급속한 노령화로.. 2023. 11. 30.
코드리뷰로 클린하고 일관적인 프로덕트 만들기 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.

티스토리툴바