Omatsuri – 일상 앱

이번 주에 저는 Omatsuri – open source 9개의 프런트엔드 및 디자인 중심 도구가 포함된 브라우저 전용 애플리케이션을 출시했습니다. 이 게시물에서는 개발 중에 직면한 몇 가지 기술적 문제를 살펴보겠습니다.

신청에 대해

Omatsuri는 일본어(お祭り)에서 «축제»로 번역되며 9가지 도구의 축제를 포함합니다.

CSS 삼각형 생성기

색상 음영 생성기

곡선형 페이지 구분선 생성기

SVG 압축기

SVG를 JSX로 변환하는 변환기

Base64 인코더

현실적인 가짜 데이터 생성기

HTML/CSS 기호 컬렉션

로렘/사무엘/포케 입섬 제너레이터

일부 기술 세부정보

나의 초기 목적은 Omatsuri를 브라우저 전용 애플리케이션으로 만드는 것이었습니다. 이 접근 방식을 사용하면 svg 압축, 더 예쁜 변환 및 기타 무거운 작업과 같은 무거운 작업을 수행하는 호스팅 서버 비용을 줄일 수 있습니다.

SVG 압축

JavaScript로 작성된 svg 압축을 위한 좋은 라이브러리(svgo)가 실제로 하나뿐이라는 사실을 알고 계셨습니까? 그리고 브라우저를 지원하지 않고 node.js만 지원합니다. svg 압축이 전적으로 문자열 구문 분석을 기반으로 하고 노드별 논리를 포함하지 않기 때문에 매우 이상하다는 것을 알았습니다.

그래서 첫 번째 작업은 svgo를 브라우저로 마이그레이션하는 것이었습니다. 모든 핵심 로직에 수정이 필요하지 않았기 때문에 매우 쉬웠습니다. 이제 브라우저에서 svg 압축이 필요한 경우 프로젝트에서 svgo-browser 라이브러리를 사용할 수 있습니다.

웹 작업자

이전에 말했듯이 일부 작업은 매우 무겁고 몇 초 동안 브라우저를 차단할 수 있습니다. 이 문제를 해결하기 위해 웹 작업자를 사용하여 별도의 스레드에 배치하여 기본 스레드를 차단하지 않고 백그라운드에서 실행되도록 할 수 있습니다.

webpack에서 웹 작업자와 작업하는 것이 얼마나 쉬운지 놀랐습니다. 모든 작업자 번들링을 처리할 worker-loader만 있으면 됩니다.

다음은 더 예쁘고 svg 압축을 사용하여 svg를 jsx로 변환하기 위한 웹 작업자 사용법example입니다.

// svg-to-jsx.worker.js

import prettier from 'prettier/standalone';
import prettierBabel from 'prettier/parser-babel';
import svg2jsx from 'svg-to-jsx';
import optimize from 'svgo-browser/lib/optimize';

function generateComponent(svg) {
  return `import React from 'react';\n\nexport default function SvgComponent() { return ${svg} }`;
}

onmessage = (event) => {
  const { payload } = event.data;

  optimize(event.data.content)
    .then((content) => svg2jsx(content))
    .then((svg) =>
      prettier.format(generateComponent(svg), { parser: 'babel', plugins: [prettierBabel] })
    )
    .then((code) => postMessage({ error: null, payload, code }))
    .catch((error) => postMessage({ error, payload, content: null }));
};

// react component

import React, { useState, useLayoutEffect } from 'react';
import Svg2jsxWorker from '../../workers/svg-to-jsx.worker';

const svg2jsx = new Svg2jsxWorker();

export default function SvgToJsx() {
  const [result, setResult] = useState({ loading: false, error: null, content: null });

  const handleMessage = (event) => {
    setResult({ loading: false, error: event.data.error, content: event.data.code });
  };

  const postMessage = (text) => svg2jsx.postMessage({ content: text });

  useLayoutEffect(() => {
    svg2jsx.addEventListener('message', handleMessage);
    return () => svg2jsx.removeEventListener('message', handleMessage);
  }, []);

  return (/* ... */);
}

SPA 사전 렌더링

앱에는 서버 로직이 없으므로 완전히 미리 렌더링할 수 있습니다. 이를 위해 프로덕션 빌드에서 모든 앱 경로를 자동으로 사전 렌더링하는 webpack pugin이 있습니다. 이 플러그인here에 대한 내 구성을 볼 수 있습니다.

기여

오픈 소스 프로젝트에 기여하기를 기다렸다면 지금이 기회입니다! 앱에 추가할 수 있는 많은 기능이 있으며 그 중 일부는 다음과 같습니다.

서비스 작업자를 통한 오프라인 지원

어두운 테마 지원(사용자 os에서 자동으로 감지됨)

새 애플리케이션 – 예: 그래디언트 생성기

기여하기로 결정했다면 정보 페이지에서 자신을 hall of fame에 추가하는 것을 잊지 마십시오.

어떻게 생각해?

이 프로젝트가 마음에 드십니까? 당신은 그것을 사용할 것인가? 부끄러워하지 말고 무엇이든 의견을 말하십시오. 어떤 피드백이든 기꺼이 받겠습니다.