frontend (5) 썸네일형 리스트형 웹 정적 리소스(JS/CSS) 캐싱하기 개요 웹 서비스는 가능한한 최신화된 컨텐츠를 사용자에게 제공할 책임이 있습니다. 하지만 그것이 모든 리소스를 원서버(Origin Server) 로부터 제공해야된다는 의미는 아닙니다. 사용자로부터 비교적 멀리 떨어진 원서버(Origin Server)가 아닌 조금 더 가까운, 네트워크 엣지에 존재하는 CDN 이나, 혹은 사용자의 로컬 컴퓨터로부터 리소스를 제공한다면 웹사이트 로딩속도를 단축할 수 있습니다. 캐싱(Caching)은 웹 사이트의 로딩속도를 단축하여 사용자 경험을 개선합니다. 그리고 캐싱은 proxy cache, browser cache 등 여러가지 전략에 의해 구현될 수 있습니다. 웹 서비스에서 사용되는 캐싱 이해하기 웹서비스에서 캐싱을 사용하면 리소스 로딩속도(or 응답지연 or latency.. [Frontend] Multi stage build를 사용한 프로덕션 프론트엔드 도커이미지 빌드(NextJs) 배경 프로덕션환경에서 사용할 nextjs 서버의 도커파일을 작성하였습니다. 이때 nextjs github 에 있던 예제(https://github.com/vercel/next.js/blob/canary/examples/with-docker/Dockerfile) 를 참고하였는데, 이 예제에 사용된 multi-stage builds 에 대해 간단히 정리해봅니다. Multi-stage builds 사용하는 이유 CD 에서 빌드한 도커 이미지는 실제 프로덕션 환경에서 컨테이너로서 실행되기 때문에 그 용량을 최소화할 필요가 있습니다. 이미지는 ECR등의 외부 레지스트리에 저장되므로 비용관리측면에서도 이는 필요합니다. docker cp 명령어를 활용한 builder pattern 이 용량 관리 방법중 하나입니다. .. [Frontend] docker 개발환경(nginx + nextjs)에서 hmr 이 적용되지 않는 문제 해결 배경 nginx reverse proxy 를 사용하게 될일이 있어, nginx 와 nextjs 프론트엔드 서버를 도커환경으로 구축했습니다. 파일 수정시 hmr 이 일어나지 않는 문제가 있어서 이를 해결해보았습니다. 문제 두가지 문제가 있었습니다. 1. 호스트 pc와 컨테이너의 파일시스템이 구분되어 있음 개발하면서 수정한 파일은 호스트 pc의 파일시스템에만 업데이트 되기때문에 nextjs 개발 서버에서 hmr 이 발생하여도 아무런 일도 일어나지 않습니다. 2. Nextjs 에서 hmr 이 웹소켓 기반으로 동작 (+ nginx proxy) nextjs 에서는 hmr 이 웹소켓 기반으로 동작합니다.(12버전 이후 기준 https://nextjs.org/docs/upgrading#nextjs-hmr-connec.. Vue 는 어떻게 빌드될까 개요 Vue SFC 가 빌드타임에 어떻게 처리되는 지 알아봅니다. SFC (Single-file components) SFC 는 많은 이점을 제공합니다. html, css, js 를 사용한 모듈화된 컴포넌트 작성 scoped css ide 지원(vetur, volar) HMR 지원 //source.vue {{ greeting }} export default { data() { return { greeting: 'Hello World!' } } } 하지만 그 대가로 vue 파일을 파싱하기 위한 빌드단계가 필요합니다. Vue-loader 우리의 모듈화된 코드는 브라우저가 다운로드할 수 있는 코드로 변환되기 위해 번들링 과정을 거쳐야합니다. webpack 이 해석할 수 없는 파일(.js 이외의 파일)은 별도의.. SSR 페이지 캐싱 알아보기 개요 SSR 에서 사용가능한 페이지 레벨 캐싱에 대해 알아봅니다. 예제코드는 vue2 기준으로 작성된 코드입니다. 배경 웹사이트 개발시 SEO와 페이지 로드시간 단축을 위해 SSR 을 사용할 수 있습니다. 사용자의 컴퓨터 자원을 사용하는 CSR 과 다르게 SSR에서는 서버의 컴퓨팅 자원을 사용합니다. 렌더 서버는 클라이언트 요청에 의해 페이지를 서버에서 렌더링합니다. 그리고 html 을 생성하여 클라이언트로 서빙하는 역할을 담당합니다. 따라서 클라이언트의 새로운 요청이 있을 때마다 렌더링 연산이 동작해야 하고, 이는 사용자가 많아질 수록 서버의 오버헤드를 유발할 수 있습니다. 서버의 부담을 줄이기 방법으로, 페이지 레벨 캐싱을 적용해볼 수 있습니다. 페이지 캐싱은 짧은 시간동안 응답을 캐싱하는 마이크로 .. 이전 1 다음
