BEST

Full-stack

コロナマップ開発者と一緒に地図サービスを作る2

Name: コロナマップ開発者と一緒に地図サービスを作る2
Price: 59400 KRW
Rating: 4.5 (24 reviews)

コロナマップ開発者が知らせるマップサービス制作深化講義です。

（4.5）受講レビュー 24件

受講生 336名

難易度 中級以上

受講期間 無制限

donghunee

Node.js

MongoDB

Express

Web Application

Mongoose

Node.js

MongoDB

Express

Web Application

Mongoose

学習した受講者のレビュー

4.5

5.0

이호진

6% 受講後に作成

以前の講義と同様にわかりやすく説明してくれる講義でした～！字幕があり、従うのが楽です。

5.0

유경식

100% 受講後に作成

ネイバー、カカオマップを使いやすく教えてくれて、学習に多くのお役に立ちました。サービスを作成するだけに、Javascript、jQuery、ajax、DBなどの基本概念は必要です。

5.0

로빈(Robin)

100% 受講後に作成

Maps APIを理解し活用するのに非常に役立ちました。

受講後に得られること

ネイバーマップapiによるWebベースのマップサービスの構築
基本的な地図サービスに必要なマーカー、インフォウインドウの作成
Kakao API を通じて座標アップロードページを構築する
MongoDB と mongoose を連携した地図サービス構築
地図サービスの最適化のためのクラスタリング機能
行政区域（道）の視覚化とイベントの追加

コロナマップ開発者と一緒に、指導サービスを征服する🧭

マップサービスの制作に関する多くの悩み！

「地図サービスを作りたいのですが、どこから始めるべきかわかりません。」
「場所に関する情報をDBに保存したいのですが、どうすればいいですか？」
「地図の上にデータが多くなると最適化が必要なのにどうすればいいですか？」

こんにちは、開発者イ・ドンフンです。
私は1400万人が利用したコロナマップ、そしてマスクマップを企画・開発しました。

_{薬局マスク在庫を地図上に可視化したプロジェクト「マスクマップ」}

_{確定者銅線を地図上に点と線で表示したプロジェクト「コロナマップ」}

サービス運営中に最もよく寄せられた質問の1つ
「コロナマップのようなサービスを作ってみたいのですが、どこでどのように始めるのかわかりません」でした。
そこで講義制作を考えることになり、昨年、指導サービス入門者のための講義を提供しました。

多くの方々の応援と関心のおかげで初講義であるにもかかわらず、良いフィードバックをたくさん受けました。
講義へのフィードバックの中で、より多様な機能を学びたいという意見が多く、新しい講義を計画することになり、本講義を制作しました。

_{Inflearn <コロナマップ開発者との指導サービスを作成>講義受講評}

今回の講義では、MongoDB、Mongoose、アップロード機能、マーカークラスタリング、行政区域の可視化など、より深化した内容を追加し、コロナマップを現在まで運営しながら得た指導サービス制作ノウハウを盛り込んでいます。コロナマップで使用した機能、最適化方法、ライブラリの活用方法などをできるだけわかりやすく講義に解き明かしました。

皆さんの指導サービスの実力向上に多くのお役に立てば幸いです。
ありがとう:)

なぜ地図サービスなのか？

_{出典：ジェンリー公式ホームページ}

現在1000万ダウンロードアプリ「Zenly（ジェンリー） - 親しい友達同士」をご存知ですか？

いわゆるZ世代が頻繁に利用するサービスで、地図上に友達の位置、バッテリー、移動速度などを表示してお互いに共有するサービスです。これにより、ジェンリーは新たなコミュニケーション方式で急浮上して人気を得ています。今日、Z世代は自分の現在地と移動経路を他人と共有するのになじみがあると表現できます。

_{出典：ジェンリー公式ホームページ}

これは現在のトレンドとして位置づけられ続けています。
そのため、位置情報や移動経路を可視化する地図サービスの重要性も大幅に増加すると予想しています。
位置情報を視覚化するのに最適なUIはまさに地図だからです。

現在はコロナ19のため外部への出入りは自由ではありませんが、もしコロナ19を克服する時期が来れば必然的にオフライン活動に対する需要も増加し、関連事業も成長すると思います。
このようなオフライン活動を支援するのが、場所、座標を一目で視覚化できる地図UIです。

지도 서비스에 대한 이해도와 실력을 보유하는 것은 트렌드에 맞춰 자신의 강점을 키우는 좋은 방법입니다.

コロナマップもマップUIを採用し、1400万人を超えるユーザーに多くの助けを与えました。このように、地図サービスはさまざまなサービスと組み合わせることができ、爆発的な可能性を持っています。

他人と差別化された自分だけの強みを育てたい方にこの講義をお勧めします。

何を学びますか？
学習内容＆講義の特徴

国内唯一！
指導サービス制作講義

_{MongoDB / Mongoose / Node.js /
Express / Naver map API / Kakao map API}

_{データに基づいてマーカーを作成し、
インフォウィンドウを表示する機能}

_{カカオapiを活用したキーワード検索}

_{MongoDBに位置データを保存する}

_{マーカークラスタリング機能}

_{行政区域データレイヤー機能}

指導サービスの運営に必要な機能を選別して講義で提供します。
その機能がなぜ、どのように書かれたのかを理解しやすくするための説明を提供します。
字幕を提供して講義により集中できる環境を提供します。

セクション別紹介

Section 0. 講義の紹介
プロジェクトと講義の紹介を通じて、今後作成するマップサービスで学ぶことができる機能について説明します。

Section 1. 初期環境の構築
プロジェクト制作に必要な初期環境を設置して設定する方法を紹介します。 Node.jsとVS Code、開発に必要な必須パッケージをインストールして実行してみます。

Section 2. マップサービスプロジェクトの構築
Expressを活用してサーバーを実行し、指導サービスを作成する準備をします。 Naver Maps APIを発行してそのプロジェクトに適用します。

Section 3. マーカーとインフォウィンドウの作成
マーカーを表示し、クリックイベントを追加してインフォウィンドウを表示する方法について説明します。複数のマーカーを表示したり、CSSを介してマーカーアイコンを変更したり、イベントを追加してユーザーの利便性を向上させることができます。また、インフォウィンドウを活用して情報を地図上に表示します。

Section 4. MongoDBとMongooseの活用

NoSQLの代表的なDBであるMongoDBを紹介し、ホスティングしてみる方法について紹介します。また、CompassというDB管理ツールをインストールして実行してみます。また、Node.jsとMongoDB用のODMパッケージであるMongoseを紹介してインストールし、スキーマを作成します。

Section 5. アップロード機能初期環境構築
カカオAPIを活用してキーワード検索機能を実装し、結果データに基づいて地図上に表示する機能を追加してアップロード機能のための初期環境を構築してみます。

Section 6. アップロード機能の仕上げ
キーワード検索結果データをMongoDBに保存し、地図上に表示する方法を学びます。 Postmanと通信し、アップロードサーバーを構築します。

Section 7. マーカークラスタリング機能の実装
マップサービスの最適化方法の1つであるマーカークラスタリング機能を紹介して実装します。マップサービスで表示する必要があるデータが多い場合は、クラスタリング機能を介してそれらを収集して表示します。

Section 8. 行政区域（度）データレイヤー表示
行政区域別に区画を分けて視覚化する方法について紹介します。また、行政ゾーンごとに該当ゾーンをクリックしたとき、マウスが上がったとき、下がったときに応じたイベントを追加してツールチップとそのゾーンの色を変更する機能を実装してみます。

よくある質問

Q. 授業内容をどの程度レベルまで扱いますか？

本講義では、指導サービスを作成するための基礎的な内容から、より深化的な内容まで広いスペクトルを提供する予定です。
そのため初級～中級までの難易度を持っています。

Q. ネイバーAPIとカカオAPIの両方を書いた理由はありますか？

それぞれのメリットがあるので、これを最大限に活用したいからです。
Naver Map APIは、追加の機能と最適化がうまくいっていると考えており、カカオAPIの場合、キーワード検索機能のパフォーマンスが非常に良いので、2つをすべて採用して両方の利点を最大化しようとしています。

Q. 非専攻者も聞くことができますか？

当然可能です。ただし、地図サービスの特性上、JavaScriptを多く使用する必要があるため、基礎的な知識が求められる場合があります。そのため、関連知識が不足している場合は、その講義で提供するロードマップを通じてHTML、CSS、JS関連の基礎知識を習得後に受講することをお勧めします。

Q.以前の講義との違いは何ですか？

以前の講義「コロナマップ開発者と一緒に指導サービスを作る」の場合、指導サービス制作入門のための講義でした～！単に地図を浮かべたり、マーカーを表示するなどの基本的な機能だけを学びたい場合は、以前の講義を受講することをおすすめします。
本講義には、サーバー通信、MongoDBとMongooseによるデータハンドリング、マーカークラスタリング、Ajax、データレイヤー表示など、初級から中級までの内容が盛り込まれています。そのため、より多くの機能を学習したい方におすすめです。

地図サービス制作、
完全基礎から始めたいのなら？

こんな方に
おすすめです

学習対象は
誰でしょう？

コロナマップのような指導サービスを作りたい方
地図関連の API を使用したいが、どうすればよいかわからない方
DBに連携した地図サービスを作成したい方
地図サービスのさまざまな機能を学びたい方

前提知識、
必要でしょうか？

HTML
CSS
Javascript

こんにちは
です。

1,345

受講生

119

受講レビュー

165

回答

4.8

講座評価

講座

こんにちは、開発者のイ・ドンフンです。

4,400万回以上の閲覧数を記録した「コロナマップ」を最初に企画・開発し、その後も「マスクマップ」や「コロナミ」を通じて、多くのユーザーの不便を解消するサービスを運営しています。

現在は小さなスタートアップを創業し、CTOとして精力的に開発に取り組んでいます。

ありがとうございます。

カリキュラム

全体

33件 ∙ (3時間 14分)

セクション 1．講義紹介

1件 ∙ (1分)

1. 講座およびプロジェクト紹介
01:41

セクション 2．初期環境構築

3件 ∙ (9分)

セクション 3．地図サービスプロジェクト構築

6件 ∙ (34分)

5. express プロジェクトを作成する
01:38
6. Express サーバー起動
05:36
7. NAVERマップ API 発行および適用
07:44
8. 地図サービスへのCSS適用
05:22
9. ナビゲーションバーの作り方
06:29
10. アップロードページを作る
07:35

セクション 4．マーカーおよびインフォウィンドウ生成

6件 ∙ (22分)

セクション 5．MongoDBと mongoose 活用

4件 ∙ (17分)

セクション 6．アップロード機能初期環境構築

5件 ∙ (44分)

セクション 7．アップロード機能の完了

4件 ∙ (32分)

セクション 8．マーカークラスタリング機能実装

2件 ∙ (12分)

セクション 9．行政区域(道) データレイヤー表示

2件 ∙ (18分)

講座掲載日:

最終更新日:

受講レビュー

全体

24件

4.5

24件の受講レビュー

ehdgns17664658
受講レビュー 2
∙
平均評価 5.0
5
6% 受講後に作成
以前の講義と同様にわかりやすく説明してくれる講義でした～！字幕があり、従うのが楽です。
- donghunee
  知識共有者
  ありがとうホジン：）今後より良いコンテンツでお返しさせていただきます～！
yksshocking8306
受講レビュー 2
∙
平均評価 5.0
5
100% 受講後に作成
ネイバー、カカオマップを使いやすく教えてくれて、学習に多くのお役に立ちました。サービスを作成するだけに、Javascript、jQuery、ajax、DBなどの基本概念は必要です。
develobing
受講レビュー 3
∙
平均評価 5.0
5
100% 受講後に作成
Maps APIを理解し活用するのに非常に役立ちました。
mini02042581
受講レビュー 4
∙
平均評価 5.0
5
100% 受講後に作成
途中、途中でコード入力エラーで何度も繰り返しながら修正して学習したところ、うまくいきますね。いろいろなプログラムや応用方法が分かった講義でした。お疲れ様でした。
g1kwon7491
受講レビュー 8
∙
平均評価 5.0
5
100% 受講後に作成
使いにくかった地図APIを扱う方法を学ぶことができてよかったです。軽く自分だけの指導サービスの作り方を学ぶ良い講義です

￥7,325

donghuneeの他の講座

知識共有者の他の講座を見てみましょう！

コロナマップ開発者が教えるReact + Expressで地図サービスを作る (Typescript)

donghunee

MERN stack (feat. TypeScript) を活用して、地図サービスを最初から最後まで作成する講義です。API 公式ドキュメントを見ながら、一つずつ順を追って作成してみましょう。

初級

MongoDB, Express, React

コロナマップ開発者が教えるReact + Expressで地図サービスを作る (Typescript)

donghunee

コロナマップ開発者との指導サービスの作成1

donghunee

コロナマップ開発者が知らせる指導サービス作り講義です。

初級

Node.js, Web Application, Express

コロナマップ開発者との指導サービスの作成1

donghunee

似ている講座

同じ分野の他の講座を見てみましょう！

コロナマップ開発者との指導サービスの作成1

donghunee

コロナマップ開発者が知らせる指導サービス作り講義です。

初級

Node.js, Web Application, Express

コロナマップ開発者との指導サービスの作成1

donghunee

コロナマップ開発者が教えるReact + Expressで地図サービスを作る (Typescript)

donghunee

初級

MongoDB, Express, React

コロナマップ開発者が教えるReact + Expressで地図サービスを作る (Typescript)

donghunee

Express.jsをしっかり学ぶ: Part2 エンジン内部の動作原理とクローンプロジェクト

nhcodingstudio

Express.jsを使うレベルを超えて、実際にその内部エンジンを最初から最後まで直接実装し、本物のサーバーの動作原理を体で習得する講義です。ルーター、ミドルウェア、リクエスト-レスポンスオブジェクト、静的ファイル処理、テンプレートレンダリングなど、Expressのすべての構成要素を最初から直接作ってみながら、サーバー開発者として成長する経験を提供します。

初級

JavaScript, Node.js, Express

Express.jsをしっかり学ぶ: Part2 エンジン内部の動作原理とクローンプロジェクト

nhcodingstudio

バックエンド就職のためのプロジェクト構造とデータベースの扱い方 [MySQL、Mongo]

July

バックエンドの就職準備をしている求職者の方々を対象に、MySQL、Mongoの2つのDBを活用したバックエンド開発について説明します。

初級

MySQL, MongoDB, ERD

バックエンド就職のためのプロジェクト構造とデータベースの扱い方 [MySQL、Mongo]

July

React.js + Node.js LoL戦績検索サイト作成

neneee

この講義はRiot Games APIを活用し、React.jsとNode.jsを用いた「リーグ・オブ・レジェンド戦績検索サイト」を実際に作ってみる実践中心の講義です。受講生は基本的なAPIの使い方から、フロントエンド(React.js)とバックエンド(Node.js, Express.js)の連携、戦績データの視覚化、そしてop.ggスタイルのUI実装まで、プロジェクトを段階的に追うことで実習を通じて自然に学ぶことができます。複雑な理論よりも、コードを中心に「実際に真似して作る」ことを通じて、迅速に成果物を体験できます。

入門

React, Node.js, api

React.js + Node.js LoL戦績検索サイト作成

neneee

Node.jsのすべて

yongsoocho

基礎からじっくりと実力を積み重ね、Node.jsのスキルを完成させるオールインワン講座👍

初級

Node.js, AWS, PostgreSQL

Node.jsのすべて

yongsoocho

[コードキャンプ]ブートキャンプで作られた高濃縮フロントエンドコース

codecamp

1年間で300人以上の開発者を輩出した「本物の」ブートキャンプの濃縮カリキュラムです。この講義1つで、実務のジュニア開発者レベルまで成長し、フロントエンド技術スタックの活用能力と知識を得ることができます。[InflearnXコードキャンプ]は、社会、経済、教育の背景に関係なく、誰もがキャリアを積めるように準備しました :)

入門

React, Next.js, GraphQL

[コードキャンプ]ブートキャンプで作られた高濃縮フロントエンドコース

codecamp

2時間でAIを使ってアドセンス収益型ウェブサイトを作る

moderncrusoe

アドセンス収益型ウェブサイトを作る方法をまとめました。開発経験がなくても付いてこられるよう、成功した方式だけを残してそのまま再現できるように構成しました。

入門

Web Application, cloudflare, adsense

2時間でAIを使ってアドセンス収益型ウェブサイトを作る

moderncrusoe

Python Streamlit を使用した Web 自動化業務、データ検索、および視覚化

boanproject

Python Streamlit ライブラリを活用して、さまざまな種類のデータを分析し、迅速に視覚化して、Web サービスに基づいて出力する方法を学びます。既存の Web 開発方法よりも迅速に業務に適用したいときに活用できます。

初級

Python, streamlit, MongoDB

Python Streamlit を使用した Web 自動化業務、データ検索、および視覚化

boanproject

[React 2部] 高度なトピックとフック

jeonghwan

いよいよReactの仕組みが本当に「見えてくる」ようになります。高度な概念とHooks、最も簡単かつ正確に学んでみましょう。

中級以上

React Context, react-hooks, React

[React 2部] 高度なトピックとフック

jeonghwan

Next.jsでReactを始める

zk202308a5410

Reactが初めてですか？ Reactの基本概念をしっかり固めながらも、素早く学べる方法を考える必要があります。 Next.jsとJavaScriptで最小限の知識から始めてみましょう。実務で開発に必要な必須的な例題だけを厳選して開発してみましょう。 Todoの例題は非常に重要なので、2回開発する必要があります。1回目はコンポーネント中心に、次はブラウザのパスに合わせて処理されるルーティング中心に！ログインはZustandを利用しましょう！本当に少ないコード量でグローバルステートを処理できます。

入門

JavaScript, React, Web Application

Next.jsでReactを始める

zk202308a5410

非専攻者でも可能なAIバイブコーディング入門コース

itconnect

💡 非開発者もAIと一緒にたった10時間で創業MVPから収益化サービスまで！ 💰 外注費数千万円が必要だった開発、今や12万円で完全解決 🎯 名刺認識、感情分析、立地分析まで実戦ビジネスプロジェクト5個完走 🔥 企画者、マーケター、予備創業者なら開発者なしでもアイデア実現 ⚡ 今始めれば一生使える開発自立能力を獲得しましょう！

入門

HTML/CSS, Java, Web Application

非専攻者でも可能なAIバイブコーディング入門コース

itconnect