포트폴리오를 제작하면서 처음으로 next + tailwind 조합을 사용해 보았기에 next의 간단한 특징과 tailwind와 styled-components의 차이점을 간단하게 정리한다.

next

React 기반의 프레임워크로서, React 애플리케이션의 개발과 배포를 좀 더 효율적으로 처리하기 위해 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 라우팅, 코드 스플리팅 등을 간편하게 구현할 수 있도록 지원한다.

• Server Side Rendering
  페이지를 서버에서 렌더링하고 초기 html을 클라이언트에 전달하는 방법으로 모든 로직이 담겨있는 javascrtipt 파일을 다운로드해 클라이언트에서 렌더링하는 CSR과 달리 초기 로딩 속도가 빠르다. 이로 인해 웹 크롤러가 수집할 수 있는 데이터가 CSR보다 많아 SEO(검색엔진 최적화)에 유리하다.

• Static Site Generation
  페이지를 미리 빌드해 정적인 HTML 파일로 생성한다. 요청이 들어오면 미리 만들어진 HTML파일은 제공하기 때문에 초기 페이지 로딩 속도가 매우 빠르다. 또한 ssr과 마찬가지로 SEO에 유리하며, 정적이기 때문에 캐싱을 통해 렌더링된 페이지를 반복적으로 제공함으로써 서버의 부하도 줄일 수 있다.

• 사전 패칭
  getServerSideProps 와 getStaticProps 를 통해 페이지가 렌더링되기 전에 데이터를 가져오고 사전에 패칭할 수 있다.

• 라우팅
  내장된 라우팅 시스템을 사용하여 폴더 기반의 라우팅을 통해 추가적인 라이브러리 (ex: react-router) 없이 폴더의 구조만으로 페이지 라우팅이 가능하다. 또한 api 라우트도 가능하기 때문에 app/api/route로 api 엔드포인트를 작성해 밴엔드 로직도 구현이 가능하다.

• 코드 스플리팅
  페이지 별로 코드를 자동으로 분리해 필요한 코드만 로딩하도록 도와 초기 로딩 속도를 개선하는 방식으로 기존 react를 사용할 때는 dynamic import나 React.lazy, Suspense그리고 @babel/plugin-syntax-dynamic-import(@/babel/preset-env에 포함) 등을 사용해야 했지만 next js는 빌드 시 자동으로 코드 스플리팅이 적용된다.

• 이미지 최적화
  이미지의 크기를 줄이고 필요한 순간에 나타내는 등 상대적으로 크기가 큰 이미지 데이터를 불러오는데 들어가는 부하 및 시간을 줄이는 것으로 이 최적화를 위해 고려해야 했던 .webp, lazy 로딩, 디바이스 크기에 맞는 리사이징, 캐싱 등의 과정을 Image 태그를 통해 사용하기 쉽게 제공한다.

이번 포트폴리오 제작에 있어서 api요청이 사용되지 않고 기존 팀 프로젝트를 CRA에서 next js로 리팩토링 하는 과정에서 api 요청에 애를 먹고 있어 next js를 안다고는 못하겠지만 두 번정도 next js를 다뤄본 경험만으로도 이미지 최적화나, 코드 스플리팅 등 신경써야 할 부분이 적어졌다는 장점은 꽤 체감하고 있다.

나의 경우에는 react를 공부하는 동안 꾸준히 SEO에 대한 고민이 많았는데 next js를 사용한다면 도전은 가능할거 같다.

tailwind And styled-components

styled-components

컴포넌트 기반 개발이라는 패러다임에 어울리는 css-in-js 라이브러리로 스타일을 컴포넌트로 추상화해 재사용 가능한 스타일 컴포넌트를 생성해 관리한다. styled-components는 템플릿 리터럴을 사용해 컴포넌트의 스타일을 정의하고, 프로러티나 상태 값을 활용한 스타일 생성, props를 통한 스타일 조작 등 동적 스타일링을 지원하며, 전역 스타일링과 테마를 통해 일관된 디자인 시스템을 구축할 수 있게 한다.

tailwind

HTML 및 CSS를 작성할 때 반복적인 작업을 줄여주는 유틸리티 퍼스트 프레임워크로 미리 정의된 클래스를 적용하여 컴포넌트 스타일링을 간단하고 일관성 있게 지원한다. 클래스를 기반으로 스타일을 지정하기 때문에 네이밍의 문제에서 어느정도 자유로워 지며, 기존 제공하는 break point를 통해 쉽게 반응형 페이지를 구형할 수 있다. tailwind.config.js 에서 프로젝트에 사용되는 클래스 등을 커스터마이징할 수 있으며, 실제로 사용되는 클래스만번들에 포함시켜 번들 크기와 빌드 시간을 최적화 한다.

사용 후 장단점

styled-components

장점

• 스타일을 컴포넌트로 생성하기 때문에 재사용성이 좋다. 때문에 같은 스타일을 반복적으로 만들지 않아도 되고, 스타일 상속도 가능하기 때문에 만들어둔 스타일을 활용가능하다.

• props를 통해 변수에 따른 동적인 스타일링도 가능하기 때문에 react 컴포넌트를 만드는 방식과 비슷해 금방 익숙해질 수 있다.

• 컴포넌트의 이름을 적절히 지으면, 코드를 보고서 해당 스타일 컴포넌트가 어떤 역할을 하는 요소의 스타일인지 파악이 용이하다.

• 한 파일 안에 로직과 스타일이 함께 있어 스타일을 수정할 때 파일을 이동하는 번거로움이 줄어든다.

단점

• 스타일을 일일히 컴포넌트화 하는 과정때문에 코드의 양이 늘어난다. 역설적으로 한 파일 안에 스타일과 로직이 함께 있다보니 코드 파악 시 위아래로 시선이 많이 움직이게 된다

• SSR을 사용하는 경우 별도로 ServerStyleSheet 설정이 필요하다.

• 스타일 컴포넌트에 적절한 이름을 넣어야 하기 때문에 협업으로 진행하는 경우 어느정도 컨벤션이 존재해야 한다. ex) cotainer, box, boundary 등 비슷한 이름들...

tailwind

장점

• 이름을 고민하지 않아도 된다. 변수명을 통해 스타일이 적용되기 때문에 추가적인 변수명을 크게 고민할 필요는 없다.

• 기본 제공되는 break point가 있어 반응형 스타일을 적용하기 수월하다.

• 커스터마이징이 가능해 원하는 애니메이션을 config에 등록할 수 있고, 재사용도 가능하다.

단점

• 동적 스타일링에 한계가 있다. 어느정도는 가능하지만 변수로 크기를 지정하는 것은 불가능하고 인라인 css을 사용해야 한다.(인라인 css는 SEO에 좋지 않다.) (+ twin.macro를 통해서 가능하다는걸 이 글을 쓰면서 알게됐다..)

• 여러 스타일을 한 요소에 지정하다보면 클래스명이 옆으로 길어진다. 처음 tailwind를 적용해보고 생각보다 많이 길어져서 살짝 난감했다.

• 변수 명들을 미리 파악하기 전에는 능률이 살짝 떨어질 수 있다. 대체적으로 어떤 스타일인지 파악하기 쉬운 편이지만 익숙해지기 전에는 tailwind 사이트에서 검색을 어느정도 하게 된다.

• 중복 스타일링

포트폴리오에 next + tailwind가 필요 했는가

사실 포트폴리오를 만들때 next + tailwind를 꼭 경험해 봐야지라고 정하고 시작해서 사용했지만 객관적으로 이번 포트폴리오에서는 react + styled-components를 사용하는게 더 적절했을 거라고 생각한다. 크게 두 가지 이유를 들 수 있는데

1. 정적 페이지의 갯수가 달랑 하나
   내 포트폴리오의 컨셉이 mac os이기 때문에 사실상 페이지를 이동할 필요가 없다. 프로젝트가 쌓이면 하나정도는 더 늘어나겠지만 그래도 고작 한 두 페이지 만 있는 사이트에 ssr이 필요할까 싶다.

   프로젝트 기간동안 생성한 컴포넌트도 page.tsx 하나 빼고는 다 client 컴포넌트였기에 더욱이 이런 생각이 들었던 것 같다.
   

2. 동적인 스타일이 너무 메인이었다.
   내가 만들 프로젝트들을 브라우저 형식으로 띄우는 컨셉이었는데, 이 브라우저를 사용자가 조작할때 변화하는 값을 적용하는 부분에 있어서 고민이 좀 있었다. 위에서 언급한 tailwind의 단점중 하나인 동적 스타일링의 한계 때문에 유독 styled-components가 생각났기에 포트폴리오 코드를 좀 깔끔하게 하는 것에는 tailwind가 부적합하다고 생각했다. 물론 내가 잘 찾아보지 않아서 방법이 있다는 걸 모른게 문제였지만..

물론 next와 tailwind에 대한 지식이 많이 부족한 상태에서 포트폴리오 프로젝트에 바로 적용했기 때문에 지금 의견이 올바르지 않을 수 있기에 내가 얘기한 장단점이 꼭 맞지는 않다. 다만 이러한 컨셉의 프레임워크구나~ 하고 경험해보는 시간이었기에 앞으로의 공부에 도움이 될 것이라 생각한다.