front, back, db의 전반적 상호작용 프로세스 정리

3개 정도의 컴포넌트를 다루는 앱을 만들어보다가, 10개가 넘어가는 앱을 다루다보니, 헷갈려서 다시 프론트,서버, db 간의 상호작용과 생각에 대해 정리한다.

 

이것만 명심하고 있으면 많은 코드를 다루고, 생소한 코드라도 응용에 많은 도움이 된다.

---

php는 전송할 때 html에 프론트, 서버, db의 명령어를 한 페이지에 모두 담아 보내지만,

react , node.js는 전송할 때 비동기 통신을 통해서 api로 부분적으로 통신하여서 데이터만을, 보다 빠르고 원활히 보내고 받을 수 있다. 

 

그러나 둘다 마찬가지로 똑같은 프론트, 서버, db 상호작용 프로세스를 가지고 있다.

 

1. 프론트에서 내용 입력 후 전송

2. 서버가 내용을 가공해서 데이터로써 db에 보내어, db에 데이터가 저장되게끔 함(혹은 업데이트).

3. db에서 다시 서버가 내용을 조회 후, 조회내용을 프론트(클라이언트)에 전달

---

-보충-

PHP 기반 애플리케이션:

• 서버 사이드 렌더링 (SSR): PHP는 주로 서버 사이드에서 HTML을 생성합니다. 사용자의 요청에 따라 PHP 스크립트가 서버에서 실행되고, HTML 문서가 동적으로 생성된 후 사용자의 브라우저로 전송됩니다. 이 과정에서 프론트엔드(HTML), 서버 사이드 로직(PHP), 그리고 데이터베이스 쿼리가 한 페이지 내에서 처리될 수 있습니다.
• 전체 페이지 새로고침: 사용자가 데이터를 제출하거나 새로운 페이지를 요청할 때, 전체 페이지가 새로고침되어 서버로부터 새로운 HTML 문서를 받아옵니다.

React/Node.js 기반 애플리케이션:

• 클라이언트 사이드 렌더링 (CSR) 및 비동기 통신: React는 클라이언트 사이드에서 UI를 동적으로 생성하고 업데이트합니다. 사용자와의 상호작용은 주로 API 호출을 통해 이루어지며, 이러한 호출은 비동기적으로 처리됩니다. 즉, 필요한 데이터만 서버로부터 요청하여 받아오고, 전체 페이지를 새로고침하지 않고도 UI를 업데이트할 수 있습니다.
• API 및 비동기 처리: Node.js 서버는 REST API 혹은 GraphQL API를 제공하여 React 앱과 통신합니다. 이를 통해 앱은 필요한 데이터만을 요청하고 응답 받을 수 있으며, 이 과정은 비동기적으로 처리됩니다. 결과적으로, 사용자 경험이 향상되며 애플리케이션의 반응성이 좋아집니다.

따라서, React/Node.js 애플리케이션은 데이터를 주고받는 과정에서 비동기 통신을 통해 필요한 부분만 업데이트하는 방식을 주로 사용합니다. 이는 전체 페이지 새로고침을 필요로 하는 전통적인 PHP 기반 애플리케이션과 비교했을 때, 특히 동적인 웹 애플리케이션을 구축할 때 데이터를 더 빠르고 효율적으로 처리할 수 있게 해줍니다.

---

-느낀점-

php를 접하고 리액트, node를 심화적으로 사용하게 되어 굉장히 운이 좋다고 느낀다.