리팩토링

Project

[하루메이트] React.memo를 사용해서 불필요한 리렌더링 제거

수정 전에는 반경 태그와 카테고리 태그를 클릭했을 때 렌더링이 될 필요없는 검색된 장소 목록에 계속 리렌더링이 발생했습니다. // 장소 목록 컴포넌트 const PlaceList = ({ searchPlace, radius, }: { searchPlace: string | undefined; radius?: number; }) => { ... return ( ... ); }; export default React.memo(PlaceList); 리렌더링이 발생하는 컴포넌트를 찾아서 React.memo로 감싸주어 해결했습니다.

Project

[하루메이트] 리팩토링 - 일정 수정 기능

저장이라고 적혀있는 것을 수정으로 변경 기존 일정 수정 모달에는 수정이라고 쓰여 있어야 하는 부분을 저장이라고 되어 있었습니다. {ismodify ? '일정 수정하기' : '일정 저장하기'} 그래서 위와 같은 조건부 렌더링으로 모두 변경해주었습니다. 모달에 일정 데이터를 불러오기 기존 수정 기능에는 아래 사진과 같이 썸네일과 제목 및 내용을 불러오지 않았습니다. 사용자가 수정을 눌렀으니 처음부터 수정하는게 좋지 않을까? 라는 생각으로 이렇게 구현한 것인데, 추후 다시 생각해보니 조금만 변경하고 싶을수도 있다는 생각이 들었습니다. 그래서 기존 데이터를 다시 넣어야겠다는 생각이 들어 변경하게 되었습니다. 장소와 일정 데이터 함께 불러오기 const dispatchDestinationList = async (..

Project

[하루메이트] 리팩토링 - 간단한 SEO 관련

😃 meta 태그 description 넣기 😆 robots.txt 생성하기 User-agent: * Disallow: / Allow: /$ Allow: /favicon.ico Allow: /community Allow: /register Allow: /*.ts$ Allow: /*.tsx$ User-agent: * 모든 검색 엔진의 로봇에 대하여 수집을 허용합니다. Disallow: / Allow: /$ Allow: /favicon.ico Allow: /community Allow: /register Allow: /*.ts$ Allow: /*.tsx$ 루트 페이지, 파비콘, community, register, ts, tsx 파일을 제외한 모두를 수집 비허용합니다.

Project

[하루메이트] 리팩토링 - 초기 로딩 속도 줄이기 ver.1

Intro 무사히 프로젝트를 끝냈지만 아직 리팩토링 할 것이 산더미였습니다. 리팩토링을 해야할 것들 중에서 오늘은 초기 로딩 속도를 조금 줄여보았습니다. 왜? 평소 저희들이 쓰는 인터넷 속도나 와이파이 속도에서는 느리다 라는 느낌을 받지 못했습니다. 하지만 공용 와이파이를 사용하거나 네트워크 탭을 켜고 제한없음에서 빠른 3G로 변경했을 경우에 상당히 느리게 로딩이 되고 있었습니다. 보통은 다들 속도가 빠른 환경에서 웹을 이용하고 있기 때문에 굳이 여기서 줄일 필요가 있을까? 라는 생각이 들었었지만 그래도 느린 환경이 분명히 존재하고 있고, 어딘가 하자가 있다는 것이 굉장히 신경이 쓰였기 때문에 로딩 속도를 줄여보기로 마음 먹었습니다. 본론 React.lazy와 Suspense로 코드 분할을 하여 나름대로..

애송이개발자
'리팩토링' 태그의 글 목록