• Heap-Tracker는 유저가 입력한 자바스크립트 코드의 힙 메모리 사용량을 차트로 시각화한 웹 애플리케이션입니다.
• 최대, 최소 힙 메모리 사용량 및 런타임 시간 등 여러 정보를 차트와 함께 제공합니다.

• Heap Tracker 시연 영상

• Preview

• 기능 및 작업 기여도

• Features

• Challenges

  • 1. 메모리 사용량은 어떻게 측정하는걸까?
    • 1-1. Node.js 환경에서 V8 엔진의 메모리 관리
    • 1-2. Node.js 메서드를 사용한 Heap 메모리 측정
  • 2. 사용자 코드를 실행하면서 메모리를 측정하는법?
    • 2-1. 메모리 측정을 위한 아이디어 비교
    • 2-2. 추상 구문 트리를 사용한 사용자 코드 분석
    • 2-3. 런타임 중 사용자 코드 실행방식에 VM 사용
  • 3. 메모리 측정값 차트로 표현
    • 3-1. canvasAPI를 사용한 차트 구현
    • 3-2. 차트 동적 애니메이션 구현
  • 4. 일렉트론을 선택한 이유
    • 4-1. 메모리 측정을 위해 필요한 Node.js
    • 4-2. 일렉트론 vs Node.js 서버 환경
  • 5. 차트의 패턴 및 상관 관계 파악을 위한 UI/UX 고민
    • 5-1. 세부 정보 표현을 위한 팝업 윈도우 생성
    • 5-2. 사용자의 경험과 기호를 위한 Color Theme
    • 5-3. 데이터 가독성을 위한 단위 변환 기능
  • 6. 차트 클래스를 개선방향
    • 6-1. SOLID 원칙으로 차트 클래스 구현 확인
    • 6-2. useCanvas 커스텀 훅 만들기

• Schedule

• Tech Stacks

• Member

기본 화면	메모리 측정 후 차트 표현 화면

• 메모리 측정을 위한 사용자 코드를 함수 코드에 입력합니다.
• 함수 실행 코드에 작성한 함수에 매개변수를 추가하여 입력합니다.
• 실행 버튼을 눌러 코드를 실행합니다.
• 코드가 실행되면 아래 실행 결과창에 결과가 출력됩니다. 실행 오류가 난다면 빨간글씨로 출력됩니다.
• 코드 실행이 완료되었으면 측정된 메모리의 기본 정보들(함수실행 시간, 사용된 메모리, 측정 객체의 갯수)이 우측에 출력됩니다.
• 메모리 측정 결과를 Chart Result의 토글 버튼을 통해 bytes, us(micro seconds) 와 Kilo bytes, ms(milli seconds) 로 변경할 수 있습니다.
• Chart 아래의 시작, 일시정지, 정지 버튼으로 차트를 동적 애니메이션으로 동작합니다.
• 차트의 요소에 마우스 포인터를 가져가 해당 요소의 세부 정보를 확인할 수 있습니다.
• 차트 우측 상단의 컬러 팔레트를 도구를 통해 차트 Liner과 bar의 색을 변경할 수 있습니다.
• 중앙 상단의 컬러테마 콤보박스 컨트롤을 통해 애플리케이션의 Color Theme를 변경할 수있습니다.

Node.js 환경에서 V8 엔진이 관리하는 메모리는 크게 Stack과 Heap으로 나뉠 수 있습니다.

출처 : 🚀 Visualizing memory management in V8 Engine (JavaScript, Node.js, Deno, WebAssembly)

Stack과 Heap의 메모리 성격으로 보아 사용자의 코드가 실행되고 수행되는 과정에서 동적으로 생성되는 메모리를 측정하고 싶은 우리의 목표에는 정적데이터가 저장되는 Stack이 아닌 동적 데이터의 저장과 Garbage Collection이 수행되는 Heap 메모리 영역이라는 것을 알게 되었습니다.

메모리 측정 함수를 실행하는 타이밍에 대한 아이디어는 2개가 있었습니다. 코드를 실행과 동시에 setInterval을 활용하여 반복적으로 process.momoryUsage()를 실행시키는 방법 그리고 사용자 코드에 process.momoryUsage()를 삽입하여 사용자 코드를 재생성 후 실행시키는 방법이었습니다.

메모리가 생성되는 객체 생성, 함수 실행, 각 내부 객체의 매서드 사용 등 의미 있는 시점에 메모리 사용량을 측정하기 위해서 사용자 코드에 메모리 측정 함수를 삽입하는 방법을 선택하게 되었습니다.

사용자 코드에 메모리 측정함수를 삽입하는 방법은 String 매서드를 이용하면 됩니다. 정말 중요한 것은 코드의 어느 위치에 메모리 측정함수를 삽입할 것인가에 대한 문제였습니다.

먼저 Javascript의 주요 매서드, 연산자, 변수 선언들을 찾아 해당 코드 앞에 삽입하여 실행시키는 간단한 방법을 구상했습니다. 하지만 저희가 공부를 하면서 사용했던 간단한 알고리즘 코드의 편집 시도에서도 예외처리 해야 할 요소들이 너무 많았고 화살표 함수와 Map, Array, String과 같은 주요 표준 내장 객체의 예외처리가 어려웠습니다. Javascript 코드를 분석하기 위해 많은 조사를 하는 도중 AST 형식에 알게 되었고 학습을 통해 우리 프로젝트에 응용할 수 있을지 검토하게 되었습니다.

AST(Abstract Syntax Tree)에 대해서 알아보자.

AST를 구현한 acorn 이라는 Open Source Library를 사용하여 사용자 코드를 파싱한 후 코드를 AST 구조에 담을 수 있게 되었습니다. Tree 객체 구조를 분석하여 우리가 원하는 의미 있는 코드 위치에 접근할 수 있었습니다.

해당 예시는 acorn 이라는 라이브러리를 사용하여, 코드를 분석한 결과입니다. 트리 구조로 이루어진 객체 안에 여러 가지 정보가 담겨 있음을 확인할 수 있습니다.

// 예시코드
function add(a, b) {
  return a + b;
}

// 예시코드를 AST트리로 변환한 결과
{
  "type": "FunctionDeclaration",
  "start": 0,
  "end": 37,
  "id": {
    "type": "Identifier",
    "start": 9,
    "end": 12,
    "name": "add"
  },
  "params": [
    {
      "type": "Identifier",
      "start": 13,
      "end": 14,
      "name": "a"
    },
    {
      "type": "Identifier",
      "start": 16,
      "end": 17,
      "name": "b"
    }
  ],
  "body": {
    "type": "BlockStatement",
    "start": 19,
    "end": 37,
    "body": [
      {
        "type": "ReturnStatement",
        "start": 22,
        "end": 35,
        "argument": {
          "type": "BinaryExpression",
          "start": 29,
          "end": 34,
          "left": {
            "type": "Identifier",
            "start": 29,
            "end": 30,
            "name": "a"
          },
          "operator": "+",
          "right": {
            "type": "Identifier",
            "start": 33,
            "end": 34,
            "name": "b"
          }
        }
      }
    ]
  }
}

해당 예시는 AST를 활용하여 사용자 코드를 재생성한 코드 비교입니다.

구분	입력된 사용자 코드	AST 파싱후 재생성한 사용자 코드
내용

런타임 중 사용자 코드를 실행하는 방식은 eval, new Function, VM 등 여러 가지 방법이 있습니다. 현재 프로젝트는 데스크톱 애플리케이션이라 사용자 본인의 컴퓨터 자원을 사용하기 때문에 보안상의 문제는 없지만, 프로세스가 종료되면 사용자 경험에 불편함을 초래할 수 있어 가상 환경에서 코드를 동작시키는 VM을 선택하게 되었습니다.

VM 가상환경에서 사용자 코드뿐만 아니라 메모리 측정 함수를 실행하여 정보를 저장 하는 것이 목표였습니다. 그래서 배열 자료구조에 사용된 메모리, 함수가 실행된 시간 등을 포함한 데이터를 넣기 위해 클로저를 이용한 패턴과 생성자 함수로 인스턴스를 만들어 사용하는 방식을 고민했습니다. 생성자함수를 사용하여 객체를 만드는 편이 코드의 유지보수 측면에서 더 알아보기 쉽고 사용하기 쉽다는 판단을 하여 생성자 함수로 메모리를 측정할 수 있게 구현하였습니다.

const newTracking = {
  count: this.count,
  totalMemory: process.memoryUsage().heapTotal,
  usedMemory: process.memoryUsage().heapUsed,
  timeStamp: process.hrtime.bigint(), // new Date().getTime(), // ms -> ns
  startLine: start,
  type: type,
  codePosition,
  codeType,
};

메모리 측정함수가 실행되는 시간차를 구하려고 Date객체를 사용하였습니다. 하지만 시간차이가 1ms 이하의 단위라서 위와 같은 방식은 생성된 객체 간의 시간차를 알 수 없었습니다. 그래서 Node.js의 process.hrtime.bigint() 메서드를 사용하여 나노초 단위로 기록해서 각 객체 시간차를 구했습니다.

숫자로 가득 한 메모리 측정 데이터는 점진적으로 증가하는 숫자일 뿐 의미를 해석할 수가 없었습니다. 또한, 값의 단위가 높아 자릿수의 변화도 알아채기 어려웠습니다. 메모리 측정데이터는 단순히 메모리의 사용 수치가 담겨있지만, 정보를 어떻게 표현하느냐에 대한 방법에 따라 다른 의미가 담긴 그래프를 그려낼 수 있을 거라 생각했습니다.

메모리측정 데이터를 차트로 표현하여 데이터의 움직임을 통해 의미있는 부분을 찾기 쉽게 사용자에게 보여주면 좋겠다고 생각했습니다. 또, 동적으로 애니메이션 효과를 통해 역동적이고 시각적 이해를 도울수 있게 표현하고 싶었습니다.

구분	Line Chart	Bar Chart	Value Used Chart
차트

라이브러리를 사용하지 않고 차트를 구현한 여러 자료를 찾아보니, 크게 SVG를 이용하는 방식과 Canvas.API를 이용하는 방식 2가지를 사용하고 있었습니다. 각각의 장단점을 생각해보았을 때 SVG 방식이 더 손쉬울 것 같긴 하였지만, 많은 양의 데이터를 그리는데 적합한 Canvas.API를 선택하게 되었습니다.

HTML5 Canvas vs. SVG vs. div

Canvas 영역에서 차트 외부(기준값, 수치 표현), 차트 내부(차트 그래프 표현)로 영역을 나누고 동적으로 움직임을 표현해야 하는 차트 내부 영역과, 매번 그리지 않아도 되는 영역으로 나누어 설계 후 Chart를 구현했습니다.

동적 차트를 구현하는 방법에는 setInterval과 requestAnimationFrame(rAF)이 있었습니다. 부드러운 애니메이션을 위해선 rAF 방식을 사용하는 것이 옳지만, 차트가 움직이는 속도를 제어하기 위해선 setInterval의 두 번째 인자가 callback 함수를 사용자가 보기 편한 속도로 조정하는 역할이 필요했습니다. 그래서 동적 차트를 구현에 setInterval을 사용하게 되었습니다.

메모리 측정함수가 생산한 배열 내부의 객체를 앞으로 Node로 표현

차트 애니메이션의 재생시간을 설정하여 메모리 정보의 의미를 읽기에 적합한 시간을 설정할 수 있게 했습니다.(전역객체로 관리) 노드 1개의 재생시간 평균 = 차트 애니메이션의 재생시간 / Node의 개수를 구해 setInterval의 delay를 값을 설정하여 과도하게 또는 놓치는 Node 정보가 없도록 값을 설정했습니다.

currentPosition 변수를 만들어 재생시점의 기준을 0으로 설정하고 이 변수부터 사용자가 보기에 적합한 Node의 갯수(전역객체로 관리)를 배열을 slice하여 표현했습니다. 그리고 callback함수가 호출될 때마다 currentPosition의 값을 1씩 더하고 setInterval이 호출될 때마다 그려지는 Node 배열을 한 칸 씩 옮겼습니다.

마지막으로 currentPosition이 데이터 배열의 길이보다 커졌을 때 clearInterval로 정지하게 됩니다.

A-2의 x축 눈금값 계산 방법은 일정한 간격의 전환점에 따라 x축의 값이 결정되는 방식입니다. 이 방식은 x축 눈금값 차이가 모두 다르다는 문제점이 있었고 이는 메모리의 정보를 뜻하는 y축의 변동은 볼 수 있지만, x축은 일정하게 표현되므로 사용자가 차트만 보고 정보를 이해하기 힘든 경우가 생겼습니다. 이는 그래프에서 시간을 간격을 표현하기엔 맞지 않는 구현 방법이었습니다.

그래프를 통한 시간 값의 표현 방법으로

1. 먼저 x축 눈금의 간격을 일정한 시간으로 나누기
2. 나눈 x축 눈금 간격에 맞춰서 전환점의 (x, y)좌표를 계산 후 표현

x축을 일정 시간으로 나눠서 애니메이션을 구현하고 한 프레임 마다 x축의 시간 값을 이동시켜 그래프의 시간 안에 필터링 되는 Node를 그리는 방식으로 변경했습니다. 움직이는 차트에서 사용자가 보기에 적합한 Node의 갯수(전역객체로 관리)를 정하고 Node의 timestamp 차이를 chart width 값으로 나눠 Node 간의 x 좌표 거리를 표현했습니다.위와 같은 방식으로 Node를 필터링하여 데이터 사이의 시간 간격에 따라 차트의 Node 간격도 시간 간격에 비례하여 보이도록 구현하였습니다.

사용자 코드의 메모리 사용량을 추적하는 애플리케이션을 만들기 위해서는 메모리를 측정하는 기능이 필요했습니다. Node.js에서는 메모리를 측정하는 함수를 제공해 준다는 것을 확인하고 브라우저 환경으로만 프로젝트를 진행할 수 없다고 판단했습니다. 그래서 저희는 두 가지 방법을 생각해봤습니다.

1. 일렉트론 Main 프로세스의 Node.js 사용하기
2. Node.js로 서버를 구현하고 사용하기

두 가지 방식의 차이점을 알아보고 프로젝트에 적절한 Electron 방식을 사용했습니다.

프론트엔드와 백엔드를 둘 다 구현하면서 프론트에서 입력한 코드를 백엔드의 Node.js 환경으로 보내고 메모리를 측정하여 결과 값을 다시 프론트로 보내는 방식과, Electron에서 Main 프로세스의 Node.js와 Renderer 프로세스의 Chrominum 환경을 IPC 통신하면서 구현하는 방법으로 이견을 좁혔습니다.

Electron을 사용하는 것이 메모리 사용량이 많더라도 코드가 나뉘지 않고 하나의 코드 베이스에서 개발할 수 있다는 점과 온라인으로 통신할 필요 없이 데스크톱 앱 내부에서 IPC 통신을 하여 오프라인으로 프로젝트를 구현할 수 있다는 점에서 Electron을 선택했습니다.

사용자에게 차트가 의미하는 데이터의 상세 내용을 제공하고 싶었습니다. 차트 Node에 마우스를 오버하면 정보창이 열리는 기능을 기획했습니다. 하지만 canvas API에 그려진 그림은 HTML 요소가 아니었기 때문에 마우스 오버 이벤트를 사용하여 감지할 수 없고 거기에 맞춰 정보창을 열 수 없었습니다. 그래서 저희는 canvas에 그려진 Node를 원으로 표시하고 원 안에 마우스가 오버되면 감지되는 로직이 필요하였습니다.

첫번째로 차트내에서 Node는 여러 개일 것이므로 같은 로직이 많이 반복될 것으로 생각했습니다. 그래서 코드의 재사용성을 위하여 class로 구현해서 여러개의 인스턴스를 canvas에 원을 표시하는 방식으로 진행했습니다.

마우스 오버 event를 canvas에 이벤트 리스너에 등록하여 마우스의 x, y 좌표를 전달하고 이 좌표가 차트에 그려진 Node 객체들의 원 반경만큼 들어오게 된다면 Boolean 값을 반환하게 했습니다.

canvas에 등록된 이벤트 리스너의 callback 함수를 통해 차트에 그려진 Node 객체들을 순회 탐색하고 반환 값을 사용하여 Modal popup을 생성하도록 구현했습니다.

개발자들의 기호에 맞는 경험을 제공하기 위해 Color Theme 기능을 구현했습니다.

Mode	Dark Mode	Light Mode
Screen Shot

메모리를 측정하는 과정의 기본단위는 bytes와 ns(nano seconds)입니다. 사용자가 수치를 읽고 응용하게 될 때 숫자의 단위가 너무 높아 활용하기 불편할 거라 생각했습니다. 토글 버튼을 통해 수치들의 단위를 변경하고 낮은 자릿수에서 수치 재가공의 수고로움을 덜고자 구현했습니다.

구분	bytes, us	Killo bytes, ms
Screen Shot

저희는 여러 가지 형태의 차트를 구현하고 있습니다.

• 같은 점 : canvas를 활용, 입력 데이터 배열의 형태
• 다른 점 : 차트 형태(line chart, bar chart)

부모 Class인 Base Chart Class를 구현하고 차트를 그릴 수 있는 기본적인 클래스를 구현합니다.

차트 형태에 따라 자식 클래스를 만들어 부모클래스를 상속한 후 자식 클래스에서 차트 그리는 메서드를 오버라이딩 하여 차트그리는 방법을 구현하고 그 외의 구현 매서드는 부모클래스의 메서드를 사용합니다.

중복코드를 최소화하고 메서드를 오버라이딩 후 구현하여 로직, 데이터 흐름의 일치를 얻을 수 있고 추가적인 기능에 대한 유연함을 얻을 수 있을 것이라 생각했습니다

간략히 차트의 구조를 설계했습니다. 클래스의 객체지향 설계 원칙(SOLID) 을 통해 적합한 설계인지 확인해보겠습니다.

하나의 클래스는 하나의 책임만 가져가야한다.

클래스의(canvas control, set chart data, draw chart) 세가지 매서드를 보면 알 수 있듯이 차트를 그리는 책임 하나만을 가질 수 있도록 매서드를 사용했습니다.

소프트웨어 요소는 확장에는 열려 있으나 변경에는 닫혀 있어야 한다.

차트를 그리기위한 데이터는 set chart data 를 이용해서만 데이터를 넣도록 폐쇄 하였습니다.

base chart class를 상속하고 draw chart 매서드를 오버라이딩 함으로써 재정의를 통해 사용하도록 개방하였습니다.

프로그램의 객체는 프로그램의 정확성을 깨뜨리지 않으면서 하위 타입의 인스턴스로 바꿀 수 있어야 한다.

차트그리는 기본 환경을 부모로부터 상속을 받아 재정의 없이 사용함으로 자식클래스의 매서드나 변수가, 부모 클래스의 성격, 조건에 반하거나 충돌이 나는 경우가 없도록 했습니다.

특정 클라이언트를 위한 인터페이스 여러 개가 범용 인터페이스 하나보다 낫다.

인터페이스로 활용하는 매서드들에 매개변수 사용을 통한 다른 결과를 도출하는 매서드를 없애 범용 인터페이스를 사용하지 않았습니다.

프로그래머는 “추상화에 의존해야지, 구체화에 의존하면 안된다.”

Base Chart Class는 차트를 그리기위한 클래스로 어떠한 부분도 자식 클래스에 의지하지 않고 온전히 독립된 객체로 설계했습니다.

클래스를 사용함에 있어서 가장 기본적인 SOLID원칙을 생각하며 다양한 차트 클래스 구현을 위한 추상화와 객체지향 설계를 간단하게 표현해 보았습니다. 클래스를 사용함에 있어서 SOLID원칙 안에서 구현해야 클래스의 장점을 오롯이 챙길수 있다고 생각했습니다.

프로젝트를 진행하는 도중에는 차트를 만드는 로직을 클래스로 만들어 컴포넌트 외부로 분리하였는데, 되돌아보니 이를 커스텀 훅으로 만들었다면 더 좋았겠다는 순간이 많았습니다.

차트를 직접 제작하였을 때 단순히 메모리 사용량만 보여주는 것이 아닌, 차트 노드들에 마우스를 올리면 구체적인 정보를 제공하는 모달을 같이 제공하였습니다. 각기 기능은 다르지만, 마우스 이벤트를 3가지 차트 모두 동일하게 일어납니다.

(해당 부분에 gif로 모달을 띄우는 장면 삽입)

차트와 모달은 각기 다른 컴포넌트로 분리되어있어, 리덕스 툴킷을 통해 차트의 상태를 공유하고 있는 상황이었습니다. 리덕스 툴킷에서는 상태를 관리하기 위해서 자체 hooks을 제공합니다.

여기서 커스텀 훅의 필요성을 느끼게 되었습니다. 리액트 내부에서 hooks을 사용하기 위해선, 컴포넌트 내부라는 조건이 필요한데 문제는 차트 로직이 클래스로 컴포넌트 외부에 선언, 사용되고 있었습니다. 차트를 구현하는 클래스 내부에서 리덕스의 hooks을 사용할 수 없어, 이를 클래스의 인자로 받아 구현하게 되었습니다.

(그림 그리기)

만일 차트를 구현하는 로직을 커스텀 훅으로 관리하였다면, 리액트 혹은 리액트의 라이브러리들이 제공하는 커스텀 훅을 적용하는 것에 자유로웠을 것이란 아쉬움이 들었습니다. Canvas API로 차트를 그리는 로직을 커스텀 훅으로 바꾼다면 어떻게 할 수 있을까요?

Canvas API를 사용하여 차트를 구현하기 위해서는 <canvas>를 사용해야 합니다. <canvas> 엘리먼트에 대한 참조를 얻어은 뒤, 실제 그리기 대상이 되는 컨텍스트를 획득합니다. 즉 DOM에 접근할 필요가 있습니다.

const canvas = document.getElementById("canvas");
//실제 그리기 대상이 되는 컨텍스트를 획득합니다.
const ctx = canvas.getContext("2d");

리액트는 직접 DOM을 변경하거나 참조해야하는 경우를 위해 useRef()라는 훅을 제공합니다. Canvas API는 웹 브라우저에 내장 된 기능으로, DOM을 참조한 뒤 컨텍스트를 획득하여 사용자가 여러 그림을 그릴 수 있게 합니다.

import { useRef } from "react";

export default function Chart () {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvasRef.current;
    const ctx = canvas.getContext("2d");
  });

  return <cansvas ref={canvasRef}>
}

<canvas>가 최초 랜더링 된 뒤, 캔버스 컨텍스트를 가져오기 위해 useEffect 안에서 useRef()가 반환한 객체의 current 속성에 접근하였습니다.

현재 3가지 차트를 제공하고 있는데, 이를 클래스가 아닌 커스텀 훅으로 만들었다면 리액트에서 캔버스로 차트를 그리기 위한 공통된 내용들을 useChart()로 관리 할 수 있습니다.

(커스텀 훅으로 차트를 구현할 때의 예시)

• 1주차

  • 아이디어 수집, 선정
  • 기술 스택 선정
  • Git 작업 플로우 결정
  • ESLint, Prettier, Husky 설정
  • KANBAN 작성

• 2주차

  • Electron 설정 및 리액트 설정
  • AST를 이용한 CodeParser 구현
  • Canvas API를 이용한 차트 구현
  • 테스트 코드 작성
  • README 작성

FrontEnd

• Electron
• React
• Redux
• Styled Components

• 강현준 :[email protected]
• 정재천 :[email protected]
• 최예린 :[email protected]