리액트20 [optimization]reselect를 사용하여 최적화를 해보자 이번에는 reselect 라이브러리를 사용하여 코드단을 최적화 해볼 예정입니다 ! 우선 reselect는 리덕스에서 만든 라이브러리입니다. state안에 있는 내용들을 가공하는 경우에 useSelector 안에서 처리할 수 있게 도와줍니다. 리렌더링을 방지해주는 역할이죠. reselect를 사용하지 않을 경우, useSelector에서 가공하곤 하였는데 문제점은 여기서 useSelector안에서 가공하는 경우에는 리렌더링을 방지할 수 없다는 것입니다. 먼저 라이브러리를 설치해줍니다. npm i reselect 여기서 저희는 createSelect 를 이용하여 최적화를 진행할 예정입니다. 라이브러리 링크는 아래와 같습니다. https://github.com/reduxjs/reselect GitHub - r.. 2021. 11. 24. [optimization]이미지 최적화 Layout shift란? | Layout shift란? UI/UX 경험을 해치고 이미지 로딩이 느리게되어 화면 레이아웃이 갑자기 변경(밀리는)되는 현상을 말합니다. Lighthouse에서도 확인이 가능합니다. 그래서 왜 이런일이 일어는거지? 1.사이즈가 정해져 있지 않은 이미지 2.사이즈가 정해져 있지 않은 광고 3.동적으로 삽입된 콘텐츠 4.Web font(FOIT, FOUT) 그럼 어떻게 해결하지? -당연히 이미지에 사이즈를 설정해주면 됩니다. -폰트 문제는 미리 setting을 해주시면 됩니다. 예시를 들어보겠습니다. 아래와 같은 코드가 존재할 때 function PhotoItem({ photo: { urls, alt } }) { const dispatch = useDispatch(); const openModal = ().. 2021. 11. 23. [AWS]리액트 개인 프로젝트 배포하기(nextjs,nestjs)[1]-aws 회원가입 프로젝트를 진행하면서 어느정도 마무리 됐을 때, 리액프 프로젝트를 aws를 연동해서 배포하고 싶다는 생각이 문득 들었다. 그래서 무작정 시작한 아마존 웹 서비스 배포 진행! 시작해보자!! 1.aws 회원 가입 EC2생성 생성 시작 ! 저기 보이는 2번째 우분투 Server를 선택해서 사용할 것임 ! 검토 및 시작을 누르면 아래와 같이 해당 페이지로 와지는데 여기서 3번인 인스턴스 구성에 가보자 ! 여기에서 보면 세부 모니터링 활성화라는 게 있는데 체크해주자 ! 다만 조심할 점은 사용량이 많아지면 요금이 부과될 수 있다 ! 보통은 모니터링 하기 때문에 체크 하고 사용한다 해서 나도 체크 ! 다음은 6번 보안 그룹 구성 해당 단계에서는 기본으로 SSH만 등록되어 있는데 추가로 HTTP & HTTPS 를 등록.. 2021. 5. 27. 리액트의 Switch는 언제 사용할까? 기본적인 라우터의 동작 방식 라우터에는 가 보통 많이 사용되며 와 를 통해서 라우팅을 구현하는 방식이다. 예를 들어, 홈페이지, 영화페이지, 리뷰페이지가 있다고 하자. 각각의 URL을 / , /movies , /reviews 라고 했을 때, 다음과 같이 구현할 수 있다. import React from 'react'; import { BrowserRouter as Router, Route } from 'react-router-dom'; const Routes = () => { return ( ); }; 3가지 컴포넌트가 있다는 가정하에, 위와 같이 path 속성을 통해서 각각의 컴포넌트가 렌더링 되는 URL이 정해진다. 그러나 여기서의 문제점은, 홈페이지에 들어갔을 때 /movies 와 /reviews .. 2021. 3. 17. 리덕스 reselect 사용하기 reselect를 알기 전, Selector를 먼저 알아야합니다. | Selector란 ? state 에서 필요한 데이터를 가져오거나, 계산을 수행해서 원하는 형태의 데이터를 가져오는 역할을 말합니다. 왜 사용할까? selector는 Redux가 적은 양의 필요한 데이터만을 갖고 있게 data들의 연산을 도우며, state를 가져오는 컴포넌트들과 state의 구조 사이에 1개의 층(selector)를 두어 구조가 바뀌어도 연관된 모든 컴포넌트를 바꿀 필요 없이 selector 만 바꿔주면 성능이 향상되기 때문에 사용합니다. | reselect 란? selector 역할을 수행하면서 캐싱을 통해 동일한 계산을 방지해 성능을 향상시켜줍니다. 연산을 효율적으로 처리할 수 있게 도와주는 역할을 합니다. 즉, 새.. 2021. 2. 22. CORS와 Webpack DevSercer Proxy | CORS 란 ? 브라우저에서 기본적으로 API를 요청 할 때 브라우저의 현재 주소와 API의 주소의 도메인이 일치해야만 데이터를 접근 할 수 있습니다. 만약 다른 API를 요청해서 사용 할 수 있게 해주려면 CORS 설정이 필요합니다. json-server 로 만든 서버의 경우에는 모든 도메인을 허용해주는 CORS 규칙이 적용되어있습니다. 하지만, Open API를 만드는게 아니라면 모든 도메인은 허용하면 안됩니다. webpack 개발 서버에서 제공하는 Proxy 기능을 사용하여 도메인을 사용해 봅시다. | Proxy 설정 웹팩 개발서버의 프록시를 사용하게 되면, 브라우저 API 를 요청 할 때 백엔드 Server에 직접적으로 요청을 하지 않고, 현재 개발 서버의 주소로 요청을 하게 됩니다. 그러면 .. 2021. 2. 18. 이전 1 2 3 4 다음
