8 Days A Week

이벤트 위임 function clickHandler(e) { this.parentNode.removeChild(this); } for (let i = 0; i < ilbuniGroup.length; i++) { ilbuniGroup[i].addEventListener("click", clickHandler); } 이벤트를 각각 등록해주는 것은 객체 길이가 많아질 경우 비효율적이다. 부모 컴포넌트에 이벤트를 위임한다. const stage = document.querySelector(".stage"); function clickHandler(e) { if (e.target.classList.contains("ilbuni")) { stage.removeChild(e.target); } } stage.addE..

Not wrapped in act 경고 리액트에서 act 경고는 컴포넌트에서 아무것도 일어나지 않을 것으로 예상하고 있을 때 컴포넌트에 어떤 일이 일어나면 나오는 경고이다. act 함수로 감싸주어야 한다. act(()=>{ // fire event that update state }); 지금까지 act로 감싸준 적이 없는데 잘 된 이유 react-testing-library 내부 API에 act를 이미 내포하고 있어서 따로 설정하지 않아도 됐다. (리액트 콜 스택 안에 있을 때) 에러가 난 이유 컴포넌트가 비동기 API 호출로 렌더링이 일어나기 전에 테스트가 종료되는 경우 act로 감싸주어야 한다. (리액트 콜 스택 밖에 있어서) 이 때는 waitFor API를 사용해 테스트가 끝나기 전에 컴포넌트가 다..

React Context를 이용한 상품 가격 처리 리액트에서 데이터 흐름 컨트롤하는 법 (state 관리하기) state와 props를 사용해 컴포넌트 간 전달 React Context 사용 mobx 사용 redux 사용 context 사용해서 컴포넌트에 데이터 제공하기 Context - React Context 생성 Context는 Provider 안에서 사용가능하기 때문에 Provider 생성 더 복잡한 로직을 구현하기 위해 Provider를 위한 함수 생성 OrderContextProvider 함수로 orderContext 사용할 컴포넌트 감싸기 orderContext 사용하기 자세한 사용법은 문서 참고! context wrapper 추가로 테스트 에러 제거 테스트를 진행하면 render로 불러온 ..

문제 주어진 N개의 동전으로 만들 수 있는 값 중 최소를 구하는 문제. 출처 - [이것이 코딩 테스트다] 교재 Q4 풀이과정 각각의 합으로 만들 수 있는 금액 중 최소를 구하는 데에 효율적인 구현이 생각나지 않았다. (1개~N개 동전을 모두 쓸 수 있는 점이 헷갈림) 모든 합계의 경우를 구하고 해당하지 않는 최소를 구할까 싶었지만 바람직하지 않음 정답 책에 기술된 내용 화폐를 기준으로 오름차순 정렬한다. 이후 1부터 차례로 특정한 금액을 만들 수 있는지를 확인한다. 1부터 target-1까지의 모든 금액을 만들 수 있다고 가정해보자. 우리는 화폐 단위가 작은 순서대로 동전을 확인하며, 현재 확인하는 동전을 이용해 target 금액 또한 만들 수 있는지 확인하면 된다. 만약 target 금액을 만들 수 있..

Query 사용 우선 순위 지금까지 getByTestId 쿼리를 이용해서 엘리먼트에 접근해서 테스트를 진행했지만 testing library에서 추천하는 쿼리 사용 우선 순위가 따로 있다. getByRole을 우선으로 사용하는 것이 좋다. About Queries | Testing Library userEvent > fireEvent userEvent는 fireEvent를 사용해서 만들어졌다. userEvent는 fireEvent에 비해 엘리먼트 타입에 따라 더욱 적절한 반응을 보여준다. userEvent API를 사용하는게 더 추천되는 방법이다. Mock Service Worker 백엔드에서 데이터를 가져오는 부분을 테스트하기 위해서 실제로 서버에서 호출하는 end-to-end 테스트를 할 수 있지만 ..

ESLint Plugins 설치 및 설정 Plugins 란? eslint에서 기본으로 제공하지 않는 다양한 규칙을 플러그인을 통해 사용할 수 있다. 라이브러리 설치 npm install eslint-plugin-testing-library eslint-plugin-jest-dom --save-dev .eslintrc.json 작성 { "plugins": ["testing-library", "jest-dom"], "extends": [ "react-app", "react-app/jest", "plugin:testing-library/react", "plugin:jest-dom/recommended" ] } 테스트 주도 개발(Test Driven Development) Test Driven Developme..

테스팅의 이유 안정적인 어플리케이션을 위해서 이점 디버깅 시간의 단축 및 유닛 테스팅으로 버그 위치 발견의 용이 안정적인 어플리케이션 구현 재설계 및 확장 구현 시간의 단축 React Testing Library란? React Testing Library | Testing Library React Testing Library(이하 RTL)는 DOM Testing Library를 기반으로 구현됐다. CRA는 기본적으로 이를 지원하지만 그렇지 않은 경우 npm을 통해 별도로 추가할 수 있다. npm install --save-dev @testing-library/react RTL은 에어비앤비에서 만든 Enzyme을 대처하는 솔루션이다. 구성 요소의 구현 세부 정보를 테스트하는 대신 RTL 개발자를 React..

병목 함수에 memoization 적용 병목함수 memoiztion 적용은 pure function일 때만 가능하다. const cache = {}; export function getAverageColorOfImage(imgElement) { if (cache.hasOwnProperty(imgElement)) { console.log('cache has the key', cache); return cache[imgElement]; } console.log('cache dont have the key', cache); const canvas = document.createElement('canvas'); const context = canvas.getContext && canvas.getContext('..

useSelect 렌더링 문제 해결 react devtools를 설치했다면 브라우저 개발자 도구에서 기능을 사용할 수 있다. Components → 설정 → Highlight updates when components render 켜주기 불필요한 렌더링이 일어남을 확인할 수 있다. useSelector 동작 원리 useSelector로 구독하는 값이 dispatch 후 결과값이 달라지면 리랜더링을 실행한다. 여기서 객체로 구독을 하면 내용이 같아도 객체 자체는 변경된 것으로 인식하기 때문에 랜더링이 일어난다. useSelector 문제 해결 방법 Object를 새로 만들지 않도록 State 쪼개기 새로운 Equality Function 사용 : equality function으로 shallowEqual을..

실습내용 이미지 지연(lazy) 로딩 → 로딩 성능 최적화 Layout Shift 피하기 useSelector 렌더링 문제 해결 Redux Reselect를 통한 렌더링 최적화 병목 함수에 memoization 적용 병목 함수 로직 개선하기 → 렌더링 성능 최적화 Layout Shift 피하기 화면 상의 이미지, 텍스트 등의 엘리먼트들이 위치, 크기 등에 변화가 일어나는 것 performance 탭과 Lighthouse에서도 Layout Shift가 일어난 것을 확인할 수 있다. Layout Shift 원인 사이즈가 정해져 있지 않은 이미지 사이즈가 정해져 있지 않은 광고 동적으로 삽입된 컨텐츠 web font(FOIT, FOUT) 문제점 화면 상 위치를 다시 계산해야해 성능에 영향을 줌 사용성에 영향을..