logogeniusLHS 블로그

Interactive React Hooks Quiz 개발기

개발자로서 처음으로 후원을 받아보았다..!

2024. 10. 13.
-

개요

IRHQ의 1번 문제IRHQ의 1번 문제

Interactive React Hooks Quiz (IRHQ)는 리액트 훅에 대한 핵심 개념들을 퀴즈와 함께 배울 수 있는 웹사이트입니다. 제 사이드 프로젝트 중에 개발 지식을 담은 것으로는 첫 번째 프로젝트이기도 합니다. 그래서인지 이전의 프로젝트에서는 경험해보지 못한 여러 재밌는 일들이 많았는데요, 이번 글에서는 IRHQ를 만든 이유와 더불어 개발자로서 어떤 새로운 시도들을 해보았는지 이야기하고자 합니다.

IRHQ 바로가기: https://irhq.geniuslhs.com

만들게 된 이유

요즘 리액트를 사용해 점점 거대한 어플리케이션을 만들기 시작하게 되면서, 성능 저하나 의도한대로 작동하지 않는 코드 등 다양한 문제점들이 발생하기 시작했습니다. 때문에 리액트의 렌더링 조건이나 작동 방식 등 기초적인 지식부터 탄탄히 공부하는 것이 중요하다는 것을 느꼈습니다. 그렇게 다양한 리액트 관련 블로그 글들을 읽던 와중 Dan Abramov님의 블로그를 보게 되었고, 특히 두 개의 글이 눈에 띄었습니다.

  1. A Complete Guide to useEffect
    글 제목은 useEffect의 가이드라고 소개하고 있지만, 그와 더불어 리액트의 기본적인 작동 방식에 대해 상세하게 설명하는 글입니다. 글의 초반부에서 리액트의 중요한 특징중 하나인 "상태는 스냅샷처럼 동작한다"라는 내용을 담고 있습니다. useEffect의 동작을 설명할 때는 그와 관련된 퀴즈를 만들어 흥미를 끌고 있습니다.

  2. The Two Reacts
    UI는 client-side의 상태와 server-side의 데이터로 이루어진다는 내용을 담고 있는 글입니다. 글 속에 상호작용 가능한 컴포넌트가 있어 직접 클릭해보며 재미있게 글을 읽을 수 있습니다.

둘 모두 정말 훌륭한 글인데요, 아쉬운 점이 하나 있다면 첫 번째 글에서 나온 퀴즈를 체험하기 위해서는 외부 링크로 이동해야 한다는 점입니다. 때문에 로딩 시간도 오래 걸리고 글을 읽는 흐름도 끊기게 된다고 느꼈습니다. 그렇다면 두 번째 글에서처럼 본문 안에 컴포넌트를 넣어 체험할 수 있는 퀴즈를 만들면 어떨까? 라는 생각이 들었고, 그렇게 IRHQ의 개발이 시작되게 됩니다.

퀴즈 순서

IRHQ를 만들기 위해 많은 리액트 관련 글들을 읽어보며 자료를 정리했습니다. 저는 이 프로젝트가 리액트를 첫 시작한 사람들을 위한 길라잡이가 되었으면 좋겠다고 생각했기 때문에, 퀴즈를 전부 풀면 리액트 개념들을 한 바퀴 쭉 돈 것 처럼 느낄 수 있도록 퀴즈들의 순서와 설명들을 배치했습니다. 각 문제 이름과 해설이 담고 있는 내용은 최종적으로 아래와 같이 결정되었습니다.

  1. double useState
    특정 렌더링의 상태는 시간에 따라 변하는 것이 아니라, 각 렌더링마다 상수로 존재한다.
  2. useState with setTimeout
    (1번과 동일)
  3. useState with object
    새로운 상태가 이전 상태와 같다면 리렌더링이 일어나지 않는다. 여기서 비교는 Object.is() 함수를 사용한다.
  4. useState in if statement
    훅의 규칙: 반복문, 조건문, 또는 중첩된 함수 안에서 훅을 호출해서는 안된다.
  5. useEffect dependency array
    useEffect의 의존성 배열 또한 Object.is() 함수를 통해 비교한다.
  6. cleanup in useEffect
    이전 렌더링의 클린업은 다음 렌더링의 컴포넌트가 브라우저에 그려진 이후에 실행된다.
  7. condition of preserving state
    같은 위치에서의 동일한 컴포넌트는 상태가 유지된다.
  8. the key prop
    key에 index를 넣을 경우 의도치 않은 동작이 발생할 수 있다.

결론적으로 리액트의 기본 작동 방식부터 useState, useEffect와 같은 훅, 그리고 리스트를 렌더링할때의 key까지 다양한 개념들을 다룰 수 있었습니다.

새로운 시도

지금부터는 IRHQ를 만들며, 그리고 만들고 난 후 어떤 새로운 도전들을 했는지 소개합니다.

새로운 개발 도구들 사용

Next.js MDX

만든 이유를 읽으셨다면 아시겠지만, 이 프로젝트에서 제일 중요한 것은 상호작용 가능한 컴포넌트입니다. 저는 지금 이 블로그를 구현할 때 사용했던 contentlayer를 이번에도 사용하려고 했습니다. 그런데 문제는 useState와 같이 클라이언트 측에서 렌더링이 필요한 컴포넌트가 들어가자 컴파일이 되지 않았습니다. 관련 키워드로 검색을 해보았지만 만족할만한 정보가 나오지 않아 버그의 원인을 찾지 못했고, 결국 다른 도구를 사용해야겠다고 생각하게 되었습니다. 애초에 관리도 잘 안되고 있는 프로젝트라.. 언젠가 갈아타야겠다고 생각하고 있었습니다

Next.js 광팬인지라 자연스럽게 해당 프레임워크에서 제공하고 있는 패키지 @next/mdx를 사용해보게 되었습니다.

import { MyComponent } from "my-components";
 
# Welcome to my MDX page!
 
This is some **bold** and _italics_ text.
 
This is a list in markdown:
 
- One
- Two
- Three
 
Checkout my React component:
 
<MyComponent />

위 코드는 Next.js 공식 문서에서 제시하는 예시 코드인데, 이런 식으로 굉장히 편리하게 컴포넌트를 넣을 수 있어서 좋았습니다. 클라이언트 측에서 렌더링이 필요한 컴포넌트도 매우 잘 작동하였습니다. 앞으로 이 블로그를 다시 만들게 된다면 @next/mdx를 사용해야겠다는 생각이 들 정도였습니다.

next-themes

저는 지금까지 Next.js를 사용해 웹사이트를 만들면서 한번도 다크모드를 구현해본적이 없었습니다. 그래서 새로운 웹사이트를 만드는 김에 다크모드도 함께 구현해보기로 하였습니다. 이렇게 작은 프로젝트더라도 다크모드를 한번 구현해본다면 나중에 큰 규모의 프로젝트에 추가할 일이 있을 때 많은 도움이 되기 때문입니다.

다크모드 구현은 next-themes 라이브러리를 사용하였습니다. 아래처럼 layout.tsx에 ThemeProvider 컴포넌트만 사용해주면 되기 때문에 매우 손쉽게 사용이 가능합니다.

app/layout.tsx
import { ThemeProvider } from "@/components/ThemeProvider";
 
export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html suppressHydrationWarning>
      <body className="md:overflow-y-scroll">
        <ThemeProvider attribute="class">
          <main className="prose">{children}</main>
        </ThemeProvider>
      </body>
    </html>
  );
}

그리고 velopert님의 글을 참고하여 테마를 바꿀 때 귀여운 애니메이션도 함께 넣어주었습니다.

개발 외적인 도전들

홍보하기

이전까지의 사이드 프로젝트들은 한번도 홍보를 해본적이 없었습니다. 그래서 제 친구들을 제외하고는 사용해보거나 피드백을 주는 사람들이 없었기 때문에, 얼마나 매력적이고 완성도 있는 프로젝트인지 알기가 힘들었고 항상 이 부분이 아쉬웠습니다. 그래서 이번에는 부끄러움을 무릅쓰고 여러 커뮤니티에 홍보글을 올리게 됩니다.

커리어리에 올린 홍보글커리어리에 올린 홍보글
글또에 올린 홍보글글또에 올린 홍보글

커리어리라는 개발자 커뮤니티에 올렸던 첫 번째 홍보글은 많은 관심을 받지 못했지만, 이번에 새로 들어간 글또라는 커뮤니티에 올린 두 번째 홍보글은 많은 분들께서 읽어주시고 댓글도 달아주셨습니다. 이렇게 많은 분들의 관심을 받아본적이 처음이라 부끄럽기도 했지만, 다른 한편으로는 세상에 한 발짝 더 나아간 것 같아 뿌듯했습니다.

후원받기

L(o*62).ongL(o*62).ong

인터넷을 떠돌아다니며 다양한 사이드 프로젝트들을 구경하던 어느날 우연히 L(o*62).ong 이라는 프로젝트를 보게 되었습니다. URL을 매우 길게 만들어준다는 점도 흥미로웠지만, 더욱 신기했던 점은 자신에게 후원하는 링크를 깃허브 링크 옆에 떡하니 적어놓은 것이었습니다.

어떻게 보면 소소한 프로젝트일지 모르지만, 후원하는 링크를 올려놓은 것 자체가 자신의 프로젝트에 대한 자부심을 드러내는 것 같아서 멋져보였습니다. 그래서 저도 이번에는 buymeacoffee 계정을 만들어 후원 링크를 함께 올려놓았습니다.

처음으로 거액의 후원을 받았다!처음으로 거액의 후원을 받았다!

정말 감사하게도 한 게임 개발자분께서 제 프로젝트를 재밌게 보시고 후원을 해주셨습니다. 링크를 올리긴 했지만 진짜 후원을 받을 수 있을 것이라는 기대는 전혀 안하고 있었는데, 이런 경험을 해보니 정말 뿌듯하고 행복했습니다.

마무리하며

새로운 개발 도구들을 사용한 것, 많은 사람들에게 제 프로젝트를 알린 것은 정말 새롭고 신기한 경험이었습니다. 그리고 프로젝트를 완성도 있게 마무리하는 것 뿐만 아니라 그 프로젝트를 많은 사람들에게 알리는 것 또한 중요하다는 것을 깨닫게 되었습니다.

React의 심화 개념들이나 Next.js와 관련하여 또 많은 것들을 알게 된다면 퀴즈를 제작하여 IRHQ v2를 만들 수 있을 것 같습니다. 그 날이 올때까지 또 열심히 개발 공부를 이어나가야겠습니다.