Proxy 설정과 네트워크 통신 02

언어 및 도구들 공부/React

Proxy 설정과 네트워크 통신 02

Dr.Mlem 2024. 12. 2. 23:00

Q1.

내 상황을 설명해줄게. 포트번호 8080에, localhost:8080 url을 통해, 자체적으로 제작한 백엔드 서버가 있어. 해당 서버에서 /news 로 들어가면, 어떤 Json 데이터가 있고, 해당 json에는 item이라는 키와 거기에 어떤 배열이 연결되어 있는데, 연결되어 있는 그 배열 안에는 여러 Json들이 들어가있고, 그 Json들 하나하나는 신문기사 하나에 연결되어 있으며, 신문기사 하나에 해당하는 Json 안에는 image라는 키에 대한 값으로, 이미지 주소가 연결되어 있어.
문제는 이 이미지의 주소가, "image": "/files/news/573556_495480_4444_v150.jpg" 이런 꼴로 되어 있는데, localhost:3000에 연결된 React 프로젝트 내에는 해당 이미지 파일이 전혀 없으나, localhost:8080 서버에, 해당되는 내용들이 pc내의 어디에 있는지에 대하여서 경로가 설정되어 있어서, 8080포트에 연결되어 있는 서버는 해당 파일을 찾아갈 수 있어. 이런 경우에서, 내가 react의 proxy 설정값으로 localhost:8080을 주게 된다면, 어떤 원리로 인해서 해당 위치까지 접근이 가능해져서 브라우저에서 해당 이미지들을 출력하게 되는지 알려줘

그리고 혹시, 내 질문한 내용이 불분명하거나, 질문한 내용 중에서 내가 잘못 이해하고 있는 것으로 보이는 내용이 있다면, 먼저 짚어주고, 내가 물어본 질문에 대해서는 그 다음에 답해줬으면 해.

A1.

ChatGPT의 말:

질문 내용에 대한 확인 및 이해 점검

질문에 있는 내용을 요약하고 확인하며, 혹시 잘못 이해한 부분이 있다면 짚어볼게요:

상황 요약:
- 백엔드 서버: localhost:8080에서 동작하는 서버가 있으며, /news 경로로 JSON 데이터를 제공합니다.
- JSON 데이터 구조: item 키에 배열 형태로 여러 JSON 객체가 연결되어 있으며, 각 JSON 객체는 신문 기사 하나를 표현합니다. 각 JSON 객체에는 image 키로 이미지 경로가 포함되어 있습니다. 경로의 예는 /files/news/573556_495480_4444_v150.jpg입니다.
- 이미지 위치: 이 경로는 localhost:8080 서버에서 PC 내에 설정된 파일 시스템 경로를 통해 접근 가능합니다.
- React 앱: localhost:3000에서 동작하는 React 프로젝트가 있으며, 여기에는 이미지 파일이 없습니다.
- React Proxy 설정: React에서 proxy를 localhost:8080으로 설정하려고 합니다.
질문 내용:
- React의 Proxy 설정으로 인해, 왜 브라우저에서 이미지 출력이 가능한지에 대한 원리를 묻고 있습니다.
추가 점검 사항:
- 질문 내용은 명확합니다. 다만, 다음을 확인하고 싶습니다:
  - React의 proxy 설정을 통해 실제 이미지 경로(/files/news/...)에 접근하려는 것이 맞는지?
  - JSON 데이터를 가져오는 과정과 이미지 경로 사용 과정에서 별도의 추가 로직(예: 경로 수정 등)이 필요한지?

질문에 대한 답변

1. React Proxy 설정이 작동하는 원리

React의 proxy 설정은 개발 환경에서만 작동하며, 이를 통해 React 앱이 다른 포트에서 동작하는 API 서버와 통신할 수 있습니다. 이를 설정하면, React에서 API 요청을 보낼 때 URL을 proxy로 설정한 서버로 리다이렉트합니다.

원리 설명:

브라우저에서 fetch나 axios 등을 통해 /news 경로로 요청을 보내면:
- React 개발 서버(localhost:3000)는 이 요청을 가로채고,
- proxy로 설정된 localhost:8080으로 요청을 전달합니다.
이렇게 전달된 요청은 마치 브라우저가 직접 localhost:8080에 요청을 보낸 것처럼 동작합니다.
결과적으로, localhost:8080 서버에서 JSON 데이터가 반환됩니다.

2. 이미지 경로 접근

JSON 데이터에서 image 키에 있는 경로는 상대 경로(/files/news/...)로 설정되어 있습니다. 이를 브라우저에서 올바르게 출력하려면, 브라우저가 다음 경로로 요청을 보내야 합니다:

http://localhost:8080/files/news/573556_495480_4444_v150.jpg

작동 원리:

React에서 JSON 데이터를 가져온 후, image 경로를 렌더링할 때 <img> 태그에 다음과 같이 작성하게 됩니다:

<img src={`http://localhost:8080${image}`} alt="news" />

브라우저는 위 경로(localhost:8080)로 이미지 요청을 보냅니다.
localhost:8080 서버는 PC 내 설정된 파일 시스템 경로에서 이미지를 찾아 브라우저로 전달합니다.
따라서 이미지가 정상적으로 출력됩니다.

3. Proxy와 이미지 경로 간의 상관관계

proxy 설정은 React 개발 서버(localhost:3000)와 API 서버(localhost:8080) 간의 요청을 단순히 리다이렉트하는 역할을 합니다. 실제 이미지 경로(/files/news/...)는 브라우저가 직접 API 서버(localhost:8080)로 요청을 보내기 때문에, 별도의 추가 설정 없이도 접근 가능합니다.

중요한 점:

React의 proxy 설정은 JSON 데이터를 가져오는 데만 필요하며, 이미지 요청에는 관여하지 않습니다. 브라우저는 이미지 경로를 그대로 사용해 localhost:8080에 직접 요청을 보냅니다.

요약

React의 proxy 설정은 React 개발 서버가 API 요청을 localhost:8080으로 리다이렉트하게 합니다.
JSON 데이터를 통해 이미지 경로를 얻은 후, <img> 태그에서 브라우저가 localhost:8080으로 직접 요청을 보내 이미지를 가져옵니다.
브라우저는 이미지 요청을 할 때 React의 proxy 설정과는 무관하게 동작합니다. JSON에서 받은 이미지 경로가 올바르게 localhost:8080과 연결되면 출력이 가능합니다.

이해되지 않는 부분이나 추가로 궁금한 점이 있다면 알려주세요! 😊

Q2.

나의 말:

1. React의 proxy 설정을 통해 실제 이미지 경로(/files/news/...)에 접근하려는 것이 맞는지?

2. JSON 데이터를 가져오는 과정과 이미지 경로 사용 과정에서 별도의 추가 로직(예: 경로 수정 등)이 필요한지?

네가 물어본 이 질문에 대해서 답을 하자면,

1. proxy 설정을 통해서 저 경로에 있는 이미지를 현재 브라우저에 출력하고 싶어. proxy 설정으로 연결한 백엔드는, 저 경로를 통해서 원본 파일이 있는 주소를 찾아갈 수 있게 설정되어 있어.

2. 별도의 추가 로직은 필요하지 않아. 그저 브라우저에 해당 이미지 경로대로 찾아가서 이미지를 출력하고 싶을 뿐이야.

그리고 그것 외에, 처음에 브라우저에서 이미지를 보여달라는 요청이 직접적으로 가장 먼저 들어오는 곳은, React 개발 서버 그 자체인지가 궁금하고, 이미지를 보여달라는 요청부터, 마지막에 이미지가 실질적으로 브라우저에 출력될 때까지, 웹브라우저와 react 개발 서버, 그리고 Proxy 설정으로 지정한 서버 이렇게 셋 사이에서 네트워크 통신이 어떻게 흘러가는지, 명확하게 순서를 찍어가면서 알려줘. 잠깐이라도 거치는 부분도 놓치지 않고 알려줘.

그리고 fetch는 안쓰고 ajax 통신을 쓰고 있어.

A2.

ChatGPT의 말:

명확한 통신 흐름 설명: 브라우저, React 개발 서버, Proxy 서버 간의 순서

전제

React의 Proxy 설정을 통해 이미지를 출력하려는 경우이며, 별도의 추가 로직은 필요하지 않습니다.
브라우저가 직접적으로 이미지를 요청하고, 최종적으로 이미지를 출력합니다.
AJAX를 사용한 통신을 기반으로 설명하겠습니다.

순서별 통신 흐름

1. 브라우저 요청 시작

React 애플리케이션이 브라우저에서 실행됩니다.
브라우저가 React 앱의 HTML 파일(index.html)을 요청합니다:

GET http://localhost:3000

2. React 개발 서버 처리

React 개발 서버(localhost:3000)는 요청을 받아 React 앱의 초기 HTML 파일과 번들 파일(예: main.js)을 브라우저에 전달합니다.

3. AJAX로 JSON 데이터 요청

React 애플리케이션이 실행되면서, 특정 시점에 AJAX를 사용해 JSON 데이터를 요청합니다: 요청이 /news로 되어 있기 때문에 React 개발 서버가 요청을 가로챕니다.

$.ajax({
  url: '/news', // 상대 경로로 요청
  success: (data) => {
    console.log(data); // JSON 데이터 처리
  },
});

4. React Proxy 설정 작동

React 개발 서버는 Proxy 설정(localhost:8080)을 확인합니다.
/news 요청이 Proxy 설정과 일치하므로 이를 localhost:8080/news로 전달합니다:

GET http://localhost:8080/news

5. 백엔드 서버에서 JSON 응답

백엔드 서버(localhost:8080)는 요청을 처리하고 /news에 대한 JSON 데이터를 응답으로 반환합니다. 이 데이터에는 image 키와 이미지 경로(/files/news/...)가 포함되어 있습니다.

6. 브라우저에서 JSON 데이터 처리

브라우저는 React 애플리케이션 내에서 받은 JSON 데이터를 처리하고, 이미지 경로를 확인합니다.

7. 브라우저의 이미지 요청

React 애플리케이션에서 JSON 데이터를 사용해 이미지 태그를 생성합니다:

<img src="/files/news/573556_495480_4444_v150.jpg" alt="news" />

브라우저는 이미지 경로(/files/news/...)를 localhost:3000 기준으로 요청합니다:

GET http://localhost:3000/files/news/573556_495480_4444_v150.jpg

8. React Proxy 설정 작동 (이미지 요청)

React 개발 서버는 /files/news/... 요청을 확인하고, Proxy 설정에 따라 이를 localhost:8080/files/news/...로 리다이렉트합니다:

GET http://localhost:8080/files/news/573556_495480_4444_v150.jpg

9. 백엔드 서버에서 이미지 응답

백엔드 서버(localhost:8080)는 이미지 파일 시스템 경로를 따라 이미지를 찾아 브라우저로 반환합니다.

10. 브라우저에 이미지 출력

브라우저는 백엔드 서버에서 전달받은 이미지를 렌더링하고 화면에 표시합니다.

요약: 통신 흐름 정리

브라우저 -> React 개발 서버 (localhost:3000)
- HTML 및 React 번들 파일 요청 및 응답.
React 앱 (AJAX 요청) -> React 개발 서버 (localhost:3000)
- AJAX로 /news 요청.
- Proxy 설정을 통해 localhost:8080/news로 리다이렉트.
React 개발 서버 -> 백엔드 서버 (localhost:8080)
- 백엔드 서버가 /news 요청 처리 및 JSON 데이터 반환.
브라우저 -> React 개발 서버 (localhost:3000)
- 이미지 경로(/files/news/...) 요청.
- Proxy 설정을 통해 localhost:8080/files/news/...로 리다이렉트.
React 개발 서버 -> 백엔드 서버 (localhost:8080)
- 백엔드 서버가 이미지 요청 처리 및 파일 반환.
브라우저 -> 이미지 렌더링
- 브라우저가 이미지 데이터를 수신하고 렌더링.

주요 포인트

브라우저가 이미지를 보여달라는 요청은 React 개발 서버(localhost:3000)로 가장 먼저 전달됩니다.
Proxy 설정이 작동하여 요청은 백엔드 서버(localhost:8080)로 리다이렉트됩니다.
브라우저와 React 개발 서버, Proxy 서버 간의 통신은 순차적으로 흐르고, 브라우저는 최종적으로 백엔드 서버에서 받은 이미지를 렌더링합니다.

질문이나 추가적으로 확인하고 싶은 부분이 있다면 알려주세요!

나의 말:

이 과정에서, 백엔드 서버와 브라우저가 직접적으로 통신하는 부분이 있을까?

A3.

ChatGPT의 말:

백엔드 서버와 브라우저의 직접적인 통신 여부

결론부터 말하면: 백엔드 서버(localhost:8080)와 브라우저가 직접적으로 통신하는 부분은 있습니다. 이 통신은 이미지 요청 및 반환 과정에서 발생합니다.

구체적인 설명

AJAX 요청을 통한 JSON 데이터 통신
- 브라우저가 AJAX로 /news를 요청하면, 이 요청은 React 개발 서버(localhost:3000)를 먼저 거칩니다.
- Proxy 설정이 동작해 백엔드 서버(localhost:8080)로 요청이 리다이렉트됩니다.
- JSON 데이터는 백엔드 서버와 React 개발 서버 간의 간접 통신으로 전달됩니다.
  브라우저와 백엔드 서버 간에는 직접적인 통신이 없습니다.
이미지 요청

JSON 데이터를 통해 이미지 경로(/files/news/...)를 알게 된 브라우저는 해당 경로로 이미지를 요청합니다:

GET http://localhost:8080/files/news/573556_495480_4444_v150.jpg

이 요청은 Proxy를 거치지 않습니다. 브라우저가 직접 백엔드 서버(localhost:8080)로 요청을 보냅니다.
백엔드 서버는 요청받은 이미지 파일을 브라우저에 직접 응답합니다.

왜 브라우저와 백엔드 서버가 직접 통신하는가?

React의 Proxy 설정은 개발 서버(localhost:3000)에서만 동작합니다. 브라우저가 JSON 데이터를 기반으로 <img> 태그를 생성할 때는 이 Proxy 설정이 관여하지 않습니다.

<img> 태그는 브라우저가 직접 이미지 경로를 요청하게 만듭니다.
따라서, 브라우저가 렌더링하려는 이미지는 백엔드 서버(localhost:8080)와 직접적으로 통신하게 됩니다.

직접 통신이 발생하는 과정

브라우저에서 <img src="http://localhost:8080/files/news/573556_495480_4444_v150.jpg" />가 생성됩니다.
브라우저는 백엔드 서버(localhost:8080)로 직접 HTTP GET 요청을 보냅니다.
백엔드 서버는 이미지 파일을 반환합니다.
브라우저는 반환받은 이미지를 화면에 렌더링합니다.

정리

JSON 데이터를 요청하는 경우에는 백엔드 서버와 브라우저 간 직접 통신은 발생하지 않습니다. React 개발 서버가 중간에 Proxy 역할을 합니다.
이미지를 요청하는 경우에는 브라우저가 백엔드 서버로 직접 요청하고 응답을 받습니다.
Proxy 설정은 이미지 요청에는 관여하지 않습니다.

추가로 궁금한 점이나 세부적인 과정이 더 필요하다면 편히 질문해주세요! 😊

Q4.

그렇게 이미지를 localhost:3000에서 가져오는 것이 아닌, 8080을 통해서 가져오는 것이라면, CORS 문제에 대해서는 어떻게 회피할 수 있게 되는거야?

A4.

ChatGPT의 말:

CORS 문제와 이를 회피하는 방법

브라우저가 localhost:3000에서 실행 중인 React 앱과 localhost:8080에서 실행 중인 백엔드 서버 간에 요청을 보낼 때는 CORS(Cross-Origin Resource Sharing) 문제가 발생할 가능성이 있습니다. CORS는 기본적으로 출처가 다른 서버 간의 요청을 제한하는 브라우저의 보안 정책입니다.

1. 이미지 요청에서의 CORS

이미지 요청은 다른 출처(즉, 다른 도메인, 포트, 또는 프로토콜)에 대한 HTTP GET 요청으로 이루어집니다.
브라우저는 HTML의 <img> 태그를 통해 이미지 요청을 보낼 때도 CORS 정책을 따릅니다.
만약 백엔드 서버가 CORS 설정을 하지 않았다면, 이미지 요청이 차단될 수 있습니다.

React Proxy 설정과 CORS

React 개발 환경의 Proxy 설정(localhost:8080)은 CORS 문제를 우회할 수 있는 유용한 방법이지만, 중요한 점은 Proxy 설정이 React 개발 서버에서 동작하는 동안에만 유효하다는 것입니다. 즉:

JSON 데이터를 요청할 때:
- React의 Proxy 설정이 동작하면서 localhost:3000에서 localhost:8080으로 요청이 리다이렉트되므로, CORS 문제가 발생하지 않습니다. React 개발 서버가 요청을 중계하기 때문입니다.
이미지 요청:
- 이미지는 브라우저가 직접 localhost:8080으로 요청하기 때문에 React의 Proxy 설정은 적용되지 않습니다.
- 따라서 이미지 요청에서 CORS 문제가 발생할 수 있습니다.

이미지 요청에서 CORS 문제를 회피하는 방법

1. 백엔드 서버에서 CORS 설정

가장 일반적인 방법은 백엔드 서버에 CORS 헤더를 추가하는 것입니다. 예를 들어:
Node.js (Express) 서버에서 CORS 설정:

const cors = require('cors');
const express = require('express');
const app = express();

app.use(cors({
  origin: 'http://localhost:3000', // React 앱의 도메인
  methods: ['GET', 'POST'],        // 허용할 HTTP 메서드
  credentials: true                // 쿠키 등 인증 정보를 포함할 경우 설정
}));

app.get('/files/news/:image', (req, res) => {
  // 이미지 응답 처리
});

app.listen(8080, () => console.log('Server running on 8080'));

백엔드 서버에서 Access-Control-Allow-Origin 헤더를 추가하면, 브라우저는 localhost:8080에서 오는 응답을 허용합니다. 응답 헤더 예시:

Access-Control-Allow-Origin: http://localhost:3000

2. 브라우저의 crossorigin 속성 사용

이미지 요청에서 백엔드 서버가 CORS 헤더를 설정했다면, <img> 태그에 crossorigin 속성을 추가할 수 있습니다:

<img src="http://localhost:8080/files/news/573556_495480_4444_v150.jpg" crossorigin="anonymous" />

이 설정은 브라우저에 요청이 CORS 환경에서 이루어질 것임을 명시합니다. 백엔드 서버의 CORS 헤더와 함께 사용됩니다.

3. 프록시 서버 사용

프록시 서버를 설정해 React 개발 서버 또는 별도의 중간 서버를 통해 이미지 요청을 우회할 수 있습니다.
React 개발 서버에서 프록시 설정을 통해 이미지 요청을 중계하면, 브라우저는 localhost:3000을 기준으로 동일 출처 요청으로 처리합니다:

<img src="/files/news/573556_495480_4444_v150.jpg" />

이 경우 Proxy 설정은 다음과 같이 이미지를 포함할 수 있도록 구성됩니다:

"proxy": "http://localhost:8080"

4. CORS 문제를 우회하기 위한 개발 환경 옵션

개발 환경에서만 사용할 경우, 브라우저의 CORS 보안 정책을 비활성화하는 옵션을 사용할 수 있습니다. 예를 들어:
- Chrome을 시작할 때 --disable-web-security 플래그를 추가.
- 하지만 이는 보안상 취약하므로 배포 환경에서는 절대 사용하지 않아야 합니다.

배포 환경에서의 추가 고려 사항

CORS 문제는 로컬 환경뿐 아니라 배포 환경에서도 발생할 수 있습니다. 배포 시에는:

도메인 일치: React 앱과 백엔드 서버가 동일한 도메인에서 호스팅되도록 구성.
리버스 프록시: Nginx 또는 Apache를 사용해 React 앱과 백엔드 서버를 통합.
- React 앱은 /에서 제공하고, 백엔드 서버는 /api 및 /files 경로를 처리하도록 설정합니다.

결론

브라우저와 백엔드 서버 간의 직접 통신이 발생할 때는 반드시 백엔드 서버에서 적절한 CORS 설정이 필요합니다.
개발 환경에서는 React Proxy 설정을 활용하거나 백엔드에서 Access-Control-Allow-Origin 헤더를 추가해 CORS 문제를 해결할 수 있습니다.
배포 환경에서는 동일한 도메인에서의 통합(리버스 프록시 또는 서버 통합)이 더 권장됩니다.

추가 질문이 있다면 언제든지 알려주세요! 😊

Q5.

나의 말:

네 말대로라면, React에서 자체적으로 proxy 설정을 localhost:8080으로 해둔 상태라면, 이미지를 거기에 연결된 백엔드 서버한테서 받아온다해도 CORS 문제가 생길 일은 없다는 것인가?

A5.

ChatGPT의 말:

React에서 자체적으로 Proxy 설정을 localhost:8080으로 해둔 상태라면, Proxy를 통해 이루어지는 요청에 대해서는 CORS 문제가 생기지 않습니다. 하지만, 중요한 점은 Proxy 설정이 적용되는 요청과 그렇지 않은 요청의 차이를 이해하는 것입니다.

Proxy 설정의 동작 범위

React의 Proxy 설정은 개발 서버에서 동작하며, 클라이언트(브라우저)와 백엔드 서버 간의 CORS 문제를 해결하기 위한 중계 역할을 합니다.

Proxy가 적용되는 경우:

React 앱에서 상대 경로로 API 요청을 보낼 때, 예를 들어:

$.ajax({
  url: '/news', // 상대 경로
  success: (data) => console.log(data),
});

Proxy가 적용되지 않는 경우:

브라우저가 직접 다른 출처로 요청을 보내는 경우, 예를 들어 <img> 태그에서:

<img src="http://localhost:8080/files/news/573556_495480_4444_v150.jpg" alt="news" />

이 요청은 React 개발 서버를 거치지 않고, 브라우저가 localhost:8080으로 직접 요청을 보냅니다. 이 경우 Proxy는 작동하지 않으며, 백엔드 서버가 적절한 CORS 헤더를 설정하지 않았다면 CORS 문제가 발생할 수 있습니다.

이미지 요청과 CORS 문제

JSON 데이터 요청:
- AJAX 요청으로 JSON 데이터를 /news 경로에서 가져올 때는 React Proxy가 동작하므로 CORS 문제가 발생하지 않습니다.
이미지 요청:
- 이미지 경로(/files/news/...)는 브라우저가 직접 localhost:8080으로 요청하기 때문에 React Proxy 설정과는 무관합니다.
- 브라우저는 이 요청에 대해 CORS 정책을 적용하며, 백엔드 서버가 CORS 헤더를 올바르게 설정하지 않았다면 CORS 문제가 발생합니다.

결론

Proxy 설정이 적용되는 요청(예: JSON 데이터 요청)은 CORS 문제가 발생하지 않습니다.
Proxy 설정이 적용되지 않는 요청(예: 브라우저가 직접 보낸 이미지 요청)은 백엔드 서버에서 CORS 설정을 통해 허용해야 합니다.
- 이를 위해 백엔드 서버에서 Access-Control-Allow-Origin 헤더를 추가해야 합니다.

추가 팁

브라우저에서 발생하는 CORS 문제 확인 방법:
- 이미지가 로드되지 않는다면, 브라우저 개발자 도구의 네트워크 탭에서 요청 상태를 확인하세요.
- CORS 문제가 있다면, 응답 헤더에 Access-Control-Allow-Origin이 없거나 잘못 설정된 것을 볼 수 있습니다.
개발 환경에서 간단한 해결책:
- 백엔드 서버에 CORS 설정을 추가하는 것이 가장 안전하고 확실한 방법입니다.
- 임시로 해결하려면 React Proxy를 활용해 이미지 요청도 Proxy를 통해 처리하도록 설정할 수 있습니다.

궁금한 점이 더 있다면 언제든 질문해주세요! 😊

Q6.

나의 말:

그렇다면, 이미지를 정상적으로 가져오기 위해선, React와 실제 데이터가 있는 백엔드 서버와의 원할한 통신을 위한 리엑트 프로젝트에서의 Proxy 설정과, 백엔드 서버에서 브라우저로 이미지를 보낼 때 생길 수 있는 CORS 문제 해결을 위한 Access-Control-Allow-Origin 헤더 추가 설정, 이렇게 2개의 설정을 해야지만, 브라우저와 리엑트 개발서버, 그리고 데이터가 있는 백엔드 서버 3개가 원할히 통신하며 브라우저에 출력화면을 온전히 만들 수 있다는 거야?

A6.

ChatGPT의 말:

정확합니다!

브라우저, React 개발 서버, 그리고 데이터가 있는 백엔드 서버가 원활하게 통신하며 브라우저에서 이미지를 정상적으로 출력하려면, 다음 두 가지 설정이 필요합니다:

1. React 프로젝트의 Proxy 설정

React 개발 서버(localhost:3000)에서 데이터가 있는 백엔드 서버(localhost:8080)로의 요청을 중계하기 위해 Proxy 설정이 필요합니다.

Proxy 설정의 역할

React 애플리케이션에서 JSON 데이터를 요청할 때, 브라우저가 CORS 문제를 일으키지 않도록 React 개발 서버가 Proxy 역할을 합니다.
예를 들어, fetch나 ajax 요청을 /news와 같은 상대 경로로 보낼 경우, React 개발 서버가 요청을 가로채 백엔드 서버로 전달합니다.

설정 방법

React의 package.json에 다음과 같이 Proxy 설정을 추가합니다:

{
  "proxy": "http://localhost:8080"
}

이 설정으로 React 개발 서버는 /news와 같은 요청을 localhost:8080/news로 전달합니다.

2. 백엔드 서버에서의 CORS 설정

이미지 요청과 같이 브라우저가 직접 백엔드 서버로 요청을 보낼 경우, CORS 문제가 발생할 수 있으므로 백엔드 서버에서 적절한 CORS 헤더를 설정해야 합니다.

CORS 문제 해결을 위한 설정

백엔드 서버가 브라우저 요청을 허용하도록 Access-Control-Allow-Origin 헤더를 응답에 추가해야 합니다.

설정 방법

예를 들어, Node.js(Express)를 사용하는 경우:

const cors = require('cors');
const express = require('express');
const app = express();

app.use(cors({
  origin: 'http://localhost:3000', // React 앱의 주소
  methods: ['GET', 'POST'],
  credentials: true
}));

app.get('/files/news/:image', (req, res) => {
  // 이미지 요청 처리 로직
});

app.listen(8080, () => console.log('Server running on port 8080'));

응답 헤더에 다음을 포함해야 합니다:

Access-Control-Allow-Origin: http://localhost:3000

3개 요소 간의 통신 흐름 요약

React 개발 서버와 백엔드 서버 간의 JSON 데이터 요청:
- React 개발 서버의 Proxy 설정을 통해 CORS 문제를 방지.
- 브라우저는 이 과정에서 Proxy 설정에 의해 간접적으로 데이터를 가져옵니다.
브라우저와 백엔드 서버 간의 이미지 요청:
- 브라우저가 백엔드 서버로 직접 요청.
- 백엔드 서버에서 Access-Control-Allow-Origin 헤더를 설정하여 CORS 문제 해결.
브라우저 출력:
- JSON 데이터를 통해 받은 이미지 경로를 사용해 <img> 태그로 이미지를 렌더링.
- 브라우저는 이미지 요청을 백엔드 서버로 보내고 응답받아 화면에 출력.

결론

React 애플리케이션에서 원활하게 브라우저 화면을 완성하려면:

Proxy 설정: React 개발 서버에서 JSON 데이터 요청 시 CORS 문제를 회피.
백엔드 서버의 CORS 헤더: 브라우저가 직접 요청하는 이미지에 대해 CORS 문제를 해결.

이 두 가지 설정이 모두 필요합니다.

추가로 도움이 필요하거나 구현 중 문제가 있다면 언제든 질문해주세요! 😊

Q7.

나의 말:

그런데 궁금한 점이 있는게, 정작 그렇게 화면에 출력된 이미지에 대해서, 마우스 우클릭을 눌러서 이미지 주소를 복사해서 보니, localhost:8080으로 시작하지 않고, localhost:3000으로 시작하고 있었어. 왜 그런거지?

일단 참고를 위해서 말을 덧붙이자면, Ajax 요청을 한 주소는, /news 로 상대주소를 걸어준 상태야.

A7.

ChatGPT의 말:

이 상황은 React 개발 서버의 Proxy 설정과 브라우저의 상대 경로 처리 방식이 맞물려 발생한 현상으로 보입니다. 이를 명확히 설명하겠습니다.

현상의 원인 분석

1. Ajax 요청과 Proxy 설정

React 애플리케이션에서 Ajax 요청을 /news라는 상대 경로로 보냈습니다.
React의 Proxy 설정(localhost:8080)이 활성화되어, React 개발 서버(localhost:3000)가 /news 요청을 가로채고, 이를 localhost:8080/news로 리다이렉트합니다.
결과적으로, 백엔드 서버(localhost:8080)로부터 JSON 데이터를 성공적으로 받아옵니다.

2. JSON 데이터 처리

JSON 데이터에 이미지 경로가 /files/news/573556_495480_4444_v150.jpg처럼 상대 경로로 포함되어 있습니다.
React 애플리케이션은 이 경로를 <img> 태그의 src 속성에 그대로 사용합니다:

<img src="/files/news/573556_495480_4444_v150.jpg" />

3. 브라우저의 상대 경로 처리

브라우저는 이미지 경로(/files/news/...)를 상대 경로로 인식합니다.
상대 경로는 현재 React 애플리케이션의 출처(localhost:3000)를 기준으로 처리됩니다.
따라서, 브라우저가 최종적으로 생성한 이미지 요청은:

http://localhost:3000/files/news/573556_495480_4444_v150.jpg

4. React Proxy의 부재

이 요청은 React의 Proxy 설정에 의해 리다이렉트되지 않습니다. Proxy는 개발 서버에서 API 요청(/news 등)에만 적용되며, 브라우저가 직접 요청하는 정적 파일 요청(/files/news/...)에는 적용되지 않습니다.
따라서 localhost:3000/files/news/... 경로는 유효하지 않습니다. 이 상태로는 브라우저가 이미지를 제대로 가져올 수 없습니다.

정상적으로 이미지가 로드되는 이유

Proxy 설정이나 백엔드의 CORS 설정이 완전히 올바르게 작동한다면, 브라우저가 실제로 localhost:3000이 아닌 localhost:8080에서 이미지를 요청해야 합니다. 그런데도 이미지가 로드되는 이유는 아래 중 하나일 가능성이 높습니다:

1. 브라우저의 캐싱

이전에 localhost:8080/files/news/...에서 이미지를 성공적으로 로드했을 경우, 브라우저가 이를 캐싱하여 현재 요청에서도 해당 이미지를 보여줄 수 있습니다.

2. React 개발 서버에서 정적 파일 처리

만약 React 개발 서버(localhost:3000)가 요청을 처리하지 않고, 브라우저가 해당 요청을 백엔드 서버(localhost:8080)로 리다이렉트했다면 이미지가 정상적으로 로드될 수 있습니다.
이 경우, 브라우저 개발자 도구의 네트워크 탭에서 실제 요청 주소를 확인해보는 것이 중요합니다.

3. JSON 데이터에 포함된 경로의 절대 경로화

백엔드에서 제공하는 JSON 데이터가 상대 경로(/files/news/...) 대신 절대 경로(http://localhost:8080/files/news/...)를 포함하고 있는 경우, React 앱에서 <img> 태그에 절대 경로를 사용했을 가능성이 있습니다. 브라우저가 이를 사용해 localhost:8080에서 이미지를 가져옵니다.

해결 및 최적화 방안

1. 이미지 경로를 절대 경로로 변경

JSON 데이터를 반환하는 백엔드 서버에서 이미지 경로를 상대 경로 대신 절대 경로로 반환하도록 수정합니다:

{
  "image": "http://localhost:8080/files/news/573556_495480_4444_v150.jpg"
}

React 애플리케이션에서는 추가 작업 없이 그대로 사용할 수 있습니다:

<img src={image} alt="news" />

2. Proxy를 이미지 요청에도 적용

Proxy 설정이 API 요청뿐 아니라 이미지 경로(/files/news/...)에도 동작하도록 조정합니다:

{
  "proxy": "http://localhost:8080"
}

이 경우, 이미지 경로를 그대로 상대 경로(/files/news/...)로 사용해도 브라우저가 올바르게 백엔드 서버로 요청을 리다이렉트합니다.

3. React 앱 내 이미지 경로 수정

JSON 데이터에 포함된 이미지 경로가 상대 경로인 경우, React에서 이를 절대 경로로 변경하여 <img> 태그에 사용합니다:

const fullImagePath = `http://localhost:8080${image}`;
<img src={fullImagePath} alt="news" />;

결론

현재 브라우저에서 복사된 이미지 주소가 localhost:3000으로 시작하는 이유는 브라우저가 JSON 데이터에서 받은 경로를 상대 경로로 해석했기 때문입니다. 이를 방지하려면:

백엔드에서 JSON 데이터의 이미지 경로를 절대 경로로 반환하거나,
React 앱에서 이미지 경로를 절대 경로로 처리하거나,
Proxy 설정을 이미지 요청에도 확장해야 합니다.

브라우저의 캐싱이나 개발 환경의 특수성으로 인해 이미지가 정상적으로 로드되는 것처럼 보일 수 있으니, 네트워크 탭에서 요청 흐름을 확인하는 것이 좋습니다. 추가적인 질문이나 문제가 있으면 알려주세요! 😊

'언어 및 도구들 공부 > React' 카테고리의 다른 글

특정 라이브러리 전용 props명 (0)	2024.12.03
Props로 값을 넘겨줄 때 파라미터명은? (0)	2024.12.03
참조변수.current (0)	2024.12.02
React에서의 key 값 (0)	2024.12.02
Proxy 설정과 네트워크 통신 (0)	2024.12.02

현재글Proxy 설정과 네트워크 통신 02

Dr.Mlem Blog

Dr.Mlem knows nothing but borking

mybatis, JavaScript, json, 설치, go, 팁, 오답노트, DPP, 컨트롤러, did, 포인터, 파라미터, html, java, Spring, js, 배열, 오블완, cirpass, w3c, ajax, MYSQL, 제너릭, React, Props, css, select, axios, Pointer, 티스토리챌린지,

Today :
Yesterday :

일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31