Nextjs8 [React] 서비스워커 ServiceWorker와 PWA란? (feat. skipWaiting,workbox,pwa,nextjs) 이번 프로젝트에서는 PWA를 이용해서 앱처럼 보이는 효과를 적용하다가 ServiceWorker라는 개념을 몰라 정리해보았습니다. (PWA를 활용하면 사파리등 웹에서 볼 수 있는 페이지를 홈 화면에 추가한 후 어플처럼 볼 수 있습니다.) Google의 Workbox는 자산을 쉽게 캐시하고 프로그레시브 웹 앱 (PWA)을 빌드하는 데 사용되는 기능을 최대한 활용할 수 있도록 하는 라이브러리 및 node module 세트입니다. 서비스 워커(Service Worker)는 브라우저가 백그라운드에서 실행하는 스크립트입니다. 웹 페이지와 별개로 생명주기를 갖고 동작합니다. 서비스 워커는 오프라인(offline)에서 웹페이지를 사용자에게 보여주기 위해 만들어졌습니다. 서비스 워커의 장점 1. 브라우저에서 파일을 캐시.. 2022. 4. 25. [AWS] Nextjs cloudfront S3 배포 시 html 확장자 제거 (feat. lambda 함수 이용) 이번 글은 Nextjs로 AWS에 베포를 진행하는 과정 중 발생하였다. 처음에는 모든 페이지들이 정상적으로 작동하는 듯 싶었으나, 역시 그럴일이 없었다. Nextjs는 동적 라우팅 즉, Dynamic Loute를 지원한다. ex) www.~~~.com/products/1 위의 링크처럼 동적 라우팅이 있는 폴더 구조가 있다고 생각해보자. 결국 folder struct는 products 폴더 안에 [id].tsx와 같은 파일이 존재할것이다. 여기까지는 아주 좋다. 이제 문제는 지금부터다. AWS의 CloudFront를 이용하여 배포를 진행하였을 때 해당 동적 페이지로 들어가면 아무 페이지가 뜨지 않는다. 해결 방법은 .html 확장자를 명시적으로 넣어주는것이다. 하지만 매 페이지 요청 시 www.~~~.co.. 2022. 4. 8. [Error]Nextjs hot reload 오류 핫 리로드 오류 갑자기 잘 되던 hot reload 오류가 발생하였다. 살펴보니 components 이름을 바꿨는데 auto import시 자동으로 바뀐 이름으로 적용되지 않고 소문자로 불러와지는 문제가 있어서 ide를 재시작하거나 해당 컴포넌트 이름을 다시 바꿔보니 정상적으로 진행되었다. 삽질 해결 2022. 1. 5. [Nextjs] getInitialProps should resolve to an object오류 진짜 한참을 삽질하다가 알아낸 오류 "getInitialProps should resolve to an object" 라는 오류 메시지인데 nextjs로 개발중에 getInitialProps 로 query 내용을 출력해보고 싶었다 단지 출력만 !!!! 근데 왜 날 괴롭히냐고,, 해결 방법은 엄청 간단했다 단지 return {} 을 적어주면 된다는 거... object를 return을 안 해줘서 발생하는 오류,,, 나중에 또 까먹을 수 있으니 여기에 기록하고 남겨둬서 검색하면 내 블로그가 나오겠지? 2021. 9. 8. [Webpack]webpack-bundle-analyzer 배포 준비 안녕하세요! 이번에는 TypeScript Proejct를 배포를 위한 준비를 해보겠습니다! 먼저 간단하게 webpack-bundle-analyzer(웹팩 번들 에널라이저)에 대해 알아보겠습니다! Webpack을 사용하여 번들링되는 모듈을 분석해서 시각적으로 표현해주는 모듈입니다. 모듈이 차지하는 용량에 따라서 눈에 보이는 영역도 커지기 때문에 어떤 모듈이 얼만큼 용량을 차지하는지 쉡게 파악할 수 있습니다 밑에 그림 처럼요 ! Webpack 특성상 수십개들의 파일들을 단 하나의 js 파일로 압축해주는 역할을 맡고 있습니다. 이럴 때 용량 문제가 큰 이슈 사항인데요. 합쳤을 때 용량이 너무 크면 문제가 되겠죠? 지금은 app.js는무려 총 크기가 1.5MB를 차지하고 있습니다. (사실상 한국은 별 문제 없는.. 2021. 8. 27. [AWS]리액트 개인 프로젝트 배포하기(nextjs,nestjs)[6]-Front 배포 & 탄력적 IP고정 back server에서 npm install pm2를 설치한 것 처럼 기존 프로젝트 front 경로도 pm2를 설치 후 pull해주자 ! | 알고 가야하는 점 ! 첫 번째, 지금 프로젝트는 nextjs 로 진행했기 때문에 getServerSideProps와 같은 backend에서 먼저 data를 받아와야 하는 함수가 들어있다 따라서 backend 가 무조건 켜져있어야지만 front를 켤 때 오류를 방지할 수 있다 ! 두 번째, 현재 나는 saga 로 상태관리를 하고 있는데, saga 폴더의 index.js에서 나는 axios의 defaults 값으로 baseURL을 지금까지는 axios.defaults.baseURL = 'localhost:3001'; 이렇게 적어주고 사용해왔었다. 하지만 지금 우리가 .. 2021. 5. 28. 이전 1 2 다음
