리액트?

• 대표적인 프론트엔드 자바스크립트 프레임워크
• 자바스크립트 객체를 DOM 객체로 전환해주는 역할

프론트 개발 : 웹 브라우저를 대상으로 사용자에게 보여지는 부분을 자바스크립트 언어로 작성.

• 백엔드에서 제공하는 JSON 데이터를 해석하여 자바스크립트 객체들의 조합을 얻은 다음, 이 객체들을 다시 웹 브라우저가 이해할 수 있는 DOM 객체로 변환해 줘야 함

백엔드 개발 : 프런트엔드에서 요구하는 데이터를 제공하는 형태의 개발

<aside> 🔍 오픈소스 자바스크립트 프레임워크. 가상 DOM과 JSX라는 새로운 방식으로 동작.

</aside>

DOM : Document Object Model.

• XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스.

HTML 문서 내의 DOM 계층의 예

JSX : JavaScript XML, 자바스크립트를 확장하여 React에서 UI를 표현할 때 쓰는 문법.

• React는 JSX 사용을 필수로 하지 않음.

const element = <h1>Hello World!</h1>;

SPA? ✅리액트 채택

Single Page Application

• 백엔드에서 받은 JSON 데이터를 해석하여 현재 화면에서 사용자가 새로 요청한 부분만 동적으로 화면 생성

<aside> 🔍 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성하여 사용자와 소통하는 웹 애플리케이션이나 웹사이트.

</aside>

MPA Multi Page Application

• 사용자 요청이 있을 때마다 완전히 새로운 HTML을 전달받는 방식

프론트엔드 프레임워크

<aside> 🔍 클라이언트(웹 브라우저)에서 동작하는 템플릿 엔진

</aside>

• 서버 쪽 템플릿 엔진 출력물

  → HTML

• 프론트엔드 쪽 템플릿 엔진 출력물 → DOM 객체들의 조합

공통점 데이터와 템플릿을 조합하여 출력물 생성

#2. Window에서 리액트 개발 환경 만들기

설치 프로그램

scoop 설치하기

• brew나 apt와 같은 방식으로 프로그램 설치를 쉽게 해줌