코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)
이동훈
MERN stack (feat. TypeScript) 을 활용한 지도 서비스를 처음부터 끝까지 만들어보는 강의입니다. API 공식 문서를 보며 차근차근 하나씩 만들어 봅시다.
초급
MongoDB, Express, React
学習した受講者のレビュー
こんなことが学べます
ネイバーマップapiによるWebベースのマップサービスの構築
基本的な地図サービスに必要なマーカー、インフォウインドウの作成
Kakao API を通じて座標アップロードページを構築する
MongoDB と mongoose を連携した地図サービス構築
地図サービスの最適化のためのクラスタリング機能
行政区域（道）の視覚化とイベントの追加
コロナマップ開発者と一緒に、指導サービスを征服する🧭
マップサービスの制作に関する多くの悩み！
「地図サービスを作りたいのですが、どこから始めるべきかわかりません。」
「場所に関する情報をDBに保存したいのですが、どうすればいいですか？」
「地図の上にデータが多くなると最適化が必要なのにどうすればいいですか？」
こんにちは、開発者イ・ドンフンです。
私は1400万人が利用したコロナマップ、そしてマスクマップを企画・開発しました。
サービス運営中に最もよく寄せられた質問の1つ
「コロナマップのようなサービスを作ってみたいのですが、どこでどのように始めるのかわかりません」でした。
そこで講義制作を考えることになり、昨年、指導サービス入門者のための講義を提供しました。
多くの方々の応援と関心のおかげで初講義であるにもかかわらず、良いフィードバックをたくさん受けました。
講義へのフィードバックの中で、より多様な機能を学びたいという意見が多く、新しい講義を計画することになり、本講義を制作しました。
Inflearn <コロナマップ開発者との指導サービスを作成>講義受講評
今回の講義では、MongoDB、Mongoose、アップロード機能、マーカークラスタリング、行政区域の可視化など、より深化した内容を追加し、コロナマップを現在まで運営しながら得た指導サービス制作ノウハウを盛り込んでいます。コロナマップで使用した機能、最適化方法、ライブラリの活用方法などをできるだけわかりやすく講義に解き明かしました。
皆さんの指導サービスの実力向上に多くのお役に立てば幸いです。
ありがとう:)
なぜ地図サービスなのか？
現在1000万ダウンロードアプリ「Zenly（ジェンリー） - 親しい友達同士」をご存知ですか？
いわゆるZ世代が頻繁に利用するサービスで、地図上に友達の位置、バッテリー、移動速度などを表示してお互いに共有するサービスです。これにより、ジェンリーは新たなコミュニケーション方式で急浮上して人気を得ています。今日、Z世代は自分の現在地と移動経路を他人と共有するのになじみがあると表現できます。
これは現在のトレンドとして位置づけられ続けています。
そのため、位置情報や移動経路を可視化する地図サービスの重要性も大幅に増加すると予想しています。
位置情報を視覚化するのに最適なUIはまさに地図だからです。
現在はコロナ19のため外部への出入りは自由ではありませんが、もしコロナ19を克服する時期が来れば必然的にオフライン活動に対する需要も増加し、関連事業も成長すると思います。
このようなオフライン活動を支援するのが、場所、座標を一目で視覚化できる地図UIです。
コロナマップもマップUIを採用し、1400万人を超えるユーザーに多くの助けを与えました。このように、地図サービスはさまざまなサービスと組み合わせることができ、爆発的な可能性を持っています。
他人と差別化された自分だけの強みを育てたい方にこの講義をお勧めします。
何を学びますか？
学習内容＆講義の特徴
国内唯一！
指導サービス制作講義
Express / Naver map API / Kakao map API
インフォウィンドウを表示する機能
- 指導サービスの運営に必要な機能を選別して講義で提供します。
- その機能がなぜ、どのように書かれたのかを理解しやすくするための説明を提供します。
- 字幕を提供して講義により集中できる環境を提供します。
セクション別紹介
Section 0. 講義の紹介
プロジェクトと講義の紹介を通じて、今後作成するマップサービスで学ぶことができる機能について説明します。
プロジェクトと講義の紹介を通じて、今後作成するマップサービスで学ぶことができる機能について説明します。
Section 1. 初期環境の構築
プロジェクト制作に必要な初期環境を設置して設定する方法を紹介します。 Node.jsとVS Code、開発に必要な必須パッケージをインストールして実行してみます。
プロジェクト制作に必要な初期環境を設置して設定する方法を紹介します。 Node.jsとVS Code、開発に必要な必須パッケージをインストールして実行してみます。
Section 2. マップサービスプロジェクトの構築
Expressを活用してサーバーを実行し、指導サービスを作成する準備をします。 Naver Maps APIを発行してそのプロジェクトに適用します。
Expressを活用してサーバーを実行し、指導サービスを作成する準備をします。 Naver Maps APIを発行してそのプロジェクトに適用します。
Section 3. マーカーとインフォウィンドウの作成
マーカーを表示し、クリックイベントを追加してインフォウィンドウを表示する方法について説明します。複数のマーカーを表示したり、CSSを介してマーカーアイコンを変更したり、イベントを追加してユーザーの利便性を向上させることができます。また、インフォウィンドウを活用して情報を地図上に表示します。
マーカーを表示し、クリックイベントを追加してインフォウィンドウを表示する方法について説明します。複数のマーカーを表示したり、CSSを介してマーカーアイコンを変更したり、イベントを追加してユーザーの利便性を向上させることができます。また、インフォウィンドウを活用して情報を地図上に表示します。
Section 4. MongoDBとMongooseの活用
NoSQLの代表的なDBであるMongoDBを紹介し、ホスティングしてみる方法について紹介します。また、CompassというDB管理ツールをインストールして実行してみます。また、Node.jsとMongoDB用のODMパッケージであるMongoseを紹介してインストールし、スキーマを作成します。
Section 5. アップロード機能初期環境構築
カカオAPIを活用してキーワード検索機能を実装し、結果データに基づいて地図上に表示する機能を追加してアップロード機能のための初期環境を構築してみます。
カカオAPIを活用してキーワード検索機能を実装し、結果データに基づいて地図上に表示する機能を追加してアップロード機能のための初期環境を構築してみます。
Section 6. アップロード機能の仕上げ
キーワード検索結果データをMongoDBに保存し、地図上に表示する方法を学びます。 Postmanと通信し、アップロードサーバーを構築します。
キーワード検索結果データをMongoDBに保存し、地図上に表示する方法を学びます。 Postmanと通信し、アップロードサーバーを構築します。
Section 7. マーカークラスタリング機能の実装
マップサービスの最適化方法の1つであるマーカークラスタリング機能を紹介して実装します。マップサービスで表示する必要があるデータが多い場合は、クラスタリング機能を介してそれらを収集して表示します。
マップサービスの最適化方法の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,332
受講生
118
受講レビュー
165
回答
4.8
講座評価
3
講座
안녕하세요 개발자 이동훈입니다.
4400만 조회수가 넘는 코로나맵을 최초로 기획하고 개발하였으며, 마스크맵, 코로나미를 통해 많은 사용자분들의 불편함을 해소하는 서비스를 운영하고 있습니다.
현재는 작은 스타트업을 창업하여 CTO로서 열심히 개발을 하고 있습니다.
감사합니다.
カリキュラム
全体
33件 ∙ (3時間 14分)
1. 講座およびプロジェクト紹介
01:41
6. Express サーバー起動
05:36
8. 地図サービスへのCSS適用
05:22
9. ナビゲーションバーの作り方
06:29
10. アップロードページを作る
07:35
講座掲載日:
最終更新日:
受講レビュー
全体
24件
4.5
24件の受講レビュー
￥7,053
donghuneeの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![[React 2부] 고급 주제와 훅강의 썸네일](https://cdn.inflearn.com/public/courses/332123/cover/62407827-5375-47cf-91fa-4877bf72c139/332123-eng.png?f=avif&w=420)
![아빠가 들려주는 [R shiny app] 만들기강의 썸네일](https://cdn.inflearn.com/wp-content/uploads/rshiny1.jpg?f=avif&w=420)
![GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]강의 썸네일](https://cdn.inflearn.com/public/courses/329186/cover/a63c6c95-2318-4e7a-a4f0-34d4512b3ae6/329186-eng.png?f=avif&w=420)
