[MEMO APP] Compression

 

👨‍💻 Compression 미들웨어 설치

 

📌 Compression이란

내가 운영중인 웹서비스의  응답속도를 빠르게 하는 방법이 무엇이 있을까요?

웹서버와 WAS를 함께사용해서 웹서버의 설정으로 향상시키는 방법도 있겠지만, 오늘은 Javascript의 compression 미들웨어를 통해 향상시키는 방법에 대하여 같이 학습하고 이번 토이프로젝트에 적용시켜 보겠습니다.

 

compression은 gzip압축을 이용해 응답속도를 향상시켜주는 미들웨어입니다. 

 

(앞으로 설명드릴 내용은 아래의 블로그를 참고및 발췌하여 작성한 내용임을 알려드립니다.)

https://taetaetae.github.io/2018/04/01/apache-gzip/

⚡ gzip이란 무엇인가..?

• gzip이란 파일 압축에 쓰이는 응용 소프트웨어로 GNU zip의 줄임말이라고 합니다.
  ( 참고: https://ko.wikipedia.org/wiki/Gzip )

이를 사용하기 위해서는 브라우저에서 gzip을 지원해주어야 하는데 https://caniuse.com/#search=gzip 를들어가 확인해보면 현재 거의 대부분의 브라우저들이 gzip을 지원해 주고있습니다.

 

⚡ gzip의 데이터 흐름

gzip 사용전

1. 브라우저가 서버측에 /index.html을 요청한다.
2. 서버는 Request를 해석한다.
3. Response에 요청한 내용을 담아 보낸다.
4. Response를 기다렸다가 브라우저에 보여준다. (100kb)

gzip 사용후

1. 브라우저가 서버측에 /index.html을 요청한다.
2. 서버는 Request를 해석한다.
3. Response에 요청한 내용을 담아 보낸다. 여기서 해당 내용을 압축하는 과정이 추가가 된다.
4. Response header에 압축이 되어있다는 정보를 확인후 브라우저는 해당 내용을 받고(10kb), 압축을 해제한 후 사용자에게 보여준다.

결론적으로 말씀드리자면, gzip을 이용하면 서버가 사용자에게 응답하는 메시지를 압축해서 보내주기 때문에 네트워크 비용(전송되는 데이터양)을 줄일 수 있어 응답이 빨라진다는 이야기입니다.

 

⚡ gzip은 만능인가?(무조건 사용?)

SW개발에 있어서 무조건적인 해답은 없습니다. 가장 상황에 적합한 Best Choice만 있을뿐이지 Best solution은 없다고 생각합니다. 

 

물론 gzip을 이용하면 네트워크 비용이 절약이되어 응답속도가 빨라진다는 장점이 있겠지만, 반대로 클라이언트 입장에서는 받은 데이터를 다시 해독하는 과정이 필요해짐에 따라 CPU를 사용하게되어 오히려 랜더링이 늦어지는 상황이 발생할수 있습니다.

 

결론적으로 상황에따라 사용전과 사용후의 성능을 비교해서 사용하는것이 BEST WAY다 라고 말씀드릴수 있을것 같아요!

📌 Compression 설치 및 적용

( 이제부터 작성되는 내용은 아래의 사이트를 참고하여 진행됨을 말씀드립니다. )

https://www.tutorialspoint.com/koajs/koajs_compression.htm

 

위의 링크를 타고 들어가면 가장 상단설명에 이런 글귀가 보입니다.

번역 :

Compression은 우리의 사이트의 대역폭과 속도를 절약하는데 간단하고 효율적인 방법입니다. 이것은 오직 최신 브라우저와만 호환이 되어지며 만약 우리의 유저가 오래된 브라우저를 사용할때는 이를 주의해서 사용해야합니다.

 

하지만, 위에서 설명했듯이 대부분의 브라우저가 gzip을 지원해주고 있음으로 크게 걱정하실필요는 없을것 같습니다.

( 아마.. 그렇겠죠? )

 

그럼 우리의 프로젝트에 설치를 진행해볼게요. 아래의 사진처럼 yarn add koa-compression을 이용해 설치해 주세요.

예시코드를 살펴보겠습니다. 예제코드는 아래의 링크를 참고하겠습니다.

https://github.com/koajs/compress

(하이라이트 부분을 볼게요.)

위의 소스에서 compress 안에 옵션들에 대해서 좀 알아보도록 할게요.

filter : response의 constent type을 확인하여 압축여부를 결정하는 선택적 기능입니다. 디폴트로는 압축기능을 사용합니다. threshold : 압축시킬 response 메시지의 byte단위 Minimum사이즈입니다. 디폴트로는 1024byte(=1kb)를 사용합니다. flush : 압축을위해 사용되는 부분입니다. 해당 소스와같이 작성해주시면 됩니다.

 

위의 사진을 보면 compress를 가져와서 사용하는것을 볼 수 있습니다. 이상하게도 아래에 zlib은 설치를 한적이 없는데 불러오고있는 모습을 볼 수 있는데 역시나 소스코드를 실행하면 없는 라이브러리라는 오류가 나옵니다.

 

고로 zlib가 무엇인지 알아보고 설치를 해주도록 할게요.

 

⚡ zlib란?

zlib 은 gzip 등으로 압축된 파일을 읽고 쓰기 위해 꼭 필요한 라이브러리입니다. MRTG 를 이용한 트래픽모니터링 홈페이지를 구축할 때에 반드시 필요하다고 하네요.

 

yarn add zlib 를 이용해 설치를 해줍니다.

아까전의 예제 소스를 우리 프로젝트에 추가해줄게요.

(src폴더 안에 index.js를 열어주세요.)

위와같이 소스코드를 추가해주었습니다.

이제 테스트를 진행해 볼껀데요, 지금 우리가 기존에 작성한 코드는 문자만 전송해주는 간단한 응답이다보니 이루가 threshold로 지정한 크기보다 작은 데이터가 클라이언트에게 보내집니다.

 

그래서 우리가 이번 프로젝트 포스팅 초반에 만들어주었던 react 폴더(front)의 index.html을 전송해주는 소스코드를 작성해 주도록 하겠습니다.

 

일단 외부 특정파일(html과 같은)을 연결해주기 위해서는 몇가지 모듈을 설치해 주셔야 합니다.

아래의 3가지를 설치해 주셔야 하는데요.

koa-static은 정적파일 즉 사진이나 html파일과 같은 고정된 파일들을 사용하기 위한 모듈입니다.

먼저 설치를 진행할게요.

yarn add koa-static

 

설치후 src/index.js 의 상단에 koa-static 과 path 모듈을 불러오겠습니다.

(path 모듈은 node에서 기본적으로 지원하는 모듈이라 별다른 설치가 필요 없답니다 ^^)

path 와 static을 이용해서 우리는 정적파일들이 모여있는 폴더에 클라이언트가 접근을 허용해주는 소스코드를 작성해 주겠습니다.

(front 작업에서 build 파일을 만들어줄겁니다.)

이렇게 설정해 줌으로서 우리는 클라이언트에게 build폴더안의 파일에 접근을 가능하게 해주었습니다.

 

이제 이 폴더안에 index.js 파일을 클라이언트에게 보내주는 부분을 작성할껀데요. 이렇게 파일을 전송하기 위해서는 koa-send라는 모듈을 설치해 주셔야합니다. 

yarn add koa-send

그리고 src/index.js 상단에 send를 불러와 줄게요.

그다음 이 send를 이용해 클라이언트에게 index.html을 보내주겠습니다.

이렇게 작성한 후 front 폴더에서 build 폴더를 만들어 주도록 하겠습니다.

 

VScode로 이전에 우리가 만든 front 폴더를 열고 콘솔창에 yarn build 를 해주겠습니다.

(자동으로 build 폴더가 만들어지는데 이 이유는 front에서 설명해 주겠습니다.)

이제 테스트를 진행해 보겠습니다.

 

처음으로는 compress를 사용하지 않았을때 시간입니다.

(koa에서는 미들웨어 설정 위치가 중요합니다. 제가 처음에 compress위치를 잘못 넣어줬어요 ㅜㅜ 아래 사진위치로 옴겨주시기 바랍니다.)

이번에는 compress를 사용했을때 시간입니다.

자 속도가 확연하게 줄여진게 보이시나요?

 

오늘은 이렇게 compress를 통해서 네트워크 전송량을 절약하는 방법을 배우고 적용해 보았습니다.

수고하셨어요!

 

다음에는 메모장데이터를 DB에 저장하기위한 작업을 진행해 주겠습니다.