Tokenizer, Lexer, Parser의 역할
CS의 꽃은 여러송이지만, 그중에서도 컴파일러 이론은 최근 핫한 자연어 처리에서까지 활용되는 아주 중요한 분야입니다. 문학를 보며 학부시절 고통받았던 기억이 되살아났는데.. 단단한 개발자가 되려면 이겨냅시다!
[컴파일러 이론] Tokenizer, Lexer, Parser
[컴파일러] 토크나이저, 렉서, 파서 (Tokenizer, Lexer, Parser)
위 출처에서 인용하여 제가 재해석한 Tokenizer, Lexer, Parser의 역할은 각각 다음과 같습니다.
Tokenizer: 특수 문자를 활용해 의미 있는 단위로 쪼개주는 역할
Lexer: 쪼개어진 구문의 의미를 분류(categorize)해주는 역할
Parser: 분석된 데이터를 검증하여 이상이 없을 경우 AST로 구조화해주는 역할
결국 최종적으로 구문을 분석한 Tree 구조의 결과물 AST가 나와서 Compiler에 전달되게 됩니다.
DOM 파서 동작 방식
아래 포스트에 포함된 파싱과 DOM트리 구축 내용을 참고하였습니다.
브라우저 동작 과정에 대해 알아보자 (DOM, Parsing)
웹 브라우저는 HTML문서를 해석하여 브라우저 화면에 출력하기 위해, 오늘 만든 것과 유사한 HTML 태그 Parser가 동작합니다. CSS는 CSS 파서가 별도로 존재하구요.
HTML 파서는 어휘 분석(Tokenizer를 의미합니다)과 구문 분석(Lexer를 의미합니다)을 통해 각 태그의 의미를 파악하고, 이들 간의 포함관계를 분석하는 파서(Parser)에서 최종적으로 DOM Tree를 구축합니다. 오늘 미션에서 구축한 AST(구문분석트리)와 마찬가지로요. 이를 Document의 재구성 과정이라고 부릅니다.
제가 미션 시 구현한 AST와 DOM Tree는 아무래도 대상 언어가 다르다보니 입력값의 포맷은 다르지만, 결국 결과물의 형태는 유사한 Tree 구조일 것으로 생각됩니다.
같은 방식으로 파서를 구현하는데 큰 어려움이 없을 것이라는 자신감이 생기네요. ㅎㅎ
HTML과 같은 <, >기호로 구문을 표기하는 방식을 XML이라고 하는데, 결국 이번 미션에서 제공되었던 Keywords나 Special Symbols가 HTML에서 사용되는 것과 유사하게 변경된다면, 구조상으로는 동일하다고 볼 수 있겠습니다! (“ADD”, “SUB” 대신에 <a>태그, <img>태그 하는 식으로요.)
정규표현식 정리
저는 Tokenizer 부분에서 정규표현식을 활용했는데요, 예약어가 변화해도 코드의 변화가 최대한 적도록 **변수를 정규표현식에 사용하는 방식**을 활용해 보았습니다. 이 부분을 소개해 드리겠습니다.
How do you use a variable in a regular expression?
let inputString = "I'm John, or johnny, but I prefer john.";
let replaceThis = "John";
let re = new RegExp(`\\b${replaceThis}\\b`, 'gi');
console.log(inputString.replace(re, "Jack"));흔히 사용하는 / 로 둘러싼 패턴을 활용한 match()함수의 사용만으로는 변수 사용이 불가능합니다.
RegExp 클래스를 활용하여, 위와 같이 ${, }로 변수를 감싸주면 패턴의 활용이 가능합니다.
재밌게도 어제 주구장창 했던 쉘 스크립트와 변수 표현 방식이 똑같네요 ㅎ ㅎ.. PTSD 🥲
Split string into array without deleting delimiter?
저는 미션 수행 시 split() 함수 사용 시 delimiter도 남아있도록 쪼개기 위해, 정규표현식과 다음 함수를 활용했답니다.
const sb_regexp = new RegExp(`(${sb_arr.join('|')})`, 'g'); // 모든 구분자를 정규표현식으로 변환
const seps = this.str.split(sb_regexp); // 구분자 포함하여 split기타 정규표현식은 위 링크에서 발췌한 표를 첨부하겠습니다.
인터넷 찾아보면 많이 나오지만 가장 간결해서 좋았습니다.
상세한 설명을 보시려면 진리의 모질라 사이트! 그 어떤 블로그보다 깔끔하고 상세히 설명합니다.
정규표현식은 구조가 복잡해 헷갈리다보니 실제로 사용할 때 많은 테스트를 거치게 되는데요, 이런 테스트를 위해서는 치트시트나 테스트 사이트를 활용하는 것이 참 유용했습니다. 이번에도 활용한 정규표현식 테스트 사이트를 하나 공유하겠습니다.
