[Preact] Preact + Typescript 및 번들러와 최적화 템플릿 공유

 

대부분의 경우, 프로젝트를 시작하기 위해서는 여러가지 기본적인 설정 값들을 추가하거나 수정할 필요가 있습니다, 하지만 대부분의 경우 단순 노동이라고 생각되며 세팅하는 과정에서 무언가가 잘못될 가능성도 없는 것이 아닙니다.

 

이러한 시간 낭비와 문제점을 줄이기 위해서 다른 사람이 미리 만들어 놓은 시작 키트, 즉 템플릿을 이용하여 초기 세팅을 빠르게 마칠 수 있습니다.

 

저의 경우, Preact 관련하여 최적화 세팅까지 되어있는 템플릿은 찾기가 어려웠습니다. 따라서 최대한 사용자 경험을 높이기 위해 JS의 경우 Terser를 이용하여 압축하고 CSS의 경우 별도의 플러그인으로 압축을 수행하며 webpack-dev-server를 이용한 핫 리로드(Hot Realod) 기능을 추가한 템플릿을 제작하였습니다.

 

그것 뿐만 아니라 CSS, SVG 로더와 Wouter(해당 패키지의 경우는 경량화된 react-router라고 생각하시면 됩니다.), 에셋 리소스 출력 등 기본적으로 모두 세팅되어 있습니다. 자세한 내용은 깃허브 README.md를 참고해주세요.

 

GitHub - MTtankkeo/typescript-preact-webpack: This is template that is simple start-kit about Preact with Typescript.