Frontend vs Backend

  • Frontend: Manages the user interface (UI) and interactivity, typically runs in the browser.
  • Backend: Handles data storage, business logic, and API responses, runs on a server.

React

  • What It is: A JavaScript library for building user interfaces, especially for frontend development.
  • Features:
    • Abstracts the low-level details of the DOM, acting as a wrapper that simplifies complex DOM manipulation tasks for developers.
    • Simplifies UI creation with a declarative syntax (JSX) and efficient virtual DOM updates.
    • Component-based architecture supports reusability and maintainability.

Alternatives to React

  • Angular
  • Vue
  • Svelte

Node.js

  • What It is: A runtime that enables JavaScript to run on servers, allowing full-stack development with a unified language.
  • Why Necessary: JavaScript natively runs in browsers; Node.js extends it to backend development for tasks like APIs, real-time applications, and server-side logic.
  • Limitations: Manual configurations are often needed for complex workflows like routing or pre-rendering.

SEO (Search Engine Optimization)

  • What It is: The practice of improving a website’s visibility in search engine results to increase organic (non-paid) traffic.
  • How It Works:
    • Search engines index and rank pages based on factors like content quality, keywords, performance, and mobile compatibility.

Rendering Methods

Pre-rendering

  • What It is: Pre-rendering generates HTML before delivering it to the client, improving load times and SEO.

    • Static Site Generation (SSG):

      • Pre-generates HTML at build time.
      • Ideal for pages with infrequent updates.
      • SEO Impact: Provides fully pre-rendered pages to crawlers.

    • Server-Side Rendering (SSR):

      • Dynamically generates HTML for each client request.
      • Suitable for personalized or frequently changing content.
      • SEO Impact: Ensures crawlers access fully rendered content.

    • Incremental Static Regeneration (ISR):

      • Updates static pages dynamically after deployment without full rebuilds.
      • Combines SSG benefits with the ability to refresh content.
      • SEO Impact: Keeps static pages fresh for crawlers.

Client-Side Rendering (CSR)

  • What It is: Content is rendered in the browser after receiving JavaScript from the server, enabling dynamic interactions on the client side.
  • Use Case: Suitable for highly interactive applications.
  • Drawbacks:
    • Slower initial load times since rendering occurs on the client.
    • SEO Impact: Search engine crawlers may struggle with JavaScript-heavy content.

Next.js

  • What It is: A React-based framework that simplifies full-stack development and optimizes SEO with pre-rendering methods like SSG, SSR, and ISR.
  • Key Features:
    • Automates SSG for static sites by handling the generation of static HTML files during the build process, removing the need for manual implementation.
    • Enables ISR for incrementally updating static pages after deployment.
    • Simplifies SSR for delivering pre-rendered React components by integrating React rendering into the server-side workflow. Without Next.js, implementing SSR in Node.js would require custom server logic, significantly increasing complexity.
    • Combines CSR with pre-rendering for hybrid web apps.
  • Dependencies: Requires Node.js and React.

Alternatives to Next.js

  • Nuxt.js (Vue-based)
  • Gatsby (React-based)
  • SvelteKit (Svelte-based)

Serverless Architecture

  • What It is: A model where backend logic runs on cloud-managed infrastructure without developers managing the underlying servers.

  • How It Works:

    • Developers provide functions or logic to be executed.
    • When triggered (e.g., HTTP requests, scheduled tasks), the infrastructure provisions the necessary resources.
    • Functions execute in a stateless environment, and resources are deallocated after use.
    • “Serverless” refers to developers not managing servers directly; the infrastructure provider owns and maintains the servers.

  • Examples:

    • AWS Lambda
    • Google Cloud Functions

CDNs

  • What It is: Content Delivery Networks distribute static assets (HTML, JS, CSS) across geographically dispersed servers, reducing latency and improving load times.

  • Examples:

    • Cloudflare
    • AWS CloudFront

Vercel

  • What It is: A platform optimized for deploying Next.js applications and simplifying workflows.

  • Features:

    • Automates ISR to dynamically regenerate static pages. Without Vercel or a compatible platform, Next.js cannot use ISR effectively, as it relies on specialized infrastructure for on-demand static regeneration.
    • Distributes pre-rendered assets globally via CDNs for better performance and SEO.
    • Provides serverless functions for backend logic.
    • Seamless hosting for static and dynamic sites.

Alternatives to Vercel:

  • Netlify
  • AWS Amplify

프론트엔드 vs 백엔드

  • 프론트엔드: 사용자 인터페이스(UI)와 상호작용을 관리하며 일반적으로 브라우저에서 실행됩니다.
  • 백엔드: 데이터 저장, 비즈니스 로직, API 응답 등을 처리하며 서버에서 실행됩니다.

React

  • 설명: 프론트엔드 개발을 위해 설계된 사용자 인터페이스(UI) 구축용 자바스크립트 라이브러리입니다.
  • 특징:
    • 저수준 DOM 조작을 추상화하여 개발자가 복잡한 DOM 작업을 직접 처리할 필요 없이 간단하게 UI를 구축할 수 있습니다.
    • 선언형 문법(JSX)과 효율적인 가상 DOM 업데이트로 UI 생성이 간소화됩니다.
    • 컴포넌트 기반 아키텍처를 통해 재사용성과 유지보수성이 향상됩니다.

React 대안

  • Angular
  • Vue
  • Svelte

Node.js

  • 설명: 서버에서 자바스크립트를 실행할 수 있게 해주는 런타임으로, 통합 언어를 활용한 풀스택 개발을 가능하게 합니다.
  • 필요성: 자바스크립트는 기본적으로 브라우저에서만 실행되므로, Node.js는 이를 확장하여 API, 실시간 애플리케이션, 서버 측 로직 등을 처리합니다.
  • 제한 사항: 라우팅이나 사전 렌더링과 같은 복잡한 워크플로를 구성하려면 수동 설정이 필요할 수 있습니다.

SEO (검색 엔진 최적화)

  • 설명: 웹사이트의 검색 엔진 결과 노출을 개선하여 유기적(비유료) 트래픽을 증가시키는 방법입니다.
  • 작동 방식:
    • 검색 엔진은 콘텐츠 품질, 키워드, 성능, 모바일 호환성 등 다양한 요소를 기반으로 페이지를 색인하고 순위를 매깁니다.

렌더링 방법

사전 렌더링

  • 설명: HTML을 클라이언트에 전달하기 전에 생성하여 로드 시간과 SEO를 개선합니다.

    • 정적 사이트 생성(SSG):

      • 빌드 시점에 HTML을 미리 생성합니다.
      • 업데이트가 드물게 필요한 페이지에 적합합니다.
      • SEO 영향: 크롤러에 완전히 렌더링된 페이지를 제공합니다.

    • 서버 측 렌더링(SSR):

      • 각 클라이언트 요청마다 HTML을 동적으로 생성합니다.
      • 개인화된 콘텐츠나 자주 변경되는 콘텐츠에 적합합니다.
      • SEO 영향: 크롤러가 완전히 렌더링된 콘텐츠에 접근할 수 있습니다.

    • 증분 정적 재생성(ISR):

      • 배포 후 정적 페이지를 동적으로 업데이트하며 전체 재빌드가 필요하지 않습니다.
      • SSG의 장점과 콘텐츠 갱신 기능을 결합합니다.
      • SEO 영향: 정적 페이지를 최신 상태로 유지합니다.

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

  • 설명: 서버에서 자바스크립트를 받은 후 브라우저에서 콘텐츠를 렌더링하여 동적 상호작용을 가능하게 합니다.
  • 사용 사례: 높은 상호작용이 필요한 애플리케이션에 적합합니다.
  • 단점:
    • 렌더링이 클라이언트에서 이루어지기 때문에 초기 로드 시간이 느릴 수 있습니다.
    • SEO 영향: 자바스크립트 의존도가 높은 콘텐츠는 검색 엔진 크롤러가 처리하기 어려울 수 있습니다.

Next.js

  • 설명: SSG, SSR, ISR과 같은 사전 렌더링 방법을 활용하여 풀스택 개발을 단순화하고 SEO를 최적화하는 React 기반 프레임워크입니다.
  • 주요 특징:
    • 정적 사이트 생성을 자동화하여 빌드 프로세스 중 정적 HTML 파일을 생성합니다.
    • 배포 후 정적 페이지를 증분적으로 업데이트하는 ISR을 지원합니다.
    • 서버 측에서 React 컴포넌트를 사전 렌더링하도록 통합하여 성능과 SEO를 개선합니다. Node.js로 SSR을 구현하려면 복잡한 커스텀 로직이 필요합니다.
    • 사전 렌더링과 CSR을 결합하여 하이브리드 웹 애플리케이션을 지원합니다.
  • 의존성: Node.js 및 React가 필요합니다.

Next.js 대안

  • Nuxt.js (Vue 기반)
  • Gatsby (React 기반)
  • SvelteKit (Svelte 기반)

서버리스 아키텍처

  • 설명: 백엔드 로직이 클라우드 관리 인프라에서 실행되며, 개발자가 서버를 직접 관리하지 않아도 되는 모델입니다.

  • 작동 방식:

    • 개발자는 실행할 함수나 로직을 제공합니다.
    • HTTP 요청, 예약된 작업 등으로 트리거될 때 인프라는 필요한 리소스를 프로비저닝합니다.
    • 함수는 상태 비저장 환경에서 실행되며, 실행이 완료되면 리소스가 할당 해제됩니다.
    • “서버리스”란 개발자가 서버를 직접 관리하지 않는다는 의미이며, 서버는 인프라 제공자가 소유 및 유지 관리합니다.

  • 예시:

    • AWS Lambda
    • Google Cloud Functions

CDN (콘텐츠 전송 네트워크)

  • 설명: CDN은 정적 자산(HTML, JS, CSS)을 지리적으로 분산된 서버에 배포하여 지연 시간을 줄이고 로드 시간을 개선합니다.

  • 예시:

    • Cloudflare
    • AWS CloudFront

Vercel

  • 설명: Next.js 애플리케이션 배포를 최적화하고 워크플로를 단순화하는 플랫폼입니다.

  • 특징:

    • ISR을 자동화하여 정적 페이지를 동적으로 재생성합니다. Vercel 또는 호환 가능한 플랫폼 없이는 Next.js가 ISR을 효과적으로 사용할 수 없습니다.
    • CDN을 통해 사전 렌더링된 자산을 전 세계에 배포하여 성능과 SEO를 개선합니다.
    • 백엔드 로직을 위한 서버리스 함수를 제공합니다.
    • 정적 및 동적 사이트를 손쉽게 호스팅합니다.

Vercel 대안:

  • Netlify
  • AWS Amplify
  • Cloudflare Pages

This article is created in collaboration with AI. AIs can make mistakes.

본 문서는 인공지능과의 대화를 통해 정리한 문서를 인공지능을 통해 번역한 문서입니다. 인공지능은 실수할 수 있습니다.