peer-42seoul / mission-peerflow-FE

This is simple website frontend mission for searching 42 subjects.

1 stars 1 forks source link

홈페이지 열 때 렌더링이 느린 이유 :use client 모드가 달린 페이지는 렌더링이 느림. -> 최대한 컴포넌트로 나눠서 진행해야할 거 같습니다.

대안 1. layout.tsx에 있는 테마 설정을 MainLayout 컴포넌트에 부착 -> 이로 layout.tsx의 모드를 서버 모드로 설정 가능 -> 렌더링 속도 향상

layout.tsx

import '../styles/globals.css'
import { Inter } from 'next/font/google'

import MainLayout from '../components/MainLayout'

const inter = Inter({ subsets: ['latin'] })

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <head />
      <body className={inter.className}>
        <MainLayout>{children}</MainLayout>
        <link
          rel="stylesheet"
          href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
        />
      </body>
    </html>
  )
}

MainLayout.tsx

const MainLayout = ({ children }) => {
  return (
    <ThemeProvider theme={Theme}>
      <CssBaseline />
      <Category>{children}</Category>
    </ThemeProvider>
  )
}

MUI Form 이벤트에 한글이 들어가면 두번 호출되는 문제

https://junhyunny.github.io/react/typescript/korean-keyboard-event-error/

문제 상황

영어나 다른 언어는 댓글창에 잘 들어가지만, 한글만 유독 알람창과 동시에 마지막 값이 남는 일이 생겼습니다.

이유

Composition event로 인해 생기는 일: html 이벤트와 web api 이벤트가 동시에 들어와서 생기는 일
MUI textField의 한글 처리 로직 오류: 거기에 한글 초기화 부분에서 값이 이상하게 남아서 이벤트가 작동

해결방안

onSubmit 이벤트에서 composition event의 호출을 막아버렸습니다. 더 정신 나간건 MUI인지 next.js인지 모르지만 composition 타입을 잡지 못해서 값이 없다고 뜨는데 실제로는 있습니다;;

if (e.nativeEvent.isComposing) return

e.nativeEvent 구조체