현재 이 글은 Webpack bundle 사이즈 최적화 - (2) 의 시점 바로 다음에 최적화 했던 부분인데.. 현생이 바쁘단 이유로 글 써야지 써야지.. 만 반복하고 미루어 왔다가 지금 적게 되었습니다. 최근 회사 본부에서 사이트에 서비스를 런칭한 이 후 본부적으로 제가 담당하였던 캘린더 모듈의 초기 로딩 속도 및 렌더링 속도가 빠르다는 얘기를 듣게 되었습니다. 이에 본부 FE 연구원들에게 제가 적용하였던 부분에 대해 공유하는 자리가 있게 되었고 그에 따라 이 글을 적게 되었습니다. 오늘의 주제는 간단하게 코드 스플리팅 입니다. 지난 글 회고] 지난 포스트에서는 lighthouse와 관련해서 font 최적화 부분들과 (물론 CDN 부분은 추후에 적용 되었지만 누락 되어있는 부분), webpack 설정의 production 모드에 대해 글을 적었습니다. 기본적으로 앞서 설명하였던 production 모드를 통해서 번들링 사이즈를 줄이고, minify 및 compre

오늘의 글은 지난 글에서 사실상 포스팅이 끝나야 되고, Github Action이나 자동화 부분에 대해 글을 써야하는데.. 그것보다 갑작스러운 문제 상황에 어제 대처하느라 변경된 환경에 대해 다시 포스팅을 하려고 한다. 배포 된 환경 갑자기 배포된 환경이 운용되지 않고 사이트가 죽게 되었다. 원인을 파악하고자 GCP 콘솔에 로그인하자마자 보이는 문구. 무료 체험판에서 제공된 크레딧을 다 사용했기 때문에 유료 크레딧으로 활성화 하라는 문구와 함께 계정이 일시정지 되었다. .... 간단한 환경만 구축한건데 이렇게 벌써 제공된 크레딧을 다 썼다고...?? 확인해보니 지난 포스팅에서 적었던 클러스터 컨테이너.. 그 하위에 3개의 Load Balancer 등.. 유료 결제 요금을

오늘은 지난글에 이어서 간단하게 GCP 에 HTTPS 관련 적용한 글을 포스팅 하려고 한다. 들어가기에 앞서 일반적으로 도메인을 산다면, 도메인과 웹 호스팅( + SSL) 을 같이 제공해주는 서비스들을 이용하게 된다. 하지만, Vercel을 이용하면 웹 호스팅을 제공해주기 때문에 도메인만 구입을 했었다. 이번엔 따로 SSL 구입하여 GCP에 적용하는 글이다. SSL 구입 [ SSL 인증서 최저가 구매 ]를 찾게 되면 많은 수의 사이트들이 나오는데.. 사실 어디가 괜찮은지 어떤 인증서를 써야하는지 모르는 나였기 때문에, Single Domain만 붙일 수 있는 것들을 찾게 되었다. 그 중 나는 가격이 제일 저렴한 코리아 SSL을 이용하게 되었다. ( 광고는 아니고... ) -> 코리아 ssl GoGet Domain SSL 도메인 구입 ![](https://velog.velcdn.com/images/s2ksh77/post/1adb29e8-3ddf-4174-b

심리상담센터 홈페이지를 운영하던 중 갑작스런 에러상황을 맞이하게 되었고, 해당 환경을 더이상 이용하기 힘들 것이라 판단하여, Vercel 환경에서 GCP 환경으로 이동한 구축기를 적어두려고 한다. 에러 상황 위에 그림과 같이 Pro 계정은 Serverless function의 timeout이 30초로 제공되는 반면 최근 vercel의 hobby 계정은 10초로 제한되면서 504 에러를 발생하게 된다. 구글링으로 해결책을 확인하였지만, getServerSideProps 및 getStaticProps 으로 serverless 함수의 응답시간을 줄여야 된다는 해결책들이 있어서, 해당 관련으로 수정 해보았다. 하지만 며칠째 반복 되었고 해결되지 않아서 vercel에서 github action 과 배

참조 : https://toss.tech/article/node-modules-and-yarn-berry Toss Tech 블로그를 탐구하고 공부하던 중 yarn berry에 대한 글을 일게 되었습니다. 최근, 기존 프로젝트를 마지막으로 새로운 모듈을 시작하게 되면서 node_modules에 대한 의존성 관리 대신 yarn berry를 구축해보면 어떨까 하여 간단하게 구축해본 부분을 적어볼까 합니다. Yarn Berry란? yarn berry 는 기존 Node.js를 위한 패키지 관리 시스템으로써, npm의 패키지 관리하는 고질적인 문제나 큰 용량, 또는 package.json에 명시되지 않은 유령 dependency등을 해결하기 위한 패키지 관리 시스템 입니다. https://github.com/yarnpkg/berry에서 확인 하실 수 있습니다. Yarn Berry 등장 배경 어떠한 의존성을 찾기 위해 전체 의존

Next.js 로 최근 SSR에 대한 부분을 홈페이지도 만들어보고 빌드도 해보면서 GatsBy에 대해 알게 되었고, 뭔가 정리해보고 싶은 부분을 정리해보아야겠다. 우선 Gatsby에 대해 설명하자면, Gatsby는 리액트 기반의 웹사이트 생성 도구이다. Gatsby에서 제공하는 API를 사용하면 리액트(React) 컴포넌트 방식으로 빠르게 웹사이트를 구축할 수가 있다. 또한 GraphQL을 백엔드로 둘 수 있어서 많은 양의 콘텐츠를 가진 웹사이트라도 쉽게 빌드할 수 있다는 장점을 제공한다. Gatsby에서 사용할 수 있는 렌더링 옵션 SSG 방식: Static Site Generation 빌드 시점에 HTML 파일이 생성되며, 매 요청마다 재사용된다. 정적 페이지 기반 웹사이트를 만들어주는 도구로서 콘텐츠와 파일을 읽고 이를 html으로 적절히 변환해 주는 기술 CDN으로 캐싱되어 사용 DSG 방식:

인프런 입문 가이드를 정리해보고 있습니다. Svelte의 특징 Write less code 높은 가독성 유지 개발 시간 단축 쉬운 리팩토링 쉬운 디버깅 더 작은 번들 (SPA 최적화) 낮은 러닝 커브 No virtual DOM NO Diffing No OverHead 빠른 성능(퍼포먼스) Truly reactive 반응성이란 애플리케이션 상태(데이터)의 변화가, DOM에 자동으로 반영되는 현상을 말한다. Framwork-less VanillaJS Only use devDependencies 명시적 설계(창의적 작업) Svelte가 작업물(애플리케이션)을 VanillaJS로 변환(컴파일)하고 그 결과만 동작하기 때문에, Svelte는 브라우저(런타임)에서 동작하지 않는 컴파일러라고 할 수 있습니다. `자유도가 비교적