React + Node.js + PostgreSQL: CRUD 예

이 튜토리얼에서는 풀 스택 React + Node.js + PostgreSQL CRUD 예제를 빌드하는 방법을 보여줍니다. 백엔드 서버는 REST API용 Node.js + Express를 사용하고, 프런트엔드 측은 React Router, Axios & Bootstrap이 포함된 React.js 클라이언트입니다.

전체 기사: https://bezkoder.com/react-node-express-postgresql/

React + Node.js + PostgreSQL CRUD 예제

우리는 다음과 같은 전체 스택 튜토리얼 애플리케이션을 구축할 것입니다.

자습서에는 ID, 제목, 설명, 게시 상태가 있습니다.

사용자가 자습서를 생성, 검색, 업데이트, 삭제할 수 있습니다.

제목별로 자습서를 찾기 위한 검색 상자가 있습니다.

다음은 예제의 스크린샷입니다.

자습서 추가:

– 모든 개체 표시:



– 개체에 액세스하려면 편집 버튼을 클릭합니다.



이 페이지에서 다음을 수행할 수 있습니다.

게시/게시 취소 버튼을 사용하여 상태를 게시됨/보류 중으로 변경

삭제 버튼을 사용하여 PostgreSQL 데이터베이스에서 객체를 제거합니다

.

업데이트 버튼을 사용하여 데이터베이스에서 이 개체의 세부 정보 업데이트

'제목' 필드로 개체 검색:

PostgreSQL 데이터베이스 확인:

testdb=# select * from tutorials;
 id |               title                |          description          | published |         createdAt          |         updatedAt
----+------------------------------------+-------------------------------+-----------+----------------------------+----------------------------
  5 | PostgreSQL Tut#1                   | Tut#1 Description             | f         | 2020-03-11 09:14:01.773+07 | 2020-03-11 09:14:01.773+07
  6 | React.js Tut#2                     | Tut#2 Description             | f         | 2020-03-11 09:15:05.629+07 | 2020-03-11 09:15:05.629+07
  8 | React Hooks Tut#4                  | Tut#4 Description             | f         | 2020-03-11 09:24:33.295+07 | 2020-03-11 09:24:33.295+07
  9 | React Express PostgreSQL Tut#5     | Tut#5 Description             | f         | 2020-03-11 09:24:53.463+07 | 2020-03-11 09:24:53.463+07
  7 | Node. Express PostgreSQL (updated) | This is Description for Tut#3 | t         | 2020-03-11 09:22:53.635+07 | 2020-03-11 09:28:45.568+07
(5 rows)

React, Node.js, PostgreSQL CRUD 아키텍처

이것은 우리 시스템의 아키텍처입니다.

Node.js Express는 REST API를 내보내고 Sequelize ORM을 사용하여 PostgreSQL 데이터베이스와 상호 작용합니다.

React 클라이언트는 Axios를 사용하여 HTTP 요청을 보내고 HTTP 응답을 검색하며 구성 요소에서 데이터를 사용합니다. React Router는 페이지 탐색에 사용됩니다.

동영상

Express & Sequelize 데모가 포함된 React Node.js PostgreSQL CRUD 애플리케이션입니다.

Node.js 익스프레스 백엔드

다음은 Node.js Express 앱이 내보낼 API입니다.


행동 양식
URL
행위


가져 오기
API/튜토리얼
모든 튜토리얼 받기

가져 오기
API/튜토리얼/:id
자습서 받기id
게시하다
API/튜토리얼
새 자습서 추가

놓다
API/튜토리얼/:id
자습서 업데이트 작성자id
삭제
API/튜토리얼/:idid에 의해 자습서 제거

삭제
API/튜토리얼
모든 자습서 제거

가져 오기
API/튜토리얼?제목=[kw]
제목에 포함된 모든 자습서 찾기'kw'

React.js 프런트엔드

– App 구성 요소는 React Router가 포함된 컨테이너입니다. 경로 경로에 연결되는navbar이 있습니다.

– TutorialsList 구성 요소가 자습서를 가져오고 표시합니다.
– Tutorial 컴포넌트는 :id를 기반으로 Tutorial의 세부 사항을 편집할 수 있는 형태를 가지고 있습니다.
– AddTutorial 구성 요소에 새 자습서를 제출할 양식이 있습니다.

– 이러한 구성 요소는 TutorialDataService를 사용하여 HTTP 요청을 만들고 응답을 수신하는 axios 메서드를 호출합니다.

자세한 내용, 구현 및 Github는 다음을 방문하십시오.
https://bezkoder.com/react-node-express-postgresql/

추가 자료

두 프로젝트를 한 곳에서 실행:
How to Integrate React with Node.js Express on same Server/Port

페이지 매김 사용:
React Pagination with API using Material-UI



또는 Firebase를 사용한 서버리스:

React Firebase CRUD with Realtime Database

React Firestore CRUD App example | Firebase Cloud Firestore

즐거운 배움, 또 만나요!