React 프론트에 백엔드 연결하기

백엔드를 먼저 지어둔 후, 프론트를 React로 만들어 연결한 예정이다.

그전에 먼저 개념을 몇개 짚은 후 설치를 진행하자

 

 

Node.js

 

node.js는 자바스크립트를 브라우저 밖에서 실행할 수 있도록 해준다.

이는 즉, 자바스크립트 = 클라이언트 언어 + 서버 언어 로 활용 가능하게 해주는 것이다.

나는 이 자바스크립트로 된 node 서버를 이용해 프론트엔드 서버를 개발할 것이다.

프론트엔드 서버의 기능은 그저 요청이 왔을 때 HTML, Javascript, CSS를 리턴해주는 것이다.

 

 

NPM

 

node.js의 패키지 관리 시스템이다.

백엔드 개발시 , grale이 maven 레파지토리에서 라이브러리를 다운 받는 것과 비슷한 개념으로

npm을 이용해 node.js 라이브러리를 설치할 것이다. npm은 node.js를 설치하면 함께 설치된다.

 

 

 

설치 부분은 공식 문서를 참고하자

Getting Started | Create React App (create-react-app.dev)

Getting Started | Create React App

 

 

추가로 프론트엔드 애플리케이션을 개발함에 있어서 material-ui라는 패키지를 사용할 것이다.

현재 백엔드 공부를 목표로 웹페이지를 작성하고 있었기에 ui는 그냥 가져다쓰자..

 

 

 

 

백엔드 서버, 프론트엔드 서버 연결 동작원리

 

리액트는 SPA(Single Page Aplication)으로서, 이 특징을 이용하여 프론트와 백을 연결할 것이다.
HTML, CSS, JavaScript 파일들만 제공 받은 후에 렌더링이 필요한 부분에 대해서 직접 백엔드 서버한테
API 요청을 보내고 리렌더링을 하는 방식을 통하여, 페이지 동적 제어가 가능해진다.

 

 

과정을 자세히 나누자면,

 

개발자가 React 라이브러리로 JavaScript 파일들을 ES6+JSX 문법으로 코딩하면, Babel등의 컴파일러가 그 내역을

모든 브라우저에서 호환이 가능한 문법(ES5)의 코드로 변환해준다. 또한, Webpack 등의 모듈 번들러가 HTML, CSS, JavaScript 파일들을 적절히 번들링(=빌드)하여 준비해준다. 이 과정은 "npm start"의 개발 서버에서 파일이 수정될 때마다 자동으로 이루어진다.

 

 

이후 클라이언트가 요청을 보내면 프론트엔드는 미리 준비해둔 HTML, CSS, JavaScript 파일들을 클라이언트에게 제공한다. 그러면 클라이언트는 전달반은 JavaScript 파일을 실행하여 페이지에 렌더링을 시작하고, 이 과정에서 DB 데이터가 필요한 경우에 백엔드 서버에 API 요청을 보내서 필요한 데이터를 요청한다.

 

 

 

 

 

 

 

 

참고 [React] 프론트 엔드와 백 엔드 분리 시 동작 원리 (vs 풀 스택) (tistory.com)