❓ 웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요.

📍클라이언트 사이드 렌더링 (CSR, Client-Side Rendering)

• 브라우저에서 JavaScript를 실행하여 페이지를 렌더링하는 방식
• 초기 로딩 시간이 느리지만, 이후 동적 업데이트가 빠름
• 검색 엔진 최적화(SEO)가 어려움
• 단일 페이지 애플리케이션(SPA)에 적합

  단일 페이지 애플리케이션(SPA), 동적 UI 업데이트가 중요한 경우

📍서버 사이드 렌더링 (SSR, Server-Side Rendering)

• 서버에서 HTML을 생성하여 클라이언트에 전달하는 방식
• 초기 로딩 속도가 빠르고 SEO에 유리
• 서버 부하가 증가할 수 있음
• 동적 업데이트가 상대적으로 느림

  검색 엔진 최적화(SEO)가 중요한 경우, 초기 로딩 속도가 중요한 경우

📍정적 사이트 생성 (SSG, Static Site Generation)

• 빌드 시점에 HTML 파일을 생성하여 제공하는 방식
• 초기 로딩 속도가 매우 빠르고 SEO에 유리
• 동적 콘텐츠 업데이트가 어려움
• 정적 웹사이트에 적합

  정적 콘텐츠 중심의 웹사이트, 빠른 초기 로딩 속도가 중요한 경우

❓ 본인이 생각하는 CSS-in-JS의 장점과 단점을 설명해 주세요.

CSS-in-JS란?

• CSS-in-JS는 JavaScript 코드 내에서 CSS 스타일을 작성하는 방식

예시) styled component

import styled from 'styled-components';

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;

  &:hover {
    background-color: darkblue;
  }
`;

function App() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

장점

• 컴포넌트 단위로 스타일을 관리할 수 있어 유지보수가 용이
• 동적 스타일 적용이 쉬움
• 코드 스플리팅을 통한 성능 향상
• 스타일 충돌 방지

단점

• 초기 로딩 시간이 길어질 수 있음
• 개발자 경험이 기존 CSS 방식과 다름
• 서버 사이드 렌더링(SSR) 시 추가 작업이 필요