Myeongkyu Jeon

【プロジェクト概要】 Next.jsとReactを活用して個人ブログを開発しました。設計から開発、配信、運用まで全工程を一人で担当しました。さらに、PlaywrightとOpenAI APIを活用して、Hacker Newsの記事の自動収集・要約・日韓翻訳・画像生成までを自動化するシステムを構築し、コンテンツ生成の生産性を大幅に向上させました。 【担当フェーズ】 要件定義、設計、開発、運用準備、運用・保守 【使用技術】 ・言語: Typescript, JavaScript, HTML/CSS, MDX ・データベース: MongoDB(Atlas) ・バックエンド: Next.js ・フロントエンド: React, Tailwind CSS ・インフラ: Vercel ・CI/CD: GitHub Actions 【業務内容】 # フロントエンド - Tailwind CSSを活用したスタイリッシュなフロントエンド開発。 - Reactを用いたコンポーネントのモジュール化。 - MDXでコンテンツ管理。 - next-mdx-remoteとTailwind CSSを組み合わせたMarkdownのカスタマイズ。 # バックエンド - Next.jsのApp Routerを活用した効率的な開発。 - JWTとOAuth2.0を組み込んだセキュアなログイン機能。 - ユーザー情報・コメント・いいねのみMongoDB（Atlas）に保存 - PlaywrightとOpenAI APIを活用し、Hackernewsの記事の自動取得・要約・日韓翻訳処理を実装。 - DALL·E 3 APIを活用して要約コンテンツに対応するサムネイル画像を自動生成し、Cloudflare R2に保存 # インフラ - Vercelを用いたスムーズな配信。 - Cloudflare Workersを通じてCloudflare R2で画像管理。 - CloudflareでCDNによるコンテンツ配信でセキュリティとパフォーマンスを強化。 【課題】 以前はJavaScriptで直接DOMを操作していたため、ReactのVirtual DOMや特徴について十分に理解していませんでした。その結果、Reactを使い始めた際に、Virtual DOMの使用によるテキストのちらつきが発生しました。また、SSRを使用してもSEOの最適化が不十分で、私のブログが検索結果の上位に露出されない問題が発生しました。 【対処】 当初は「Redux Devtools」を使って全体の状態を管理し、ちらつきの問題を解決しようとしました。しかし、NavbarをReduxで管理するよりも、内部の構成を複数のコンポーネントに分割して、それぞれで状態を管理した方が効果的だと判断しました。その結果、ちらつきの問題を解消することができました。 【成果】 Reactの状態管理とコンポーネント設計を見直し、Reduxによる一括管理からコンポーネント単位での局所的な状態管理に切り替えることで、テキストのちらつきやUIの不安定さを根本的に解消しました。これにより、快適で安定した閲覧体験を提供することができました。 【Github】 https://github.com/foreverfl/blog