프트웨어 전문지 마이크로소프트웨어의 최신 호는 우리가 매일 접하는 웹 페이지, 모바일 등 프론트엔드(Front-End)를 주제로 담았습니다. 자바스크립트, 정적 타입, 리액트, 뷰, 앵귤러, 일렉트론, ESNext 등 마소 393호의 주요 기사들을 IT조선 독자에게도 소개합니다. [편집자주]

현재의 프론트엔드 개발은 복잡도와의 싸움에 가깝다. 고객의 눈높이는 구글, 페이스북, 네이버, 카카오 등 수준 높은 제품에 맞춰져 있기 때문에 대단히 높은 퀄리티를 요구한다. 이를 해결하기 위해 지난 수 년간 프론트엔드에는 앵귤러(Angular), 백본(Backbone), 엠버(Ember), 리액트(React), 뷰(Vue) 등 수많은 프레임워크와 라이브러리가 나타났다. 가히 춘추전국 시대에 비견할 수 있는 상황이 계속되고 있다. 현재 리액트가 우세하지만, 시대적 요구를 해결할 완벽한 승자는 아직 보이지 않는다.

현재가 복잡하다고 하지만 프론트엔드 개발, 옛말로 ‘웹 개발’이 언제는 간단했던 적이 있었던가. 우리는 먼 과거 플래시(Flash)와 싸웠고, CSS 핵과 싸웠다. 그리고 웹 표준과 싸웠으며, 반응형과 싸웠고, 그 와중에 잠시나마 jQuery라는 걸출한 라이브러리의 등장으로 태평성대가 열리는가 싶었다.

하지만 V8 자바스크립트 엔진을 등에 업은 크롬(Chrome)이 세상을 빠르게 먹어치우며, 빨라진 자바스크립트를 통해 지옥문을 열어 버리고 말았다. 웹사이트 혹은 홈페이지라는 단어를 뛰어 넘어 웹앱이라는 개념이 등장하고, 자바스크립트로 SPA(Single Page Application, 싱글 페이지 애플리케이션)를 만드는 것이 일상이 됐다. 급기야 프론트엔드 개발은 엄청난 러닝 커브가 필요해졌다.

프론트엔드 개발자 로드맵. / 마이크로소프트웨어 393호 발췌
프론트엔드 개발자 로드맵. / 마이크로소프트웨어 393호 발췌
리액트는 UI(User Interface)를 만들기 위한 자바스크립트 라이브러리이다. 내가 리액트를 사용해서 SPA 사이트를 처음 만든 것은 2016년 가을의 일이었다. 당시에 받은 충격은 대단했고 이후 2017년은 리액트를 찬양하며 지냈다. 리액트 코리아(React Korea) 커뮤니티 운영자로 활동하며 여러 콘퍼런스에서 리액트를 팔았다. 앵귤러는 이제는 관심사가 아니었으며, 새롭게 인기를 얻은 뷰(Vue)도 있었지만 누가 뭐래도 2017년의 승자는 리액트라고 할 수 있다.

리액트를 찬양했지만, 2018년 내가 속한 프로젝트 현실은 4년 만에 다시 만난 스프링(Spring)이었다. (세계 최고 수준의) 데이터베이스 관리 소프트웨어 SQLGate를 개발하는 주식회사 체커에 합류했고, 업무적 필요에 의해 스프링을 해야 했다. SQLGate를 판매하는 온라인 사이트는 스프링부트(SpringBoot)를 응용한 AXBoot 프레임워크로 개발됐다. 자바(Java)는 그래도 금방 다시 읽어낼 수 있었지만, JSP는 머릿속 어딘가에 처박혀 먼지가 잔뜩 쌓여 있었는지 쉽게 적응되지 않았다.

SQLGate 제품 판매 사이트. / 마이크로소프트웨어 393호 발췌
SQLGate 제품 판매 사이트. / 마이크로소프트웨어 393호 발췌
JSP와 jQuery로 된 페이지를 수정하다 보니, 리액트가 얼마나 대단한 아이디어인지 격렬하게 깨닫게 됐다. 리액트가 제공하는 선언적 렌더링은 위대하다. 보이길 원하는 결과를 코딩하면 중간 과정은 리액트가 처리해서 빠르고 효율적으로 그려준다. DOM(Document Object Model, 문서 객체 모델)을 어떻게 조작해야 할지 고민할 필요가 전혀 없다. DOM을 조금이라도 조작해야 한다면 리액트가 주는 이점은 크다.

그렇게 낮에는 스프링과 싸우고, 밤마다 리액트를 그리워하는 나날을 보내던 중 SQLGate 제품 판매방식을 패키지 라이선스 방식에서 구독 방식으로 전환하게 됐고, 필요한 웹페이지가 잔뜩 기획됐다.

김동우 필자의 스프링과 리액트에 대한 자세한 내용은 ‘마이크로소프트웨어 393호(https://www.imaso.co.kr/archives/3408)’에서 확인할 수 있다.