[Troubleshooting] http 버전 변경을 통한 문제점 해결 - Voda Project

이전 포스팅에서 Nginx 설정 파일에 http 2.0으로 설정되어있는데 기존에는 http 1.1을 사용하고 있었다. 

필자의 팀원들은 프로젝트를 진행할 때 백엔드, 프론트 포트 8080, 8081로 설정을 해서 localhost에서 api 통신을 테스트하는 작업을 진행하였다. 해당 테스트를 진행할 때 속도 문제나 에러 사항은 발생하지 않았다. 하지만 해당 프로젝트가 배포가 되고 http 통신을 했을 때 다음과 같은 문제점이 발생하였다. 

 

서버에서 빌드 및 배포를 했을 때 즉시 라우팅 되지 않는다.

 

예를 들면, 로컬 호스트에서 소셜 로그인을 진행하면 DB 조회를 통해 회원인지를 체크한다. 만약 회원이 아니라면 회원가입 페이지로 포워딩된다. 하지만 배포 환경에서는 회원 가입 페이지로 갈 때도 있고 가지 않을 때도 있다는 뜻이다.

 

다시 말해, 포워딩 되지 않았을 때 빈 화면이 사용자에게 보여지며 페이지의 이동은 그 후에 일어나지 않는다. 

이러한 문제점을 해결하기 위해 많은 구글링을 하였지만 해답을 찾지 못했다. 

 

22년 하반기 CS 스터디를 진행하면서 네트워크 과목을 담당하였는데, 그때 HTTP 프로토콜을 공부했던 적이 있었다. HTTP에도 버전이 "1.0, 1.1, 2.0, 3.0"에 대한 차이점이 존재하였고 속도 개선이나 통신 방식의 변화를 느낄 수 있었다. 

 

명확하진 않지만 그때의 기억을 떠올렸을 때, HTTP 프로토콜이 영향을 줄 수도 있겠다는 생각이 들었다. 

 

왜냐하면, 배포 파일들은 이미 정적으로 존재하며, 라우팅이 될 때도 있고 안될 때도 있다는 것은 코드 상의 문제가 아닌 네트워크의 문제라고 판단됐던 것이다. 

 

   listen 443 ssl http2; 

 

혹시나 하는 마음에 Nginx의 http 버전을 2로 변경해주었더니, 5시간 동안 헤맸던 문제점이 발생하지 않았다. 

 

 

필자의 생각은 다음과 같다. 

 

1. HTTP/1.1에서는 브라우저가 요청을 보내면, 서버는 응답을 보내기 전까지 연결을 유지하고 있어야 한다. 이 때문에 브라우저는 서버로부터 응답을 받을 때까지 아무것도 표시할 수 없고, 빈 화면이 표시된다. 

 

2. Vue나 React와 같은 프론트엔드 라이브러리에서 사용하는 상태 관리 라이브러리인 Vuex나 Redux를 사용할 때, 데이터를 비동기적으로 로딩하는 경우 상태가 변경되지 않아 빈 화면이 표시될 수 있다. 

 

3. 네트워크 성능이 좋지않아, 성능 개선이 필요로 한다. 

 

 

 

HTTP/1.1과 HTTP/2는 둘 다 웹에서 데이터를 전송하기 위한 프로토콜이지만 둘 간에는 몇 가지 차이점이 있다. 

 

 

1. 여러 요청 처리 방식: HTTP/1.1은 여러 요청에 대해 동시에 하나씩 요청하고 응답을 받지만 HTTP/2는 하나의 커넥션을 통해 여러 요청을 병렬로 전송하고 응답을 받는다. 

 

2. 헤더 압축: HTTP/1.1은 모든 요청과 응답에 대한 헤더 정보를 전송한다. 이에 비해 HTTP/2는 헤더 정보를 압축하여 전송한다. 이로 인해 더 적은 대역폭을 사용하고 네트워크 성능을 향상시킨다. 

 

3. 서버 푸시: HTTP/2는 클라이언트 요청에 대한 응답으로 이미지, 스크립트 등을 전송할 때, 클라이언트 요청에 대한 응답으로 이미지, 스크립트 등을 미리 전송하여 클라이언트의 요청에 대한 대기 시간을 줄일 수 있다. 

 

 

이러한 특징들을 학습하고나니 http 버전에 따른 실행 속도가 향상될 수 있구나를 느꼈고, 5시간의 무지성 삽질보단 과거 학습했던 내용을 다시 떠올리며 차근차근 생각해보는 것이 더 도움이 될때도 있다는 것을 느꼈다.