프런트엔드 및 백엔드 상호 작용의 기본 원칙에 대해 이야기하기

이 기사의 독자:

프론트엔드/백엔드 개발 엔지니어, 웹 애플리케이션 디자이너, 프로젝트 매니저, 제품 매니저 등

왜 알고 싶습니까?

프런트 엔드 및 백 엔드 상호 작용의 기본 사항을 이해하는 것은 웹 개발과 관련된 역할을 수행하는 사람들에게 매우 중요합니다. 여기에는 프론트엔드 개발자, 백엔드 개발자, 풀스택 개발자, 웹 애플리케이션 디자이너, 프로젝트 관리자, 제품 관리자 등이 포함됩니다. 개발, 디자인 또는 관리 분야에서 일하든 프런트 엔드 및 백 엔드 상호 작용의 기본 사항을 이해하면 웹 애플리케이션 개발 및 제공을 더 잘 이해하고 추진하는 데 도움이 됩니다.

기본 원칙은 일반적으로 다음과 같은 측면을 포함하며, 이 기사에서도 이러한 측면에서 각각의 기능과 의의를 자세히 설명합니다.

• HTTP 프로토콜

• AJAX 기술

• 데이터 형식 및 전송

• 프런트엔드 및 백엔드 커뮤니케이션 방법

• 인터페이스 설계 및 사양

• CORS(Cross-Origin Resource Sharing) 및 보안

HTTP 프로토콜

프런트 엔드 및 백 엔드 상호 작용에서 HTTP(Hypertext Transfer Protocol) 프로토콜은 가장 일반적으로 사용되는 프로토콜 중 하나입니다. HTTP는 웹 애플리케이션 간에 데이터를 전송하는 데 사용되는 애플리케이션 계층 프로토콜입니다. 클라이언트와 서버 간의 통신에 대한 규칙과 규칙을 정의합니다.

다음은 HTTP 프로토콜의 몇 가지 주요 개념과 요점입니다.

1. 요청 및 응답: HTTP 통신은 요청 및 응답을 통해 이루어집니다. 클라이언트는 서버에 HTTP 요청을 보내고 서버는 요청을 처리하고 HTTP 응답을 클라이언트에 반환합니다.

2. 방법: HTTP는 여러 요청 방법을 정의하며 일반적인 방법은 GET, POST, PUT, DELETE 등입니다. 리소스 가져오기, 데이터 제출, 리소스 업데이트 및 리소스 삭제와 같은 다양한 작업을 수행하기 위해 다양한 메서드가 사용됩니다.

3. URL: URL(Uniform Resource Locator)은 액세스할 리소스의 위치를 ​​식별하는 데 사용됩니다. 프로토콜 유형, 서버 주소, 경로 및 선택적 쿼리 매개변수로 구성됩니다.

4. 요청 헤더: HTTP 요청에는 요청된 메서드, 요청된 리소스, 요청된 콘텐츠 유형 등과 같은 요청에 대한 메타데이터를 전달하는 데 사용되는 요청 헤더가 포함됩니다.

5. 요청 본문: POST 요청과 같은 일부 요청에는 요청 본문이 포함될 수 있습니다. 요청 본문은 양식 데이터, JSON 데이터 등과 같은 데이터를 서버에 전달하는 데 사용됩니다.

6. 응답 상태 코드: HTTP 응답에는 요청 처리 결과를 나타내는 상태 코드가 포함됩니다. 일반적인 상태 코드에는 성공의 경우 200, 리소스를 찾을 수 없는 경우의 404, 내부 서버 오류의 경우 500이 포함됩니다.

7. 응답 헤더: HTTP 응답에는 응답의 콘텐츠 유형, 응답 길이 등과 같은 응답에 대한 메타데이터를 전달하는 데 사용되는 응답 헤더도 포함됩니다.

8. 응답 본문: 응답 본문은 서버에서 클라이언트로 반환하는 실제 데이터 콘텐츠이며 HTML, JSON 및 그림과 같은 다양한 유형의 데이터일 수 있습니다.

9. 쿠키 및 세션: HTTP 프로토콜은 쿠키 및 세션을 사용하여 상태를 유지하도록 지원합니다. 서버는 응답에 쿠키를 설정하여 일부 클라이언트 상태 정보를 저장할 수 있으며 클라이언트는 쿠키를 저장하고 후속 요청에서 서버로 보냅니다.

HTTP 프로토콜은 상태 비저장 프로토콜이며 각 요청과 응답은 서로 독립적이며 서버는 클라이언트에 대한 상태 정보를 보유하지 않습니다. 이 문제를 해결하기 위해 쿠키, 세션, 토큰과 같은 메커니즘을 사용하여 사용자 인증 및 세션 관리를 구현하는 경우가 많습니다.

HTTP 프로토콜에 따라 프론트엔드와 백엔드는 데이터 상호작용, 리소스 획득, 상태 관리와 같은 작업을 수행하여 복잡한 프론트엔드 및 백엔드 상호작용 로직을 실현할 수 있습니다.

AJAX 기술

AJAX(Asynchronous JavaScript and XML)는 웹 애플리케이션에서 비동기 데이터 상호 작용을 위한 기술입니다. 전체 페이지를 새로 고치지 않고 백그라운드를 통해 서버와 데이터를 교환하여 페이지 내용의 일부를 업데이트합니다 .

다음은 AJAX 기술의 주요 내용입니다.

1. 비동기 통신: AJAX는 비동기 통신 메커니즘을 사용합니다 . 즉, 백그라운드에서 데이터를 보내고 받는 과정에서 사용자 인터페이스 또는 전체 페이지의 로드를 차단하지 않습니다. 이렇게 하면 백그라운드에서 데이터를 처리하면서 페이지가 응답성을 유지할 수 있습니다.

2. XMLHttpRequest 개체: AJAX는 XMLHttpRequest 개체를 사용하여 서버와의 데이터 상호 작용을 수행합니다. JavaScript 코드를 통해 서버에 요청을 보내고 서버에서 반환된 데이터를 수신 및 처리할 수 있습니다.

3. 데이터 형식: XML이 초기 AJAX 응용 프로그램에서 일반적으로 사용되었지만 AJAX는 XML 형식을 사용한 데이터 교환으로 제한되지 않습니다. 이제 일반적인 데이터 형식은 JSON(JavaScript Object Notation) 및 XML이며 응용 프로그램의 요구 사항에 따라 적절한 데이터 형식을 선택해야 합니다.

4. 이벤트 기반 프로그래밍: AJAX는 이벤트 기반 프로그래밍 모델을 기반으로 합니다. XMLHttpRequest 객체의 다양한 이벤트(예: 요청 완료, 상태 변경 등)를 수신하여 페이지 콘텐츠 업데이트, 반환된 데이터 처리 등과 같은 해당 작업을 적절한 시간에 수행할 수 있습니다.

5. 도메인 간 요청: 브라우저의 동일 출처 정책 제한으로 인해 AJAX는 일반적으로 도메인 간에 데이터를 요청할 수 없습니다. 이 문제를 해결하기 위해 CORS(Cross-Origin Resource Sharing) 또는 JSONP와 같은 기술을 사용하여 교차 출처 요청을 허용할 수 있습니다.

6. 보안 고려 사항: AJAX 요청은 백그라운드에서 이루어지므로 보안 고려 사항을 고려해야 합니다. 특히 사용자 입력을 처리하거나 민감한 데이터를 보낼 때 보안 위반을 방지하기 위해 적절한 유효성 검사 및 보호 조치가 필요합니다.

AJAX 기술을 적용하면 사용자 경험을 개선하고 웹 애플리케이션의 성능과 효율성을 높일 수 있습니다. 페이지 콘텐츠를 부분적으로 업데이트함으로써 네트워크 대역폭 사용을 줄이고 페이지 로딩 속도를 개선할 수 있으며 실시간으로 데이터를 업데이트하는 기능을 실현할 수 있습니다. AJAX는 새로 고침 없는 양식 제출, 실시간 검색, 콘텐츠의 동적 로드와 같은 시나리오를 구현하는 데 자주 사용됩니다.

React, Angular 및 Vue와 같은 최신 프런트 엔드 프레임워크 및 라이브러리는 또한 AJAX 작업을 단순화하고 최적화하는 고급 도구 및 기술을 제공하여 프런트 엔드 개발자가 비동기 데이터 상호 작용을 보다 쉽게 ​​처리할 수 있도록 합니다.

데이터 형식 및 전송

프론트엔드와 백엔드 상호작용에서 데이터 형식 과 전송 방법은 데이터의 구조와 서로 다른 시스템 간에 데이터를 전송하는 방법을 결정하는 매우 중요한 측면입니다.

데이터 형식:

1. JSON(JavaScript Object Notation): JSON은 프런트엔드 및 백엔드 데이터 상호 작용에 널리 사용되는 경량 데이터 교환 형식입니다. JavaScript의 객체 리터럴 표기법을 기반으로 읽기 및 쓰기가 쉬울 뿐만 아니라 구문 분석 및 생성도 쉽습니다. JSON은 기본 데이터 유형(문자열, 숫자, 부울, null), 개체 및 배열의 ​​표현을 지원합니다.

2. XML(Extensible Markup Language): XML은 구조화된 데이터를 나타내는 데 사용되는 범용 마크업 언어입니다. 복잡한 데이터 구조와 계층적 관계를 설명할 수 있고 확장성이 좋습니다. XML의 엄격한 형식은 태그를 사용하여 데이터의 구조와 의미를 정의해야 합니다.

전송 방법:

1. HTTP(Hypertext Transfer Protocol): HTTP는 웹 애플리케이션 간에 데이터를 전송하기 위해 가장 일반적으로 사용되는 전송 프로토콜입니다. HTTP 프로토콜을 통해 GET 및 POST와 같은 메서드를 사용하여 요청을 보내고 응답을 받을 수 있습니다.

2. WebSocket: WebSocket은 클라이언트와 서버 간의 지속적인 연결과 실시간 양방향 통신을 허용하는 전이중 통신 프로토콜입니다. HTTP 요청과 비교하여 WebSocket은 낮은 대기 시간과 높은 성능을 제공하며 실시간 통신이 필요한 시나리오 에 적합합니다 .

3. RESTful API: REST(Representational State Transfer)는 확장 가능한 웹 서비스를 구축하기 위한 디자인 스타일입니다. RESTful API는 HTTP 프로토콜을 사용하고 일련의 통일된 원칙과 규칙을 따르므로 프런트 엔드와 프런트 엔드 간의 통신이 더 쉽고 안정적입니다.

4. GraphQL: GraphQL은 클라이언트가 필요한 데이터를 명시적으로 요청할 수 있도록 하는 API용 쿼리 언어 및 런타임 환경입니다. 기존의 RESTful API와 비교할 때 GraphQL은 과도한 데이터 가져오기 또는 데이터 부족 문제를 방지하고 보다 정확한 데이터 전송을 제공할 수 있습니다.

5. Socket.IO: Socket.IO는 WebSocket 프로토콜을 기반으로 하는 실시간 애플리케이션 프레임워크이며 안정적인 양방향 통신을 제공합니다 . 클라이언트와 서버 간에 실시간 데이터를 전송하고 연결 해제 및 재연결 문제를 처리할 수 있습니다.

적절한 데이터 형식과 전송 방법을 선택하는 것은 특정 애플리케이션 요구 사항 과 기술 스택 에 따라 다릅니다 . JSON은 일반적으로 프런트엔드 및 백엔드 상호 작용에서 선호되는 데이터 형식인 반면 HTTP는 가장 일반적으로 사용되는 전송 방법입니다. 그러나 실시간 통신 또는 확장성이 뛰어난 시나리오의 경우 다른 전송 및 프로토콜을 고려해야 할 수 있습니다.

프런트엔드 및 백엔드 커뮤니케이션 방법

프런트엔드 및 백엔드 통신에서 데이터 상호 작용을 수행하는 방법에는 여러 가지가 있습니다. 다음은 몇 가지 일반적인 프런트엔드 및 백엔드 커뮤니케이션 방법입니다.

1. 아약스

2. RESTful API

3. 웹소켓

4. GraphQL

5. Server-Sent Events(SSE): Server-Sent Events는 서버가 클라이언트에 데이터를 푸시할 수 있도록 하는 HTTP 기반 단방향 통신 기술입니다. 클라이언트는 지속적인 HTTP 연결을 설정하여 서버에서 이벤트 스트림을 수신하여 서버가 클라이언트에 능동적으로 데이터를 보내는 기능을 실현합니다.

6. 메시징 대기열: 메시지 대기열은 메시지 게시 및 구독을 통해 프런트 엔드와 백 엔드 간에 데이터 교환을 허용하는 비동기 통신 메커니즘입니다. 일반적인 메시지 큐잉 시스템에는 RabbitMQ 및 Apache Kafka 등이 포함되며, 이는 안정적인 메시지 전달을 달성하기 위해 프런트 엔드 및 백엔드 통신을 분리하는 데 사용할 수 있습니다.

적절한 프런트엔드 및 백엔드 통신 방법을 선택하는 것은 특정 애플리케이션 요구 사항 및 기술 스택에 따라 다릅니다. 일반적으로 RESTful API 및 AJAX는 데이터를 전송하고 검색하는 가장 일반적인 방법입니다. 실시간 통신이나 보다 세분화된 데이터 제어가 필요한 경우 WebSocket 및 GraphQL과 같은 기술을 고려할 수 있습니다.

인터페이스 설계 및 사양

인터페이스 설계 및 사양은 여러 측면을 다루며 다음은 일반적인 인터페이스 설계 및 사양 포인트입니다.

1. 입력 및 출력: 매개변수의 유형, 형식 및 제한, 반환 값의 구조 및 형식을 포함하여 인터페이스의 입력 및 출력을 명확하게 정의합니다. 명확한 입력 및 출력을 지정하면 인터페이스를 적절하게 사용하고 데이터를 정확하게 전달할 수 있습니다.

2. 메서드 및 작업: 데이터 가져오기, 리소스 생성, 리소스 업데이트, 리소스 삭제 등을 포함하여 인터페이스에서 지원하는 메서드 및 작업을 정의합니다. 호출자가 언제 어떤 메서드를 사용해야 하는지 명확하게 이해할 수 있도록 각 메서드에는 명확한 목적과 동작이 있어야 합니다.

3. 오류 처리: 오류 또는 예외 조건이 발생할 때 인터페이스의 동작을 정의합니다. 호출자가 오류 상황을 올바르게 처리할 수 있도록 오류 코드, 오류 메시지의 형식 및 내용, 제안된 오류 처리 방법을 지정하는 것을 포함합니다.

4. 인증 및 권한: 인터페이스에 인증 및 권한 제어가 필요한 경우 인증 방법, 토큰 전송 방법 및 액세스 권한 요구 사항을 명확하게 지정합니다. 인증된 사용자만 보호된 인터페이스에 액세스할 수 있도록 하고 적절한 인증 및 권한 부여 메커니즘을 제공합니다.

5. 보안 및 암호화: 데이터 전송에 HTTPS 프로토콜 사용, 민감한 정보 암호화, 교차 사이트 스크립팅 공격 방지 등과 같은 인터페이스의 보안 요구 사항 및 암호화 메커니즘을 지정합니다. 인터페이스 및 데이터의 보안 및 기밀성을 보장합니다.

6. 버전 제어: 인터페이스가 변경될 가능성이 있는 경우 버전 제어 메커니즘을 사용하여 인터페이스의 진화 및 이전 버전과의 호환성을 관리하는 것을 고려하십시오. URL 또는 요청 헤더에 버전 번호를 추가하면 서로 다른 버전의 인터페이스가 공존하고 이전 버전과의 호환성을 제공할 수 있습니다.

7. 인터페이스 문서화: 인터페이스 설명, 사용 예, 매개변수 설명, 반환 값 설명, 오류 코드 정의 등을 포함하여 자세한 인터페이스 문서를 작성합니다. 인터페이스 문서는 개발자가 인터페이스를 올바르게 이해하고 사용하는 데 도움이 되며 인터페이스 참조 및 지침을 제공합니다.

8. 성능 및 최적화: 요청 및 응답의 데이터 양, 네트워크 지연, 동시 처리 기능 등을 고려하여 인터페이스의 성능 및 효율성을 최적화합니다. 효율적인 인터페이스 서비스를 제공하기 위해 인터페이스의 데이터 전송 모드 및 데이터 구조를 합리적으로 설계하십시오.

9. 일관성 및 표준화: 인터페이스 디자인에서 일관성과 표준화를 유지하고 업계 및 팀 모범 사례를 따릅니다. Naming Convention, Parameter 전달 방식, 응답 구조 등을 통일하여 인터페이스의 이해도와 사용 편의성을 높였습니다.

10. 예외 처리: 네트워크 오류, 데이터베이스 오류 등과 같은 비정상적인 조건이 발생할 때 인터페이스가 처리하는 방법을 정의합니다. 호출자가 문제를 정확하게 이해하고 그에 상응하는 조치를 취할 수 있도록 예외를 합리적으로 처리하고 명확한 오류 메시지를 제공하십시오.

특정 애플리케이션 시나리오 및 요구 사항에 따라 설계 및 사양의 다른 측면도 포함될 수 있습니다. 인터페이스 디자인이 명확하고 일관되며 인터페이스의 효과적인 사용과 성공적인 상호 작용을 보장하기 위해 관련 팀과 완전히 의사 소통 및 협상되었는지 확인하는 것이 중요합니다.

CORS(Cross-Origin Resource Sharing) 및 보안

교차 출처 자원 공유(CORS)

CORS(Cross-Origin Resource Sharing)는 브라우저에서 추가 HTTP 헤더를 사용하여 서버가 교차 출처 요청에 대한 액세스를 허용할지 여부를 결정할 수 있도록 하는 메커니즘입니다. CORS는 주로 브라우저의 동일 출처 정책 제한을 해결하는 데 사용되므로 서로 다른 도메인의 프런트 엔드 애플리케이션이 도메인 간에 안전하게 백엔드 서버와 통신할 수 있습니다.

동일 출처 정책은 출처가 다른 페이지(프로토콜, 도메인 이름, 포트) 간의 액세스를 제한하는 브라우저 보안 정책입니다. 예를 들어 페이지가 example.com 도메인 이름에서 로드되면 해당 JavaScript 코드는 동일한 도메인 이름의 리소스에만 액세스할 수 있으며 다른 도메인 이름의 리소스에 직접 액세스할 수 없습니다.

CORS는 다음과 같이 작동합니다.

1. 브라우저가 도메인 간 요청을 시작하면 요청 헤더에 Origin 필드를 추가하여 요청 소스(도메인)를 나타냅니다.

2. 서버가 도메인 간 요청을 수신한 후 Origin 필드를 확인하고 응답 헤더에 특정 CORS 헤더 필드를 추가하여 도메인 간 요청에 대한 액세스를 허용할지 여부를 브라우저에 알립니다.

3. 브라우저가 응답을 받은 후 응답 헤더의 CORS 헤더 필드에 따라 판단하여 서버가 도메인 간 액세스를 허용하면 브라우저는 응답을 계속 처리하고 그렇지 않으면 오류를 발생시킵니다.

CORS의 보안은 서버에 의해 제어되며 서버는 응답 헤더에 CORS 헤더 필드를 설정하여 허용된 도메인 간 요청 소스, 허용된 HTTP 메서드, 허용된 사용자 정의 헤더 등을 지정할 수 있습니다.

안전

설계 및 개발 프로세스 중에 다음과 같은 보안 관련 고려 사항에 유의해야 합니다.

1. 교차 도메인 액세스 제한: 서버는 CORS 헤더 필드를 설정하여 실제 필요에 따라 교차 도메인 요청의 액세스를 제한할 수 있습니다. 예를 들어 특정 도메인 이름만 액세스할 수 있도록 지정하거나 특정 HTTP 메서드만 허용하도록 지정할 수 있습니다.

2. 인증 및 권한 부여: 도메인 간 요청에는 민감한 데이터 또는 작업이 포함될 수 있으므로 권한 있는 사용자만 도메인 간 요청을 할 수 있도록 서버 측에서 인증 및 권한 부여를 수행해야 합니다.

3. 교차 사이트 요청 위조(CSRF) 공격 방지: CORS는 교차 도메인 요청을 완전히 방지할 수 없으므로 웹 애플리케이션을 설계할 때 교차 사이트 요청 위조 공격을 방지하기 위해 CSRF 토큰 보호를 사용하는 것과 같은 다른 보안 조치를 취해야 합니다.

4. 보안 전송: 민감한 데이터가 포함된 도메인 간 요청의 경우 데이터의 기밀성과 무결성을 보호하기 위해 보안 전송에 HTTPS 프로토콜을 사용해야 합니다.

CORS 및 기타 보안 조치의 합리적인 구성 및 사용을 통해 교차 도메인 요청의 보안을 보장할 수 있으며 필요한 교차 도메인 데이터 교환을 프런트 엔드 및 백엔드 상호 작용에서 실현할 수 있습니다.

- 끝 -

Qi Wu 극단 소개

Qi Wu Troupe는 360 Group의 가장 큰 프런트 엔드 팀이며 그룹을 대신하여 W3C 및 ECMA 구성원(TC39)의 작업에 참여합니다. Qi Wu Troupe는 인재 양성을 중시하고 엔지니어, 강사, 번역가, 비즈니스 인터페이스 담당자 및 팀 리더와 같은 다양한 개발 방향을 직원이 선택할 수 있으며 해당 기술, 전문, 일반 및 리더십 교육 과정을 제공합니다. Qi Dance Troupe는 개방적이고 재능을 추구하는 태도로 Qi Dance Troupe에 관심을 갖고 합류하기 위해 모든 종류의 뛰어난 재능을 환영합니다.