Waku | 가장 작은 리액트(SSR) 프레임워크

Waku라는 프레임워크에 대한 문서를 읽고 직접 프레임워크를 써보며 가볍게 소개해보려고 한다.

 

큰 프로젝트 외에도 간단한 프로토타입이나 토이 프로젝트를 만들 일이 종종 생기곤 한다.

그럴 때마다 Next.js가 익숙해 자주 집어 들기는 하지만 너무 무겁다는 생각이 들 때가 있다.

 

이런 생각을 하던 중 Waku의 존재를 알게 되었고 딱 나의 니즈에 맞는 가치관을 가지는 프레임워크였기 때문에 문서를 천천히 읽고 번역하고 사용기를 적어 보려고 한다.

 

주요 기능

사용해 보기 전 문서에서 소개하는 피쳐들을 먼저 간단히 요약하자면 아래와 같다.

렌더링

- 프레임워크 내에서 서버 컴포넌트, 클라이언트 컴포넌트 모두 만들 수 있음

- weaving patterns을 통해 두 컴포넌트를 혼용해서 사용할 수 있음.

- SSR, SSG 옵션을 제공함

Routing

- next.js의 pages router과 유사하게 작동함

- _layout.tsx 파일을 통해 아래 있는 페이지에 대한 레이아웃 컴포넌트를 지정할 수 있음

Navigation

- <Link /> 컴포넌트를 사용

- useRouter 훅을 사용해 경로를 핸들링 가능

Meta Data

- title, meta, link 태그를 자동으로 head로 끌어올림

Private Folder

- 서버 컴포넌트에서만 액세스 할 수 있는 폴더로 서버 컴포넌트를 안전하게 사용할 수 있도록 존재하는 폴더

상태 관리

- Jotai를 권장하지만 Zustand와 같은 다른 라이브러리도 호환됨

환경 변수

- 일반적인 환경 변수의 경우 서버 사이드에서만 접근 가능함

- WAKU_PUBLIC_ 접두사를 붙이는 경우에는 클라이언트 사이드에서도 접근 가능

 

---

 

내가 모든 내용을 한 번에 머리에 넣지는 못했겠지만 지금 정리한 내용을 다시 훑어보면 meta 태그를 끌어올려주는 걸 제외한다면 Next.js에서도 제공하는 기능들이긴 하다.

 

문서만 봤을 때는 아예 새로운 개념이나 아이디어가 들어가진 않은 것 같고, 단순함을 내세운 프레임워크인 것 같다.

 

사용해 보기

직접 사용하며 있었던 일을 정리한 단락으로 다소 두서가 없는 단락일 수 있습니다.

 

 

프로젝트 생성

프로젝트를 만드는 건 아래 커맨드를 입력하는 게 전부이고 선택할 수 있는 옵션도 없다.

 

npm create waku@latest

 

 

폴더 구조는 누구나 한 번에 이해할 수 있을 정도로 단순하다.

 

/src/components 내에는 프로젝트 내에서 사용하는 컴포넌트 파일들이 있고,

/src/pages 에는 라우팅 되는 페이지 파일들이 존재한다.

 

<Link />

예시로 나와 있는 페이지는 home, about 이렇게 있는데, home에서는 about 페이지로 들어갈 수 있는 링크가 있다.

그래서 혹시 다른 페이지에 대한 정보를 미리 불러오는 prefetch 기능이 있을까 하여 체크해 봤는데 about 정보를 미리 불러오지는 않았다.

 

 

그래서 <Link /> 컴포넌트를 열어보니 unstable_prefetchOnEnter라는 Props가 있어 이 값을 true로 설정했더니 <Link />에 손을 올리니 about 페이지를 미리 불러온다.

 

아직 완성도가 낮아 unstable로 되어 있겠지만 다행히 waku의 개발진이 prefetch를 고려하고 있는 것 같았다.
근데 Pending, notPending과 같은 Props도 존재해 소스 코드를 확인해 보니 각각 페이지 이동 중 O, 이동 중 X 일 때의 컴포넌트인 것 같은데 Link Component 밖에 렌더링 되고 있는 걸 보아 다소 불안정한 것 같다.

 

소스 코드를 열어보니 다양한 피쳐들이 들어갈 계획인 것 같지만 아직 불안정해 문서에는 따로 적어놓지는 않은 것 같다.

 

마무리

이것 저것 만져봤지만 다른 특별한 부분을 찾지는 못했고, 서버 컴포넌트에 집중한 프레임워크라는 인상을 주었다.

 

아직 많이 불안정해 비즈니스에 사용하기는 많이 불안하지만,

포트폴리오, 토이 프로젝트에는 충분히 사용해 볼 수 있을 것 같다.

 

개인적인 의견으로는 Next.js를 사용해보기 이전에 서버 컴포넌트에 익숙해지기 좋은 프레임워크인 것 같다.

그래서 React에 대한 공부를 끝내고 SSR & 서버 컴포넌트에 대한 공부를 해보고 싶은 사람에게도 추천할 수 있을 것 같다.

 

(+ 혼자 사용하면서 yarn pnp를 적용했고 이 코드를 PR로 만들어 놓았는데 머지가 될지는 모르겠다)