File and Folder Naming Conventions

A well-named file or folder can help you and other developers find and understand your code more quickly.

In NextJS, it is recommended to use lowercase letters and hyphens to separate words in file and folder names. This makes it easier to read and avoids confusion when working with different file types. For example, instead of using AboutUs.js, use about-us.js.

Component Naming Conventions

When creating components in NextJS, it is best to use PascalCase for naming. This convention makes it easier to differentiate between components and regular HTML elements. For example, instead of using my-container, use MyContainer.

i18n 국제화(i18n) 자동화 가이드

supabase error 코드를 일일히 한글화하는 번거로움에

로컬리제이션을 찾아봄

https://github.com/supabase-community/auth-ui/issues/86

// * Supabase Auth Error Message Translation
useEffect(() => {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type !== "childList" || mutation.addedNodes.length === 0)
        return;

      for (const node of mutation.addedNodes) {
        if (
          node instanceof HTMLElement &&
          (node.classList.contains("supabase-account-ui_ui-message") ||
            node.classList.contains("supabase-auth-ui_ui-message"))
        ) {
          const originErrorMessage = node.innerHTML.trim();

          let translatedErrorMessage = "<DEFAULT MESSAGE>";
          switch (originErrorMessage) {
            case "To signup, please provide your email":
              translatedErrorMessage = "";
              break;
            case "Signup requires a valid password":
              translatedErrorMessage = "";
              break;
            case "User already registered":
              translatedErrorMessage = "";
              break;
            case "Only an email address or phone number should be provided on signup.":
              translatedErrorMessage = "";
              break;
            case "Signups not allowed for this instance":
              translatedErrorMessage = "";
              break;
            case "Email signups are disabled":
              translatedErrorMessage = "";
              break;
            case "Email link is invalid or has expired":
              translatedErrorMessage = "";
              break;
            case "Token has expired or is invalid":
              translatedErrorMessage = "";
              break;
            case "The new email address provided is invalid":
              translatedErrorMessage = "";
              break;
            case "Password should be at least 6 characters":
              translatedErrorMessage = "";
              break;
            case "Invalid login credentials":
              translatedErrorMessage = "";
              break;
          }

          if (!document.querySelector("#auth-forgot-password")) {
            node.innerHTML = translatedErrorMessage;
          }
        }
      }
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  });
}, []);

Mutation Observer