2022/07/29

2022/07/29

오늘 공부한 내용

CS

---

1. SSR에 대해 설명

Sever Side Rendering의 약자로 서버에서 렌더링 준비를 마치는 것을 말합니다. 유저가 웹에 요청을 보내면, 서버는 즉시 렌더링이 가능한 HTML을 만들어서 클라이언트로 보낸다. 클라이언트에서 HTML를 받는 순간 렌더링 준비가 되어있기 때문에 즉시 랜더링이 된다. 단, 자바스크립트가 읽히기 전이라 사이트 조작은 불가능하다.(Time To Look과 Time To View가 다르다) 자바스크립트 다운이 시작된다. 클라이언트가 자바스크립트가 다 받아지기 전까지는 동작이 실행이 되지는 않지만, 동작을 저장한다. 자바스크립트가 다 받아지고 나서는, 그동안 저장된 동작을 실행하며 지금부터는 웹페이지 상호작용이 가능해진다

2. CSR에 대해 설명

Z Client Side Rendering의 약자로 클라이언트 쪽에서 렌더링 준비를 마치는 것을 말합니다. 유저가 웹에 요청을 보내면, CDN이 HTML파일과 JS로 접근할 수 있는 링크를 클라이언트로 보냅니다 클라이언트는 HTML과 JS를 다운받습니다. 다운이 완료되기 전까지 유저는 아무 것도 볼 수 없습니다. 다운이 완료된 JS가 실행되며, 데이터를 위한 API가 호출된다. 서버가 API로부터 받은 요청에 응답한다 API로부터 받은 data가 자리에 들어가고 이제 페이지는 상호작용이 가능해진다

3. SSR과 CSR 비교

웹페이지를 로딩하는 시간, SEO, 서버 자원 사용이 차이가 난다

3-1. 웹페이지를 로딩하는 시간

3-1-1. 첫 페이지를 로딩하는시간

필요한 HTML과 스크립트만 불러오는 SSR과 달리, CSR은 HTML, CSS, 모든 스크립트를 한번에 불러오기 때문에 평균적으로 SSR이 더 빠르다.

3-1-2. 나머지 페이지 로딩하는 시간

첫 페이지를 로딩한 후, 사이트의 다른 곳으로 이동하는 식의 동작을 가정하면, 이미 첫 페이지 로딩을 할 때 모든 스크립트를 받아왔기에, 로딩이 빠르다. SSR은 첫페이지를 로딩한 과정을 그대로 반복하기에 더 느리다.

3-2.SEO

SSR은 서버에서 컴파일되어 클라이언트로 넘어오기 때문에 크롤러에 대응이 쉽다 CSR은 자바스크립트로 동적으로 컨텐츠가 생성되기 때문에, SEO최적화가 필수다.(구글이 트렌드를 바꾸려고 하고 있긴하다)

3-3. 서버자원

페이지를 이동할 때마다 요청하는 SSR이 자원이 더 많이든다 CSR은 클라이언트에서 렌더를 하기 떄문에 서버에 부하가 적게든다.

4. 어떨 때 사용하면 좋은가

4-1 SSR을 사용하면 좋은 경우

4-1-1. 네트워크가 느릴 때(SSR은 각 페이지마다 불러오기 때문에 첫 로딩이 빠른게 유리하다) 4-1-2. SEO가 필요할 때 4-1-3. 최초 로딩이 빨라야할 때 4-1-4. 메인 스크립트가 크고 로딩이 느릴 때 4-1-5. 업데이트가 자주 있는 사이트의 경우 4-1-6. 상호작용이 별로 없을 때

4-2 CSR을 사용하면 좋은 경우

4-2-1 네트워크가 빠를 때 4-2-2 서버의 성능이 좋지 않을 때 4-2-3 사용자에게 보여줘야 하는 데이터의 양이 많을 때(로딩 창을 띄울 수 있다) 4-2-4 메인 스크립트가 무거울 때 4-2-5 SEO에 비중이 적을 때 4-2-6 웹 어플리케이션에 사용자와 상호작용할 것들이 많을 때

CSS

---

오늘 새로운 코드에 대해 알게된 것이 있다.

<source srcset="./images/fastcampus-logo.png"
                      media="(prefers-color-scheme: light)" />

사실 지나가면서 봤기 떄문에, 무엇인지, 다른방법으로 사용하는지 몰라서, 구글에 검색을 하여 좀 더 다양한 사용방법에 대해서 알게되었다

@media (prefers-color-scheme: light) {
  /* 라이트 모드에 적용할 스타일 정의 */
}
@media (prefers-color-scheme: dark) {
  /* 다크 모드에 적용할 스타일 정의 */
}

일반적으로 @media에서 사용하는 것은 max-width나 min-width를 이용하여 사이즈에 대한 이슈만 많이 다뤘었는데, @media에서 prefers-colorschme를 이용하여 다크모드인지 확인을 하여 값을 다룰 수 있었다. 사실, 이전에 react로 다크모드를 구현한 적이 있었느데, 단순히 로컬스토리지를 이용하여 값을호가인하여 하였었는데 다음번에는 이방법을 이용하여 다크모드를 구현해봐야겠다.