프론트엔드에 node진영 라이브러리들의 도입을 고민하고 있다면

모던웹의 정의가 Single Page Application을 기반으로 한 다양한 동작과 데이터변환이 이뤄지는, 흡사 네이티브 앱과 비슷한 형태로 점점 구체화되면서 React나 Angular, Vue 등등의 node진영의 프론트엔드 프레임워크, 혹은 라이브러리들이 주목받고 있다.

 이제부터는 순전 내 경험이다. 이게 좋다 저게 좋다 뭐가 좋다고 해서 막상 써보려고 하면 만만찮은 러닝커브에 곤혹스럽다. 그뿐이랴, 하나의 라이브러리나 프레임워크를 배워보려고 하면 넝쿨에 딸려 올라오는 감자 알뿌리들마냥 다른 것들이 후두두둑 같이 떨어진다. 넌 이게 하고 싶어? 그럼 이것도 배워야 돼. 이 기능을 넣고 싶니? 으음~ 그땐 이게 필요해. 항상 이런 식이다. 나만 해도 그냥 프론트엔드를 React.js로, 백엔드를 Django로 작성하고 싶었을 뿐인데 내가 써야하는 라이브러리 목록만 벌써 10댓개 쯤 넘어갔다. 그리고 그 중에는 단순 라이브러리를 잘 사용하기 위해서 이것저것 배워야 하는 것들도 많다. (뭔지는 글이 끝나고 적어두겠다.)

 나는 물론 만들고 싶은 게 있고 기능명세를 제대로 작성해두었으니 망정이지 아무 그림도 그려지 않은 사람에게 프론트엔드에 node를 적용시킨다고 하면 사막 한 가운데 나침반 없이 떨어진 사람 처럼 헤멜 것이다. 그래서 나도 몇 번이고 계획보다 계속해서 커져가는 배워야할 것들의 산을 보면서 그냥 해왔던 것처럼 html, css, js, jquery로 작성할까 싶었지만 만들어져있는 패키지들의 매혹에서 벗어나지 못하고 배워서 쓰기로 했다.

고민하는 사람들에게 말하고 싶은 건 결국 이거다. "도입하는 게 좋다." 단지 '힘들다'는 이유로 포기하기엔 너무 잘 만들어진 패키지들이 많다. 단순한 예를 들어보자. React기반으로 프론트 페이지를 작성하고 있는데 달력이 필요해졌다. 당신은 그냥 npm사이트에 가서 react calendar를 검색해보면 된다. 글을 쓰고 있는 2019년 1월 15일 기준 774개의 패키지가 검색된다. 마음에 드는 걸 찾아서 쓰면 된다. 단순 calendar뿐만 아니라 로그인 기능도, 게시판 기능도 찾아보면 있다. 당신은 그냥 레고 조립하듯이 패키지들을 모아 아름다운 페이지를 작성하면 되는 것이다.

 물론 이런저런 패키지들을 막 섞어쓰다 보면 불협화음이 나기 마련이다. 그럴 땐 node진영의 많은 개발자풀이 도움이 된다. 해당 라이브러리의 깃허브 레포지토리에 들어가 질문해보거나 직접 개발자에게 질문해볼 수도 있다. stackoverflow에 질문을 올려서 해결할 수도 있다. 아무리 생각해봐도 포기하고 편한 것보다 힘들게 얻는 것이 많다.

※ 내가 지금까지 정리한 패키지 목록은 다음과 같다. 

react, react-dom, react-redux, react-scripts, redux, react-redux, redux-actions, axios, next.js, react-icon, sass, sass-loader, node-sass, classnames, 그리고 검토 중인 material kit, primeReact

사실 몇 개는 뭉뚱그려 한 범주에 넣어도 된다(예 : react와 react-dom). 그럼에도 불구하고 next.js나 sass같은 경우에는 새로 알아야 할 사실이 꽤나 많고 번거롭다. 그럼에도 불구하고 넣는 게 좋다고 생각한다.