自動化無しに生活無し

WEB開発関係を中心に備忘録をまとめています

  • DRF+ReactのCRUD簡易掲示板SPAでJWT認証を実装する

    DRF+ReactのSPAでCRUD簡易掲示板をつくる このDRF+ReactのCRUD簡易掲示板SPAに、JWT認証を実装する。 なぜなら、JWT認証を実装しない場合、通常のDjangoのセッションベースの認証を実装する場合では、CSRF検証が必要になるから。 開発要件 JWT認証を実装する( CSRF検証の廃止 ) ログイン、ログアウト、トークンの更新、アカウント新規作成の機能 ユーザー名とパスワードを使用し ...
  • 【React】Contextとカスタムフックでログイン・ログアウト、認証状態を扱う

    Reactで全てのコンポーネントでStateや関数を扱いたい場合がある。 propsを使う場合はバケツリレーになってしまい、見通しが悪くなる。 そこで、Contextを使い、全コンポーネントでStateや関数を使えるようにする。 【React】グローバルなStateを使って、Propsバケツリレー問題を解決する 更に、カスタムフックを使えば呼び出しやすくなる。 src/AuthContext.jsx まずはcreateContextで、コンテキ ...
  • DRF+ReactのSPAでWebsocketのチャットサイトをつくる

    タイトル通り、Django REST FrameworkとReactのSPAで、WebSocketを使ったチャットサイトを作った。 以前のWebSocket搭載チャットサイト(下記)はReactを使っていないため、SPAではない。今回はReactを搭載したSPAとしている。 DjangoでWebSocketを使って、チャットサイトを作る ただし、今回はJWT認証の実装は見送った。理由は後述。 開発要件 WebSock ...
  • DRFでModelViewSetの動的ルーティング(URL内引数)を作る

    例えば、ModelViewSetが以下のような場合 from rest_framework import viewsets from .models import Category,Topic,Reply from .serializers import CategorySerializer,TopicSerializer,ReplySerializer class CategoryView(viewsets.ModelViewSet): serializer_class = CategorySerializer queryset = Category.objects.all() class TopicView(viewsets.ModelViewSet): serializer_class = TopicSerializer queryset = Topic.objects.all() class ReplyView(viewsets.ModelViewSet): serializer_class = ReplySerializer queryset = Reply.objects.all() ルーティングは、このように DefaultRouter を使うと良い。 from django.contrib import admin from django.urls import path,include from rest_framework import routers from bbs import views router = routers.DefaultRouter() router.register(r"topics", views.TopicView, "topic") router.register(r"categories", views.CategoryView, "category") router.register(r"replies", views.ReplyView, "reply") urlpatterns = [ path('admin/', admin.site.urls), path('api/', include(router.urls)), ] だが、これではTopicに紐付いていないReplyまで取得できてしまう。 そこで、 HTTP GET /api/replies/ でReplyを取得するのではなく、 HTTP GET /api/topics/1/replies/ このように動的ルーティング(URL引数 ...
  • DRF+ReactのSPAでCRUD簡易掲示板をつくる

    開発要件 DRF+ReactでSPA react-router-domでページURLの構築 簡易掲示板のCRUD機能 カテゴリ指定・追加機能 リプライ投稿機能 CSRF検証の挙動を確認するため、あえてJWT認証はオミット CRAではなくViteを使用 以前のものは、1対多には対応しておらず、CRAを利用していた。またページもない。 更に、axiosがコールバック地獄になっているので、そちらも修正した。 使用ライブラリ ...
  • setStateする時、直接値を書き換えてはいけない

    setStateをする時、こんな風に直接値を書き換えていないだろうか? const handleToggle = () => { setToggle(!toggle); } state変数がプリミティブ型の場合、このsetToggleにより、再レンダリングは発生する。 しかし、オブジェクト型の場合、Stateが値の変更を検知できず、再レンダリングは発生しない。 const handleProfile = (e) => { profile[e.target.name] = e.target.value; setProfile(profile); // この方法では再レンダリングは発生しない。 } オブジェクト型の場合、このようにsetState関数内で処理をす ...
  • npm で Bootstrap を使う

    npm install bootstrap App.jsに以下を追加する。 import 'bootstrap/dist/css/bootstrap.min.css'; 後は、使いたいコンポーネントで <header className="bg-primary text-white">簡易掲示板</header> などとすれば良い。 なぜ @fortawesome/fontawesome-free 、 なぜ bootstrap ? 先に、fontawesomeをインストールしたときは、 npm install @fortawesome/fontawesome-free とした。@がついている。 これはスコープと言い、名前の衝突を避けるためにfontawesomeの開発会社、fortawesome社がつけている。(ミススペ ...
  • create-react-app コマンドはもう使えないので、ViteでReactプロジェクトをつくる

    npx create-react-app frontend このコマンドでreactプロジェクトを作ってきたが、もうcreate-react-app はもう使われなくなったようだ。(2023年春時点から) そこで、Viteを使ってReactプロジェクトをつくる。 Viteとは? Viteは、JavaScriptフレームワーク用のビルドツールである。Vite(フランス語で高速の意味)の名の通り、非常に高速。 ESモジュールで必要な部分だけオンデマンドでロードでき ...
  • DRFはいつCSRF検証をするのか?

    開発中、おかしなことが起こった。 これまでCSRFトークン無しで、PUTやDELETEメソッドが送信できていた。 だが、突然、同様の状況で403エラー(CSRF token missing)が起きた。 CSRFトークン無しでリクエストできていたものが、急に403エラーになりCSRF検証を行うようになった。 何故か? DRFのビューでは、CSRF検証が免除されている https://github.com/encode/django-rest-framework/blob/master/rest_framework/viewsets.py#L146 DRFのビューは、このように .as_view()の戻り ...
  • SQliteはマルチスレッド・マルチプロセスに対応していない

    SQliteはマルチスレッド・マルチプロセスに対応していない。 同時に大量のクエリをさばくことはできない。 実際にやってみる djangoで実際にやってみる。ベースは、40分django from django.shortcuts import render,redirect from django.views import View from .models import Topic from .forms import TopicForm import threading def writing(data): form = TopicForm(data) if form.is_valid(): form.save() class IndexView(View): def get(self, request, *args, **kwargs): print(Topic.objects.all().count()) context = {} context["topics"] = Topic.objects.all() return render(request,"bbs/index.html",context) def post(self, request, *args, **kwargs): threads = [] copied = request.POST.copy() for i in range(1000): thread = threading.Thread(target=writing, args=(copied,)) threads.append(thread) thread.start() # 全てのスレッドが終了するまで待機 for thread in threads: thread.join() return redirect("bbs:index") index = IndexView.as_view() 1回目は正常に1000個分のスレッドを処 ...