프런트엔드와 백엔드 간 연결

웹 앱 개발자로서 제가 흥미롭게 생각하는 것 중 하나는 내 애플리케이션의 프런트엔드 윙이나 애플리케이션의 백엔드 윙을 연결하는 것입니다. 항상 JavaScript 작업을 좋아하는 개발자로서; JavaScript는 수년에 걸쳐 크게 발전했습니다. 애플리케이션의 프런트엔드를 애플리케이션의 백엔드에 연결하는 것은 클라이언트측 코드(일반적으로 HTML, CSS 및 JavaScript로 되어 있음)와 서버측 코드(일 수 있음) 사이에 채널을 설정하여 수행할 수 있습니다. Node.js, Python, Ruby, Java 등 다양한 언어로 작성되었습니다. 아래에는 애플리케이션의 백엔드 측과 애플리케이션의 프런트엔드 측 모두에서 작업하는 웹 개발자로 시작했을 때 취했던 쉬운 단계가 나열되어 있습니다.

1. 저는 보통 백엔드 설정을 선호합니다. 먼저, 이를 통해 프런트엔드와 통신할 수 있는 API를 제공하는 백엔드 서버를 얻습니다. MERN 스택을 사용하여 앱을 개발할 때 기본적인 예는 Express와 함께 Node.js를 사용하는 것입니다.

내 기본 서버 설정은 (Node.js + Express)입니다.

Node.js와 npm(노드 패키지 관리자)을 설치합니다.

새 프로젝트 만들기 및 Express 설치:

어떻게 하나요? 먼저 내 프로젝트 폴더에 폴더를 만듭니다.

mkdir myProjectApp
cd myProjectApp
npm 초기화 -y
npm 익스프레스 설치

그런 다음 간단한 서버나 JavaScript 파일(예: server.js)을 만듭니다.

자바스크립트
코드 복사
const express = require('express');
const 앱 = express();
const 포트 = 3000;

// JSON을 구문 분석하는 미들웨어
app.use(express.json());

// 엔드포인트 예시
app.get('/api/data', (req, res) => {
res.json({ 메시지: '백엔드에서 안녕하세요!' });
});

app.listen(port, () => {
console.log(http://localhost:${port}에서 실행되는 서버);
});

서버 실행:

노드 서버.js

1. 그런 다음 프런트엔드를 설정했습니다. 프런트엔드는 일반적으로 선호하는 API 호출을 수행하기 위한 JavaScript 코드가 포함된 HTML 파일입니다.

index.html 파일을 만듭니다.

아래 HTML 코드

8b05045a5be5764f313ed5b9168a17e6

프론트엔드-백엔드 상호작용

프런트엔드에서 백엔드 간 통신

백엔드에서 데이터 가져오기

<script src="script.js"></script>

JavaScript용 script.js 파일을 만듭니다.

자바스크립트
아래 코드를 입력하세요
document.getElementById('fetchButton').addEventListener('click', () => {
fetch('http://localhost:3000/api/data')
.then(응답 => response.json())
.then(데이터 => {
document.getElementById('response').innerText = data.message;
})
.catch(오류 => {
console.error('데이터 가져오기 오류:', error);
});
});

1. 애플리케이션 실행
   백엔드 서버가 실행 중인지 확인한 다음 브라우저에서 index.html을 엽니다. 백엔드에서 데이터를 가져오는 버튼을 클릭하면 페이지에 응답이 표시됩니다.

2. 고급: 프레임워크 및 라이브러리 사용
   더 복잡한 애플리케이션의 경우 양쪽 끝에서 프레임워크와 라이브러리를 사용할 수 있습니다.

프런트엔드: React, Vue.js, Angular 등
백엔드: Express(Node.js), Django(Python), Rails(Ruby) 등
React의 예(프런트엔드):

Create React App을 사용하여 React 애플리케이션 만들기:

아래 코드를 입력하세요
npx 생성-반응-앱 my-react-app
cd my-react-app
App.js의 콘텐츠를 교체하세요.

자바스크립트
아래 코드를 입력하세요

'react'에서 React, { useState } 가져오기;

함수 앱() {
const [message, setMessage] = useState('');

const fetchData = () => {
fetch('http://localhost:3000/api/data')
.then(응답 => response.json())
.then(데이터 => {
setMessage(data.message);
})
.catch(오류 => {
console.error('데이터 가져오기 오류:', error);
});
};

반품(

프런트엔드에서 백엔드 간 통신

백엔드에서 데이터 가져오기

{메시지}

);
}

기본 앱 내보내기
React 애플리케이션을 실행합니다:

아래 코드를 입력하세요
npm 시작
이제 버튼을 클릭하면 React 앱이 백엔드 서버에서 데이터를 가져올 수 있습니다.

요약
JavaScript를 이용한 프론트엔드와 백엔드 간의 연결은 위의 단계를 통해 간단하게 수행할 수 있습니다. 백엔드 서버는 API를 노출하고 프런트엔드는 이러한 API에 HTTP 요청을 보내 데이터를 가져오거나 보냅니다. 이 접근 방식은 프로젝트의 특정 요구 사항에 따라 다양한 프레임워크와 환경에 적용할 수 있습니다.

위 내용은 프런트엔드와 백엔드 간 연결의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!