Corona Map cùng nhà phát triển tạo ra dịch vụ bản đồ 2
donghunee
Đây là khóa học nâng cao về sản xuất dịch vụ bản đồ do nhà phát triển Corona Map hướng dẫn.
중급이상
Node.js, MongoDB, Express
MERN stack (feat. TypeScript) を活用して、地図サービスを最初から最後まで作成する講義です。API 公式ドキュメントを見ながら、一つずつ順を追って作成してみましょう。
React + TypeScript 開発
Express + TypeScript 開発
MongoDB + Mongoose の活用
Kakao Map API の使い方
Naver Map API の使い方
4,400万視聴数のコロナマップ開発者と共に
マップサービスの開発に挑戦してください💻
こんにちは、開発者イ・ドンフンです。
私は今回1,600万人が利用し、4,400万視聴数を超えたコロナマップとマスクリアルタイム在庫現況を示すマスクマップを企画して開発しました。現在はスタートアップでGIS関連プロダクトを製作しています。
地図サービスは、位置情報が重要になるにつれて、将来不可欠な技術スタックの1つだと思います。しかし、初めて地図サービス開発をするには、どうやら進入障壁が高いのが事実です。今回の講義を通じて受講生の方々が少し簡単に指導サービスを制作し、さらに進んで指導サービスの魅力を感じてほしいです。
本講義は、React、Express、MongoDBなどを活用して、直接初期環境設定から地図サービスの実装までお知らせする講義です。サービスを直接作成し、フロントエンドバックエンド、つまりフルスタックの制作プロセスを体験できます。
ネイバーマップ、カカオマップAPIの場合、単にコードを書くのではなく、公式ドキュメントを活用してなぜこのように使用するのかを学んでいく講義です。受講生の皆さんが公式文書と少し親しくなるようにしてくれます。
その講義には、実務で使用する指導関連の知識が含まれています。もちろん、初心者が理解しやすく講義の難易度を設定し、すべての講義に字幕を追加したので、気軽に聞くことができます。受講生分の初期設定負担を軽減するためのボイラープレートソースコードを提供します。
Inflearnには私が制作した地図サービス講義の2つが発売されています。多くの方々の応援と関心のおかげで、指導サービスという限定されたテーマでも良いフィードバックをたくさんいただきました。講義へのフィードバックの中、実務で使われる技術スタックでサービスを制作したいという意見が多く、今回の講義を制作することになりました。 (以下は、以前にオープンしていた「コロナマップ開発者と一緒にマップサービスを作成する」講義の受講評価です。)
★★★★★
少しずつ組んで聞きやすく、字幕があって音なしでも聞けるというメリットがあります。そして最初から最後まで一緒に進んで説明してくださったので理解して追いやすかったです。
★★★★★
説明が本当にとても好きで、本当に最高です。他の受講生の方々にヒントを差し上げれば講義だけを聞いて同じように完成した立場として、大小文字区分だけうまくいけば問題なく完成することができるでしょう。本当にありがとうございます。
★★★★★
全体的に指導サービスをどのように作って活用するかを学べた講義でした。印象深かったのは、Q&Aへの回答速度と細かく見てくださる親切さでした。有益な講義を作ってくれてありがとう。
React、Expressでマップサービスを作ってみたい方
プロジェクトを最初から最後まで作ってみたい方
公式ドキュメントを活用してAPIを使用したい人
今回の講義では、React、Expres、MongoDB、mongoose、TypeScript、アップロード機能、照会機能、検索機能などを取り上げています。講義では以下のプロジェクトを作成する予定です。
データを照会し、マーカーとインフォウィンドウを地図上に表示する機能
カカオキーワード検索APIを利用した位置情報検索機能
位置情報アップロード機能
本講義と今後作るプロジェクトの紹介と講義進行のための初期環境構築を説明しています
プロジェクトの進行に必要なナビゲーションバーを作成する講義です。 ButtonやInputを含む基本的なコンポーネントを最初に作成し、ナビゲーションバーを作成する方法で進みます。
マップサービスの中核であるマップapiを設定して適用する講義を盛り込んだ。本講義ではネイバーマップapiを使用しており、application生成およびapi key発行、そしてReactでネイバーマップapiを浮かべる方法について説明しています。また、公式ドキュメントを参照してマップクリックイベントを追加する方法を学びます。
グローバルステータスライブラリであるJotaiの紹介と活用方法について説明する講義です。
マップサービスでデータを表示する方法の1つであるマーカーについて説明するセクション。複数のマーカーを作成し、地図上に表示し、クリックイベントを追加する方法を説明するレッスンです。マーカーをクリックしたときにインフォウィンドウを表示して消える機能を作成し、地図にクリックイベントを追加する方法について説明します。
地図サービスで最も活用され、基本となる現在位置を受け取り、それを地図上にマーカーを通じて表示する方法について説明するセクションです。
検索結果を表示するためのSearchBoardを作成し、フックを活用して検索ボックスを作成する講義です。カカオが提供するキーワード検索apiを活用して、ユーザーに目的地を入力して地図上に表示する機能を実装します。その目的地の緯度と経度を決値として受け取った後にこれを処理する方法について学ぶことができ、地図上に一つのマーカーだけ浮かせるエラーハンドリングについても取り上げています。
NoSQL DatabaseであるMongoDBをインストールして設定する講義です。 docker-composeを利用してローカル環境でDBサーバーを実行し、MongoDB GUIツールであるCompassを接続します。
Expressを活用して位置データの保存、完全な位置データの照会、検索結果の照会APIを作成する講義です。以前に設定した MongoDB で mongoose を活用してデータを管理します。
React Queryを活用して位置データや検索結果の照会、位置データ生成API通信を行う方法について説明する講義です。
Q. React、Express、MongoDB、Nodeを学ぶのに良い点は何ですか?
最大の利点は、1つの言語でフロントエンドとバックエンドを同時に作成できることです。 ReactとExpressはNode環境で最もよく使われるライブラリやフレームワークであり、MongoDBはNoSQLデータベースでNodeとの相性がよく、mongooseというパッケージを通じて簡単に使用できます。
Q. 初心者が聞くことで講義の難易度はどうでしょうか?
プロジェクトを最初から最後まで作ってみるので、ゆっくりついてくるとみんなが完璧に作れる難易度です。ただし、講義の特性上、基本知識(TypeScript、React hooks、Express構造など)については扱いませんので、あらかじめ学習する必要があります。
Q. ネイバーマップ、カカオマップAPIを使用するのに費用がかかりますか?
講義のプロジェクトを作成するには費用がかからないので、心配しないでください。 :)ネイバーマップAPIは月10,000,000件を無料で提供しており、カカオマップAPIは日300,000件を無料で提供しています。多くのトラフィックが発生しない限り、無料で使用できます。
学習対象は
誰でしょう?
React で地図サービスを作成したい人
公式文書の活用方法を知りたい方
前提知識、
必要でしょうか?
React の基本構文 (hooks、jsx)
Express の基本構造 (router)
TypeScript 文法
yarn または npm
1,335
受講生
119
受講レビュー
165
回答
4.8
講座評価
3
講座
안녕하세요 개발자 이동훈입니다.
4400만 조회수가 넘는 코로나맵을 최초로 기획하고 개발하였으며, 마스크맵, 코로나미를 통해 많은 사용자분들의 불편함을 해소하는 서비스를 운영하고 있습니다.
현재는 작은 스타트업을 창업하여 CTO로서 열심히 개발을 하고 있습니다.
감사합니다.
全体
45件 ∙ (4時間 24分)
講座資料(こうぎしりょう):
1. 講義紹介
01:35
2. プロジェクト紹介
01:14
3. ボイラープレートコードの紹介
06:36
4. React Routerの設定
06:57
5. ナビゲーションバーを分解してみる
01:42
7. 共通コンポーネント - Button 作成
07:38
13. ナビゲーションバーの作成
04:51
14. グローバルCSS設定
03:48
15. ネイバーマップを表示する
11:18
17. マップクリックイベントを追加
03:23
全体
4件
5.0
4件の受講レビュー
受講レビュー 3
∙
平均評価 5.0
5
Tôi muốn tìm hiểu về cú pháp TypeScript và sử dụng nó với React, đồng thời có một bài giảng mới hấp dẫn vừa được cập nhật nên tôi đã tham gia. Trước đây tôi đã sử dụng một số API nhưng gần như tôi đã sao chép và dán chúng. Tuy nhiên, qua bài giảng này, tôi đã học được cách sử dụng tài liệu API chính thức và tự tin rằng tôi sẽ có thể tìm và sử dụng các chức năng tôi cần trong tương lai. Ngoài ra, nội dung về TypeScript không khó và được giải thích rõ ràng nên tôi nghĩ ngay cả những người mới bắt đầu cũng có thể dễ dàng theo dõi. Cảm ơn bạn vì bài giảng tuyệt vời :)
受講レビュー 6
∙
平均評価 4.7
受講レビュー 65
∙
平均評価 5.0
受講レビュー 3
∙
平均評価 5.0
¥4,091
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!