안녕하세요, 웹 매니아 여러분! ?

본론에 앞서 이 글은 내 포트폴리오의 렌더링 패턴에 대한 소개 글 시리즈라는 점을 알려드리고 싶었습니다. 궁금하시다면 제 웹사이트에서 대화가 많은 풀버전을 확인하실 수 있습니다. 재미있는 대화처럼 쓰여 있어서 따라가기가 매우 쉽습니다. 하지만 지금은 dev.to에서 간단하고 간단하게 설명하겠습니다!

이제 웹 렌더링 패턴에 대해 이야기해보겠습니다!

웹 렌더링 패턴이란 무엇입니까?

집을 짓고 있다고 상상해 보세요. 그것을 구성하는 방법은 다양합니다. 그렇죠? 어떤 방법은 빠르고, 어떤 방법은 화려하며, 어떤 방법은 두 가지를 혼합한 것입니다. 웹 렌더링 패턴도 이와 비슷하지만 웹사이트용입니다.

웹페이지를 만들고 표시하는 방법은 다릅니다. 각 방법마다 좋은 점과 좋지 않은 점이 있습니다. 이러한 패턴을 알면 웹사이트를 구축하는 가장 좋은 방법을 선택하는 데 도움이 됩니다.

왜 관심을 가져야 합니까?

이러한 패턴은 다음에 영향을 미치기 때문에 이해하는 것이 중요합니다.

1. 웹사이트 로드 속도
2. 사용감이 얼마나 부드러운지
3. 검색 엔진이 귀하의 사이트를 얼마나 잘 찾을 수 있는지
4. 사이트 업데이트가 얼마나 쉬운지

주요 렌더링 패턴

우리가 살펴볼 주요 패턴은 다음과 같습니다.

정적 사이트

다중 페이지 애플리케이션(MPA)

클라이언트측 렌더링(CSR)

서버측 렌더링(SSR)

정적 사이트 생성(SSG)

증분형 정적 재생(ISR)

수분공급

점진적 수분 공급

스트리밍 서버 측 렌더링

섬 건축물

서버 구성요소

몇 가지 중요한 용어

더 자세히 알아보기 전에 몇 가지 핵심 단어를 배워보겠습니다.

• 첫 번째 바이트까지의 시간(TTFB): 서버가 데이터 전송을 시작하는 속도
• TTI(Time to Interactive): 웹사이트 사용을 시작할 수 있는 시기
• 콘텐츠가 포함된 첫 페인트(FCP): 페이지에서 처음으로 무언가를 볼 때
• 콘텐츠가 포함된 최대 페인트(LCP): 페이지의 가장 큰 부분이 나타날 때
• 사전 렌더링: 미리 웹페이지 만들기
• 메타 프레임워크: 웹사이트 구축을 더 쉽게 만들어주는 특수 도구
• 동형 렌더링: 웹사이트를 빠르게 만드는 동시에 대화형으로 만드는 방법

마무리

훌륭한 웹사이트를 만들고 싶다면 이러한 패턴을 이해하는 것이 매우 도움이 됩니다. 각 패턴에는 고유한 용도가 있으며 언제 사용해야 하는지 알면 웹사이트를 훨씬 더 좋게 만들 수 있습니다.

이것은 렌더링 패턴을 향한 여정의 시작일 뿐입니다. 각 패턴에 대해 예제와 사용 방법을 자세히 알아보려면 내 포트폴리오 사이트에서 전체 가이드를 확인하세요.

핵심은 이러한 패턴을 아는 것뿐만 아니라 언제 사용해야 하는지 이해하는 것임을 기억하세요. 행복한 웹사이트 구축! ?

오류를 발견하거나 개선을 위한 제안이 있으면 알려주시기 바랍니다! 귀하의 피드백은 이 콘텐츠를 더욱 향상시키는 데 귀중한 자료입니다.