본문 바로가기

FrontEnd

 (437)
React에서 마진 대신 Spacer 컴포넌트 활용하기 원문 보기 Let's Bring Spacer GIFs Back! The 90s web gave us many delightful things: web rings, guestbooks, “under construction” animations, and spacer GIFs. In this article, we'll see how I use a Spacer component to solve common layout problems, and why it's often a great tool for the job in www.joshwcomeau.com TL;DR 그리드, 플렉스를 사용하는 경우가 아니면서 마진이 필요한 경우, Spacer 컴포넌트를 고려해본다. HomeButton 컴포넌트를 만들어 봅시다. f..
Styled-component와 Tailwind 함께 사용하기 with Twin Macro 원문 보러가기 Tailwind는 맞춤형 디자인을 빠르게 구축하기 위한 유틸리티 퍼스트 CSS 프레임워크입니다. 단독으로 React 앱의 스타일 설정에 사용할 수도 있지만, Styled Components와도 잘 사용할 수 있습니다. Tailwind CSS, Styled Components 및 Twin Macro를 사용하여 CSS를 한 줄도 작성하지 않고 form 컴포넌트를 만들어 봅니다. 왜 이 세가지를 동시에 사용하죠? Tailwind 클래스는 상당히 길 수 있고, 이는 컴포넌트의 가독성과 유지보수성을 저해합니다. Styled Components의 경우 직접 스타일을 작성해야 합니다. Tailwind CSS는 유틸리티 클래스를 지원하고, Styled Components는 CSS-in-JS의 도움으로 컴..
React Query에는 Debounce와 Throttling이 없다? React-query에서 기본적으로 제공하는 debounce, throttling 기능이 없어 곤혹을 겪었다. 복습 및 예방 차원에서 구현을 학습해보자. 원리는 쿼리키 배열로 전달되는 값의 변화를 지연하여 전달하는 것이다. 참고한 글 : https://www.codingdeft.com/posts/react-debounce-throttle/ Debounce(디바운스) 일정 시간동안의 요청을 묶어 최종 요청 하나만 처리한다. 요청은 뒤에 트리거된다. import React from "react"; export default function useDebounceValue(value: T, delay: number = 500) { const [debouncedValue, setDebouncedValue] = R..
대규모 프로젝트 React Query 아키텍처 원문 보기 Building The Real App With React Query — Smashing Magazine In this article, Georgii Perepecho explains the most common React Query features that you need to be familiar with when creating a real-life application that is stable when testing. www.smashingmagazine.com 원문의 완성된 프로젝트 레포지토리 GitHub - horprogs/react-query: An example of building the app using React Query. An example of building th..
리액트 라우터 v6(React Router v6) 딥 다이브 https://reactrouter.com/docs/en/v6/getting-started/concepts#main-concepts React Router | Main Concepts Declarative routing for React apps at any scale reactrouter.com 요즘은 대부분의 회사들이 CRA 대신 next.js를 디폴트로 사용하는것 같지만, 클라이언트 사이드 렌더링 기반 프로젝트를 제로부터 구축해야 하는 경우, 라우팅은 필수다. 직접 구축할 수도 있지만, (useEffect로 간단하게 할 수 있음... 과연 간단할까? 좀비 차일드 문제를 검색해보자) 대부분 리액트 라우터를 사용한다. 리액트 라우터는 6 버전부터, 이라는 컴포넌트와 함께, 컴포넌트 트리의 레이아웃에 직..
프론트엔드 지식 : Javascript Critical Rendering Path 원문 링크 정의에 따르면 Critical Rendering Path는 브라우저가 HTML 페이지를 가져오는 시간과 사용자가 시각화할 수 있는 웹 페이지 구축을 시작하는 시간 사이에 경로를 만드는 단계의 모음일 뿐입니다. 이 과정에서 브라우저가 수행하는 단계를 최적화해야 합니다. 크리티컬 렌더링 패스 최적화란, css, javascript, html을 적게 가져오고, 파싱 및 실행하여, 사용자의 인터랙션까지의 시간을 단축시키는 것을 의미한다. The Document Object Model 모든 웹 페이지에는 Document Object Model 또는 DOM이 있습니다. 이것은 구문 분석(parsed)된 상태에 있는 전체 HTML 페이지의 객체 표현입니다. HTML이 구문 분석되면 DOM 트리가 생성됩니..
리액트 성능 최적화 : Death By a Thousand Cuts (천 번 베이면 죽는다.) Death By a Thousand Cuts 잦은 상태 업데이트는 성능 이슈가 됩니다. 이는 보통 하나의 컴포넌트가 너무 많은 일을 할 때 발생합니다. 이 문제는 식별하기 쉽습니다. 하지만 하나의 상태 업데이트에 너무 많은 컴포넌트가 묶여있으면 찾기 어렵습니다. 이게 contextAPI의 단점입니다. 따라서, 컴포넌트를 일단 작게 만드는게 중요합니다. 기존의 최적화 방법들엔 아래와 같은 문제들이 존재합니다. useMemo, callback등 캐시 방법은 앱의 복잡도를 높입니다. 리액트는 렌더링 외에, 최적화를 위한 연산을 수행합니다. 때로는 메모보다 그냥 렌더링하는게 성능이 좋을 수도 있습니다.(ex 긴 리스트 컴포넌트) 불필요한 리렌더링을 방지할 수 있는 성능 최적화 방법들을 알아보겠습니다. 여러개의 ..
리액트 성능 최적화 : Production Monitoring 사용자가 성능 불만 접수 전에, 성능 문제를 해결합시다. 렌더링 시간의 일부를 어떻게든 추적하고 해당 정보를 서버로 보내 모니터링할 수 있다면 좋을 것입니다. React DevTools만큼 많은 정보를 제공하지는 않지만 유용한 정보를 제공합니다 참고 : facebook은 프로파일링 버전과 비 프로파일링 버전을 동시에 배포합니다, 즉 프로파일링 버전을 사용자의 일부에만 배포하여, 모니터링합니다. 주의 : 프로파일러는 기본적으로 프로덕션 모드에서 동작하지 않습니다. 성능 부하가 될 수도 있으니 주의합시다. Create React App v3.2 이상 버전에서는 다음과 같은 방법을 사용하여 프로덕션에서 프로파일링을 enable할 수 있습니다. yarn build --profile npm run build --..

티스토리툴바