최근 이직한 회사에서 php로 제작된 레거시 프로젝트를 담당하게 되었습니다. 프론트엔드 개발자 입장에서 백엔드 코드,DOM 조작 코드,HTML 코드 등이 뒤섞여있는 PHP 환경은 여간 불편한일이 아닙니다. 이를 개선하기 위해서 기존 프로젝트의 DOM 코드들을 web component로 적용하고 있습니다. 거의 매번 react로된 환경에서만 작업을 해오면서 생각할필요가 없어던 부분들을 고려해야 되다 보니 react의 장점이 느껴져서 둘을 비교하면서 정리해보겠습니다. 웹컴포넌트 web component const html = String.raw; class Modal extends HTMLElement { constructor() { super(); this.list = []; this.attachShado..
next.js 14 app router next.js 14에서는 기존 pages라는 폴더 기반의 라우팅에서 app router로 변경되었다. next.js 서버에서 custom api를 작성하는 방법에도 약간의 변화가 있기 때문에 이에 대해서 공유한다. export const dynamic = 'force-dynamic' // defaults to auto export async function GET(request: Request) {} app/api/route.ts 위 예시를 보면 page.js나 layout.js처럼 파일 기반 route를 제공한다. app 폴더 내부에 동일한 방식으로 route.ts 파일을 작성하면된다. 동일하게 app폴더 내에서 파일 기반으로 동작하기 때문에 중첩을 피하기 위해서..
React에 관련된 설명을 보다보면 종종 React는 virtual-dom이라서 빠르다라는 식의 이야기를 듣고 한다. 이는 반만 맞는 이야기이다. export function updateWrapper(element: Element, props: Object) { const node = ((element: any): TextAreaWithWrapperState); const value = getToStringValue(props.value); const defaultValue = getToStringValue(props.defaultValue); if (value != null) { // Cast `value` to a string to ensure the value is set correctly. Whi..
막연하게 반대로 생각하고 있었던 부분에 대해서 공식 문서를 기준으로 기록. https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes You Might Not Need an Effect – React The library for web and native user interfaces react.dev Adjusting some state when a prop changes props가 변경될때 state를 수정하는 경우 function List({ items }) { const [isReverse, setIsReverse] = useState(false); const [selection, setS..
목록 가상화 또는 "윈도잉" 무한 스크롤처럼 동적으로 node가 늘어나는 UI를 사용할때 node가 100개 1000개 늘어나면 어떻게 될까요 많은 행이 포함된 큰 테이블이나 리스트를 표시해야 하는 경우가 있습니다. 이러한 리스트의 모든 단일 항목을 로드하면 성능에 상당한 영향을 미칠 수 있습니다. 목록 가상화 또는 "윈도잉"은 사용자에게 보이는 것만 렌더링하는 개념입니다. 먼저 렌더링되는 요소의 수는 전체 목록의 아주 작은 부분 집합이며 사용자가 스크롤을 계속하는 경우 보이는 콘텐츠의 "window"이 움직입니다. 이렇게 하면 리스트의 렌더링 및 스크롤 성능이 모두 향상됩니다. react-window react-window는 애플리케이션에서 가상화된 목록을 쉽게 생성할 수 있게 해주는 작은 서드 파티 ..
리액트는 간단함과 유연함을 강점으로 최근 몇 년 동안 가장 인기 있는 프런트엔드 라이브러리 중 하나가 되었습니다. 그러나 어플리케이션이 더 복잡해질수록 상태를 관리하고 비동기 입력을 처리하며 확장 가능한 아키텍처를 유지하는 것이 어려워질 수 있습니다. 이 기사에서는 이러한 어려움을 극복하는 데 도움이 되는 다섯 가지 고급 리액트 패턴을 살펴보겠습니다: Backend for Frontend Pattern (BFF) Hooks Pattern Higher-Order Component Pattern Observer Pattern Compound Pattern 1. Backend for Frontend Pattern (BFF) Backend for Frontend (BFF) 패턴은 React 애플리케이션을 개발할..
무한 스크롤 컴포넌트 import React, { useState, useEffect, useRef, FC } from "react"; interface Props { fetchData: () => Promise; children: React.ReactNode; } const InfiniteScroll: FC = ({ fetchData, children }) => { const [isLoading, setIsLoading] = useState(true); const loader = useRef(null); useEffect(() => { const observer = new IntersectionObserver( (entries) => { if (entries[0].isIntersecting) { set..
axios 내부에서 import 구문을 사용해서 생기는 에러로 보인다. babel 설정등을 수정하면 해결될 문제이지만 CRA 특성상 커스텀하는게 더 귀찮다. "test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\"", 이런식으로 package.json 에서 test script에 옵션을 추가하면 해결된다. axios 최신 버전에서 생기는 이슈로 보인다. 일반적인 에러가 아니라서 원인을 찾는데 꽤 어려웠음. https://github.com/axios/axios/issues/5101 Jest tests failed after upgrading axios to v1.1.2 · Issue #5101 · axios/axio..
