Proxy 설정과 네트워크 통신

언어 및 도구들 공부/React

Proxy 설정과 네트워크 통신

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

(10 10-simple-ajax 연구중...)

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의 말:

이 상황에서 React의 proxy 설정을 통해 브라우저가 이미지 파일에 접근할 수 있게 되는 원리를 단계별로 설명하겠습니다. 중요한 개념은 proxy 설정이 요청을 리다이렉트해서 React 앱이 백엔드 서버의 자원을 쉽게 사용할 수 있도록 돕는다는 점입니다.

1. 상황 분석

React 클라이언트 (localhost:3000)
- React 앱은 기본적으로 localhost:3000에서 실행됩니다.
- 브라우저가 React 앱에서 이미지 요청(/files/news/573556_495480_4444_v150.jpg)을 처리하려 하면, 기본적으로 이 경로를 localhost:3000에 있는 자원으로 간주하려 합니다. 하지만 localhost:3000에는 해당 파일이 없기 때문에 404 오류가 발생합니다.
백엔드 서버 (localhost:8080)
- localhost:8080 서버는 /files/news/ 경로에 대한 요청을 처리할 수 있으며, 실제로 PC의 파일 시스템에 저장된 이미지 파일을 반환할 수 있습니다.
- 백엔드 서버는 해당 경로를 적절히 설정하여, 클라이언트가 요청하는 이미지에 접근 가능합니다.

2. Proxy 설정의 동작 원리

React의 proxy 설정은 브라우저와 API 서버 간의 도메인 및 포트 차이를 투명하게 연결하는 역할을 합니다. 이를 통해 React 앱에서 발생하는 API 요청이나 리소스 요청을 프록시 서버가 대신 처리할 수 있습니다.

proxy 설정 코드 예시:

package.json 파일에 다음과 같이 설정합니다:

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

결과:

React 앱에서 fetch('/files/news/573556_495480_4444_v150.jpg') 또는 <img src="/files/news/573556_495480_4444_v150.jpg" /> 요청을 보냅니다.
React 개발 서버가 요청을 가로채고, proxy 설정을 확인합니다.
요청 경로를 localhost:8080으로 리다이렉트합니다.
즉, /files/news/573556_495480_4444_v150.jpg 요청은 자동으로 http://localhost:8080/files/news/573556_495480_4444_v150.jpg로 전달됩니다.
백엔드 서버(localhost:8080)는 해당 요청을 받아 실제 이미지 파일을 찾아 클라이언트(브라우저)로 반환합니다.

3. 요청과 응답의 흐름

요청(Request) 과정:

1. React 앱에서 다음과 같은 코드를 실행:

const imageUrl = "/files/news/573556_495480_4444_v150.jpg";
<img src={imageUrl} alt="news" />

2. 브라우저가 localhost:3000으로 요청을 보냄.

3. React 개발 서버가 proxy 설정을 확인.

4. 요청 경로 /files/news/...를 localhost:8080/files/news/...로 변경하여 백엔드 서버로 전달.

응답(Response) 과정:

localhost:8080 서버는 요청 경로(/files/news/...)에 해당하는 이미지 파일을 찾음.
- 서버 내부의 파일 시스템에서 파일을 찾아 반환.
- 예: /files/news/ 경로가 PC 내 /var/www/files/news/ 디렉토리를 가리키도록 설정됨.
백엔드 서버는 이미지 파일을 HTTP 응답으로 반환.
React 개발 서버(proxy)를 통해 브라우저로 이미지가 전달됨.
브라우저는 이미지를 화면에 렌더링.

4. 중요한 개념: 왜 React 앱에서 이 동작이 가능할까?

CORS 문제 해결
브라우저는 기본적으로 서로 다른 도메인이나 포트(예: 3000 → 8080) 간 요청을 차단합니다(CORS 정책).
Proxy 설정은 요청을 React 개발 서버가 대신 전달하기 때문에 브라우저는 이를 "같은 출처"에서 발생한 요청으로 간주합니다.
경로 재작성
Proxy 설정이 React 개발 서버에서 API나 정적 파일 요청을 가로채고, 이를 백엔드 서버로 전달하여 올바른 데이터를 반환하도록 돕습니다.
백엔드 서버의 역할
백엔드 서버는 PC 내 파일 시스템 경로와 /files/news/... 요청 경로를 매핑해 놓았기 때문에, 클라이언트가 요청한 이미지를 정확히 반환할 수 있습니다.

5. 요약

문제: React 앱에서 /files/news/... 이미지를 요청하면 기본적으로 localhost:3000에서 파일을 찾으려 하지만 파일이 없어 404 오류가 발생.
Proxy 설정: React 개발 서버에 proxy를 설정하면 /files/news/... 요청이 자동으로 localhost:8080/files/news/...로 리다이렉트.
백엔드 서버: localhost:8080 서버는 해당 경로를 처리하고 이미지 파일을 반환.
브라우저: React 개발 서버를 통해 반환된 이미지를 받아 화면에 렌더링.

이 과정을 통해 React 앱에서 localhost:8080 서버의 이미지를 출력할 수 있습니다.

추가적으로 궁금한 점이나 자세히 알고 싶은 부분이 있으면 말씀해 주세요! 😊

Q2.

나의 말:

그러면, 처음에 브라우저에서 이미지를 보여달라는 요청이 직접적으로 가장 먼저 들어오는 곳은, React 개발 서버 그 자체인가?

이미지를 보여달라는 요청에 대해서 처음부터 마지막 응답에 대한 내용이 브라우저에 출력될 때까지, 웹브라우저와 react 개발 서버, 그리고 Proxy 설정으로 지정한 서버 이렇게 셋 사이에서 데이터가 시작부터 끝까지 어떻게 흘러가는지, 명확하게 순서를 찍어가면서 알려줘. 잠깐이라도 거치는 부분도 놓치지 않고 알려줘.

A2.

ChatGPT의 말:

아주 좋은 질문입니다! 요청과 응답이 어떻게 흐르는지 정확히 이해하면, proxy 설정과 브라우저-React 개발 서버-백엔드 서버 간의 관계를 명확히 알 수 있습니다. 이제 이미지 요청이 시작에서 끝까지 어떻게 처리되는지를 단계별로 자세히 설명하겠습니다.

시나리오 정리

브라우저에서 React 앱을 실행 중이며, 브라우저는 이미지("/files/news/573556_495480_4444_v150.jpg")를 요청합니다.
React 앱은 proxy 설정을 통해 백엔드 서버(localhost:8080)에 있는 파일을 사용합니다.

요청 및 응답 흐름 순서 (단계별 분석)

1. 브라우저에서 이미지 요청

브라우저는 React 앱을 통해 <img src="/files/news/573556_495480_4444_v150.jpg" />를 렌더링하려고 시도합니다.
요청 대상: 브라우저는 기본적으로 src="/files/news/..."를 현재 React 앱(localhost:3000) 기준으로 요청합니다.
결과: 브라우저는 HTTP 요청을 보냅니다:

GET /files/news/573556_495480_4444_v150.jpg HTTP/1.1 
Host: localhost:3000

2. React 개발 서버가 요청을 수신

React 개발 서버 역할:
1. React 개발 서버는 proxy 설정을 확인합니다(proxy: "http://localhost:8080").
2. 요청 경로(/files/news/...)가 proxy 대상 경로에 해당하는지 판단.
처리 결과:
- 경로가 proxy 설정에 맞으면, 요청을 그대로 proxy 대상 서버로 전달합니다.
  이때 React 개발 서버는 요청을 브라우저에서 온 요청처럼 보이도록 포장해서 백엔드 서버로 전달합니다.
- React 개발 서버는 요청을 리다이렉트:

GET /files/news/573556_495480_4444_v150.jpg HTTP/1.1
Host: localhost:8080

3. Proxy 설정으로 지정된 서버(백엔드 서버)가 요청을 수신

백엔드 서버 역할:
1. 백엔드 서버는 /files/news/573556_495480_4444_v150.jpg 요청을 처리.
2. 서버는 이 요청 경로를 내부 파일 시스템의 경로와 매핑.
  - 예: /files/news/...가 실제로는 /var/www/files/news/...를 가리키도록 설정.
3. 요청된 이미지 파일을 파일 시스템에서 찾아 클라이언트로 반환.
처리 결과:
백엔드 서버는 이미지 데이터를 HTTP 응답으로 전달:

HTTP/1.1 200 OK
Content-Type: image/jpeg
Content-Length: <파일 크기>
<이미지 바이너리 데이터>

4. React 개발 서버가 백엔드 서버의 응답을 수신

React 개발 서버 역할:
1. 백엔드 서버로부터 받은 HTTP 응답(이미지 데이터)을 브라우저로 전달.
2. React 개발 서버는 응답을 수정하지 않고 단순히 브라우저로 전달.
처리 결과:
React 개발 서버는 백엔드 서버에서 받은 내용을 브라우저로 그대로 반환:

HTTP/1.1 200 OK
Content-Type: image/jpeg
Content-Length: <파일 크기>
<이미지 바이너리 데이터>

5. 브라우저가 최종적으로 응답을 수신

브라우저 역할:
1. React 개발 서버로부터 받은 이미지 데이터를 해석.
2. <img> 태그에 해당 이미지를 렌더링.
처리 결과: 브라우저에 이미지가 화면에 표시됩니다.

요청과 응답의 전체 흐름

아래는 데이터가 실제로 어떻게 흐르는지를 요약한 순서입니다:

브라우저
브라우저가 React 앱에 /files/news/... 이미지 요청을 보냄. (목적지: localhost:3000)
React 개발 서버
React 개발 서버가 요청을 수신하고 proxy 설정을 확인. 요청을 proxy 대상 서버(localhost:8080)로 리다이렉트.
백엔드 서버 (localhost:8080)
백엔드 서버가 요청을 받아 실제 이미지 파일을 찾고 HTTP 응답으로 이미지 데이터를 반환.
React 개발 서버
백엔드 서버로부터 받은 응답(이미지 데이터)을 브라우저로 전달.
브라우저
브라우저가 이미지 데이터를 수신하고 <img> 태그에 렌더링.

요청과 응답이 거치는 모든 주체

1. 브라우저
- React 앱의 <img> 태그에 따라 /files/news/... 요청 전송.
2. React 개발 서버
- 브라우저 요청을 가로채고 proxy 설정에 따라 요청을 백엔드 서버로 전달.
3. 백엔드 서버
- 파일 시스템에서 이미지 파일을 찾고 HTTP 응답으로 전달.
4. React 개발 서버
- 백엔드 서버로부터 받은 응답을 브라우저로 전달.
5. 브라우저
- 최종적으로 이미지를 수신하고 화면에 렌더링.

중요한 포인트

브라우저에서 처음 요청이 도착하는 곳은 React 개발 서버입니다.
React 개발 서버는 proxy 설정에 따라 요청을 백엔드 서버로 전달합니다.
응답 데이터도 React 개발 서버를 거쳐 브라우저로 전달됩니다.
브라우저는 React 개발 서버와 직접 통신할 뿐, 백엔드 서버와 직접 통신하지 않습니다.

추가적으로 더 궁금한 점이 있으면 편히 물어보세요! 😊

Q3.

나의 말:

React 개발 서버 역할:

React 개발 서버는 proxy 설정을 확인합니다(proxy: "http://localhost:8080").

요청 경로(/files/news/...)가 proxy 대상 경로에 해당하는지 판단.

여기에서, 요청경로가 proxy 대상 경로에 해당하는지 판단 이 말이 무슨 말인지 좀 더 자세하게 설명해줘.

A3.

ChatGPT의 말:

"요청 경로가 proxy 대상 경로에 해당하는지 판단"이라는 말은, React 개발 서버가 받은 요청을 보고 이 요청이 proxy 설정에 의해 리다이렉트되어야 하는지 확인하는 과정을 의미합니다. 이를 이해하려면 proxy 설정이 어떻게 동작하는지와 React 개발 서버의 역할을 조금 더 깊이 살펴볼 필요가 있습니다.

1. Proxy 설정을 React 개발 서버에서 사용하는 방식

React 개발 서버는 브라우저가 보내는 모든 요청을 가로채서, 요청이 React 앱의 정적 자원(예: HTML, CSS, JS 파일)을 위한 것인지, 또는 외부 서버(백엔드 API 등)로 전달해야 할 것인지 판단합니다.

proxy 설정은 React 개발 서버에게 "이 경로로 들어오는 요청은 React 앱의 자원이 아니라, 특정 서버(예: localhost:8080)로 보내야 한다"고 알려주는 규칙을 제공합니다.

proxy 설정 예시 (package.json):

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

이 설정은 React 개발 서버에게 "모든 요청을 기본적으로 localhost:8080으로 리다이렉트하라"고 지시합니다.

2. "경로가 proxy 대상 경로에 해당하는지 판단"의 의미

React 개발 서버는 브라우저로부터 받은 요청 경로가 proxy 설정에 따라 리다이렉트해야 할 요청인지 확인하는 작업을 수행합니다.

작동 과정

1. 브라우저에서 요청 수신 브라우저가 /files/news/573556_495480_4444_v150.jpg라는 경로로 요청을 보냅니다.

GET /files/news/573556_495480_4444_v150.jpg HTTP/1.1
Host: localhost:3000

2. 요청 경로 분석 React 개발 서버는 요청 경로(/files/news/573556_495480_4444_v150.jpg)를 확인하고, 이 요청이:

React 앱의 정적 자원(HTML, CSS, JS 등) 요청인지,
아니면 proxy 설정에 따라 외부 서버로 리다이렉트해야 할 요청인지 판단합니다.

3. proxy 설정 적용

proxy 설정이 "http://localhost:8080"로 되어 있으므로, /files/news/... 경로는 React 앱의 정적 자원이 아니라고 간주됩니다.
React 개발 서버는 이 요청을 **proxy 대상 서버(즉, localhost:8080)**로 전달해야 한다고 결정합니다.

3. 판단 기준

React 개발 서버가 요청 경로를 보고 "이 요청을 proxy 대상으로 리다이렉트할지"를 결정하는 기준은 다음과 같습니다:

정적 자원인지 확인
- React 앱의 빌드 결과물에 포함된 정적 자원(예: index.html, main.js, style.css)이라면 요청을 proxy 대상 서버로 전달하지 않고, React 개발 서버가 직접 응답을 처리합니다.
나머지 요청은 proxy 대상으로 전달
- React 앱에서 정적 자원이 아닌 요청(예: /files/news/..., /api/...)은 proxy 설정에 따라 백엔드 서버로 전달합니다.

예시:

요청 경로 /files/news/573556_495480_4444_v150.jpg:
정적 자원에 해당하지 않으므로 proxy 설정에 따라 localhost:8080/files/news/573556_495480_4444_v150.jpg로 리다이렉트.
요청 경로 /index.html 또는 /main.js:
React 앱의 정적 자원에 해당하므로 React 개발 서버가 직접 응답 처리.

4. Proxy 설정이 없을 때의 동작

만약 proxy 설정이 없다면, React 개발 서버는 모든 요청을 React 앱의 정적 자원으로 간주합니다.
이 경우:

/files/news/... 요청을 처리하려 하지만, React 앱의 정적 자원으로 /files/news/... 경로가 존재하지 않기 때문에 404 오류가 발생합니다.
proxy 설정이 없다면 React 개발 서버는 요청을 백엔드 서버로 전달하지 못합니다.

5. Proxy 설정을 적용했을 때의 동작

Proxy 설정이 적용된 경우:

React 개발 서버는 요청 경로(/files/news/...)가 React 앱의 자원이 아니라고 판단.
이 요청을 proxy 설정(http://localhost:8080)에 따라 백엔드 서버로 전달합니다.
백엔드 서버가 요청에 응답하고, 이 응답은 다시 React 개발 서버를 통해 브라우저로 전달됩니다.

6. 한눈에 보는 요청 판단 흐름

브라우저가 React 개발 서버(localhost:3000)로 요청을 보냄.
React 개발 서버가 요청 경로(/files/news/...)를 확인.
요청이 React 앱의 정적 자원(HTML, JS, CSS)이면:
- React 개발 서버가 직접 응답 처리.
요청이 정적 자원이 아니면:
- proxy 설정에 따라 요청을 백엔드 서버(localhost:8080)로 리다이렉트.

결론

"요청 경로가 proxy 대상 경로에 해당하는지 판단"이란, React 개발 서버가 요청이 React 앱의 정적 자원인지, 아니면 proxy 설정에 따라 리다이렉트해야 할 요청인지 구분하는 과정을 뜻합니다.

정적 자원이면 React 개발 서버가 직접 처리.
그렇지 않으면 proxy 설정에 따라 지정된 서버로 요청을 전달합니다.

이 과정이 proxy 설정의 핵심이며, 이를 통해 React 앱에서 외부 API나 리소스에 쉽게 접근할 수 있습니다. 😊

Q4.

나의 말:

그렇다면, 해당 설정 외에 proxy 설정값이 있다는 것인가? 그런 설정이 있다면, 단순히 정적자원인가 아닌가 말고도, proxy 서버로 요청을 처리할지 말지를 판단할 수 있다는 것인가? 자세하게 설명은 하지 말고, 내가 물어본 대답에 대해서만 말해줬으면 해.

A4.

ChatGPT의 말:

네, proxy 설정은 단순히 정적 자원인지 아닌지를 판단하는 것 외에도, 추가적인 조건에 따라 요청을 proxy 서버로 보낼지 말지를 결정할 수 있는 방법이 있습니다.

고급 proxy 설정: http-proxy-middleware 같은 패키지를 사용하면 경로, 요청 헤더, 요청 메서드 등의 조건에 따라 proxy 동작을 세부적으로 제어할 수 있습니다.
조건부 요청 처리: 특정 경로나 패턴(예: /api/*, /files/*)에만 proxy를 적용하거나, 조건을 만족하지 않는 요청은 React 개발 서버에서 처리할 수 있습니다.

이런 설정을 통해 요청의 처리를 더욱 세밀하게 조정할 수 있습니다. 😊

Q5.

나의 말:

그래 알려줘서 고마워. 마지막으로 궁금한 것이 있어. 내가 제시한 시나리오대로 네트워크 통신이 이루어진다면, proxy로 설정된 백엔드 서버와, 웹브라우저로 접근한 클라이언트 사이에 직접적인 통신은 없는 건가?

A5.

ChatGPT의 말:

정확히 맞습니다. 웹브라우저와 백엔드 서버(proxy로 설정된 서버) 간에는 직접적인 통신은 없습니다.

이유

Proxy를 통한 중개
브라우저는 모든 요청을 React 개발 서버(localhost:3000)로 보냅니다.
React 개발 서버가 proxy 설정에 따라 해당 요청을 백엔드 서버(localhost:8080)로 전달합니다.
브라우저는 React 개발 서버와만 통신
브라우저 입장에서 보면, 요청은 항상 React 개발 서버에서 처리되거나 응답이 오는 것처럼 보입니다. 백엔드 서버는 브라우저와 직접 소통하지 않고 React 개발 서버를 통해 간접적으로 소통합니다.
Proxy의 역할
React 개발 서버가 백엔드 서버와 브라우저 간의 "중개자" 역할을 하여, 브라우저와 백엔드 서버 간의 직접적인 통신을 차단합니다.

결론

브라우저와 백엔드 서버는 직접적으로 통신하지 않고, React 개발 서버가 요청과 응답을 중개합니다. Proxy 설정 덕분에 백엔드 서버와의 간접적인 통신이 이루어지는 구조입니다. 😊

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

참조변수.current (0)	2024.12.02
React에서의 key 값 (0)	2024.12.02
참조변수, 연속 querySelector()? (0)	2024.12.02
표현식과 문장의 차이 (0)	2024.11.28
React JSX 에서 ; 의 작성 (1)	2024.11.28

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

Dr.Mlem Blog

Dr.Mlem knows nothing but borking

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

Today :
Yesterday :

Dr.Mlem Blog