이번에는 reselect 라이브러리를 사용하여 코드단을 최적화 해볼 예정입니다 ! 우선 reselect는 리덕스에서 만든 라이브러리입니다. state안에 있는 내용들을 가공하는 경우에 useSelector 안에서 처리할 수 있게 도와줍니다. 리렌더링을 방지해주는 역할이죠. reselect를 사용하지 않을 경우, useSelector에서 가공하곤 하였는데 문제점은 여기서 useSelector안에서 가공하는 경우에는 리렌더링을 방지할 수 없다는 것입니다. 먼저 라이브러리를 설치해줍니다. npm i reselect 여기서 저희는 createSelect 를 이용하여 최적화를 진행할 예정입니다. 라이브러리 링크는 아래와 같습니다. https://github.com/reduxjs/reselect GitHub - r..
보통 초보 개발자들은 성능 최적화를 고려하지 않고 무작정 코딩을한다.(나 같은 사람) 이런 불상사를 막기위해 성능 최적화를 알아보자 ! 개인 프로젝트 같이 자그마한 프로젝트를 진행하는 경우에는 크게 신경을 쓰지 않아도 된다. 하지만 수 많은 사용자들이 몰리는 사이트라면 ...? 당연히 속도가 빨라야한다. 그렇게 하기 위해 발버둥쳐서라도 메모리 사이즈를 줄이고 불필요한 코드를 줄이고 이미지 사이즈도 줄이고.. 역시 날씬한게 짱인가? 아무튼 이번에는 코드단에서 불필요한 Css를 제거할 것이다 ! 위의 이미지는 Lighthouse를 통한 사이트 성능 검증인데 굉장히 구리다. 어느정도 개선 시켜봐야겠다. * Lighthouse 보는 방법은 Chrome인 경우 F12 mac : command + option + ..