React 생태계는 너무나도 많은 확장도구를 필요로 합니다. React와 사랑에 빠진 개발자라고 하더라도 React의 단점이 너무나도 번거로운 프로젝트 세팅이라는데에는 부정할 수 없을 정도로 말이죠.
페이스북 팀은 그런 React 개발자들의 고충을 전부터 알고 있었고, 그에 대한 해결책으로 CRA(Create React Application)이라는 빌드 툴을 내놓기도 했습니다.
대부분의 개발자는 이걸로 만족했죠. 번거로운 Webpack과 Babel은 프로젝트 내부로 숨었고 (2.0 이상부터) sass를 자동으로 지원하며 빌드를 해줬으니까요.
그러나 여전히 CRA는 ssr과 code splitting을 자동으로 지원하진 않고 해당 기능을 지원받기 위해서는 cra eject라는 것을 해야합니다. 문제는, cra eject 는 구리다는 거죠.
(19–01–27 시점 기준입니다. cra는 굉장히 빠르게 발전하는 프로젝트라 언제든지 바뀔 수 있어요.)
결국 ‘난 랜딩 페이지 하나 만들고 싶었을 뿐인데…’하는 개발자는 대체 뭐가 어떻게 돌아가는지 모를 React의 우울한 프로젝트 환경 세팅에 기브업을 하고 쓸쓸히 vue.js로 발걸음을 옮기게 됩니다.
어디까지나, 예전에는 그랬다는 거죠. 이제 그런 간단한 프로젝트 개발을 위한 리액트의 솔루션이 생겼습니다.
Next.js!
Next.js를 부정확하지만 단순하게 설명하자면 React를 편리하게 추상화한 프레임워크입니다. 더 이상 import React from 'react' 하지 않아도 jsx 스타일로 작성할 수 있는 것은 물론, sass도 그냥 쓸 수 있고 babel도 알아서 해줍니다. 심지어 ssr과 code splitting까지!
물론 Next.js는 React에서, 혹은 CRA보다 더 추상화 된 만큼 예외 상황에서의 해결책은 훨씬 어렵거나, 비일반적인 해결책을 요구합니다. 그럼에도 Next.js는 매력적이죠. 단언컨데, 당신이 리액트로 만들려고 하는 것이 랜딩페이지 정도면, Next.js면 충분합니다.
여러분, 이 모든 것이 Next.js로 만들어졌습니다!
자, 이제 Next.js가 뭔지 아셨나요? 다음 포스팅부터는 이 매력적인 Next.js로 간단한 프로젝트를 하는 경험을 해보도록 하죠.
