느슨하게 결합된 Node.js 서버에 대한 React 프런트엔드

반응형

이 글에서는 리액트를 사용하여 간단한 학생 관리 애플리케이션을 프런트 엔드로 만들 수 있도록 안내하겠습니다. 이것은 http 요청을 통해 백엔드에 연결되는 느슨한 결합 프런트엔드 애플리케이션입니다.

이 문서에서는 데이터베이스로 백엔드를 생성하는 단계를 설명합니다.

쉽게 이해할 수 있도록 학생 추가, 학생 업데이트, 학생 삭제 및 학생 보기와 같은 간단한 CRUD 기능에만 집중하겠습니다.

리액트 프런트 엔드를 만들어 보겠습니다!

 

• create-react-app명령을 사용하여 대응 앱을 만듭니다. 그 전에 앱을 생성할 디렉터리를 선택해야 합니다. 그러면 거기서 cmd를 여세요. 제 리액트 앱의 이름은student_app_frontend`입니다. 또한 나는 serviceWorker.js 파일을 만들 수 있는 선택권을 주겠다. 왜냐하면 서비스 근로자들은 많은 장점을 가지고 있기 때문이다!이렇게 cmd에게 리액트 앱을 만들라고 하는 거야!

위의 명령을 내리고 cmd에서 Enter 키를 누르면 리액트 앱이 생성되기 시작합니다.

그럼 안으로 들어가세요

cmd에 npm start를 입력하여 앱 생성 여부를 확인하고 실행할 수 있습니다.

앱 컴포넌트는 우리 프로젝트의 루트에 있으므로 라우팅, 내비게이션 관련 코드를 배치합니다.

 

2. 웹 응용 프로그램에서 동적 라우팅을 구현하기 위해 프로젝트에 리액트 라우터 돔을 설치하겠습니다.

프로젝트 루트에서 App.js 내에서 사용하는 방법입니다.

3. 다음을 사용하여 부트스트랩을 설치합니다.
4. 새 학생 추가, 학생 목록 보기, 학생 편집 기능을 포함하는 별도의 구성 요소를 만들어 보겠습니다.

src 디렉토리 내에 components라는 다른 폴더를 만들고 addStudent.js , updateStudent.js , viewStudents.js 파일을 만듭니다.

 

5. 이제 위의 단계에서 만든 라우터 태그 안에 Navbar를 추가하고 경로를 설정합니다!
6. 그런 다음 작업을 완료할 수 있는 간단한 사용자 인터페이스를 만들겠습니다!

src/components 폴더 안에는 이전에 프로젝트 디렉터리에 표시된 대로 3개의 파일이 있습니다.

학생 목록을 보려면:

 

프로젝트 루트의 명령줄에 npm start를 입력하고 Enter 키를 누릅니다. 브라우저 탭에서 보기를 볼 수 있습니다!

이제 addStudent.js의 코드를 추가하겠습니다.

당신이 npm start를 주면 리액트 앱이 당신의 브라우저에 열릴 것이다. 하지만 경치가 좀 짜증나! 따라서 css를 적용하여 src/components 폴더 내에 components.css라는 추가 파일을 생성합니다.

마지막으로 updateStudent.js의 코드를 추가하겠습니다.

7. REST 끝점에 비동기 HTTP 요청을 쉽게 보내고 CRUD 작업을 수행할 수 있도록 약속 기반 HTTP 클라이언트인 axios를 설치합니다.

 

8. src 폴더 아래에 http 요청과 관련된 공통 설정을 저장할 새 파일을 만들겠습니다. src 폴더 아래에 http_config.js를 만들고 다음 코드를 넣습니다.
9. 이제 axios 개체를 사용하여 http 요청을 보내고 데이터베이스 작업을 수행하는 서비스를 생성하겠습니다. src 내부의 services라는 별도의 폴더에 위치하겠습니다. 서비스 이름으로 파일 이름을 지정합니다.js

또한 각 서비스에 대한 http url을 정의합니다.

이러한 get() , post() , put() 메소드는 GET, POST, PUT의 HTTP 요청 유형에 해당합니다.

10. 포트 8081에서 이 프런트 엔드 애플리케이션을 실행해야 합니다. 이를 위해 앱 루트에 .env 파일을 생성하고 포트를 정의하는 다음 줄을 추가합니다.

 

11. 다음은 사용자 인터페이스가 제대로 작동하도록 하겠습니다! 그러기 위해서는 백엔드 API의 기능을 호출해야 합니다.

• • 백엔드 응용 프로그램의 코드는 여기에서 찾을 수 있습니다. 저장소를 포크하고 코드를 복제하거나 다운로드합니다. 루트 폴더에서 cmd를 열고 다음 명령을 입력하고 Enter 키를 누릅니다.

이제 백엔드 애플리케이션이 포트 8080에서 실행됩니다.

12. 이제 addStudent,updateStudent 및 viewStudents의 사용자 인터페이스에 대한 백엔드 함수를 호출하겠습니다.

 

건배!! 이제 모든 기능을 사용할 수 있습니다!

여기서 GitHub 소스 코드를 찾을 수 있습니다.

또 봐요.!!