Webkit 개요

webkit 폴더는 웹 렌더링 과정에서 필요한 재사용 코드를 담습니다. srvkit과 비슷하지만, 서버 전용 로직이 아니라 브라우저 또는 웹 렌더링 로직을 위한 폴더입니다.

render map, browser helper, web hook, 브라우저 라이브러리 wrapper 등에 사용합니다. 페이지는 복잡한 로직을 직접 들고 있지 않고 webkit barrel에서 가져다 쓸 수 있습니다.

Webkit에 두는 것

Render map

status color, badge, icon, label, page display option처럼 렌더링 중 사용하는 정적 map입니다.

webkit/ticketStatusColorMap.ts

Browser helper

파일 다운로드, cookie 읽기, share link 열기, text copy처럼 작은 브라우저 동작입니다.

webkit/copyText.ts

Web hook

notification, messaging, viewport state, permission check, browser API를 다루는 재사용 hook입니다.

webkit/useViewportWidth.ts

외부 웹 라이브러리 wrapper

페이지가 vendor package를 직접 import하지 않도록 브라우저 라이브러리를 감싸는 코드입니다.

webkit/qrCodeCanvas.ts

Routing/account helper

렌더링 중 account state를 읽거나 사용자를 route하는 웹 helper입니다.

webkit/getSignedInUser.ts

Barrel, 최적화 import, 권장 구조

webkit 폴더는 ui처럼 barrel folder입니다. 웹 helper를 index.ts에서 export하고, 페이지에서는 barrel에서 import합니다. Akan은 import를 최적화해서 페이지가 실제로 사용하는 webkit 파일만 bundle에 포함할 수 있습니다.

1개 파일, 1개 export, 파일명과 export명을 일치시키는 것을 권장합니다. 이렇게 하면 barrel이 예측 가능해지고 optimized import가 정확하게 동작하기 쉽습니다.

webkit/downloadFile.ts

webkit/index.ts

page.tsx

실전 규칙

그 자체가 재사용 UI component는 아니지만 웹 렌더링에 필요한 로직은 webkit에 둡니다.

서버 전용 코드는 srvkit에 두고, 브라우저 또는 웹 렌더링 코드는 webkit에 둡니다.

optimized import가 동작할 수 있도록 깊은 경로 대신 webkit barrel에서 import합니다.

downloadFile.ts가 downloadFile을 export하는 것처럼 파일명과 export명을 맞춥니다.

Webkit 개요

Webkit에 두는 것

Barrel, 최적화 import, 권장 구조

실전 규칙

구조