CSR/SSR/SSG CSR(Client Side Rendering) Client Side Rendering의 약자로 클라이언트 측에서 렌더링을 하는 방식이다. 최초에 한번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식이다. CSR은 웹 서비스에서 사용하는 모든 CSS/JS 파일을 index.css index.js 와 같이 하나의 파일로 번들링한다. 모든 페이지에서 이 번들링 된 파일을 사용하여 페이지를 렌더링한다. 서버에 페이지를 요청하면 서버는 아무것도 없는 빈 HTML과 번들링된 index.js index.css 를 제공한다. 브라우저가 응답을 받은 순간, 페이지에는 어떠한 내용도 표시되지 않는다. ..
RestAPI REST API의 탄생 REST는 Representational State Transfer라는 용어의 약자로서 2000년도에 로이 필딩 (Roy Fielding)의 박사학위 논문에서 최초로 소개되었다. 로이 필딩은 HTTP의 주요 저자 중 한 사람으로 그 당시 웹(HTTP) 설계의 우수성에 비해 제대로 사용되어지지 못하는 모습에 안타까워하며 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표했다. REST 구성 쉽게 말해 REST API는 다음의 구성으로 이루어져있다. 자원(RESOURCE) - URI 행위(Verb) - HTTP 메소드 표현(Representations) REST 의 특징 Uniform (유니폼 인터페이스) Uniform Interface는 URI로 지정한 리..
성능 최적화 내지는 웹성능 최적화를 구글에 검색하면 수많은 이론과 자료가 나온다. 어떤 부분에 초점을 맞추느냐에 따라서 그 방법은 분류 또한 다양해진다. 우선 생각나는대로 빠르게 나열을 해보자면 style은 상단, js는 하단에서 불러온다 웹팩(Webpack) 사용 js의 공백 줄이기 html 작성시 불필요한 div를 제거 css 최적화 - 리플로우, 리페인트(Reflow/Repaint)를 고려한 스타일 작성 - 사용하지 않는 css 제거 이미지 최적화 - picture, img 지연로딩 활용하기 - 스프라이트 이미지 사용 핵심적인 웹 지표(LCP,FID,CLS) 최적화 애니메이션은 js보다는 css로 사용한다 헤더에 만료기한 넣기 SEO (검색엔진최적화) CDN 사용 Gzip 사용 파일 개수 줄이기 라..
