반응형

https://k6.io/

설치(mac)

brew install k6

기본 테스트 스크립트 샘플

# filename: script.js
import http from 'k6/http';
import { sleep } from 'k6';

export default function () {
  http.get('https://test.k6.io');
  sleep(1);
}

기본 실행 방법

k6 run script.js

VU (Virtual User) 추가 실행

k6 run --vus 10 --duration 30s script.js

--vus : 동시접속자를 10명으로 유지
--duration : 30초 동안 vus 수를 유지 호출

옵션 vu, duration을 소스에 추가해서 실행

import http from 'k6/http';
import { sleep } from 'k6';
export const options = {
  vus: 10,
  duration: '30s',
};
export default function () {
  http.get('http://test.k6.io');
  sleep(1);
}

vu를 원하는 시간만큼 조절해서 사용 가능

import http from 'k6/http';
import { check, sleep } from 'k6';

export const options = {
  stages: [
    { duration: '30s', target: 20 },
    { duration: '1m30s', target: 10 },
    { duration: '20s', target: 0 },
  ],
};

export default function () {
  const res = http.get('https://httpbin.org/');
  check(res, { 'status was 200': (r) => r.status == 200 });
  sleep(1);
}

테스트 결과 설명

 k6 run stages.js                        

          /\      |‾‾| /‾‾/   /‾‾/   
     /\  /  \     |  |/  /   /  /    
    /  \/    \    |     (   /   ‾‾\  
   /          \   |  |\  \ |  (‾)  | 
  / __________ \  |__| \__\ \_____/ .io

  execution: local
     script: stages.js
     output: -

  scenarios: (100.00%) 1 scenario, 20 max VUs, 2m50s max duration (incl. graceful stop):
           * default: Up to 20 looping VUs for 2m20s over 3 stages (gracefulRampDown: 30s, gracefulStop: 30s)


running (2m20.2s), 00/20 VUs, 1473 complete and 0 interrupted iterations
default ✓ [======================================] 00/20 VUs  2m20s

     ✓ status was 200

     checks.........................: 100.00% ✓ 1473      ✗ 0   
     data_received..................: 15 MB   104 kB/s
     data_sent......................: 137 kB  974 B/s
     http_req_blocked...............: avg=8.56ms   min=0s       med=1µs      max=763.5ms  p(90)=2µs      p(95)=4µs     
     http_req_connecting............: avg=2.78ms   min=0s       med=0s       max=232.77ms p(90)=0s       p(95)=0s      
     http_req_duration..............: avg=224.38ms min=190.95ms med=201.72ms max=961.94ms p(90)=236.09ms p(95)=351.89ms
       { expected_response:true }...: avg=224.38ms min=190.95ms med=201.72ms max=961.94ms p(90)=236.09ms p(95)=351.89ms
     http_req_failed................: 0.00%   ✓ 0         ✗ 1473
     http_req_receiving.............: avg=165.03µs min=43µs     med=162µs    max=1.75ms   p(90)=222µs    p(95)=236.39µs
     http_req_sending...............: avg=145.88µs min=31µs     med=140µs    max=1.39ms   p(90)=218µs    p(95)=241µs   
     http_req_tls_handshaking.......: avg=5.72ms   min=0s       med=0s       max=510.91ms p(90)=0s       p(95)=0s      
     http_req_waiting...............: avg=224.06ms min=190.72ms med=201.37ms max=961.59ms p(90)=235.76ms p(95)=351.55ms
     http_reqs......................: 1473    10.504156/s
     iteration_duration.............: avg=1.23s    min=1.19s    med=1.2s     max=1.96s    p(90)=1.24s    p(95)=1.39s   
     iterations.....................: 1473    10.504156/s
     vus............................: 1       min=1       max=20
     vus_max........................: 20      min=20      max=20
  • vus — 활성 가상 사용자 수
  • vus_max — 테스트에 할당 된 최대 가상 사용자
  • iterations— default함수가 호출 된 총 횟수
  • iteration_duration— default함수 를 실행하는 데 걸린 총 시간
  • dropped_iterations— iterations시작할 수없는 수
  • data_received — 수신 된 데이터의 양
  • data_sent — 전송 된 데이터 양
  • checks — 성공적인 검사 비율 (나중에 설명)
  • http_reqs — k6에 의해 생성 된 총 요청
  • http_req_blocked — 요청을 시작하기 전에 사용 가능한 TCP 연결을 기다리는 데 소요 된 시간
  • http_req_connecting — TCP 연결 설정에 소요 된 시간
  • http_req_tls_handshaking — TLS 핸드 쉐이킹에 소요 된 시간
  • http_req_sending — 데이터 전송에 소요 된 시간
  • http_req_waiting — 원격 호스트의 응답을 기다리는 데 소요 된 시간
  • http_req_receiving — 데이터 수신에 소요 된 시간
  • http_req_duration— 요청에 대한 총 시간. http_req_sending+ http_req_waiting+를 기준으로 계산됩니다.http_req_receiving.
반응형
블로그 이미지

BitSense

뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

댓글을 달아 주세요

반응형

SvelteJS 사용 이유?

빠르다니깐, 궁금해서~! 그런데 모르겠다. react, vue, svelte 모두 빌드한 js 소스를 서버에 올리고 다운로드 받아서 사용하는 진짜 프론트엔드 사이드 스크립트다. 중간의 내용이야 어찌저찌 해서 팩키징 결과물이 조금씩 틀려지기는 하겠지만, 그렇다고 속도 측면은 잘 모르겠다.  react는 안써보고, vue랑 별반 차이가... 그냥 빠르다니깐.. 그런가? 하는데.. 알아서들 참조하시고~

아직 vite, rollup 차이를 구분 못하고, 실무에 sveltejs를 적용해 보면서, 맨땅에 헤딩하는 심정으로 진행하면서 실무에 필요한 내용 중에 빠져 있거나, 샘플에서 커스터마이징이 필요한 내용들을 정리해서 올려 보겠다.

typescript를 사용하는 이유?

정형화된 틀에 맞춰보려고 하는데, 생각보다 쉽지 않다. typescript에서 제일 중요한 것은 받거나 보낼 데이터 뭉치에 대한 선언(type)이다. 이런 데이터를 받겠으니, 이런 포맷으로 주세요~~. 그런데.. 이건 디비에 넣을때나 중요한 거지, 막상 실무에서는 any만 열심히 쓴다. 특히 프론트에서는 더더욱 그렇더라. basic, php를 먼저 다룬 개발자로서 부정형 데이터에 대한 자유도를 놓칠 수 없더라. 물론 이것도 개인차라.. 알아서들 잘~ ^^

HTML 에디터 - QUILL 샘플

참조사이트: https://svelte.dev/repl/e2bbe94abb19419892442729752ee308?version=3.19.1 

 

Quill Demo • REPL • Svelte

 

svelte.dev

몇 안되는 주요 샘플코드이다. svelte 소스들이 대부분 보여주기식인 경우가 많아서, 이 소스도 안타깝게 보여주기만 한다. "에디터 이렇게 연결할 수 있다~!!" 더욱이 quill 을 잘 모른다. vue에서는 ckeditor를 주로 사용해서... 일단 있으니 감사하면서 사용했고, 에디터에 등록한 데이터를 가져오는 방법을 아래에 추가함

// quill 설치 (^1.3.7)
yarn add quill

// 에디터에서 소스 가져오기
<script lang="ts">

....

  let text
  let html
  
  onMount(async () => {
    const { default: Quill } = await import("quill");
	
    let quill = new Quill(editor, {
      modules: {
        toolbar: toolbarOptions
      },
      theme: "snow",
      placeholder: "Write your story..."
    });
 
    // 에디터 데이터 수집 소스
    quill.on('text-change', function() {
      text = quill.getContents()     // 에디터에 사용된 구조 데이터
      html = quill.root.innerHTML    // html 결과물
    })
  })
  
....

</script>

SEO를 적용할 수 있다고?

물론 아니다. 처음에는 나도 깜빡 속았다. 요새 구글 로봇이 js도 읽는다고 하지만, SSR에서 강제로 꽂아 주는 것이 속이 편하다. 단지, 백엔드 개발자인 나는 자주 SEO 태그를 멀 넣어야 하는지 고민이다. 나같은 분들에게는 좋은 샘플이 될 거 같아서 가져와 봤다.

참조 페이지 : https://svelte.dev/repl/ffd783c9b8e54d97b6b7cac6eadace42?version=3.49.0 

 

Including SEO metadata in Svelte • REPL • Svelte

 

svelte.dev

위 샘플 소스에 대한 결과물이다. 잘만 정리하면 내가 원하는 데이터만 잡아서 SSR 단에서 꽂아 주면 될 거 같다.

오늘은 이 정도로 정리해 봤다.

다음은 서버 스크립트와 연동을 얘기해 볼까? 참고로 현재 sveltejs 와 연동 중인 언어는 python + flask 를 사용 중이다.

오늘도 좋은 하루 보내시길~

반응형
블로그 이미지

BitSense

뷰파인더로 보는 프로그래머의 세상 페이스북 @bitsense 트위터 @picory 스카이프 picory MSN drawhalf@dreamwiz.com

댓글을 달아 주세요