본문 바로가기

분류 전체보기

 (214)
BFF - Design Pattern with Next.js BFF - Backend for Frontend Design Pattern with Next.js Intro These days microservice architecture becoming more and more popular, and if you... dev.to 위 글을 번역했습니다. Intro 요즘 마이크로서비스 아키텍처가 점점 더 대중화되고 있으며, 이 아키텍처를 채택한 프로젝트에서 일했다면 프론트엔드 개발자로서 다음 시나리오 중 하나에 직면했을 것입니다. - 여러 플랫폼(웹, 모바일 앱, 스마트워치)을 지원하며 각 플랫폼마다 특정 데이터 요구 사항이 존재합니다. - 여러 서비스에서 API를 호출하여 하나의 사용자 인터페이스를 구축합니다. - 여러 API 호출의 응답을 조작, 혼합 및 일치시켜..
[번역] The BFF Pattern: An Introduction The BFF Pattern (Backend for Frontend): An Introduction Get to know the benefits of using BFF pattern in practice blog.bitsrc.io 마이크로 서비스를 사용하여 전자상거래 애플리케이션을 구축해야 하는 시나리오를 상상해보세요. 고객, 주문, 제품, 장바구니등을 위한 마이크로 서비스가 있을 수 있습니다. 마이크로 서비스는 프론트엔드에서 사용할 API를 노출합니다. 그러나 마이크로 서비스가 프론트엔드로 반환하는 데이터는 프론트엔드에서 표현해야 하는 정확한 방식에 따라 형식이 지정되거나 필터링되지 않았을 수 있습니다. 이 경우 프론트엔드에 자체적으로 이러한 데이터의 형식을 다시 지정하는 로직이 있어야 합니다. 프론트..
[번역] useDefferedValue useDeferredValue – React The library for web and native user interfaces react.dev useDefferedValue는 UI의 일부 업데이트를 지연시킬 수 있는 React 훅이다. const deferredValue = useDeferredValue(value) 해당 값의 지연된 버전을 얻으려면 컴포넌트의 최상위 레벨에서 useDeferredValue를 호출한다. import { useState, useDeferredValue } from 'react'; function SearchPage() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query..
Past, Present, and Future of React State Management 아래 글을 번역했습니다. Past, Present, and Future of React State Management Learn about the history of state management in React and what the preferred solutions are today. leerob.io React는 2013년 5월에 소개되었습니다. 이 패러다임의 변화는 UI가 상태의 함수라는 것이었습니다. 어떤 컴포넌트 상태가 주어지면 React는 컴포넌트의 모양을 결정할 수 있습니다. React는 state라는 개념을 기반으로 합니다. 하지만 상태는 오랫동안 React 애플리케이션을 구축할 때 가장 어려운 부분 중 하나였습니다. React의 상태 관리를 견고한 도구 벨트라고 상상해 봅시다. 수년동..
커스텀 이벤트 디스패치 https://ko.javascript.info/dispatch-events 커스텀 이벤트 디스패치 ko.javascript.info 커스텀 이벤트는 그래픽 컴포넌트를 만들 때 사용됩니다. 자바스크립트 기반 메뉴가 있다고 가정해봅시다. 개발자는 메뉴의 루트 요소에 open(메뉴를 열었을 때 실행됨), select(항목을 선택했을 때 실행됨)같은 이벤트를 달아 상황에 맞게 이벤트가 실행되게 할 수 있습니다. 이렇게 루트 요소에 이벤트 핸들러를 달아놓으면 바깥 코드에서도 이벤트 리스닝을 통해 메뉴에서 어떤 일이 일어났는지를 파악할 수 있습니다. 자바스크립트를 사용하면 새로운 커스텀 이벤트 뿐만 아니라 목적에 따라 click, mousedown 같은 내장 이벤트를 직접 만들 수도 있습니다. 이렇게 만든 내장 ..
Array.prototype.at()에 관한 MDN 문서 Array.prototype.at() - JavaScript | MDN at() 메서드는 정수 값을 받아, 배열에서 해당 값에 해당하는 인덱스의 요소를 반환합니다. 양수와 음수 모두 지정할 수 있고, 음수 값의 경우 배열의 뒤에서부터 인덱스를 셉니다. developer.mozilla.org at 메서드는 정수 값을 받아, 배열에서 해당 값에 해당하는 인덱스의 요소를 반환한다. 양수와 음수 모두 지정할 수 있고, 음수 값의 경우 배열의 뒤에서부터 인덱스를 센다. at() 메서드의 존재가 대괄호 표기법을 부정하는 것은 아니다. 예를 들어 array[0]은 문제 없이 배열의 첫 요소를 반환한다. 그러나 맨 마지막 요소를 가져오고 싶을 때 length 속성을 사용해 array[array.length - 1]을 ..
Why React isn't dying 원문: https://tkdodo.eu/blog/why-react-isnt-dying Why React isn't dying Finishing my train of thought about why React is here to stay (for now). tkdodo.eu 지난 목요일, 저는 React 생태계 현황 패널 토론에 참여했는데, 주로 한 가지 질문에 대해서 이야기했습니다: "React는 죽어가고 있는가?" StreamYard 중단으로 인해 생각을 마무리할 수 없었기 때문에 블로그 포스팅을 통해 후속 조치를 취해야겠다고 생각했습니다. 그렇다면 왜 React가 죽어가고 있을까요? Twitter bubble 트위터를 중심으로 React가 죽어가고 있고 다른 라이브러리가 React보다 낫다거나, 지금..
TDZ를 모른 채 자바스크립트 변수를 사용하지 말라 원문: https://dmitripavlutin.com/javascript-variables-and-temporal-dead-zone/ Don't Use JavaScript Variables Without Knowing Temporal Dead Zone Temporal Dead Zone forbids the access of variables and classes before declaration in JavaScript. dmitripavlutin.com 아래 코드 스니펫에서 에러가 발생할까? 첫 번째 코드는 인스턴스를 생성한 다음 클래스를 선언한다. new Car('red'); // Does it work? class Car { constructor(color) { this.color = color;..

티스토리툴바