目次
こんにちは、Benと申します！先月と同じように、サイドプロジェクトから学んだことについて、紹介していきたいと思います。今回はフロント側の react query とバックエンド側のフォルダ構成を紹介したいと思います。
まず、フロントエンドの React Query について紹介します！
1. service フォルダ：すべての API 関連のファイルをここに集約しています。
2. function フォルダ：ここには axios を使用して API を呼び出す関数が入っています。基本的にこのフォルダ内の関数は Promise を返します。
3. index ファイル：/register のルートで使用する GET や POST などのメソッドを整理してエクスポートします。
4. key フォルダ：React Query のキャッシュを更新するための query key を格納しますが、現在はまだ使用していません。
5. selector フォルダ：取得したデータを処理するために使用しますが、現在はフロントとバックエンドを自分で開発しているため、使用頻度は少ないです。
6. type フォルダ：型定義を格納します。
7. service.config ファイル：axios の設定をカプセル化してエクスポートしています。
次に、バックエンドのフォルダ構成について説明します。
models フォルダ
xxxx.model.ts ファイル：データ処理に関する関数、例えばユーザーの追加や削除などの関数を管理します。
prisma フォルダ
schema.prisma ファイル：Prisma のスキーマを記述します。例：
route フォルダ
このフォルダ内には複数のフォルダがあり、それぞれに以下の2つの TypeScript ファイルが含まれています。
xxxx.controller.ts ファイル：ビジネスロジックの関数を管理し、通常 http という名前で始まる関数が含まれます。
xxxx.router.ts ファイル：API の URL に対応するルーティングを定義します。
このフォルダのルートには api.ts ファイルを配置し、すべてのルートにプレフィックスを付けて管理します。
src フォルダ
app.ts ファイル：外層に api プレフィックスを設定して、すべての API URL を管理します。将来、バージョン管理が必要な場合にも便利です。
server.ts ファイル：設定はほぼここに記載します。
