summarize this "hierarchical bullet point summary." and bullet points for each subject.
The Little Lemon restaurant is receiving a spike and visits to their website during the last month due to customers loving some of the special pizzas the chef presented to the public. Despite the success, there are some pizzas that aren't receiving the same level of attention, so they have decided to implement some basic analytics to better understand which are the bestsellers and which ones are not being ordered so regularly. For that, they would like to track the mouse position of the visitors when they are in the pizza section, so that they know exactly which pictures are capturing people's attention and which ones are overlooked. In this video, I'm going to show you how to implement such functionality by using a higher-order components or HOC, which will be in charge of encapsulating the logic and state to track the cursor position of the visitors. Then I'll showcase two different presentation or components that will consume that data and present it in different ways. Are you ready? Let's begin. The little application has been created with Create React app, so far in the rendering part of the app component, there is a header displaying the title of the restaurant and two components, panel most logger and point mouse logger. They both expect a mouse position prop and will return null if that prop is not provided. That's why at the moment they don't render anything at all. You could implement the mouse tracking logic in each component but recall that it would incur code repetition and duplication of the same logic in two different places. That's why the recommended approach is to use one of the techniques that React provides for encapsulating cross-cutting concerns. In this example, I will illustrate how to do this with an HOC. I call this HOC with mouse position. The width part of the name is a general convention recommended by React since it expresses the enhancing nature of the technique, like providing a component with something else. Recall that an HOC is essentially a function that takes a component and returns a new component. Let's complete the initial scaffold and return a component that will render the wrapped component provided to the function without forgetting to spread the props it receives, so that they will pass-through. Great. Now to track the position of the cursor, I would need to define a new piece of local state, which I'll call mouse position for the data and set mouse position for the state setter. The initial state will be an object with two properties, x and y to define the two-dimensional coordinates on the screen and I will set both to zero. X equals 0 and y equals 0, represents the top-left corner of the screen. Next, I would need to set a global listener in the window object for the mouse move events. Since this is a side-effect, I need to perform the subscription and unsubscription logic inside use effects. Let's go ahead and do that, I will add a new event listener for a mouse movement to the window object. For the call back, I will name the function handleMousePositionChange. That for now, doesn't do anything. It's important to remove any subscription when your component unmounts. The way to do that is by returning a function from use effect and then performing any cleanup needed. In this case, I would have to use the window.removeEventListener passing as arguments, the mouse move event and the same callback function as before. To complete the logic and set the state with current mouse position, I need to read that information from the browser event object, which is passed as an argument to the callback. That event object contains two properties that define the coordinates, clients X and client Y. I will assign both of them to the corresponding dimension. Finally, the last step to complete the implementation is to set a new prop called mouse position in the rapt component to pass that information down to all components that are interested in that data. Great. Now, that the implementation of the HOC is finished, let's add the last few pieces to display the mouse position on the screen. To enhance the two components previously defined panel mouse logger and point mouse logger, I will use the HOC to create two new component versions that will be aware of the mouse position data and I'll call them panel mouse tracker and point mouse tracker respectively. Finally, I will use the enhanced versions in the rendering part of the app component. Amazing. The requirements are now finalized. If I move the cursor around the screen, you can see two different trackers that display the same information in different ways. One as a panel and the one below as a data point. Well, that's the end of this video. Little Lemon restaurant now uses this solution to track their pizza loving customers and have discovered that something was affecting the sales of their pizza de Avila. Guess what? After an employee investigated that particular pizza on the app, they noticed that one of the photos was a bit blurry, thanks to this little tracking application, they have now taken action and uploaded new high-quality photos. The next time a customer is exploring the menu, they won't miss the pizza de Avila.
이 "계층적 글머리 기호 요약"과 각 주제에 대한 글머리 기호를 요약합니다.
리틀 레몬 레스토랑은 셰프가 대중에게 선보인 특별한 피자를 좋아하는 고객들 덕분에 지난 한 달 동안 웹 사이트 방문자 수가 급증하고 있습니다. 이러한 성공에도 불구하고 동일한 수준의 관심을 받지 못하는 피자가 있기 때문에 어떤 피자가 베스트셀러이고 어떤 피자가 자주 주문되지 않는지 더 잘 이해하기 위해 몇 가지 기본 분석을 구현하기로 결정했습니다. 이를 위해 방문자가 피자 섹션에 있을 때 마우스 위치를 추적하여 어떤 사진이 사람들의 관심을 끌고 어떤 사진이 간과되는지 정확히 파악하고자 합니다. 이 비디오에서는 방문자의 커서 위치를 추적하는 로직과 상태를 캡슐화하는 역할을 담당하는 고차 컴포넌트 또는 HOC를 사용하여 이러한 기능을 구현하는 방법을 보여드리겠습니다. 그런 다음 해당 데이터를 소비하고 다른 방식으로 표시하는 두 가지 프레젠테이션 또는 컴포넌트를 보여드리겠습니다. 준비되셨나요? 시작하겠습니다. Create React 앱으로 작은 애플리케이션을 만들었는데, 지금까지 앱 컴포넌트의 렌더링 부분에는 레스토랑의 제목을 표시하는 헤더와 패널 모스트 로거와 포인트 마우스 로거라는 두 가지 컴포넌트가 있습니다. 두 컴포넌트 모두 마우스 위치 프로퍼티를 기대하며 해당 프로퍼티가 제공되지 않으면 null을 반환합니다. 그렇기 때문에 현재로서는 아무것도 렌더링하지 않습니다. 각 컴포넌트에서 마우스 추적 로직을 구현할 수도 있지만, 이렇게 하면 코드가 반복되고 두 곳에서 동일한 로직이 중복된다는 점을 기억하세요. 그래서 권장되는 접근 방식은 교차하는 문제를 캡슐화하기 위해 React가 제공하는 기술 중 하나를 사용하는 것입니다. 이 예제에서는 HOC로 이를 수행하는 방법을 설명하겠습니다. 저는 마우스 위치로 이 HOC를 호출합니다. 이름에서 너비 부분은 컴포넌트에 다른 무언가를 제공하는 것과 같은 기술의 향상 특성을 표현하기 때문에 React에서 권장하는 일반적인 규칙입니다. HOC는 본질적으로 컴포넌트를 받아 새로운 컴포넌트를 반환하는 함수라는 것을 기억하세요. 초기 스캐폴드를 완성하고 함수에 제공된 래핑된 컴포넌트를 렌더링하는 컴포넌트를 반환하는 컴포넌트를 반환하면서 받은 소품을 퍼뜨리는 것을 잊지 않고 패스스루를 해봅시다. 훌륭합니다. 이제 커서의 위치를 추적하려면 데이터에 대해 마우스 위치라고 부르고 상태 설정자에 대해 마우스 위치를 설정할 새로운 로컬 상태를 정의해야 합니다. 초기 상태는 화면의 2차원 좌표를 정의하는 두 가지 속성, 즉 x와 y를 가진 객체가 될 것이며 둘 다 0으로 설정하겠습니다. x는 0이고 y는 0이며 화면의 왼쪽 상단 모서리를 나타냅니다. 다음으로 마우스 이동 이벤트에 대한 창 객체에 전역 리스너를 설정해야 합니다. 이것은 부수적인 효과이므로 사용 효과 내부에서 구독 및 구독 취소 로직을 수행해야 합니다. 이를 위해 창 객체에 마우스 이동에 대한 새 이벤트 리스너를 추가하겠습니다. 콜백을 위해 함수 이름을 handleMousePositionChange로 지정하겠습니다. 지금은 아무 일도 하지 않습니다. 컴포넌트가 마운트 해제될 때 구독을 제거하는 것이 중요합니다. 이를 위한 방법은 사용 효과에서 함수를 반환한 다음 필요한 정리를 수행하는 것입니다. 이 경우 인자로 전달되는 window.removeEventListener, 마우스 이동 이벤트 및 이전과 동일한 콜백 함수를 사용해야 합니다. 로직을 완성하고 현재 마우스 위치로 상태를 설정하려면 콜백에 인수로 전달되는 브라우저 이벤트 객체에서 해당 정보를 읽어야 합니다. 이 이벤트 객체에는 좌표를 정의하는 두 개의 프로퍼티, 클라이언트 X와 클라이언트 Y가 포함되어 있습니다. 이 두 프로퍼티를 모두 해당 차원에 할당하겠습니다. 마지막으로 구현을 완료하는 마지막 단계는 랩트 컴포넌트에 마우스 위치라는 새로운 프로퍼티를 설정하여 해당 데이터에 관심이 있는 모든 컴포넌트에 해당 정보를 전달하는 것입니다. 훌륭합니다. 이제 HOC 구현이 완료되었으므로 마우스 위치를 화면에 표시하기 위해 마지막 몇 가지를 추가해 보겠습니다. 이전에 정의한 패널 마우스 로거와 포인트 마우스 로거를 향상시키기 위해 HOC를 사용하여 마우스 위치 데이터를 인식하는 두 개의 새 컴포넌트 버전을 만들고 각각 패널 마우스 트래커와 포인트 마우스 트래커라고 부르겠습니다. 마지막으로 앱 컴포넌트의 렌더링 부분에서 향상된 버전을 사용하겠습니다. 놀랍습니다. 이제 요구사항이 완성되었습니다. 화면에서 커서를 움직이면 동일한 정보를 다른 방식으로 표시하는 두 개의 다른 트래커를 볼 수 있습니다. 하나는 패널로, 아래 하나는 데이터 포인트로 표시됩니다. 이 영상은 이것으로 끝입니다. Little Lemon 레스토랑은 이제 이 솔루션을 사용하여 피자를 좋아하는 고객을 추적하고 있으며, 피자 드 아빌라의 판매에 영향을 미치는 요인을 발견했습니다. 그 이유가 무엇일까요? 직원 초대 후