Frontend (18) 썸네일형 리스트형 [번역] JavaScript Promises: an introduction JavaScript Promises: 소개 Promise는 지연 및 비동기 계산을 단순화합니다. Promise는 아직 완료되지 않은 작업을 나타냅니다. web.dev 프로미스는 지연(deferred) 및 비동기 연산을 간소화한다. 프로미스는 아직 완료되지 않은 연산을 나타낸다. -> 비동기 처리의 상태(pending, fulfilled..)와 결과를 나타내는 객체 개발자 여러분, 웹 개발의 역사에서 중요한 순간을 맞이할 준비를 하세요. 자바스크립트에 Promise가 생겼습니다! Browser support and polyfill 완전한 프로미스 구현이 없는 브라우저 사양을 준수하도록 만들거나 다른 브라우저 및 Node.js에 프로미스를 추가하려면 폴리필을 확인하세요. What's all the fuss .. [번역] 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를 노출합니다. 그러나 마이크로 서비스가 프론트엔드로 반환하는 데이터는 프론트엔드에서 표현해야 하는 정확한 방식에 따라 형식이 지정되거나 필터링되지 않았을 수 있습니다. 이 경우 프론트엔드에 자체적으로 이러한 데이터의 형식을 다시 지정하는 로직이 있어야 합니다. 프론트.. 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보다 낫다거나, 지금.. Prop Drilling 원문 : https://kentcdodds.com/blog/prop-drilling#why-is-prop-drillinggood 이 글의 목표는 Prop Drilling이 무엇인지 이해하는데 도움을 줄 뿐만 아니라, 언제 문제가 될 수 있으며 이를 회피하거나 피하기 위해 사용할 수 있는 메커니즘에 대해 설명하는 것입니다. What is prop drilling? Prop Drilling("스레딩"이라고 함)은 React 컴포넌트 트리의 일부로 데이터를 가져오기 위해 거쳐야 하는 프로세스를 말합니다. 상태를 가지고 있는 컴포넌트의 아주 간단한 예시를 살펴보겠습니다. function Toggle() { const [on, setOn] = React.useState(false) const toggle = ().. 프레임워크 없는 프론트엔드 개발 | 렌더링 모든 웹 애플리케이션에서 가장 중요한 기능 중 하나는 데이터의 표시이다. 좀 더 명확하게 말해 데이터를 표시한다는 것은 요소를 화면이나 다른 출력 장치에 렌더링한다는 것을 의미한다. W3C(World Wide Web Consortium)은 프로그래밍 방식으로 요소를 렌더링하는 방식을 문서 객체 모델 DOM(Document Object Model)로 정의했다. 문서 객체 모델 DOM은 웹 애플리케이션을 구성하는 요소를 조작할 수 있는 API이다. 자세한 내용은 W3C 규격 페이지를 참조. What is the Document Object Model? What is the Document Object Model? Editors Jonathan Robie, Texcel Research Introduction .. [번역] Widget Driven Development Widget Driven Development | Alexey Antipov Decomposition of UI applications into self-contained widgets leveraging streamlined Data Management alexei.me 우리가 애플리케이션을 개발할 때 컴포넌트를 조합합니다. 각 UI 컴포넌트는 기본적으로 마크업, 범위가 지정된 스타일, 일부 UI 로직의 조합입니다. 데이터 관리는 빈번하게 컴포넌트 제어에서 제외되어 복잡한 데이터 흐름이 있는 복잡한 아키텍처를 초래합니다. 이 글에서는 컴포넌트를 데이터 로직과 UI를 모두 완벽하게 제어할 수 있는 자율적으로 분리된 위젯으로 변환하는 방법을 보여드리겠습니다. The History of Components .. Why is React's concept of Virtual DOM said to be more performant than dirty model checking? Why is React's concept of Virtual DOM said to be more performant than dirty model checking? I saw a React dev talk at (Pete Hunt: React: Rethinking best practices -- JSConf EU 2013) and the speaker mentioned that dirty-checking of the model can be slow. But isn't calculating the diff bet... stackoverflow.com 이 글은 Stackoverflow의 질문을 번역한 글입니다. 작성자가 궁금했던 것은 Pete Hunt가 모델에 대한 Dirty Checking이 느릴 수 있다.. Explain dirty checks in React.js 리액트는 virtualDOM을 사용하여 콘텐츠를 렌더링합니다. DOM은 페이지의 HTML 구조를 추상화한 것입니다. DOM Node들은 위 과정을 통해서 만들어집니다. 네트워크를 통해서 HTML 문서를 불러오고 raw byte를 characterize하는 과정을 거칩니다. 그리고 characterize화 후에 tokenize 해줍니다. 그리고 이 친구들을 Node들로 바꿉니다. 이 Node를 기반으로 DOM Tree를 생성해줍니다. 결국 DOM은 HTML로부터 온 것입니다. HTML을 파싱하여 각각의 노드들을 트리 구조의 객체 형태로 래핑합니다. 이는 개발자가 DOM 노드들을 추가, 수정, 삭제할 수 있도록 API를 제공해줍니다. DOM 자체는 정적(static) UI를 위한 것이므로 DOM이 업데이트될.. 이전 1 2 3 다음
