Front-end3 Good Refactoring vs Bad Refactoring 이번글은 리팩토링을 주제로한 글로 해외 게시글을 토대로 좋은 리팩토링과 나쁜 리팩토링의 예를 구분하여 정리합니다.이 글의 작성자는 수년간 많은 개발자를 고용해 왔고 그중 상당수는 우리의 코드는 대대적인 리팩토링이 필요하다는 확고한 신념을 가지고있었다 말합니다. 하지만 많은 경우에서 리팩토링된 코드를 이전보다 이해하고 유지보수하기 더 어렵다고 느꼈고 더 느리고 버그가 많기도 했다고 합니다.리팩토링 자체는 코드 베이스를 견고하게 유지하는데 중요한 과정이지만 더 나은 것을 만들려다 오히려 상황을 더 악화시키는 함정에 빠지기 쉽게 한다고 합니다.그렇다면 좋은 리팩토링과 나쁜 리팩토링의 차이를 알아보겠습니다.1. 코드 스타일을 크게 바꾸는것 before// 🫤 this code could be cleanerfu.. 2024. 9. 9. [React] Tanstack query 키 관리하기 in QueryKey-Factory 이번엔 아트인포 에서 Next.js와 Tanstack Query를 사용하며 키 관리를 어떻게 했는지 정리해봤습니다. 키 관리가 필요한 이유..?Tanstack-Query가 제공하는 기능들을 제대로 사용하기 위해서는 필수적으로 이해해야 하는 개념들이 몇 가지 존재합니다. 오늘 다뤄볼 주제는 그 핵심 개념들 중 하나인 Query Keys를 관리하는 방법. 공식문서에서는 다음과 같이 Query Keys를 소개한다. At its core, TanStack Query manages query caching for you based on query keys. Query keys have to be an Array at the top level, and can be as simple as an Array with a.. 2024. 7. 18. Next.js 14 이미지 최적화 초기 Nuxt3로 개발했었던 사이드 프로젝트 아트인포 를 Next14로 리뉴얼하며 들었던 큰 고민중 하나는이미지 위주의 컨텐츠가 많다보니 페이지의 용량이 3~5MB가 넘어가는 일이 많았다. (컨텐츠에 따라 용량의 차이는 있지만)이 문제를 해결하고자 최적화에 대해 찾아봤고 next/image 컴포넌트를 사용하며 최적화한 방법에 대해 기술한다.기존 문제점 아트인포 에서 흔히 볼수 있는 컨텐츠인 공연들중 하나의 이미지다. png의 형태로 용량은 778kb이다..이런 이미지가 10장 20장을 넘어간다면..? 이러한 문제로 최적화에 대해 고민하였고 next/image의 포멧 변환과 캐싱 기능을 사용하였다. next/image 컴포넌트는 기본적으로 webp 파일 형식으로 변환을 해주었고, avif로도 선택이 가능.. 2024. 7. 14. 이전 1 다음
