[본캠프 11주차] 목요일 TIL

01/02 일일 목표📝

 

리액트 입문 강의 듣기

디자인 집중반

 

---

 

 

📖 오늘 배운 내용

 

SPA : 한 페이지에서 동적으로 화면을 바꿔주는 웹 애플리케이션.

 

• 처음에 한 번 페이지를 불러오고, 이후엔 필요한 데이터만 서버에서 받아옴.
• 새로고침 없이 화면이 전환됨.

 

MPA : 여러 페이지로 구성된 전통적인 웹 애플리케이션.

 

• 페이지를 이동할 때마다 서버에서 새로운 HTML 파일을 받아옴.
• 각 페이지가 독립적으로 동작.

 

 

SSR : 서버에서 HTML을 만들어서 클라이언트로 보내는 방식.

• 사용자가 웹사이트를 요청하면, 서버에서 HTML을 미리 렌더링해 보냄.

 

 

• SPA: 부드럽고 빠른 사용자 경험 (하지만 초기 로딩 느림).
• MPA: 전통적인 방식, SEO와 초기 로딩에 유리.
• SSR: 서버에서 화면을 만들어 보내는 방식, SEO와 초기 로딩에 최고.

 

CSR : 브라우저(클라이언트)에서 JavaScript로 화면을 그리는 방식.

 

• 초기 로딩:
  • 서버에서 빈 HTML 파일과 JavaScript 파일을 보내줌.
  • 브라우저가 JavaScript를 실행해서 화면을 동적으로 생성.
• 페이지 전환:
  • 새로고침 없이 빠르게 작동.
  • 서버에서 데이터만 받아오고 화면은 브라우저에서 업데이트.
• SEO 문제:
  • 초기 HTML이 비어있어서 검색엔진이 내용을 읽기 어려움.
  • 최근엔 해결책으로 Pre-rendering이나 Hydration 기술 사용.

vite 란?

cra와 같이 리액트 프로젝트를 풀 세팅해주는 도구

vite는 원래 vue.js 애플리케이션을 위해 만들어졌지만 현재 react, svelte, vanilla js 등 다양한 프레임워크와 라이브러리 지원

 

• 빠른 개발 서버: ESM 기반으로 필요한 파일만 로드, 빠른 HMR 제공.
• 효율적인 빌드: Rollup 사용으로 코드 최적화 및 번들링.
• 모던 JS 지원: 최신 브라우저 타겟, ES6+ 기능 기본 지원.
• 확장성: Rollup 플러그인으로 다양한 기능 추가 가능.
• 프레임워크 호환성: React, Vue 등과 쉽게 통합.
• 간단한 설정: 직관적인 설정 파일, 빠른 시작 가능.

 

 

Real Components

컴포넌트를 통해 ui를 재사용이 가능한 개별적인 여러조각으로 나누고, 각 조각을 개별적으로 살펴볼수 있음

컴포넌트는 javascript 함수와 유사함

props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 react 엘리먼트를 반환함

 

리액트 컴포넌트를 표현하는 두가지 방법

1. 함수형 컴포넌트

-

2. 클래스형 컴포넌트

 

폴더는 소문자로 시작하는 카멜케이스로 작성, 컴포넌트를 만드는 카멜케이스로 제작

---