시작하며
지난해 주목할 만한 프로젝트들을 생각해 보고, next.js, prisma, tailwindcss 기술에 대하여 조금더 관심있게 공부하고 실무에서 사용해 보려 합니다.
Next will be next.js
프로젝트를 진행하다보면 어느순간 내밷게 되는 말이 있습니다.
"기승전 webpack 설정이네..."
무언가 문제를 해결할 때나, 개선을 할 때나 마주치는 질문 입니다.
"webpack 설정을 어떻게 하지?"
그나마 create-react-app으로 생성한 코드는 그럭저럭 할 수 있습니다.
하지만, 어찌어찌 만든 나만의 SSR 스텍은 초기 webpack 설정에 뿌듯해 하는 것도 잠시입니다.
내가 어떻게 webpack 설정을 했는지 잊을만 하면 새로운 요구사항을 위해 다시 들여다 봐야 합니다.
더욱 좌절하게 만드는 것은 webpack 5와 같은 주요 의존 패키지들의 메이저 업데이트가 아닐까 싶네요.
javascript fatigue는 곧 webpack configuration fatigue 입니다.
https://nextjs.org/
이런 고민을 덜어주는 것이 next.js 입니다.
이미 많은 스타트업에서는 이것을 사용하고 있습니다.
CSR, SSR, SSG 까지 상황에 따라 고를 수 있습니다.
문서와 커뮤니티가 훌륭합니다.
최근의 행보가 무서운 것은 react core 팀은 물론 chrome 개발진과도 같이 협업을 한다는 점 입니다.
Dan Abramov는 최근 발표한 react server component 동영상 에서 next.js 팀과 협업을 통해 해당 기능을 안정화 할 예정이라 했습니다.
(참조)
특별히 최근에 발표한 v10의 내용은 다음과 같습니다.
이는 Vercel이라는 회사가 next.js를 통해 실현하고자하는 미래의 서비스 개발의 모습일지도 모르겠습니다.
특별히 제가 추종하는 TypeScript와 React의 조합을 기반으로한 next.js는 앞으로 저의 선택지 중 맨 우선에 놓일 것 같습니다.
데이터는 Prisma로
서비스의 본질은 데이터, UX의 본질은 얼마나 데이터를 쉽게 만들고 표현하는가
평소 이와같은 생각을 가지고 있는 저는 데이터를 다루는 기술에 관심이 많습니다.
지금까지 RoR, Spring과 같은 서비스 애플리케이션 프레임워크는 개발자들이 데이터를 얼마나 쉽고, 빠르고, 직관적으로 다룰 수 있게 해주었느냐가 성공의 열쇠였습니다.
그리고 Object mapper, ORM, Routing/CRUD scaffolding 까지의 여정은 이제 마무리 단계에 와 있는 듯 했습니다.
하지만 Prisma는 GraphQL schema의 영향을 받아 Prisma schema를 정의하여 새로운 데이터 연결 방식을 제시하고 있습니다.
https://www.prisma.io/
매우 충격적인 이 프레임워크는 심지어 introspection과 migration도 지원하고 있습니다.
TypeScript/NodeJS를 tear 1 환경으로 개발하고 있는 이 프레임워크에 betting하지 않을 이유는 없어 보입니다.
누군가 미래 지향적인 ORM의 솔루션의 모습이 어떤것인가라고 물어본다면 저는 서슴없이 Prisma라 이야기 할 것 입니다.
TailwindCSS와 FE 개발의 미래
https://tailwindcss.com/
여러 커뮤니티에서 많이 화자되고 있는 Tailwindcss와 그와 관련한 움직임을 주의 깊게 살펴볼 필요가 있습니다.
Utility first CSS framework는 이전에도 있어왔지만 tailwindcss가 매우 빠르고 긍정적으로 개발자들 사이에서 받아들여지고 있습니다.
처음 보면 매우 verbose하여 다소 진부해 보이는 이 프레임워크의 지향점은 단순하고 충격적입니다.
CSS를 사용하지 않고 이미 정의한 CSS class 이름만으로 스타일링 작업을 한다.
이것이 가능할까 싶은데... 이렇게 할 경우 장점을 한번 생각해 보면 다음과 같습니다.
- CSS Framework가 제공하는 cascading class 스타일의 상호 연관이 사라진다.
- TailwindCSS로 기술한 design system은 복붙만으로 그대로 옮겨올 수 있다.
모던 컴포넌트 개발 환경에서 사용해야 하는 언어는 크게 JS류와 CSS류로 볼 수 있습니다.
React의 JSX는 html을 JS로 끌어왔고 CSS in JS는 CSS를 JS로 끌어오려는 노력입니다.
이를 통해 얻고자 하는 것은 더욱 독립적이고 이식성 높은 컴포넌트를 만들고자 함에 있습니다.
하지만 CSS in JS는 SSR 환경에서 매우 고통스러운 복잡도를 선사합니다.
그런데 Utility first CSS 방식으로 컴포넌트를 만들게 되면 이런 고민이 한순간에 사라집니다.
그리고 verbose 한 스타일링 작업 역시 컴포넌트 기반 개발 트렌드와 맞물리면서 큰 문제가 되지 않습니다.
이제 디자이너와 개발자는 어떤 CSS framework를 사용해야 할지 혹은 새로 만들어야 할지 고민하지 않아도 됩니다.
A 프로젝트에서 만든 responsive하고 dark mode를 지원하는 디자인을 B 프로젝트에 기술적 장벽없이 적용할 수 있게 됩니다.
개발자는 더이상 SASS, LESS, CSS in JS를 고민하지 않아도 됩니다.
CSS를 미리 번들링하거나 동적으로 생성하기 위하여 high order component와 webpack loader로 기술적 복잡도를 가져갈 필요가 없습니다.
물론 디자이너, CSS 개발자, JS 개발자가 협업하는 지금의 개발 방식을 생각하면 먼 미래일수도 있겠습니다.
하지만, 글로벌 경쟁이 심해지고 사용자의 요구사항은 더욱 다변화되고 있는 환경에서 개개인이 어떠한 전략을 가지고 대처해 나갈 것인지를 생각해 볼 필요는 있을 것 같습니다.
TailwindCSS에 더 관심이 있으신 분들은 다음 비디오를 참고하세요.