Nodeless 개발자의 JS Toolkit

요즘 뭐만 하면 NPM부터 세팅하고 시작하는 요즘 프론트 세상입니다만,

예전부터 메모장에서 시작해서 Notepad++를 오랫동안 쓰다가 최근 VSC로 넘어온 입장에서는 프론트를 하는데 뭔가 셋팅을 한참 해야 하는게 생각보다 장벽으로 느껴집니다.

왜냐면 오랜 기간동안 JS/jQuery 만으로 SPA 프론트 개발을 해 왔기 때문에 여전히 프론트 개발을 하는데 있어 꼭 Node가 있어야 하나?...라는 생각을 합니다.

그나마 호감가는 프레임워크가 Vue였는데 조금 만져본 결과 한편 오랬동안 안드로이드 네이티브 개발을 경험한 입장에서 화면 단위를 형성하는 그 구조와 라이프싸이클이 뭔가 와닿지 않았습니다. 웹을 메인으로 개발하던 사람들이 만든 프레임워크라 그런가 앱을 표방하면서도 Android나 iOS에서 경험할 수 있는 화면 별 구성이나 앱에서 자주 사용하는 기본 제공 UI 요소들(Toast, Dialog 등)이 따로 있는 것도 아니고..뭔가뭔가 그쪽의 세상이라는 느낌이 강했습니다.

물론 제가 웹으로 개발을 하더라도 전체적으로 앱 개발자를 표방하기 때문인 점도 있고, 앱 개발에서 사용하던 환경을 갖춰주는 라이브러리들도 커스텀 해서 이용 가능하긴 하겠습니다만, 이게 프레임워크에서 공식적으로 제공하는 것과는 차이가 큽니다. 그런 점에서 Flutter같은 것도 나온 것이겠다 싶습니다.

어쨌거나 저는 그런 점에서 굳이 Node를 써야겠다는 생각도 들지 않았고, 마침 입사한 회사의 개발 환경이 레거시한 상황이면서 너무 급진적인 스택 도입은 힘들 상황인 점을 고려해서 '딱 그 중간 정도 되는 개발을 해 보자'라는 생각을 하게 되었고, 언제나 그렇듯 모든 것을 하나하나 직접 만들기 시작했습니다. 결과적으로 프레임워크라고 부를 수 있지 않을까 싶은 형태를 갖추었죠.

그게 바로 [Estre UI](https://github.com/SoliEstre/EstreUI.js) 입니다.

여기서는 EstreUI.js에서 사용하는 부속 라이브러리를 간단하게 소개하고자 합니다.

그 전에, 역시 모든걸 다 직접 만들 수는 없었기에 프레임워크에 포함된 것과 그렇지 않으나 개발중인 최종 프로덕트에 사용된 외부 라이브러리 몇 가지를 먼저 얘기해보죠.

• jQuery
  당연하게도 클래식 프론트 개발에서 jQuery를 빼 놓기는 어렵습니다. 요즘 바닐라 JS로도 많이 대체가 가능하다곤 하지만 Element를 검색하고 다루는데에 편의성을 생각하면 굳이 배제하려고 까지는 할 필요가 있나 싶습니다. 물론 이미 익힌 ES11이하 바닐라 문법으로 보통 작성하고 그 외에 번거로워질 수 있거나 여전히 편한 부분만 가져다 쓰고 있습니다. Estre UI 프레임워크 내부에서 이용되므로 기본적으로 먼저 로드되어 있어야 합니다. 현재 3.x 최신 버전을 기반으로 작업중이지만 조만간 4.0으로 업데이트 될 것 같습니다. 대체제인 Cash같은 라이브러리도 사용 가능하도록 테스트도 해 볼 예정입니다.

• Crypto.js

  세션 암호화 처리와 인코딩 등의 처리를 위해서 쓰게 됐습니다. 아래 언급할 EJWT에서 이용됩니다.

• UA-Parser.js

  UserAgent를 파싱하는데 있어서 이걸 대체하는 라이브러리를 찾기는 힘든 것 같습니다. 물론 유료버전을 사용하는 상황은 아니고 무료로 공개된 버전의 라이브러리를 사용했습니다.

이제부터는 프레임워크(프로젝트 내)에 포함된 라이브러리를 소개합니다.

• [JCODD.js](https://github.com/Esterkxz/JCODD)

  JSON을 기반으로 더 짧은 stringified text를 만들어주는 라이브러리입니다. 특히 JSON 인코딩 후 BASE64로 다시 인코딩 하려는 경우 JSON 대신 JCODD을 사용하면 데이터 길이를 크게 줄일 수 있습니다.

여기서 부터는 직접 제작한 라이브러리를 소개합니다.

• [Doctre.js](https://github.com/SoliEstre/DOCTRE.js)

  HTML Tree(Element/Node/NodeList)를 javascript 또는 JSON의 배열 형식으로 변환해 줍니다. Javascript 상에서 HTML 내용을 보관하거나, 다루거나, 하드코딩 할 때. 그리고 HTML 태그의 data 속성에 HTML Tree를 담을 때 이용됩니다. 기본적으로 HTML 문서가 아닌 JS 코드 중에 HTML 코드를 작성하거나 Element Tree를 생성할 때 유용합니다.

• [Modernism.js & Alienese.js](https://github.com/SoliEstre/Modernism.js-Alienese.js)

  먼저 Modernism.js는 기존 안드로이드 앱 개발에 익숙하게 잘 사용하던 Kotlin(과 iOS의 Swift) 형식의 문법을 JS에서도 쓰고 싶어서 만든 점이 첫번째인데, 개인적으로 인라인으로 다 해결하는걸 선호하고, 같은 하위변수(변수 객체 내 변수 또는 배열 요소 등)을 굳이 여러번 사용하거나 스코프 내의 변수로 할당하는게 번거로웠던 점과 인라인 분기처리를 Kotlin 쓸 때 매우 잘 썼었기 때문에도 있고, 두번째는 JS의 발전 역사적인 이유로 좀 번거로운 이용을 해야 하는 것들을 alias로 만들어 뒀습니다. 즉 바닐라 JS에 최신 언어의 모더니즘을 끼얹는 것입니다.

  
  

  다음으로 Alienese.js는 모더니즘JS에서 만든 함수명들 치는 것도 길다는 생각이 들어서 만들어졌습니다. 요즘 보통 IDE에 화면 분할해서 사용하는데 특히나 요즘은 Copilot같은 사이드 영역을 차지하는 물건도 생기고 하면서 가로 폭에 제약을 받는데, 인라인 코드를 여러 줄로 늘리는 것을 어느정도 가독성을 유지하는 내에서는 그닥 선호하지 않고, 개인적으로 디버깅이 필요한 부분이 아닌 이상 인라인으로 코드를 작성하는 것을 선호하다 보니 편집기 가로 폭이 좁아지는 점과 개발의 데드라인이 가까울 때 가독성을 이유로 타자를 장황하게 치는 것이 매우 부담으로 작용했기 때문에 만들어졌습니다.

  
  

  원래 이 두 라이브러리는 하나로 합쳐져 있었고 짧은 alias가 기본이었으나...역시 가독성을 박살내는 문제가 있기 때문에, 또한 1~3, 4자리 변수의 상당수를 모조리 할애하게 되는 점도 있는 관계로 사도의 성격을 가지기 때문에 단순 모던 개발을 위한 모더니즘JS와 사도 내지 준 난독화 목적을 가지는 에일리어니즈JS로 분리되었습니다. 따라서 ModernismJS만 사용하거나 AlieneseJS는 급할 때 사용했다가 나중에 여유가 되면 혹은 AI에게 부탁해서 Modernism 코드 혹은 Vanilla코드로 전환 하시는 걸 권해드립니다.

  
  

  여튼 라이브러리는 필요에 의해 만들어지는 것 아니겠습니까? ㅎㅎ;

자, 그리고

그 외 현재 프레임워크에 포함되지 않고 공개되지도 않은 라이브러리도 몇가지 있습니다.

• EJWT - EstreJWT

  기존 JWT 규격을 참고하여 자체적으로 JWT 라이브러리를 만들었습니다. 단순히 JWT 형식을 그대로 사용하지 않고 독자적인 부분이 몇가지 포함되어 있습니다. 예를 들면 서명을 (백엔드에서도 하지만)클라이언트에서도 한다던가 하는 점이 다릅니다. 프론트측 암호화에 CryotoJS의 SHA3(Keccak)를 사용하고 있으며 JCODD-BASE64로 토큰을 생성합니다.

• DoYoKnowHangul? - Korean support library

  한국어 보조용 라이브러리는 근래 토스에서 공개한 것도 있고 그 외에도 있겠습니다만, 한글 정도는 직접 다루는 법을 익히고자 해서 직접 만들어가며 쓰는 것으로 결정했습니다. 여기에는 예전부터 써왔던 처리를 정리해서 라이브러리로 묶어두었고 다른 구현이 필요할 때 마다 점점 기능이 추가될 예정입니다.

이들은 나중에 공개하게 될 가능성이 있지만 좀 더 시간이 필요할 것 같네요.

여기까지 Nodeless 프론트 환경에서 개발하는 풀스택 개발자의 툴킷 소개였습니다.

열심히 모던 프론트 개발을 배워서 입사했는데 레거시 스택의 유지보수를 하는게 주 업무가 되어서 현타가 오는 분들이 많을 것으로 생각이 됩니다. 특히나 한국, 그리고 요즘같은 시기에는 더더욱 그럴 것이구요. 그런 분들에게 선택지를 만들어드리고 싶은 마음이 지금 오픈소스 개발을 하는 원동력이기도 합니다. 그러니 모두들 화이팅 하시고 이 프로젝트들을 눈여겨 봐주시기 바랍니다.