SpringBoot, Vue 의 포트(port) 역할

• 전체 기작
• 5713포트 역할
• 8080포트 역할

 

---

 

 

비전공자 입장에서 웹페이지를 만들면서, 주소 뉘앙스의 어떤 것이라고 알고있던 port...

그동안 JSP로 웹페이지를 만들다가, 취업 후  vue프로젝트를 진행하게 되면서

spring boot는 8080, vue는 5173포트를 기본으로 사용하며

작성한 코드를 실행할 때 localhost:8080/ 으로 접속하면 .html파일은 불러오지만 

.vue 파일은 찾지 못해 계속 에러나던 게

localhost:5173으로 접속하면 .vue, .html 모두 불러오는 것을 보고 ...

port란 무엇인가.에 대해 생각해보게 됐다.

 

오늘은 아침부터 gpt를 괴롭히다가, 이 질문은 gemini에게 해보았다.

 

 

---

 

PORT 란,

 

컴퓨터 안의 특정 프로그램을 찾아가는 문  번호 라고 한다.

컴퓨터 한 대에도 웹 서버, 게임 서버, 메신저 등 여러 가지 프로그램이 동시에 실행될 수 있고

외부와 통신할 때 어떤 프로그램과 대화할지 구분하기 위해 port 번호를 부여한다고 한다.

 

기본적으로 Spring Boot는 8080번을 사용하고, Vue는 5173번을 사용한다.

 

▷ SpringBoot는 클라이언트(Vue)의 요청을 받아 데이터를 조회하거나 저장한다.

그래서 8080번 port를 열어두고 클라이언트의 요청을 기다린다.

 

▷ Vue 는 UI를 구성하고 사용자와의 상호작용을 처리한다.

클릭이나 입력 등의 동작을 감지하고 이를 Spring Boot에게 전달하거나,

Spring Boot에게 받은 데이터를 화면에 양식에 맞게 출력한다.

그래서 5173번 port를 열어두고 사용자의 웹 브라우저와 통신한다.

 

---

 

 

전체 기작은 이렇다.

 

1. 사용자가 웹 브라우저를 통해 localhost:5173에 접속한다.

2. Vue가 Spring Boot 서버의 특정 주소 (예: http://localhost:8080/main/items) 에게 데이터를 요청한다.

    이때 Vue는 Spring Boot가 열어둔 8080번 포트를 통해 요청을 보낸다.

3. Spring Boot가 요청을 처리하고 응답한다.

    DB 쿼리 및 비즈니스 로직 수행 
    -> 처리 결과를 JSON(JavaScript Object Notation) 같은 형식의 데이터로 만들어서 Vue에게 보냄

4. Vue가 응답을 받아 화면에 표시한다.

    SpringBoot로부터 받은 JSON데이터를 파싱 -> 화면에 동적으로 업데이트

 

 

그런데 !

 

8080 port로 접속했을 때 .vue파일이 직접 보이지 않고 .html같은 정적 파일만 보인다.

.vue파일은 웹 브라우저가 바로 이해하고 실행할 수 있는 파일이 아니기 때문이다.

웹 브라우저는 Vue전용 문법을 이해하지 못한다. 브라우저는 HTML, CSS, JavaScript 파일만 직접 이해한다.

따라서 Vue파일을 웹브라우저가 이해할 수 있도록 변환해야 한다. 이것이 바로 빌드 build!!

 

 

 

 

● 5173 포트(Vue 개발 서버)의 역할

 

- 즉석 빌드 (On-the-fly Compilation)

 : .vue 파일에 변경이 있을 때마다 실시간으로 빌드하여 개발자가 코드를 저장하자마자 브라우저에서 확인 가능

 

- 파일 서빙(Serving Files)

 : 변환된 HTML, CSS, JS 파일들을 웹 브라우저에게 제공

 

그래서 5173 포트로 접속하면 

→ 개발 서버가 .vue 파일을 알아서 빌드하고 처리하기 때문에

→  모든 Vue 컴포넌트와 화면이 정상적으로 보인다.

→  .vue파일을 브라우저에게 보내는 게 아니라 빌드된 결과물을 보낸다.

 

 

 

● 8080 포트(SpringBoot개발 서버)의 역할

 

  : 백엔드 로직을 처리하는 서버로 데이터베이스와 통신하고 비즈니스 로직을 수행하며 클라이언트(프론트엔드)에게 API형태로 데이터를 제공하는 역할

 

 : .vue파일을 직접 빌드하거나 해석하는 기능은 없고  HTML, CSS, JS, 이미지 등 정적 파일을 직접 서빙할 수는 있다.

 

 : src/main/resources/static ,

   src/main/resources/public,

   src/main/resources/META-INF/resources 등의 경로에 있는

   HTML, CSS, JS, image 등을 정적자원으로 인식하고 클라이언트에게 직접 제공한다.

 

 ex) src/main/resources/static/index.html 있을 경우 http://localhost:8080/ 으로 접근 시 index.html 파일이 보인다.

 

 

 

정리

 

->  개발자가 Vue 프로젝트를 npm run build 를 통해 빌드하면

->  .vue 파일과 관련된 자원들을 웹 브라우저가 이해할 수 있는 정적 파일의 형태로 변환하고 최적화하여

->  dist 폴더에 저장되고

-> Spring Boot 의 src/main/resources/static 폴더게 복사되어서

->  8080포트로 접속했을 때 확인 가능하다.