본문 바로가기
React

What is React?

by Mia_ 2022. 11. 24.

API (Application Programming Interface)

: 클라이언트, 서버와 같은 서로 다른 프로그램에서 요청과 응답을 주고 받을 수 있게 만든 체계

 

- 프로그래밍에서 프로그램을 작성하기 위한 일련의 서브 프로그램

- 클라이언트에서 서버로 요청을 보낼 경우 응답을 주는 쪽에서 사전에 '여기로 요청을 보내면 이런 응답을 보내주겠다 같은 식으로 정해 놓는다

- 그래야 요청하는 쪽에서 정확한 곳(서버주소)으로 요청을 보낼 수 있기 때문

- 서버 주소/login으로 신호를 보내면 로그인 기능을 수행하고 응답하도록 이러한 기능을 서버 개발자가 만들며 그 결과물이 서버 프로그램

- API를 만들 때 데이터를 주고 받는 기능도 함께 넣는다. 로그인 요청을 할때 아이디와 비밀 번호 데이터가 필요하고, 다른 파일의 응답을 받을 때에도 데이터가 함께 와야한다

 

 

클라이언트 관점에서의 API

- CRUD라고 불리는 4가지 요청은 데이터를 다룰 때 기준이 되는 요청이다

- 만약 CRUD별로 주소를 컴퓨터주소/timelineread와 같이 구성하면 주소가 너무 많아지고 관리하기 어려워진다는 문제점이 있다

- 체계적인 API라는 사회운동이 만들어져 REST(Representational State Transfer)한 API, RESTful API가 등장함

  → RESTful API에서는 이전 보다 주소 개수가 줄어든다

  →CURD를 하나의 주소로 관리하고 요청을 보낼 때 다음과 같이 어떤 요청을 보냈는지 파악할 수 있는 메소드(함수)를 붙여 전송함

 

 

서버 관점에서의 API

- 클라이언트가 요청을 보내면 서버는 응답을 하고 이런 코딩은 서버 개발자가 한다

- 응답의 두 가지 종류 중 '잘 됐어'의 응답은 200번대 코드로 표현하기로 함

- '잘 안됐어'의 경우 400번대 코드는 클라이언트 요청에 문제가 있는 경우, 500번대 코드는 서버에 문제가 있는 경우 표현하기로 함

- 응답에는 데이터가 필요할 수 있다


라이브러리

소프트웨어의 구성요소 중 한가지로 API를 바탕으로 대상 환경에서 바로 실행될 수 있도록 모듈화된 프로그램 모음

 

- 라이브러리는 혼자서 동작하는 완전한 프로그램이 아닌 특정한 부분 기능만 수행하도록 제작된 컴파일러 기계어의 형태로 존재하는 프로그램

- 이 자체로는 사용자가 직접 일반적인 조작으로 실행할 수 없으며, 해당 라이브러리의 기능을 직접 호출하는 프로그램을 실행하거나 사용자가 해당 라이브러리 기능을 실행하는 API를 사용하는 프로그램을 직접 개발하면 실행할 수 있음

- 수업에서 라이브러리는 화장품 제품에 프레임워크는 올리브영에 비유하심

 

* 컴파일러 :  고급언어로 쓰인 프로그램을 즉시 실행될 수 있는 형태의 프로그램으로 만들어주는 번역 프로그램


React

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

 

리액트의 3가지 특징

선언형(Declarative)

- 리액트는 한 페이지를 보여주기 위해 HTML / CSS / JS로 나눠서 적기 보다는 하나의 파일에 명시적으로 작성할 수 있게

JSX를 활용한 선언형 프로그래밍을 지향 

 

컴포넌트 기반 (Component-Based)

- 리액트는 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 컴포넌트를 기반으로 개발

- 컴포넌트로 분리하면 서로 독립적이고 재사용 가능하기 때문에 기능 자체에 집중하여 개발 할 수 있음

 

범용성 (Learn Once, Write Anywhere)

- 리액트는 JavaScript 프로젝트 어디에든 유연하게 적용될 수 있음

- Facebook에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능


가상 DOM

- 가상 DOM 은 자바스크립트 객체로 만들어진 가상의 DOM임

- 이를 이용해 실제 DOM과의 차이를 비교하고 변경된 부분만 실제 DOM에 반영함으로써 DOM 조작을 최소한으로 줄일 수 있음!

 

- React, Vue 등 모던 자바스크립트 프레임워크나 라이브러리에서는 가상 DOM을 제공함 

- 그 덕분에 페이지 이동은 자바스크립트 화면 치환으로 구현하지만 렌더링 비용을 최소한으로 억제해 쾌적한 웹 시스템을 제공 받을 수 있음

'React' 카테고리의 다른 글

React SPA  (0) 2022.11.27
Component-Based  (0) 2022.11.25
map을 이용한 반복  (0) 2022.11.25
JSX 활용  (0) 2022.11.25
JSX  (0) 2022.11.24