생각과 기록

리액트 텍스트 에디터 구현기(WYSIWYG Editor)

유도혁 — Sat, 2 Sep 2023 16:28:33 +0900

대부분의 커뮤니티가 html을 기반으로 한 텍스트에디터를 사용한다. 그것은 당연하게도 렌더링할 때 서버에서 받아온 내용 그대로 출력하기에 용이하고, 그 이상의 요구사항이 필요 없기 때문이다.

하지만, 어느 서비스에서 특화된 컴포넌트를 보여주어야 하거나 모바일 앱과도 연계해야 한다면 어떨까? 이 순간 텍스트에디터는 진화하여야 한다.

만난계기

해당 요구사항의 웹 서비스를 구현해야 했는데 맨붕이왔다. 당연히도 그럴 것이 앱에서는 이미 독자 규격으로 컴포넌트형 콘텐츠를 사용한 커뮤니티가 서비스 중이었기 때문이다.

Lead와 Delete는 받아온 데이터를 규격에 따라 컨버팅하고 맞는 컴포넌트에 렌더링하여 해결하였다. 문제는 역시 Create와 Update인데 얼마 남지 않은 개발기간 동안 텍스트에디터에 손대보지 않다가 이것을 처음 구현하기란 어려웠다. 주변에서는 적당한 라이브러리를 찾아서 사용하면 되는 것이 아니냐고 하였지만, 사용자의 개인 데이터를 불러오고 그중에 원하는 것을 추가하여 공유하는 스펙이 있었다. 구현해야 하는 디자인도 그렇고 단순히 html을 편집하는 방식은 아닌 것 같았다. 참고를 위해 노션이나 네이버 블로그나 카페에서 사용하는 에디터로 글을 작성해 보며 어떻게 동작하는 걸까 고민했다. 그런데 마침 타이밍 좋게 FECONF 2022 를 보고 있었는데 짠! 하고 텍스트 에디터에 대한 내용이 나오는 게 아니겠는가…

contenteditable

사용자가 요소를 편집할 수 있는지 나타내는 특성

텍스트에디터의 역사

1세대

contenteditable을 기반으로 html 형식에 의존하여 내용을 작성하면 그 자체가 html로 기록되어 바로 보여주며, html 편집으로도 작성할 수 있다. html이다 보니 웹브라우저 이외의 환경에서 사용이 불가하다.

예시로는 메일 편집기나 티스토리 html로 글 작성과 같은 방법이다.

1.5세대

json을 기본 데이터형식으로 사용하여 멀티 디바이스에 대응할 수 있다. 블록 단위 편집해야 하고 다른 블록의 텍스트를 함께 선택하는 것이 불가능하다.

2세대

가상 커서와 인풋 버퍼를 사용하여 어색한 부분을 해결하였지만, 브라우저 네이티브 기능을 사용하기 어려움과 다국어에 따라 입력방식이 다른 점을 대응하기 힘듦.

3세대 에디터

React

vDOM으로 데이터 변경시 컴포넌트 단위 리렌더링 기능 제공

MobX

상태관리 라이브러리로 React와 함께 사용하면 리렌더링에 관여할 수 있음

observer: 상태 변화를 감지하여 렌더링에 관여할 수 있음.

ContentEditable

콘텐츠를 편집할 수 있음.

기존 기술과의 충돌

두 기술의 데이터를 관리하는 절차의 차이로 데이터의 싱크가 깨지는 문제가 발생한다.

싱크 문제 해결

MobX의 untracked API를 이용하여 contenteditable을 이용하는 상황에는 react의 반응을 중단하고 있다가, 백스페이스나 엔터와 같이 데이터 그룹에 영향이 가는 부분은 store를 업데이트하고 vDom을 업데이트할 수 있도록 한다.

function Edit({ content }: EditProps) {
  const {
    contentEditableRef,
    lines,
    upstreaming,
    handleInput,
    handleKeyDown,
    ...
  } = useEdit(content);

  const Content = () => {
    const render = () => {...};

    if (upstreaming) {
      return <span>{untracked(render)}</span>;
    }

    return <span>{render()}</span>;
  };

  return (
    <Editer
      ref={contentEditableRef}
      contentEditable={true}
      suppressContentEditableWarning={true}
      onInput={handleInput}
      onKeyDown={handleKeyDown}
      ...
    >
      <Content />
    </Editer> 
  );
};

function useEdit(content: Content | 'post') {
  const contentEditableRef = useRef<HTMLDivElement | null>(null);
  const {
    lines,
    upstreaming,
    setLines,
    setUpstreaming,
    updateStore,
    keyDownEnter,
    keyDownBackspace,
    ...
  } = useStore<EditorStore>('editorStore');

  const handleInput = () => {
    setUpstreaming(true);
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    if (e.nativeEvent.isComposing) return e.preventDefault();

    switch (e.key) {
      case 'Enter':
        return keyDownEnter(e);
      case 'Backspace':
        return keyDownBackspace(e);
      ...
    }
  };

  useEffect(() => {
    const mo = new MutationObserver((mutations) => {
      if (!upstreaming) return;

      mutations.forEach(updateStore);
    });

    if (contentEditableRef.current)
      mo.observe(contentEditableRef.current, {...});

    return () => {
      mo.disconnect();
    };
  }, []);

  return {
    contentEditableRef,
    lines,
    upstreaming,
    handleInput,
    handleKeyDown,
    ...
  };
};

참고링크들

https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/contenteditable

https://www.youtube.com/watch?v=xDyUFE1pmmY

https://deview.kr/data/deview/session/attach/[114]중요한_건_꺾이지_않는_마음_최종.pdf

프론트엔드와 백엔드 개발자의 전문성과 강점(feat.ChatGPT)

유도혁 — Sun, 2 Apr 2023 14:53:22 +0900

최근 프론트엔드와 백엔드에 대한 대화를 나누는 중에 백엔드 개발자가 "프론트엔드 개발자보다 실력이 압도적으로 높다"는 질문을 받았습니다. 하지만 이러한 주장은 전문성과 강점을 고려하지 않은 것입니다.

프론트엔드와 백엔드는 모두 웹 개발에서 필수적인 역할을 하고 있습니다. 그러나 프론트엔드와 백엔드 개발자는 서로 다른 전문성을 가지고 있습니다. 프론트엔드 개발자는 사용자 경험을 중심으로 웹 사이트 또는 앱의 디자인, 레이아웃, 인터페이스 및 기능을 구현합니다. 반면 백엔드 개발자는 데이터 처리, 서버 및 데이터베이스 구현, API 디자인 및 보안과 같은 서버 측 기능에 집중합니다.

따라서 중급과 고급 수준에서는 프로그래밍, 알고리즘, 데이터 구조, 네트워크 및 데이터베이스와 같은 CS 지식은 서로 비슷할 것으로 예상됩니다. 그러나 프론트엔드와 백엔드 개발자의 전문성과 강점은 다릅니다. 프론트엔드 개발자는 사용자 경험에 대한 전문성을 가지며, 디자인, 레이아웃, 인터페이스 등의 영역에서 뛰어납니다. 반면, 백엔드 개발자는 서버 측 프로그래밍과 데이터 처리, 보안 등의 분야에서 전문성을 가지고 있습니다.

이러한 전문성과 강점을 고려할 때, 프론트엔드와 백엔드 개발자는 서로 비교할 수 없는 분야입니다. 서로 다른 분야에서 다른 전문성을 가지고 있으며, 이를 결합하여 웹 개발 프로젝트를 성공적으로 완료할 수 있습니다. 따라서 프론트엔드와 백엔드 개발자 모두가 중요한 역할을 수행하며, 서로의 전문성을 존중하고 협업하는 것이 중요합니다.

결론적으로, 프론트엔드와 백엔드 개발자는 각각의 분야에서 강점을 가지고 있으며, 전체 웹 개발 프로젝트에서 중요한 역할을 수행합니다.

SSR 서비스에서 반응형 웹 개발 이야기(SSR이 필요한 이유)

유도혁 — Sat, 1 Oct 2022 16:21:58 +0900

개요

useWindow라는 커스텀 훅을 만들어 isMobile, isTablet, isDesktop 으로 컴포넌트나 props를 분기시키며 개발하고 있었다.

// useWindow.ts

const useWindow = () => {
  const isMobile = useRef<boolean>(false);
  const isTablet = useRef<boolean>(false);
  const isDesktop = useRef<boolean>(false);
  const isClient = useRef<boolean>(false);

  const [windowSize, setWindowSize] = useState<{ width: number; height: number }>({
    width: 0,
    height: 0,
  });

  useEffect(() => {
    if (typeof window !== 'undefined') {
      isClient.current = true;
      const handleResize = () => {
        setWindowSize({
          width: window.innerWidth,
          height: window.innerHeight,
        });

        isMobile.current = window.innerWidth < deviceWidthNumber.tablet;
        isTablet.current =
          window.innerWidth > deviceWidthNumber.tablet &&
          window.innerWidth < deviceWidthNumber.desktop;
        isDesktop.current = window.innerWidth > deviceWidthNumber.desktop;
      };

      window.addEventListener('resize', handleResize);

      handleResize();

      return () => window.removeEventListener('resize', handleResize);
    }
  }, []);

  return {
    ...
  };
};

export default useWindow;

단순하게 위 사진처럼, PC 화면에서는 aside 화면이 노출되는 상태이고, 모바일 화면에서는 햄버거 메뉴가 추가되어 이를 클릭하였을 때 aside 화면을 확인할 수 있는 구조이다.

useWindow를 사용하였을 경우 브라우저 화면을 늘리고 줄일 때마다 UI가 즉시 반영된다. 하지만 이는 모든 초기 렌더링이 끝났을 경우의 이야기이고, 아래의 각 서비스 환경에 따라 초기 렌더링 시의 보이는 화면에 대한 차이를 이야기해보려고 한다.

각 초기 렌더링

CSR과 useEffect();

기본적인 CSR의 경우 첫 화면을 불러올시, 깡통 index.html파일과 함께 해당 페이지에대한 번들링된 bundle.js 파일을 클라이언트에 던져주게 된다. 이는 JavaScript 파일이 동작하기 이전까지 사용자는 빈 화면을 볼 것이고, 크롤링 봇의 경우는 유용한 페이지가 아니라고 인식하고 지나갈 것이다. 물론 JavaScript가 동작하고나면, 사용자가 어느 액션을 취한다거나 같은 서비스 내의 페이지를 이동시 화면이 빠르게 변경되는 것을 확인할 수 있을 것이다.

CSR useLayoutEffect();

여러 초급 React 개발자들이 자주 하는 실수가 적절한 상황에 적절한 hook을 사용하지 않는 것이다. hook을 많이 알고 있는 것에 따라 서비스의 리소스 최적화에 어느 정도 영향을 끼치는 것 같다. 지금과 같은 상황에서도 useWindow라는 커스텀 훅을 useEffect로 사용 중이다. 이를 useLayoutEffect로만 바꾸어주어도, 초기 렌더링 속도를 꽤 줄일 수 있다.

useEffect - Data측면의 상태관리를 할때 주로 사용한다.

useLayoutEffect - 화면에 영향이 있는 상태관리시 주로 사용한다.

SSR과 useEffect();

SSR(server side rendering) 말 그대로 client에서 요청을 하면, CSR과는 다르게 server에서 JavaScript를 동작시켜, 1차적으로 렌더링을 끝낸 화면과 bundle.js파일을 client로 보내주게된다. 하지만, 이 과정에서 client server에서는 요청한 client의 window size를 알 수 없기 때문에 SSR이 원하는 대로 이루어지지 않고, client에 렌더링 된 파일을 보내준다. 그 이후 동작은 기존 CSR과 같다.

가끔 SSR이 왜 필요한지, 예전의 SSR과 다른게 뭔지 질문을 받아보았는데 이참에 필요한 이유를 정리해보려고 한다.

예전의 SSR

server에서 html template파일을 갖고 있다가, client에서 요청시 필요한 template을 response로 보내준다.

이는 페이지를 이동할 때 마다 비슷한 UI가 있어도 다시 모든 파일을 보내준다. 상태관리나 api call의 경우 주로 jQuery나 Ajax로 하게되는데, 객체지향 프로그래밍이 어렵고, 코드가 전혀 암호화되지 않기 때문에 보안적으로 매우 취약한 상태가된다.

CSR

client에서 요청 시 해당 프로젝트를 갖는 저장소에서 index.html과 빌드 및 번들링 된 파일을 보내준다. 초기 렌더링이 조금 느리지만, 페이지 이동 시 같은 화면은 놔두고, 필요한 파일만 받아와서 화면을 업데이트할 수 있게 되었으며, 예전의 SSR과 비교해서 코드를 객체 지향적으로 작성할 수 있게 되었고, 성능 최적화에 많은 이점을 얻게 되었다. 하지만, 기본적으로 index.html에 넣어둔 opengraph정보 말고는 크롤링 봇이 갖고갈 수 있는 정보가 전혀 없기 때문에, 다른 사이트들보다 좋은 콘텐츠를 갖고 있다고 해도 포털사이트들의 검색 결과에 상위노출 시키기가 어렵고, 다양한 소셜서비스에서 바이럴 효과를 얻고 싶어도, 미리보기 화면이 원하는 대로 만들어지지 않기 때문에, 클릭률이 낮아질 수밖에 없다.

CSR Pre-Rendering

위 CSR의 단점을 보완하기 위해서 만들어진 기술로, 프로젝트 빌드 시점에 어느 정도의 원하는 페이지들을 미리 만들어두고, client 요청 시 미리 만들어둔 파일을 전달해준다. 당연하게도 초기 렌더링 시간이 없어지고, 크롤링 봇또한 의도한 콘텐츠를 읽어 들여 포털사이트의 검색 결과의 순위가 올라갈 수도 있고, 소셜서비스의 바이럴 효과 클릭률도 올라가게 된다.

“그럼 Pre-Rendering 하면 되지, 왜 신규 SSR이 나와서 저장소가 아니라 서버를 써야 하냐?””라고 묻는다면, 만약 우리 서비스에서 잘 보여주고 싶은 페이지가 1억 개를 가지고 있고, 그것을 모두 Pre-Rendering 하게 된다고 한다면, 빌드 시간이 엄청나게 불어나게 되고, 어느 페이지의 콘텐츠가 업데이트되었다고 한다면, 이미 Pre-Rendering 된 파일은 업데이트되지 않는다.

신규 SSR

위 모든 단점이 보완되어 즉, 객체 지향적으로 프로그래밍할 수 있고, 코드를 쉽게 암호화할 수 있으며, 기본적인 콘텐츠를 client server가 서비스의 server에서 불러온 다음에 렌더링하여 크롤링 봇의 인식 및 소셜 바이럴에 문제가 없고, 페이지 이동 시 필요한 파일만 줄 수 있고, Pre-Rendering 기술도 사용할 수 있어서 저장된 페이지를 바로 client에 건네줄 수 있으며, 한 번 요청된 페이지를 캐싱시키고 캐싱 된 페이지를 다음부턴 바로 보내줄 수도 있다.

추가로 더 알아본다면, react의 최신 기술인 hydration이라는 기술이 있는데, 사용자가 보고 있는 컴포넌트만 client에 보내주고, 스크롤 등 화면을 이동 시에 추가로 필요한 컴포넌트를 받아와서 렌더링시키는 방법이다. 이를 SSR에 적용하면, 크롤링 봇이 hydration 된 컴포넌트를 인식하지 못한다고 생각할 수 있는데, 화면 렌더링은 시켜두되 해당 컴포넌트의 번들링 된 JavaScript 파일은 화면상에 보였을 때 받아오는 신기술이 있다.

https://nextjs.org/docs/advanced-features/dynamic-import

Advanced Features: Dynamic Import | Next.js

Dynamically import JavaScript modules and React Components and split your code into manageable chunks.

nextjs.org

~~즉, nextjs는 무적이고 최강이다.~~

SSR과 useLayoutEffect();

SSR과 css @media screen

결국 SSR에서 반응형 웹 개발을 할 때 hook의 의존성을 줄이고, css의 @media screen으로 개발하면, 더욱 나은 SSR 개발을 할 수 있다.

nextjs 다국어, 로컬라이제이션(localization) 지원하기 next-i18next 사용

유도혁 — Sun, 28 Aug 2022 17:49:49 +0900

기존 개인 프로젝트에서 영어와 한국어를 섞어서 사용하고 있었고, 게다가 텍스트를 그냥 코드 중간에 삽입하는 형식으로 관리하고 있었다. 사실상 관리는 아닌 것이다.

nextjs에서 사용하는 다국어 패키지를 찾아보았고, 그중 괜찮은 것을 사용하기로 하였다.

기본 설정

next-i18next 설치

npm install next-i18next

npm과 yarn등으로 쉽게 설치할 수 있다.

next-i18next 경로 예시

.
└── public
    └── locales
        ├── ko
        |   └── common.json
        |   └── index.json
        |   └── footer.json
        └── en
            └── common.json
            └── index.json
            └── footer.json

json형식으로 사용하는 텍스트를 관리할 수 있다. nextjs가 pages를 router형태로 관리하다보니 기본적으로 페이지 이름별로 json파일을 만들고 공통으로 사용하는 common이나 footer을 따로 만들어서 관리하였다.

next-i18next.config.js

module.exports = {
  debug: process.env.NODE_ENV === 'development',
  i18n: {
    defaultLocale: 'ko',
    locales: ['ko', 'en'],
  },
  reloadOnPrerender: process.env.NODE_ENV === 'development',
};

next-i18next의 설정 파일이다. 프로젝트의 root경로에 두어 관리하였다.

자세한 설정은 docs를 참고하면 좋을 것 같다.

next.config.js

const { i18n } = require('./next-i18next.config');

const nextConfig = {
  i18n,
};

module.exports = nextConfig;

위의 next-i18next.config.js파일에서 설정을 해준 것을 적용하려면, next.config.js파일에서 적용시켜주어야 한다.

_app.tsx

import React from 'react';
import { AppProps } from 'next/app';
import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }: AppProps) {
  return (
      <Component {...pageProps} />
  );
}

export default appWithTranslation(MyApp);

또한 적용시켜주려면 _app.tsx에서 appWithTranslation로 감싸주어야 한다.

사용 방법

공통사항

import { serverSideTranslations } from 'next-i18next/serverSideTranslations';

export async function getStaticProps({ locale }) {
  return {
    props: {
      ...(await serverSideTranslations(locale, ['common', 'footer'])),
      // Will be passed to the page component as props
    },
  };
}

nextjs에서 서버사이드로 next-i18next를 적용시키려면, 위와 같이 모든 페이지에 getStaticProps에서 텍스트 정보들을 가져와 주어야 한다. 이것이 귀찮다면, 이처럼 사용하는 고도화 방법도 있다.

페이지에서 사용하기

import Link from 'next/link'
import { useRouter } from 'next/router'

import { useTranslation, Trans } from 'next-i18next'
import { serverSideTranslations } from 'next-i18next/serverSideTranslations'

import { Header } from '../components/Header'
import { Footer } from '../components/Footer'

const Homepage = () => {

  const router = useRouter()
  const { t } = useTranslation('common')

  return (
    <>
      <main>
        <Header heading={t('h1')} title={t('title')} />
        <div style={{ display: 'inline-flex', width: '90%' }}>
          <div style={{ width: '50%' }}>
            <h3 style={{ minHeight: 70 }}>{t('blog.optimized.question')}</h3>
            <p>
              <Trans i18nKey='blog.optimized.answer'>
                Then you may have a look at <a href={t('blog.optimized.link')}>this blog post</a>.
              </Trans>
            </p>
            <a href={t('blog.optimized.link')}>
              <img style={{ width: '50%' }} src='https://locize.com/blog/next-i18next/next-i18next.jpg' />
            </a>
          </div>
          <div style={{ width: '50%' }}>
            <h3 style={{ minHeight: 70 }}>{t('blog.ssg.question')}</h3>
            <p>
              <Trans i18nKey='blog.ssg.answer'>
                Then you may have a look at <a href={t('blog.ssg.link')}>this blog post</a>.
              </Trans>
            </p>
            <a href={t('blog.ssg.link')}>
              <img style={{ width: '50%' }} src='https://locize.com/blog/next-i18n-static/title.jpg' />
            </a>
          </div>
        </div>
        <hr style={{ marginTop: 20, width: '90%' }} />
        <div>
          <Link
            href='/'
            locale={router.locale === 'en' ? 'de' : 'en'}
          >
            <button>
              {t('change-locale', { changeTo: router.locale === 'en' ? 'de' : 'en' })}
            </button>
          </Link>
          <Link href='/second-page'>
            <button
              type='button'
            >
              {t('to-second-page')}
            </button>
          </Link>
        </div>
      </main>
      <Footer />
    </>
  )
}

export const getStaticProps = async ({ locale }) => ({
  props: {
    ...await serverSideTranslations(locale, ['common', 'footer']),
  },
})

export default Homepage

위처럼 json object를 object[key]처럼 사용하는 것이 아니라, t(’object.key’)의 형식으로 접근할 수 있다.

t('object.key', { returnObjects: true })

이전의 방식은 텍스트를 불러오는 방법이고, 위처럼 사용하면, object나, array형식도 불러올 수 있다.

컴포넌트에서의 사용

혹시나 컴포넌트에서 사용하려면, props로 전달해야 하는가 궁금하였다면, 걱정하지 않아도 된다.

page단에서 이미 getStaticProps로 불러왔다면, 추가 방식 없이 t(’object.key’)처럼 그냥 사용할 수 있다.

결과

할인율, 세일, 비율, 일부 값, 퍼센트 계산기 | 개발자 유도혁

할인율, 퍼센트의 계산을 간단하게 하고 싶은 분들이 많습니다. 총 6가지의 퍼센트 계산을 활용해서 원하는 결과를 찾아보세요! | 개발자 유도혁

okdohyuk.dev

개인 프로젝트에 적용해본 결과이다. opengraph도 언어별로 설정하여서 seo에 더 좋은 결과가 있으면 좋겠다.

참고 링크

next-i18next

The easiest way to translate your NextJs apps.. Latest version: 12.0.0, last published: 7 days ago. Start using next-i18next in your project by running `npm i next-i18next`. There are 74 other projects in the npm registry using next-i18next.

www.npmjs.com

GitHub - i18next/next-i18next: The easiest way to translate your NextJs apps.

The easiest way to translate your NextJs apps. Contribute to i18next/next-i18next development by creating an account on GitHub.

github.com

유도혁 인프콘 2022에 참가하다

유도혁 — Sat, 27 Aug 2022 15:10:28 +0900

3년 만에 오프라인 컨퍼런스에 참가하였다. 이 기사의 내용을 보면 신청자수가 1만 명 정도인데 추첨인원은 1천 명 정도이니 대강 1/10의 확률로 합격한 샘이다.

행사날짜가 8월 26일 금요일 이어서 연차를 사용해야 갈 수 있는 상황이었는데, 최근 생긴 매달 마지막 금요일과 명절 전날에 오후 반차를 주는 패밀리데이라고 하는 복지제도가 생겨서 반차만 쓰고 참가할 수 있었다.

맥북을 가져가서 정리라도 할까 싶었는데 아침에 각 세션 자리에 책상이 없는 것을 확인하고 있으면 좋지만, 별로 안 쓰고, 없으면 불편한 아이패드를 가져갔다. 굉장히 오랜만에 굿 노트에 필기를 하며 정리하였다.

그림 1: 굿노트에 필기한 내용중 일부, 그림 2: 당근마켓 기업부스 룰렛화면, 그림 3: 기업부스에 줄선사람들 일부, 그림 4: 룰렛도장 못 받은 종이

듣고 싶은 세션을 정리하고 다 듣고 싶었지만, 각 기업부스에서 주는 스티커와 다양한 경품들과 도장을 3개 모으면 한 번 돌릴 수 있는 룰렛이 더 갖고 싶었는데 많은 사람들도 같은 생각이다 보니 줄이 늘어서서 3가지의 세션을 정상적으로 듣지 못했다. 기업부스는 다 돌았지만, 마지막 룰렛이 하나의 줄로 운영되다 보니 분산처리가 되지 않아 결국 끝까지 룰렛 보상은 받지 못했다...

인프런 아키텍처의 과거, 현재 그리고 미래, 이동욱

인프런 아키텍처의 과거, 현재 그리고 미래를 들으며 공감 가는 내용이 많이 있었다.

인프런은 완전 초기에 워드프레스를 사용하다가 개발자가 조금씩 들어오자 언어를 통일할 수 있는 FxJS환경의 단일 프로젝트로 개발하다가 타입 추론 및 신규 입사자들의 적응이 힘들다는 이유로 점진적 개선방식으로 프론트와 백엔드를 점차 분리하였고, 인프런에서 이벤트를 열면 매번 서버가 터져서 MSA방식으로 발전시키는 듯싶었다.

여러 회사에서 여러 기술을 사용하겠지만, 위와 같은 아키텍처의 변천사는 대부분의 회사에서 필연적으로 겪게 되는 것 같다. 처음부터 완벽에 가까운 아키텍처를 설계하고 개발하는 것과 같이 이상적인 그림은 있지만, 주변 환경과 서비스의 발전과 기술의 발전을 생각하였을 때 결코 점점 발전해 나가는 아키텍처도 나쁜 것만은 아니라는 것을 알게 되었다.

개발바닥 공개방송 - 개발바닥 (향로, 호돌맨) 개발자의 셀프 브랜딩, 김민준

okdohyuk.dev를 개발하기 시작한 것도 토이 프로젝트를 만들어 배포하고 운영하는 것도 좋겠지만, 그것은 같이 할 사람을 모아서 하거나 대회에 나가서 하는 게 더 재미있을 것 같았고, 내 개인 프로젝트는 내가 사용하는 서비스를 만들어야 더 보람찰 것 같았다.

위 도메인을 위해서 사용하고 있던 okdohyuk(오케이도혁, 유도혁) 아이디를 확정하고, 나만의 심벌을 밀고 있고, tailwindCSS에서 시스템 라이트/다크 모드를 적용하거나 MobX를 배우면서 사용하는 등 발전과 개선을 거듭해나가고 있다.

플로우) 아이디어 -> 학습 -> 개발 -> 포스팅

주위에는 토이 프로젝트를 운영하는 사람들이 많아서 "이러한 방식이 맞나?"라는 의심을 조금 해보기도 했었는데, 김민준 님의 셀프 브랜딩 세션과 개발바닥 QnA 토크쇼를 들으며, 내가 하는 방식을 확신할 수 있었고 더 열심히 하게 될 동기가 되었다. 뿐만 아니라 전부터 팬이어서 눈앞에서 그분들을 볼 수 있었다는 것만으로도 좋았다.

지금까지는 포스팅을 하더라도 공유를 잘 안 했다는 것이 많이 뜨끔하긴 했는데, 앞으로는 용기를 내서 여러 채널에 올려볼 생각이다.

유튜브를 하는 것도 좋다고 하시는데 그건 자신감이 더 있을 때 해보도록 하겠다

인프콘에서 받은 경품들의 대부분

Nextjs에서 React Testing Library + Mobx 사용하기

유도혁 — Mon, 15 Aug 2022 18:45:43 +0900

서비스를 운영하다보면, 요구사항이 추가되거나 변경되는 경우가 많다. 그리고 어떤 환경에서 개발을 하더라도 테스트를 하던 코드를 실수로 커밋하거나 다양한 실수를 할 수 있다. 이를 해결하는 것이 테스트 코드를 미리 작성하여, 테스팅을 하며 개발하는 것인데 TDD에 대한 짧고 명확한 개념과, Nextjs에서 hooks과 testing-library/react와 Mobx와 TypeScript를 사용해본 방법을 작성해보았다.

TDD

실패

개발 시작 전부터 테스트코드를 먼저 작성하여,

성공

테스트코드에 의한 테스트를 진행하면서 개발하고 성공을 이루어내고,

리팩토링

성공 후 개선할 수 있는 부분은 최대로 개선하면서 그 도중에도 테스트를 한다.

install and setting

npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

// jest.config.js
const nextJest = require('next/jest');
const { pathsToModuleNameMapper } = require('ts-jest');
const { compilerOptions } = require('./tsconfig.paths.json');

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
});

// Add any custom config to be passed to Jest
const customJestConfig = {
  preset: 'ts-jest',
  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/src/' }),

  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',

  collectCoverage: true,
  // on node 14.x coverage provider v8 offers good speed and more or less good report
  coverageProvider: 'v8',
  collectCoverageFrom: [
    '**/*.{js,jsx,ts,tsx}',
    '!**/*.d.ts',
    '!**/node_modules/**',
    '!<rootDir>/out/**',
    '!<rootDir>/.next/**',
    '!<rootDir>/*.config.js',
    '!<rootDir>/coverage/**',
  ],
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  testPathIgnorePatterns: ['<rootDir>/node_modules/', '<rootDir>/.next/'],
  transform: {
    // Use babel-jest to transpile tests with the next/babel preset
    // https://jestjs.io/docs/configuration#transform-objectstring-pathtotransformer--pathtotransformer-object
    '^.+\\.(js|jsx|ts|tsx)$': ['babel-jest', { presets: ['next/babel'] }],
  },
  transformIgnorePatterns: ['/node_modules/', '^.+\\.module\\.(css|sass|scss)$'],
};

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig);

./tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "~": ["./"],
      "~/*": ["./*"],
      "@components": ["./components"],
      "@components/*": ["./components/*"],
      ...
    }
  }}

위는 ./src 를 기본 디렉터리로 사용하고, 절대경로 별칭을 사용할 경우 사용한다.

rtn + mobx

// Component.test.tsx
it('matches snapshot', () => {
    const store = new Store();
    const utils = render(
      <Provider store={store}>
        <Component /> // 테스트할 컴포넌트
      </Provider>,
    );
    expect(utils.container).toMatchSnapshot();
  });

// useStore.ts
import React from 'react';
import { MobXProviderContext } from 'mobx-react';
import { Store } from '@stores/type';

function useStore(store: keyof Store) {
  return React.useContext(MobXProviderContext)[store];
}

export default useStore;

// Components.tsx
function Component() {
  const store = useStore('store');
  
  return (
    <div>
	    {store}
    </div>
  );
}

export default observer(Component);

기존 코드에서 inject로 store을 가져와 사용하였는데, 컴포넌트에서 사용하려니 컴포넌트의 props와 스토어의 props에 관련된 문제가 있어 useStore이라는 커스텀 훅을 만들어 가져와 사용하게 되었다.

참고:

벨로퍼트와 함께하는 리액트 테스팅

learn-react-test.vlpt.us

Testing | Next.js

Learn how to set up Next.js with three commonly used testing tools — Cypress, Playwright, Jest, and React Testing Library.

nextjs.org

nextjs에서 원하는 키워드로 구글검색 상위노출시키기

유도혁 — Sun, 7 Aug 2022 15:40:04 +0900

7월부터 계속해서 개인 프로젝트를 성장시키는 중이다. 딱 어떠한 서비스 같은 토이 프로젝트가 아니고, 확장성을 최대한으로 할 수 있는 도메인을 판 것이다. 자세한 내용은 이 전 포스트를 참고하면 될 것이다.

개인프로젝트에 대한 생각

2022년 연초에 올해의 목표라던가 계획을 세웠었다. 사실 대강 몇년 후 까지도 적어보긴 했는데, 대부분 개발자로서의 성장에 관련된 내용이다. "개인 프로젝트를 만들어서 서비스하고, 거기서

blog.okdohyuk.dev

만들었으면, 아니 만들고 있는 중이지만, 나만 알고 있는 것 보단 알리는 것이 좋을 것 같다고 생각했다.

목표로 설정한 것은 내 아이디인 "okdohyuk"를 구글에 검색하였을 때 1위를 차지하는 것이었다. 애초에 도메인에도 그 키워드가 들어가 있어서 구글 search-console에 robots.txt 정도만 잘 갖다 줘도 될 것이라고 생각하였다.

next-sitemap

최대한 쉽게 만들 수 있고, 자주 변경될 수 있으면 좋을 것 같아서, 빌드시 자동으로 생성될 수 있게 하는 next-sitemap을 발견하여 추가하였다.

사용 방법은 아래와 같고, 특정 페이지는 노출시키지 않음과 같은 내용은 해당 패키지를 참고하면 좋을 것 같다.

npm install next-sitemap

package.json

"scripts": {
    "postbuild": "next-sitemap", // 추가
  },

next-sitemap.config.js

/** @type {import('next-sitemap').IConfig} */

module.exports = {
  siteUrl: 'https://okdohyuk.dev',
  changefreq: 'daily',
  generateRobotsTxt: true,
  robotsTxtOptions: {
    policies: [
      {
        userAgent: '*',
        allow: '/',
      },
    ],
  },
};

이후 /robots.txt 와 /sitemap.xml을 구글 서치 콘솔에 업로드하였다.

analytics

혹시 같은 구글이니까 애널리틱스를 추가하면 도움이 되지 않을까 싶기도 하였고, 그냥 달아두고 나중에 지표라도 보고 싶어서 추가하였다.

아래는 nextjs에서 analytics를 추가하는 코드이다. 클라쪽에서만 실행되어야 하는 것과, nextjs에서 페이지가 이동되었을 때 그것을 인식할 수 있게 한다.

lib/gtag.ts
export const GA_TRACKING_ID = 'analytics 개인 ID';

// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
export const pageview = (url: URL) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  });
};

type GTagEvent = {
  action: string;
  category: string;
  label: string;
  value: number;
};

// https://developers.google.com/analytics/devguides/collection/gtagjs/events
export const event = ({ action, category, label, value }: GTagEvent) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  });
};

_document.tsx

<Head>
	<Script
          src={'https://www.googletagmanager.com/gtag/js?id=' + GA_TRACKING_ID}
          strategy="afterInteractive"
        />
        <Script id="google-analytics" strategy="afterInteractive">
          {`
          window.dataLayer = window.dataLayer || [];
          function gtag(){window.dataLayer.push(arguments);}
          gtag('js', new Date());

          gtag('config', '${GA_TRACKING_ID}', {page_path: window.location.pathname});
        `}
        </Script>
</Head>

 _app.tsx
 
 
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url: URL) => {
      gtag.pageview(url);
    };
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

일단 "okdohyuk" 키워드로 okdohyuk.dev 사이트가 뜨긴 하였다. 하지만, 순위는 아래쪽에 있었고, 깃헙이라는 큰 산이 있었다.

openGraph

적어도 카톡에 링크를 공유했을 때 링크 한 줄 나오는 것보다 이미지와 설명이 있으면 멋질 것 같고, 결국 SEO에서 인식률을 높일 수 있겠다 싶어 빠르게 작업했다.

이번 작업에서는 딱히 다른 정보들은 찾아보지 않았고, openGraph에 관련된 meta 태그만 검색하였다.

OpenGraph - Preview Social Media Share and Generate Metatags

OpenGraph is the easiest way to preview and generate open graph meta tags for any website.

www.opengraph.xyz

개발하면서 3000포트를 ngrok에 띄어 위 오픈그래프를 테스트할 수 있는 사이트에 테스팅을 하면서 개발했다.

opengraph preview

간단히 페이지별로 제목과 설명을 추가할 수 있게 하였고, 아직 썸네일 이미지를 바꿀만한 페이지는 없어서 그 부분은 통일시켰다.

opengraph.tsx

import React from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';

type Opengraph = {
  isMainPage?: boolean;
  title: string;
  ogTitle: string;
  description: string;
};

function Opengraph({ title, ogTitle, description, isMainPage = false }: Opengraph) {
  const router = useRouter();
  const withMe = ' with okdohyuk';
  const URL = 'https://okdohyuk.dev';

  return (
    <Head>
      <title>{isMainPage ? title : title + withMe}</title>
      <meta name="description" content={isMainPage ? description : description + withMe} />

      <meta property="og:url" content={URL + router.asPath} />
      <meta property="og:type" content="website" />
      <meta property="og:title" content={isMainPage ? ogTitle : ogTitle + withMe} />
      <meta property="og:description" content={isMainPage ? description : description + withMe} />
      <meta property="og:image" content="/opengraph_image.png" />
      {...}
    </Head>
  );
}

export default Opengraph;

결과

오픈그래프를 설정 후 주기적으로 해당 키워드를 검색해보며 변화하는 검색 결과를 느낄 수 있었다. 그때마다 사진을 찍어두지 않은 것이 아쉽지만, 처음엔 제목으로 설정해둔 developer okdohyuk가 떴지만, 점점 제목이 바뀌고, 썸네일이 추가되고, 깃허브를 넘어스며 1착을 차지하였다.

아직 아쉬운 점이 있다면, 내 이름 "유도혁"을 적어 둔 곳이 없어서 그런지 한글로 검색하면, 나오질 않는다. 그렇기 때문에 다음 목표는 이름으로 검색하였을 때 상위 노출시키는 것이고, 다른 서비스를 추가하며 발전시킬 생각이다.

개인프로젝트에 대한 생각

유도혁 — Sat, 9 Jul 2022 19:51:54 +0900

2022년 연초에 올해의 목표라던가 계획을 세웠었다.

사실 대강 몇년 후 까지도 적어보긴 했는데, 대부분 개발자로서의 성장에 관련된 내용이다.

"개인 프로젝트를 만들어서 서비스하고, 거기서 수익을 낸다", "해커톤에 참가한다", "자격증을 딴다", "오프라인 컨퍼런스에 참가한다" 등등

그중에 역시 가장 비중이 큰 것은 개인 프로젝트라고 생각한다. 다른 것들은 집단지성으로 문제를 해결하거나 확실하게 해야 하는 것이 정해져 있지만, 이것을 그렇지 않다.

기획을 하기 힘들어서 클론코딩을 하는 사람들도 있는 것 같다. 하지만 나는 정말 나의 서비스를 만들어보고 싶었다.

그래서 기획을 해보았지만 쉽지 않았다. 생각한 아이디어 자체는 여러 개지만, 개발까지 가기가 어려웠다.

애초에 디자인을 해본 경험도 없어서 저번에 피그마로 디자인해보려다가 망했다. 심지어 3시간 동안 했던가...

망한 디자인

생각을 바꾸기로 했다. 지금까지는 "어떤 서비스를 만들지?" 부터 시작했다면, 앞으로는 "일단 만들자!"로 바꾸기로 하였다.

마침 구글I/O 온라인 컨퍼런스에 참가했더니, .dev 도메인을 1년 치 무료로 받게 되었다.

기술 스택은 Nextjs typescript mobx tailwindCSS 로 정하고 vercel로 CI/CD 배포를 단번에 해결하였다.

개발, 배포, 도메인까지 단 1원도 들지 않았으니 이 얼마나 좋은 세상인가 ㅋㅋ

덕분에 개발을 못해도 Lighthouse점수를 든든히 챙길 수 있었다.

퍼센트 계산기 with okdohyuk

퍼센트 계산기를 이용해보세요 with okdohyuk

okdohyuk.dev

그리고 이것이 오늘 만든 서비스이다. 최근 가장 많이 사용했던 것이 퍼센트 계산기였다. 비록 기능은 어느 사이트를 따라한 것이지만, 내가 만든 것이 더 이쁘다.

앞으로도 이 도메인을 키워나가면서 개인 프로젝트를 기획하는 시간을 줄일 것이고, 블로그 이전, 분석 툴이나 광고도 붙여볼 생각이다.

PWA(Progressive Web Apps) in NEXT JS

유도혁 — Sun, 3 Jul 2022 04:05:25 +0900

사용

install

npm install next-pwa

next js로 만들어진 프로젝트가 있다는 가정하에 설치해줍니다.

next.config.js

const withPWA = require('next-pwa');

const nextConfig = {
  pwa: {
    dest: 'public',
  },
  ...
};

module.exports = withPWA(nextConfig);

해당 파일에 pwa에 관한 설정을 추가해줍니다.

manifest.json

PWA Manifest Generator | SimiCart

PWA Manifest Generator Automatically generate a fully functional web app manifest along with size-optimized icons for your PWA Web app manifest (i.e. manifest.json) is a JSON file that provides the necessary metadata for your Progressive Web App. With a

www.simicart.com

Favicon & App Icon Generator

Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.

www.favicon-generator.org

앱 설치 시 보이게 될 아이콘과 제목 등을 표시할 정의 해줍니다.

next head

<Head>
	<meta
    	name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <meta name="description" content="Description" />
    <meta name="keywords" content="Keywords" />
    <link rel="manifest" href="/manifest.json" />
    <meta name="theme-color" content="#317EFB" />
</Head>

이전에 만들어둔 manifest 파일을 불러와줍니다.

크롬에서 공유하기 왼쪽에 새로운 아이콘이 생기면 성공입니다.

생각

최근엔 브라우저에서 마이크, 카메라, 파일, 블루투스 등등 이 접근 가능한 상황에서 웹을 앱으로 설치하여 사용한다는 것은 앱이 없는 서비스를 자주 이용하는 상황에 적합할 것 같다는 생각이 든다.

특히 구글과 애플의 인앱 결제 강제가 요구되는 상황에서 유리한 건가 싶다.

하지만 웹이긴 웹이라서 캐싱 이외에 미리 데이터를 설치해둔 상태에서 사용하지는 못하니 단점도 분명한 것 같다.

딱 앱 서비스가 없으면서 MAU가 높은 서비스에서 사용하면 큰 이익이 될 수 있을 것 같다.

참고: https://github.com/vercel/next.js/tree/canary/examples/progressive-web-app

블로그 다크모드 적용기

유도혁 — Sun, 29 May 2022 04:13:15 +0900

✍️ 개요

지금 사용하는 휴대폰, 컴퓨터, 각종 프로그램 등 다크 모드를 지원하는 서비스에서는 모두 다크 모드를 사용 중이다. 처음 사용할 당시만 해도 멋져서 사용했다고 한다면, 지금은 라이트 모드가 익숙하지 않은 수준까지 왔다. 그런데 내가 운영하는 블로그가 다크 모드가 없다는 것을 생각해보니 화가 났다. 그래서 예전부터 다크 모드를 적용하려는 생각이 있었지만, 쉽게 시작하지 못하였고, 티스토리의 다른 테마들 중 다크 모드가 적용되어 있는 것들을 둘러보았는데, 남들이 만든 것 중에서는 맘에 드는 것이 없었다. 지금까지 티스토리의 Odyssey 스킨을 사용중이었는데 잡스러운 것이 없고 깔끔해서 사용 중이었다. 그래서 어느 순간 필이와서 작업을 시작하였다.

고민

그렇다고 바로 작업을 시작한 것은 아니고, 가장 쉽게 할 수 있는 방법에 대해 찾아보았다. 그깟 css 요즘은 html to react component 이런 기술도 있는데 대충 css dark theme generator 라고 검색하면 쉽게 나올 줄 알았다.

Dark CSS Theme Generator | Night Eye

Dark CSS theme for your website Dark themes and dark mode in general have been gaining popularity in the past couple of years. We've reached a point where dark UI is not only for the geeks, but actually is a mainstream standard expected by the user. Arguab

nighteye.app

그렇게 찾은 것이 이 사이트인데 생각과는 다르게 맘대로 되지 않았고, !importent로 css를 강제로 씌우는 방식이라 매우 별로였다. 결국 css 컬러 시스템을 만드는 방법이 지금으로도, 나중으로도 도움이 될 것 같아서 시작하였다. ~~노가다를~~

웹스톰에서 rgb로 검색하는 것들을 모두 찾고, #도 검색해서 HEX값인 녀석들을 모두 정리했다. 거의 3시간가량의 중노동으로 마침내 모든 색상값들을 var()로 바꾸었다. 네이밍이 매우 별로이지만, 일단 어느 정도 볼 수준은 되어서 스탑 하였다.

결과

style.css

markdown.css

일단 이름은 안 겹치게 만들어는 두었으니 나중에 색의 수를 줄이거나 색깔놀이를 할 수 있을 수준이긴 하다. 과연 업데이트를 할 날이 올진 모르겠지만, 일단 현재는 이것으로 만족하는 것으로 마무리지었다.

예전에 몇몇 글에 텍스트 색상을 #000으로 설정하는 바람에 보이는 선에서 기본 색으로 변경하여 문제를 해결하였다. 이런 문제들 때문이라도 .mdx로 작성하는 깃헙 블로그가 개발자 친화적이라는 점을 더욱 실감하였다. 하지만, 그만큼의 인사이트를 갖는 글을 작성할 수 없는 나는 티스토리를 주류로 계속 운영할 생각이다.