학습·시험

ENCOR 랩북

CCNP ENCOR(350-401) 수험자가 장비 없이 브라우저에서 IOS 명령을 입력하며 이론·랩·퀴즈로 공부하는 단일 페이지입니다.

분야학습·시험플랫폼Web기술Vanilla JS · 단일 HTML · 인라인 SVG(토폴로지) · 정규식 기반 CLI 파서 · localStorage
CLI 랩: 브라우저 콘솔에 IOS 명령을 치면 장비처럼 응답하고, 과제가 자동으로 체크됩니다.
CLI 랩: 브라우저 콘솔에 IOS 명령을 치면 장비처럼 응답하고, 과제가 자동으로 체크됩니다.
개요: 도메인 비중, 진도, 10주 학습 계획.
개요: 도메인 비중, 진도, 10주 학습 계획.

왜 만들었나

ENCOR 실습에는 라우터·스위치나 무거운 에뮬레이터가 필요해 짧게 반복 연습하기 어렵습니다. IOS CLI를 흉내 낸 엔진과 과제 자동 확인으로 브라우저만으로 설정 연습을 하게 했습니다.

주요 기능

  • OSPF·HSRP·EtherChannel·VRF·BGP·GRE·SSH·EEM 8개 CLI 랩과 과제 자동 체크
  • 명령 줄임말 확장, Tab 자동완성, ? 도움말, ↑↓ 명령 기록
  • show run·show ip route 같은 show 명령과 | include/section 파이프 필터
  • 서브넷·OSPF 비용 계산기, BGP 경로 선택 순서 맞추기, RESTCONF·JSON 도구
  • 도메인별 이론과 퀴즈, 도메인별 정답률 기록

숫자로 보면

CLI 랩 8개, 자동 확인 과제 37개
이론 토픽 31개, 퀴즈 50문항
줄임말·자동완성용 IOS 키워드 111개

어떻게 동작하나

  1. 랩 상태 생성

    newState()가 랩의 초기 설정을 {text, kids} 트리로 만들고 모드를 user로 둡니다.

    index.html
  2. 정규화

    normalize()가 입력을 토큰으로 나누고 줄임말을 키워드 목록(KW)과 별칭으로 확장하며 'gi 0/0' 같은 인터페이스 이름을 합칩니다.

    index.html
  3. 모드별 분기

    run()이 user/priv 모드면 execCmd, 설정 모드면 cfgCmd로 보내고 설정 모드의 do 명령도 처리합니다.

    index.html
  4. 설정 트리 갱신

    cfgCmd가 현재 하위 모드에 허용된 정규식 패턴(PAT)으로 명령을 검사하고, 같은 키의 줄은 바꾸고 no 명령은 지우는 식으로 트리를 고칩니다.

    index.html
  5. 이벤트·show 출력

    설정 트리에서 OSPF 이웃·BGP·HSRP·터널 상태를 계산해 %OSPF-5-ADJCHG 같은 로그와 show 출력을 만들고 파이프 필터를 적용합니다.

    index.html
  6. 과제 확인·복원

    입력할 때마다 과제 검사 함수를 다시 돌려 체크하고, 입력한 명령 기록을 저장해 다시 열면 재실행해 상태를 복원합니다.

    index.html

핵심 코드

function expandTok(tok,first,mode){
  if(tok.startsWith('"'))return tok;
  const lo=tok.toLowerCase();
  if(first&&(lo==='sh')&&mode!=='exec')return 'shutdown';
  if(ALIAS[lo])return ALIAS[lo];
  if(KW.includes(lo))return lo;
  if(lo.length>=2&&/^[a-z-]+$/.test(lo)){const c=KW.filter(k=>k.startsWith(lo));if(c.length===1)return c[0]}
  return tok}
// …
function exec(st,raw){
  const mode=st.mode==='config'?'config':'exec';
  let line=normalize(raw,st.mode==='user'||st.mode==='priv'?'exec':'config');
  if(!line)return '';
  let pipe=null;const pi=line.indexOf(' | ');if(pi>=0){pipe=line.slice(pi+3);line=line.slice(0,pi)}
  let out=run(st,line);
  if(pipe&&typeof out==='string')out=applyPipe(out,pipe);
  return out}

IOS식 줄임말을 키워드로 확장하는 함수와, 정규화·파이프 분리 후 명령을 실행하는 입구입니다.

어려웠던 점

실제 IOS처럼 줄임말, 모드별로 허용되는 명령, 같은 항목 덮어쓰기와 no 명령 삭제를 동시에 맞추는 부분입니다. 하위 모드별 허용 패턴(PAT)과 덮어쓸 키 패턴(KEYED)을 정규식 표로 두고 설정을 트리로 관리해 처리합니다.