경영정보시각화 실기 랩

왜 만들었나

DAX를 연습하려면 Power BI Desktop과 연습 데이터가 필요하고, 내 식이 맞았는지 셀 단위로 확인하기 어렵습니다. 브라우저 안에 DAX 엔진과 데이터 모델을 두어 이 과정을 없앴습니다.

주요 기능

• 측정값·계산 열·계산 테이블 세 가지 모드로 DAX 식 실행
• 행렬 셀을 누르면 그 셀의 필터 컨텍스트와 보이는 판매 행 수 표시
• 정답식과 사용자식을 같은 조건에서 계산해 셀 단위로 차이를 보여 주는 채점
• 제한 시간이 있는 6문제 실전 세트, 패턴 모음, 객관식 퀴즈
• 자동완성·함수 시그니처 힌트가 있는 DAX 편집기, 진도는 localStorage에 저장

숫자로 보면

어떻게 동작하나

1. 데이터 모델 생성

   고정 시드 난수로 판매·제품·거래처·날짜 4개 테이블과 관계 4개를 만들어 누구에게나 같은 값이 나오게 합니다.

   data.js

2. 렉싱·파싱

   입력한 DAX 문자열을 토큰으로 나누고 연산자 우선순위에 따라 AST로 만듭니다.

   dax.js

3. 필터 컨텍스트 구성

   행렬의 행·열 머리글 값과 슬라이서를 열 필터로 바꿔 셀마다 Ctx 객체를 만듭니다.

   grid.js

4. 평가와 컨텍스트 전환

   Engine이 AST를 재귀 평가하며, 행 컨텍스트에서 측정값이나 CALCULATE를 만나면 transition()으로 필터 컨텍스트로 바꿉니다.

   dax.js

5. 채점

   정답식과 사용자식으로 같은 행렬(또는 열·테이블)을 각각 계산해 소계·총계까지 셀 단위로 비교합니다.

   grid.js

6. 결과 표시·저장

   차이 목록과 셀별 컨텍스트 설명을 그리고, 작성 코드와 정답 기록을 localStorage에 남깁니다.

   app.js

핵심 코드

calcCtx(filterArgs, env) {
  // 1) 필터 인수는 원래 컨텍스트에서 평가
  const mods = [], adds = [];
  for (const a of filterArgs) {
    if (a.type === "empty") continue;
    const up = a.type === "call" ? a.name : null;
    if (["ALL", "REMOVEFILTERS", "ALLEXCEPT", "ALLSELECTED", "ALLNOBLANKROW", "USERELATIONSHIP", "CROSSFILTER"].includes(up)) mods.push(a);
    else if (up === "KEEPFILTERS") adds.push({ keep: true, f: this.filterFromArg(a.args[0], env) });
    else adds.push({ keep: false, f: this.filterFromArg(a, env) });
  }
  // 2) 컨텍스트 전환
  let ctx = env.rows.length ? this.transition(env) : env.ctx;
  let filters = ctx.filters.slice();
  // …
  return ctx.derive(filters, { userel });

CALCULATE가 필터 인수를 원래 컨텍스트에서 먼저 평가하고, 그 뒤에 컨텍스트 전환을 거쳐 새 필터 컨텍스트를 만드는 부분입니다.

어려웠던 점