이번 프로젝트에서는 PWA를 이용해서 앱처럼 보이는 효과를 적용하다가 ServiceWorker라는 개념을 몰라 정리해보았습니다. (PWA를 활용하면 사파리등 웹에서 볼 수 있는 페이지를 홈 화면에 추가한 후 어플처럼 볼 수 있습니다.) Google의 Workbox는 자산을 쉽게 캐시하고 프로그레시브 웹 앱 (PWA)을 빌드하는 데 사용되는 기능을 최대한 활용할 수 있도록 하는 라이브러리 및 node module 세트입니다. 서비스 워커(Service Worker)는 브라우저가 백그라운드에서 실행하는 스크립트입니다. 웹 페이지와 별개로 생명주기를 갖고 동작합니다. 서비스 워커는 오프라인(offline)에서 웹페이지를 사용자에게 보여주기 위해 만들어졌습니다. 서비스 워커의 장점 1. 브라우저에서 파일을 캐시..
이번 글은 Nextjs로 AWS에 베포를 진행하는 과정 중 발생하였다. 처음에는 모든 페이지들이 정상적으로 작동하는 듯 싶었으나, 역시 그럴일이 없었다. Nextjs는 동적 라우팅 즉, Dynamic Loute를 지원한다. ex) www.~~~.com/products/1 위의 링크처럼 동적 라우팅이 있는 폴더 구조가 있다고 생각해보자. 결국 folder struct는 products 폴더 안에 [id].tsx와 같은 파일이 존재할것이다. 여기까지는 아주 좋다. 이제 문제는 지금부터다. AWS의 CloudFront를 이용하여 배포를 진행하였을 때 해당 동적 페이지로 들어가면 아무 페이지가 뜨지 않는다. 해결 방법은 .html 확장자를 명시적으로 넣어주는것이다. 하지만 매 페이지 요청 시 www.~~~.co..
진짜 한참을 삽질하다가 알아낸 오류 "getInitialProps should resolve to an object" 라는 오류 메시지인데 nextjs로 개발중에 getInitialProps 로 query 내용을 출력해보고 싶었다 단지 출력만 !!!! 근데 왜 날 괴롭히냐고,, 해결 방법은 엄청 간단했다 단지 return {} 을 적어주면 된다는 거... object를 return을 안 해줘서 발생하는 오류,,, 나중에 또 까먹을 수 있으니 여기에 기록하고 남겨둬서 검색하면 내 블로그가 나오겠지?
안녕하세요! 이번에는 TypeScript Proejct를 배포를 위한 준비를 해보겠습니다! 먼저 간단하게 webpack-bundle-analyzer(웹팩 번들 에널라이저)에 대해 알아보겠습니다! Webpack을 사용하여 번들링되는 모듈을 분석해서 시각적으로 표현해주는 모듈입니다. 모듈이 차지하는 용량에 따라서 눈에 보이는 영역도 커지기 때문에 어떤 모듈이 얼만큼 용량을 차지하는지 쉡게 파악할 수 있습니다 밑에 그림 처럼요 ! Webpack 특성상 수십개들의 파일들을 단 하나의 js 파일로 압축해주는 역할을 맡고 있습니다. 이럴 때 용량 문제가 큰 이슈 사항인데요. 합쳤을 때 용량이 너무 크면 문제가 되겠죠? 지금은 app.js는무려 총 크기가 1.5MB를 차지하고 있습니다. (사실상 한국은 별 문제 없는..
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'; 이렇게 적어주고 사용해왔었다. 하지만 지금 우리가 ..
자 이제 서버 실행도 시켰고 ! 중요한 건 쉘에서 서비스를 중지시키면 홈페이지도 중지가 되버린다.. 이랬던게 이렇게 꺼져버린다. 이게 참 애매한게 그렇다고 해서 항상 백앤드창을 계속 접속할 수 없는 노릇인데.. 이 현상이 노드가 foreground process 로 돌아가서 생기는 문제인데 이러면 shell을 종료했을 때 foreground process도 같이 종료된다. node app 으로 실행하면 foreground process가 된다는 것. foreground process란 ? -> 터미널을 끄면 같이 꺼지는 것 (node app) background process -> 터미널을 꺼도 안 꺼지는 것 오늘은 이걸 해결해보자 먼저 다시 백앤드 서버 실행 엥 ? 오류다 뭐지 ? 이 원인은 우분투(u..
리액트와 next를 사용하여 SSR 적용 중 className 오류가 났다. 원인은 nextjs 사용시 css 마찬가지로 SSR 렌더링도 먹여줘야 하는것이었다. "styled components는 따로 SSR 세팅(_document.js)을 안 하면 서버사이드 렌더링이 안 되므로 동적으로 스타일 태그를 생성하기 때문입니다. 기본적으로 next의 pages는 서버사이드 렌더링이 된다. getServerSideProps는 추가적으로 데이터까지 가져오는 것이고, ssr을 제외한 상황에서는 모두 styled-components가 동작한다" 그럼 SSR을 적용해 보자! 주의할 점은 getInitialProps는 주로 사용 안 하고 Document에서만 사용한다는 점 꼭 이억하자. _document.js 기본 형태..