韓国語 2024/09/26(木)
ペルソナ
Aさん: Reactの開発経験がある若手エンジニア。新しいライブラリに興味がある。
Bさん: フロントエンド開発のベテラン。TanStackの各ライブラリを実務で使用している。
シチュエーション: TanStackについて話す
(タンスタックエ テヘソ イヤギハダ)
A: 선배님, TanStack에 대해 들어보셨나요? 최근에 많이 언급되는 것 같아요. (ソンベニム、タンスタックエ テヘ トゥロボショッナヨ？ チェグネ マニ オングプデヌン コッ カタヨ。)
先輩、TanStackについて聞いたことありますか？最近よく言及され ているみたいです。
B: 네, TanStack은 React Query, React Table 등 여러 유용한 라이브러리를 포함하는 생태계예요. (ネ、タンスタックン リアクトゥ クエリ、リアクトゥ テイブル トゥン ヨロ ユヨンハン ライブロリルル ポハムハヌン センテゲエヨ。)
はい、TanStackはReact Query、React Tableなど、いくつかの便利なライブラリを含むエコシステムです。
A: 오, 그렇군요. React Query는 들어본 것 같은데, 어떤 기능을 하나요? (オ、クロックンヨ。リアクトゥ クエリヌン トゥロボン コッ カトゥンデ、オットン キヌンウル ハナヨ？)
おお、そうですか。React Queryは聞いたことがある気がしますが、どんな機能をするんですか？
B: React Query는 서버 상태 관리를 쉽게 해주는 라이브러리예요. 데이터 fetching, 캐싱, 동기화, 업데이트를 효율적으로 처리해줘요. (リアクトゥ クエリヌン ソボ サンテ クァンリルル シプゲ ヘジュヌン ライブロリエヨ。デイタ フェッチン、キャシン、ドンギファ、オプデイトゥルル ヒョユルジョグロ チョリヘジュォヨ。)
React Queryはサーバーの状態管理を簡単にしてくれるライブラリです。データのフェッチング、キャッシング、同期、更新を効率的に処理してくれます。
A: 와, 그렇게 많은 기능을 한 번에 처리해주나요? 사용하기 어렵지는 않나요? (ワ、クロッケ マヌン キヌンウル ハンボネ チョリヘジュナヨ？ サヨンハギ オリョプジヌン アンナヨ？)
わあ、そんなに多くの機能を一度に処理してくれるんですか？使うのは難しくないですか？
B: 생각보다 쉬워요. 기본적인 사용법은 간단해요. 예를 들면 이렇게 사용해요:
const { data, isLoading } = useQuery('todos', fetchTodos);
이렇게 하면 데이터 로딩 상태도 자동으로 관리해줘요.
(センガクボダ シウォヨ。キボンジョギン サヨンボプ ン カンダンヘヨ。イェルル トゥルミョン イロッケ サヨンヘヨ：
コンストゥ オープンブラケッ データ コンマ イズローディング クローズブラケッ イコール ユーズクエリ オープンパレン クォートトゥドス クォートコンマ フェッチトゥドス クローズパレン
イロッケ ハミョン デイタ ロディン サンテド チャドンウロ クァンリヘジュォヨ。)
思ったより簡単です。基本的な使い方は単純です。例えばこのように使います：
const { data, isLoading } = useQuery('todos', fetchTodos);
このようにすると、データのローディング状態も自動で管理してくれます。
A: 오, 생각보다 간단해 보이네요! 그럼 React Table은 어떤 기능인가요? (オ、センガクボダ カンダンヘ ボイネヨ！ クロム リアクトゥ テイブルン オットン キヌニンガヨ？)
おお、思ったより簡単そうですね！では、React Tableはどんな機能ですか？
B: React Table은 테이블 컴포넌트를 쉽게 만들 수 있게 해주는 라이브러리예요. 정렬, 필터링, 페이지네이션 등의 기능을 쉽게 구현할 수 있죠. (リアクトゥ テイブルン テイブル コムポノントゥルル シプゲ マンドゥル ス イッケ ヘジュヌン ライブロリエヨ。チョンリョル、ピルトリン、ペイジネイション トゥンエ キヌンウル シプゲ クヒョンハル ス イッチョ。)
React Tableはテーブルコンポーネントを簡単に作れるようにするライブラリです。ソート、フィルタリング、ページネーションなどの機能を簡単に実装できます。
A: 와, TanStack 라이브러리들이 정말 유용해 보이네요. 프로젝트에 적용해 봐야겠어요! (ワ、タンスタック ライブロリドゥリ チョンマル ユヨンヘ ボイネヨ。プロジェクトゥエ チョギョンヘ ボァヤゲッソヨ！)
わあ、TanStackライブラリが本当に便利そうですね。プロジェクトに適用してみます！
B: 그래요, 한번 사용해 보세요. 개발 생산성이 크게 향상될 거예요. 궁금한 점 있으면 언제든 물어보세요! (クレヨ、ハンボン サヨンヘ ボセヨ。ケバル センサンソンイ クゲ ヒャンサンドェル コエヨ。クンクムハン チョム イッソミョン オンジェドゥン ムロボセヨ！)
そうですね、一度使ってみてください。開発生産性が大きく向上するでしょう。質問があればいつでも聞いてくださいね！
単語集
생태계 (センテゲ): エコシステム
독립 라이브러리 (トンニプ ライブロリ): 独立ライブラリ
서버 상태 (ソボ サンテ)サーバー状態
클라이언트 상태 (クライオントゥ サンテ): クライアント状態
데이터 fetching (データ フェッチン): データフェッチング
데이터 전송 (データ チョンソン): データ転送
캐싱 (キャシン): キャッシング / 저장 (チョジャン): 保存
동기화 (ドンギファ): 同期
비동기화 (ビドンギファ): 非同期化
테이블 컴포넌트 (テイブル コムポノントゥ)テーブルコンポーネント
리스트 컴포넌트 (リストゥ コムポノントゥ): リストコンポーネント
정렬 (チョンリョル): ソート
필터링 (ピルトリン): フィルタリング
페이지네이션 (ペイジネイション) ページネーション
무한 스크롤 (ムハン スクロル): 無限スクロール
개발 생산성 (ケバル センサンソン): 開発生産性
코드 품질 (コドゥ プムジル): コード品質
文法の解説
'-아/어 보다': 「～してみる」という試行を表す表現です。例えば、'사용해 보세요'（使ってみてください）のように使います。
'-ㄹ/을 것 같다': 「～のようだ」「～そうだ」という推測や印象を表す表現です。'유용해 보이네요'（便利そうですね）のように使用されています。