[React] 서비스워커 ServiceWorker와 PWA란? (feat. skipWaiting,workbox,pwa,nextjs) 이번 프로젝트에서는 PWA를 이용해서 앱처럼 보이는 효과를 적용하다가 ServiceWorker라는 개념을 몰라 정리해보았습니다. (PWA를 활용하면 사파리등 웹에서 볼 수 있는 페이지를 홈 화면에 추가한 후 어플처럼 볼 수 있습니다.) Google의 Workbox는 자산을 쉽게 캐시하고 프로그레시브 웹 앱 (PWA)을 빌드하는 데 사용되는 기능을 최대한 활용할 수 있도록 하는 라이브러리 및 node module 세트입니다. 서비스 워커(Service Worker)는 브라우저가 백그라운드에서 실행하는 스크립트입니다. 웹 페이지와 별개로 생명주기를 갖고 동작합니다. 서비스 워커는 오프라인(offline)에서 웹페이지를 사용자에게 보여주기 위해 만들어졌습니다. 서비스 워커의 장점 1. 브라우저에서 파일을 캐시.. [react query] stale이란? (feat, 캐싱,use query,fetch, react query에 대해 알아보) React-Query의 캐싱개념은 stale과 cachetime을 통해 이루어진다 Stale과 cacheTime은 무엇인지 먼저 알아보자. | Stale 이란? react query는 기본적으로 캐싱된 data를 stale한 상태로 여긴다. stale의 사전적 의미는 "신선하지 않는"이라는 뜻을 가진다. 신선하다 함은, 서버에서 조회한 데이터는 그때 당시의 데이터 snapshot이고, 외부 요청으로 서버 데이터가 변경이 되었다면 내 브라우저가 가진 데이터는 이미 오래된 낡은 데이터가 되었으므로 stale하다고 말하는 것이다. stale이란 최신화가 필요한 데이터라는 의미로 stale한 상태가 되면 다음의 경우에 refetch 된다. refetch 되는 조건들을 확인해보자. 1. 새로운 query inst.. [React]아토믹(Atomic) 컴포넌트 디자인 개발 패턴 아토믹(atomic)디자인 패턴 대형 프로젝트에서 재사용할 수 있는 컴포넌트들은 필수입니다. 이번에는 여라가지 패턴 중 하나인 아토믹(Atomic)디자인 패턴을 알아보겠습니다. 소개 아토믹 디자인은 사용자 인터페이스를 작고 단순한 요소로 분리하는 개념입니다. 아토믹 디자인 패턴은 Aoms(원자), Molecules(분자), Organisms(유기체), Templates(템플릿)으로 구성되어지고 최종적으로는 Pages 단위가 됩니다. 즉, 일관된 UI를 만들고 유지보수성을 향상시켜줍니다. 구성요소 Atoms - 원자는 버튼, 제목, 텍스트 입력 필드와 같은 가장 작은 구성 컴포넌트이다. - 모든 컴포넌트들의 기초가 되는 블록이며, 더 이상 분해 될 수 없는 필수 요소이다. Molecules - 분자는 2개.. [Error]Nextjs hot reload 오류 핫 리로드 오류 갑자기 잘 되던 hot reload 오류가 발생하였다. 살펴보니 components 이름을 바꿨는데 auto import시 자동으로 바뀐 이름으로 적용되지 않고 소문자로 불러와지는 문제가 있어서 ide를 재시작하거나 해당 컴포넌트 이름을 다시 바꿔보니 정상적으로 진행되었다. 삽질 해결 [optimization]reselect를 사용하여 최적화를 해보자 이번에는 reselect 라이브러리를 사용하여 코드단을 최적화 해볼 예정입니다 ! 우선 reselect는 리덕스에서 만든 라이브러리입니다. state안에 있는 내용들을 가공하는 경우에 useSelector 안에서 처리할 수 있게 도와줍니다. 리렌더링을 방지해주는 역할이죠. reselect를 사용하지 않을 경우, useSelector에서 가공하곤 하였는데 문제점은 여기서 useSelector안에서 가공하는 경우에는 리렌더링을 방지할 수 없다는 것입니다. 먼저 라이브러리를 설치해줍니다. npm i reselect 여기서 저희는 createSelect 를 이용하여 최적화를 진행할 예정입니다. 라이브러리 링크는 아래와 같습니다. https://github.com/reduxjs/reselect GitHub - r.. [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 = ().. 이전 1 2 3 4 ··· 7 다음
