FrontEnd (437) 썸네일형 리스트형 Refactoring React(리팩토링 리액트) : Debugging(디버깅) 불필요한 console.log를 아예 작성하지 않으면서 디버깅해 봅시다. 그리고 디버깅 효율과 생산성도 높여봅시다. 아래 글의 번역입니다. https://profy.dev/article/debug-react-vscode How To Debug React Apps With VS Code - Boost Your Debugging Productivity Debugging a React app can be a painful process. Speed up your workflow with the VS Code debugger and decrease friction. Good news: It's super simple. profy.dev 그동안의 디버깅 문제가 발생할 것이라 추측되는 지점 근처에 console.l.. Refactoring React(리팩토링 리액트) : Separate API Layer(API 계층 분리) 대부분의 리액트 프로젝트엔 비동기 데이터 가져오기를 위한 라이브러리가 필요합니다. 해당 API 레이어를 별도의 계층으로 관리하는 방법을 알아봅시다. 해당 게시물은 React Query에 대한 지식을 기본 전제로 합니다. API 레이어를 분리해야 하는 이유 UI 코드와 데이터 레이어 코드의 결합도가 높아집니다. 같은 데이터를 가져오는 코드가 중복되어 분산 존재하게 됩니다. 컴포넌트와 API 레이어 관심사 혼재는 코드 읽기를 어렵게 합니다. 최종 분리 결과 전역 api 폴더 공통 설정을 위한 전역 공유 Axios 인스턴스와 리액트 쿼리 클라이언트 요청을 보내기 위한 fetch 함수 feature/{feature-name}/api 내부적으로 react-query를 사용하지만 구현 세부하항을 캡슐화하는 커스텀 .. Refactoring React(리팩토링 리액트) : Mutation(서버 데이터 변경) 리액트 프로젝트 서버 데이터 변경의 모범 사례를 탐구해 볼까요? 서버 상태 변경 시 고려해야 할 것들 서버 상태와 클라이언트 상태의 동기화와 더 나은 사용자 경험을 위해선 다음과 같은 것들이 필요합니다. 요청 취소 캐시 무효화 낙관적 업데이트 간단한 예시 : useEffect와 Click handler 흔한 구현은 아래와 같습니다. useEffect는 컴포넌트가 리렌더링 될 때마다 적절하게 호출되어 데이터를 페치해 옵니다. 버튼 클릭 시 patch를 통해 해당 데잍커를 업데이트 합니다. useEffect(() => { axios .get("https://prolog-api.profy.dev/v2/issue?status=open", requestOptions) .then(({ data }) => setIs.. 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.. Refactoring React(리팩토링 리액트) : Conditional Rendering(조건부 렌더링) 리액트의 조건부 렌더링 구문을 프로처럼 사용하는 방법을 알아봅시다. TL;DR - 3줄요약 얼리 리턴 삼항 연산자보다 &&, 연쇄 조건은 js 변수에 할당 부모의 조건부 렌더링 책임을 자식에게 (null 리턴) Early Return(조기 리턴) 대부분의 경우 추천합니다! 안티 패턴이라 생각하는 분들이 많으나, 아래 글을 읽어봅시다. https://blog.mathpresso.com/algebraic-effects-of-react-suspense Algebraic Effects of React Suspense Suspense Based on Algebraic Effects blog.mathpresso.com 댄 아브라모프의 대수적 효과와 서스펜스도 사실 early return이나 마찬가지입니다. 서스펜스.. Refactoring React(리팩토링 리액트) : 자료구조 적절한 자료구조를 사용하면 리액트 코드를 깔끔하게 짤 수 있습니다. 적절한 자료구조를 활용하여 로직을 리팩토링하여 애플리케이션의 확장성을 향상시켜 봅시다. 해당 게시물의 목표는 다음과 같습니다. 코드를 더 쉽게 읽고 유지보수 쉽게 하기 버그에 덜 취약한 코드 만들기 코드의 복잡성 제거하기 애플리케이션 성능 향상시키기 Map : 해시테이블 (해시) 맵, 해시 테이블 또는 딕셔너리는 기본적으로 키-값 저장소입니다. JavaScript에서 자주 만날 수 있는 다음과 같은 객체입니다. { key1: "value 1", key2: "value 2", key3: "value 3", } 네이티브 Map 객체도 존재합니다. 좀 더 성능에 최적화되어 있으므로, 키 기반 검색 시 좋습니다. 아래와 같이 값들만 배열로 만들.. Refactoring React(리팩토링 리액트) : useState 복잡한 상태는 유지보수를 어렵게 하는 원인입니다. 상태를 리팩토링하여 애플리케이션의 확장성을 향상시켜 봅니다. 해당 게시물의 목표는 다음과 같습니다. 코드를 더 쉽게 읽고 유지보수 쉽게 하기 버그에 덜 취약한 코드 만들기 코드의 복잡성 제거하기 애플리케이션 성능 향상시키기 1. 너무 많은 상태(Redundant State) fullName은 firstName과 lastName으로부터 파생됩니다. const [firstName, setFirstName] = useState(""); const [lastName, setLastName] = useState(""); const [fullName, setFullName] = useState(""); 해당 파생 상태는 의존성을 개발자가 직접 추적하여 업데이트를 같.. 이전 1 2 3 4 5 6 7 ··· 55 다음
