FrontEnd (17) 썸네일형 리스트형 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 로직의 조합입니다. 데이터 관리는 컴포넌트 제어에서 제외되어 복잡한 데이터 흐름이 있는 복잡한 아키텍처를 초래합니다. 이 글에서는 컴포넌트를 데이터 로직과 UI를 모두 완벽하게 제어할 수 있는 자율적으로 격리된 위젯으로 변환하는 방법을 보여드리겠습니다. The History of .. 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 다음
