[리액트 React] 리액트란?

React

• Facebook에서 설계한 오픈 소스 Javascript 라이브러리로, 웹 또는 애플리케이션의 사용자 인터페이스나 UI구성 요소를 구축하는 데 사용된다 (building)
• react는 화면의 모든 것이 구성요소의 일부로 되어있고 , 개발자는 페이지를 만드는 것이 아닌 구성요소를 만들어 UI를 구축한다
• 구성요소를 사용하면 UI를 재사용 가능한 독립적인 조각으로 분할할 수 있다

* 빌드(build)
개발자가 작성한 소스코드 파일이 컴파일되어 실행가능한 산출물로 변환하는 과정

* 라이브러리(library)
소프트웨어 개발 시 프로그램이 사용하는 비휘발성 자원 모임으로 프로그램의 구성요소 (코드의 모음)
공통으로 사용될 수 있는 특정한 기능을 모듈화 한 것(함수, 클래스, 모듈 등의 형태로 제공된다)


* 종속성
외부 라이브러리 또는 모듈
프로젝트의 패키지 매니저를 통해 관리되며 해당 라이브러리를 사용하기 위해 필요한 코드나 리소스를 포함한다

* 번들링
여러 소스 파일을 하나로 묶는 프로세스
주로 프론트엔드 웹 개발에서 사용되며, 자바스크립트, CSS 등을 하나의 번들로 묶어 로딩 속도를 향상한다

 

"리액트는 빌드다"라는 말은 결국 리액트는 라이브러리이기 때문에 빌드 작업을 해야 한다는 말이었다.

---

SPA (Single Page Application) 아키텍처

• 단일 페이지로 이루어진 애플리케이션 (EX. 페이스북, 인스타그램 등)
• 처음 로딩 시에만 서버에 리소스를 요청하며 이후에는 필요한 데이터만 받아와 수정해 주는 방식으로 화면을 구성한다 깜빡임 등이 없기 때문에 자연스러운 UX를 구현할 수 있다 (렌더링)
• 단, SEO (Search Engine Organization) 검색엔진 노출이 잘 되지 않는 단점이 있다(검색엔진은 자바스크립트를 잘 읽지 못하기 때문에 크롤링이 안되기 때문 )

* 크롤링(Crawling )
웹 페이지의 구조를 파악하여 원하는 데이터를 추출하는 것

---

CRA(Create React App)

react 개발에 필수 요소들을 자동으로 구성해 프로젝트를 생성해 주는 것(보일러 플레이트)

한 줄의 명령어 입력으로 생성이 가능하다

npm	yarn
npx create-react-app	yarn create react-app

 

* 보일러플레이트
여러 상황에서 거의 변경하지 않고 여러 곳에서 반복적으로 사용할 수 있는 코드 묶음

* CRA 생성 전 node를 꼭 설치해야 한다
https://nodejs.org/en

Node.js