kyunghoonk00k

컴포넌트 라이브러리를 개발하면서 번들 크기 문제로 한참 고민했다. 사용자가 우리 라이브러리에서 단 하나의 컴포넌트만 사용하더라도 전체 라이브러리가 번들에 포함된다면 성능에 좋지 않을 거라고 생각했다. 그래서 트리 쉐이킹 최적화 작업을 진행했고, 이 과정에서 배운 내용을 공유하려고 한다. 주요 UI 라이브러리 번들 크기 비교먼저 다른 인기 라이브러리들과 우리 라이브러리의 번들 크기를 비교해봤다.| 라이브러리 | Unpacked Size | Gzipped Size | 단일 컴포넌트 사용 시 || 우리 라이브러리 | 947 kB | ~185 kB | ~15-30 kB || Chakra UI | 2.5 MB | ~520 kB | ~30-45 kB || Mantine | 1.8 MB | ~410 kB | ~20-..

"만든 라이브러리를 어떻게 문서화하고 배포해야 할까?"라이브러리를 만들고 나니, 이걸 어떻게 사용자들에게 설명해야 할지 고민이 되었다. README 파일로 설명하기엔 한계가 있고, 제대로 된 문서 사이트가 필요하다는 생각이 들었다. 그리고 이왕 만드는 거 GitHub Pages로 배포해서 누구나 쉽게 접근할 수 있게 하고 싶었다. Docusaurus가 React 문서화에 좋다고 해서 이걸로 해보자고 마음먹었다.1. 문서화 환경 설정먼저 Docusaurus를 설치했다. npx create-docusaurus@latest react-components-docs classiccd react-components-docs기본 구조가 생성되었는데, 한국어로 문서를 작성하고 싶어서 설정 파일부터 수정했다.// doc..

"라이브러리 만드는 게 보통 어떻게 진행되는 걸까?"처음엔 막막했다라이브러리를 만든다는 게 뭔가 대단해 보였는데, 막상 시작하려니 뭐부터 해야 할지 감이 안 왔다. "뭘 만들어야 유용할까?" 고민하다가, React 프로젝트에서 자주 쓰일 법한 아코디언 컴포넌트를 만들어보자는 생각이 들었다. 타입스크립트를 쓰면 타입도 깔끔하게 보이니까 이걸로 해보자고 마음먹었다.1. 기본 세팅mkdir react-common-components-librarycd react-common-components-library그리고 npm init -y로 package.json을 바로 만들었다. 이름은 react-common-components-library로 정했는데, npm에서 검색해보니 중복이 없어서 괜찮았다. 처음 설정은{..

리액트 Suspense와 lazy는 코드 스플리팅을 쉽게 구현할 수 있도록 도와주는 유용한 기능입니다. 코드 스플리팅은 애플리케이션의 성능을 향상시키기 위해 필요한 코드를 필요한 시점에 불러올 수 있는 기술로, 큰 규모의 React 애플리케이션에서 매우 중요합니다. 리액트의 lazy() 함수는 동적 import()를 사용해 컴포넌트를 로드하는 데 사용됩니다. 동적 import는 컴포넌트가 필요할 때만 로드하도록 합니다. Suspense는 렌더링이 완료되기 전까진 로딩 인디케이터나 다른 컴포넌트를 렌더할 수 있게 해주는 기능입니다. 예제: App.js javascriptimport React, { lazy, Suspense } from 'react'; const MyComponent = lazy(() =>..

useMemo와 useCallback은 React의 훅(Hook) 중 하나로, 불필요한 렌더링을 줄이는 데 도움이 되는 기능입니다. 각각의 훅에 대한 설명과 예시 코드를 제공하겠습니다. useMemo useMemo는 메모이제이션된 값을 반환하는데 사용됩니다. 복잡한 연산을 줄이기 위해 계산된 값을 메모리에 저장하여, 의존성 배열의 값이 변경될 때에만 다시 계산하도록 합니다. javascript import React, { useMemo } from 'react'; const ExpensiveComponent = ({ value }) => { const calcValue = useMemo(() => { // 복잡한 계산 const result = value * 1000; return result; }, [..

React 애플리케이션에 다음과 같이 오디오/비디오 요소를 추가하세요. jsx Your browser does not support the audio element. 또는 비디오 요소를 추가합니다. jsx Your browser does not support the video element. 음량조절은 다음과 같이 필요한 함수와 이벤트 핸들를 만들어 설정할 수 있습니다. jsx import React, { useRef } from 'react'; const SoundVolumeControl = () => { const audioElement = useRef(null); const handleVolumeChange = (e) => { const volumeValue = e.target.value; audi..

import { useState } from 'react'; interface GreetingProps { name: string; } const Greeting: React.FC = ({ name }) => { return Hello, {name}!; }; const IndexPage: React.FC = () => { const [name, setName] = useState('뤼튼'); return ( setName(event.target.value)} /> ); }; export default IndexPage;

먼저, React와 TypeScript 및 Next.js를 사용하기 위해 필요한 패키지들을 설치해주세요.: npm install --save react react-dom next npm install --save typescript @types/react @types/node 그리고 최상위 폴더에 "tsconfig.json" 파일과 "next.config.js" 파일을 생성해주세요. tsconfig.json 파일에는 다음과 같이 작성하세요. json { "compilerOptions": { "target": "esnext", "module": "esnext", "jsx": "preserve", "lib": ["dom", "esnext"], "moduleResolution": "node", "allowJs..

import { QueryClient, QueryClientProvider, useQuery, useQueryErrorResetBoundary } from 'react-query'; import { ErrorBoundary } from 'react-error-boundary'; const queryClient = new QueryClient(); function FetchData() { const { status, data, error } = useQuery('fetchData', async () => { // 임의의 API 요청 const response = await fetch('https://yourapi.com/data'); if (!response.ok) { throw new Error('Dat..

import React, { useEffect, useState } from 'react'; import io from 'socket.io-client'; const socket = io.connect('http://localhost:3000'); function App() { const [notifications, setNotifications] = useState([]); useEffect(() => { socket.on('display_notification', (data) => { setNotifications([...notifications, data]); }); }, [notifications]); return ( socket.emit('new_notification', '새로운 알림')}>알..