LightHouse 과제를 수행하며 해결해나간 항목들을 정리해둔 것 웹 페이지 품질 개선할 수 있는 자동화도구 Chrome의 개발자도구 탭에서 사용가능 npm으로 설치해서 사용가능 Lighthouse에서 측정하는 지표는 실제 사용자의 사이트 경험을 이해하고 개선하는데에 중요하다. Lighthouse으로 미리 측정하여 확인하면 이런 해프닝을 방지할 수 있다. 다음은 Lighthouse에서 측정해주는 UX를 높이는데에 필요한 지표들을 알아보자. 성능측정 지표 Lighthouse는 Mertics(척도)로 다음 6가지를 측정한다. 이 성능값들은 절대적인 수치가 아니다. 컴퓨터의 퍼포먼스나 익스텐션들로 인한 네트워크 요청들, 바이러스 소프트웨어 등등에 의해 영향을 미칠 수 있다. 각 지표는 가중치를 매겨 전체 점..

context를 이용하면 단계마다 일일이 props를 넘겨주지 않고도 컴포넌트 트리 전체에 데이터를 제공할 수 있습니다. - 공식문서 위의 말처럼 기계적인 props전달 코드를 없앨 수 있는 방법 중 하나다. 전역데이터를 공유하는 방법이며 로그인 유저, 테마 등의 데이터를 관리한다. Context API란 전역상태관리의 방법 중 하나이며 redux, react-router, styled-components이 이를 기반으로 구현되어있다. React패키지에서 제공하는 기능이다. (써드파티 라이브러리 X) Context API 시작 전, 알아야할 것 1. Context 객체의 형태로 전역 데이터를 담는 store라고 생각할 수 있다. const MyContext = React.createContext(defa..

redux의 배경이되는 Flux패턴과 이를 기반으로한 redux를 이해하기 위해 작성 Facebook에서는 알림기능에서 에러가 반복되어 양방향 데이터흐름의 MVC패턴에서 예측되지 않는 문제점을 해결하기 위해 Flux패턴을 도입했다고 한다. What is Flux ? 시작하기전 읽어보면 좋은 글 - flux패턴 시작하기전 보면 좋은 만화 - flux 패턴 MVC Facebook에서 사용했던 해당 패턴은 새로운 기능이 추가될 때 복잡도를 증가시키고 예측하지 못할 버그가 존재했다. 구체적으로는 알림기능이었는데, 양방향 데이터흐름이 만들어내는 예측하지못할 버그가 계속 발생하여 이를 해결하기 위해 flux패턴을 도입했다고 한다. Flux flux는 클라이언트 Web App을 만드는데 사용하는 아키텍쳐다. MVC와..