풀스택

SPA 등장

Facebook에서 만듬

• Virtual DOM • Components • One Way Data Flow • JSX

1. 라우팅(Routing) -사용자의 요청에 따라 특정 페이지로 연결해주는 기능
   • 여기서는 필요한 데이터를 요청하고, 페이지가 전환 되는 과정을 의미함
2. 컴포넌트 (Component)
   • 컴포넌트들이 모여서 한 페이지를 구성
   • 페이지가 전환될 때, 변경되는 컴포넌트만 변경될 수 있음

고려 사항

1. SEO가 잘 되지 않는 문제 (서치엔진이 잘 찾을 수 있도로)
   • 크롤러에서 정보를 제대로 수집해가지 못함 (구글은 예외)
2. 첫페이지 로딩 지연 문제
   • 앱 규모가 커질수록 초기 로딩 시간이 매우 지연될 수 있음
3. 어느 타이밍에 데이터를 가져올 것인지
   • 서버로 부터 데이터를 언제 가져올지 설계해야 함
4. 에러 핸들링 방법
   • 만약에 새로고침을 한다면, 전체 페이지가 다시 불리게 됨

> npx react-create-app project
//추가 및 사용
> npm install axios 
// Main.jsx
import React, { useState, useEffect } from "react";
import axios from "axios";
//실행
> npm run start

보다시피 노드 먼저 깔아야 한다

JSX

const Ex01 = () => {
	const name = "World";
	
	const Hello = () => (
	<h1>
	Hello, {name}!
	</h1>
);
return (
	<Hello />
	)
}