best practice (3) 썸네일형 리스트형 Refactoring React(리팩토링 리액트) : Separate API Layer(API 계층 분리) 대부분의 리액트 프로젝트엔 비동기 데이터 가져오기를 위한 라이브러리가 필요합니다. 해당 API 레이어를 별도의 계층으로 관리하는 방법을 알아봅시다. 해당 게시물은 React Query에 대한 지식을 기본 전제로 합니다. API 레이어를 분리해야 하는 이유 UI 코드와 데이터 레이어 코드의 결합도가 높아집니다. 같은 데이터를 가져오는 코드가 중복되어 분산 존재하게 됩니다. 컴포넌트와 API 레이어 관심사 혼재는 코드 읽기를 어렵게 합니다. 최종 분리 결과 전역 api 폴더 공통 설정을 위한 전역 공유 Axios 인스턴스와 리액트 쿼리 클라이언트 요청을 보내기 위한 fetch 함수 feature/{feature-name}/api 내부적으로 react-query를 사용하지만 구현 세부하항을 캡슐화하는 커스텀 .. Refactoring React(리팩토링 리액트) : Query(서버 데이터 조회) 리액트 프로젝트 서버 데이터 조회 구현의 모범 사례를 탐구해 볼까요? 간단한 서버 조회 구현 with useEffect 가장 흔히 볼 수 있는 구현은 다음과 같습니다. useEffect를 사용하여 렌더링 시마다 효과를 유발합니다. import axios from "axios"; export function IssueList() { useEffect(() => { axios .get("https://prolog-api.profy.dev/issue") .then((response) => console.log(response)); // empty dependency array means this runs only once (at least in production) }, []); ... } 해당 방법의 문제점.. Refactoring React(리팩토링 리액트) : Folder Structure(폴더 구조) 리액트 프로젝트를 위한 최적의 폴더 구조는 뭘까요? 모범 사례 탐구 커뮤니티에서 유명한 추천 사례들은 다음 게시물들에서 잘 소개되고 있습니다. https://www.joshwcomeau.com/react/file-structure/ Delightful React File/Directory Structure How should we structure components and other files in our React apps? I've iterated my way to a solution I'm really happy with. In this blog post, I'll share how it works, what the tradeoffs are, and how I mitigate them. www.j.. 이전 1 다음
