카일_

Knowledge/WEB

Knowledge/WEB

[WEB] CSR/SSR/SSG

CSR/SSR/SSG CSR(Client Side Rendering) Client Side Rendering의 약자로 클라이언트 측에서 렌더링을 하는 방식이다. 최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식이다. CSR은 웹 서비스에서 사용하는 모든 CSS/JS 파일을 index.css index.js 와 같이 하나의 파일로 번들링한다. 모든 페이지에서 이 번들링 된 파일을 사용하여 페이지를 렌더링한다. 서버에 페이지를 요청하면 서버는 아무것도 없는 빈 HTML과 번들링된 index.js index.css 를 제공한다. 브라우저가 응답을 받은 순간, 페이지에는 어떠한 내용도 표시되지 않는다. ..

Knowledge/WEB

[WEB] 웹 성능 최적화 방법 정리

성능 최적화 내지는 웹성능 최적화를 구글에 검색하면 수많은 이론과 자료가 나온다. 어떤 부분에 초점을 맞추느냐에 따라서 그 방법은 분류 또한 다양해진다. 우선 생각나는대로 빠르게 나열을 해보자면 style은 상단, js는 하단에서 불러온다 웹팩(Webpack) 사용 js의 공백 줄이기 html 작성시 불필요한 div를 제거 css 최적화 - 리플로우, 리페인트(Reflow/Repaint)를 고려한 스타일 작성 - 사용하지 않는 css 제거 이미지 최적화 - picture, img 지연로딩 활용하기 - 스프라이트 이미지 사용 핵심적인 웹 지표(LCP,FID,CLS) 최적화 애니메이션은 js보다는 css로 사용한다 헤더에 만료기한 넣기 SEO (검색엔진최적화) CDN 사용 Gzip 사용 파일 개수 줄이기 라..