Webを開発するための基本的な初期環境の構築
ネイバーマップapiによるWebベースのマップサービスの構築
基本的な指導サービスに必要なマーカー、インフォウィンドウ、インフォボックス生成
Web開発に必要なhtml、css、jsに関する知識
カカオapiによる目的地検索機能の実装
コロナマップ開発者と一緒に学ぶ実際の指導サービスの実装！
＜出典：KTV、EBS＞
こんにちは、開発者イ・ドンフンです。
私は今回1400万人が利用し、4400万視聴数を超えたコロナマップと
マスクリアルタイム在庫状況を示すマスクマップを企画して開発しました。
サービス運営中に最もよく寄せられた質問の1つ
「コロナマップのようなサービスを作ってみたいのですが、どこでどのように始めるのかわかりません」でした。
それで講義制作を考えることになり、本当に良い機会で今回の講義を作ることになりました。
初めての講義なので、大変厄介で苦手ですが、多くの方にお役に立てば幸いです。
本当にもう一度ありがとう！いつでもフィードバックをお願いします。
＜出典：朝鮮日報＞
大統領府の仕事報告に出席したときに聞いたことの最も印象的な言葉は
コロナマップは政府が情報を公開する方法の面で新しい発想だ。政府の広報方式に「発想の転換」をしなければならない。特に頼む」でした。コロナマップの基盤となる新しい発想として認識されるマップUIは、ユーザーに最も効率的かつ直感的に情報を表示する方法です。
サービスを企画または開発する際に、ユーザーに直感的で簡単かつ迅速に情報を提供することがますます重要になっている現状で、本講義を通じて指導サービスを作成するための基本設定から活用する方法を皆さんにお知らせしたいと思います。
以下は本講義で製作する指導サービスです。
.gif)
 (1).gif "現在位置（1）（1）.gif")
.gif)
本講義では、指導サービスを作るための基本知識を学ぶ予定です。
講義で学ぶ知識は、現在コロナマップで活用されている知識です。このように本講義を通じて受講生の皆さんが今後の指導サービスを制作する際に役立つと思います。
本講義と今後作成するプロジェクトの紹介と、Web開発を始める際にコロナマップクローンプロジェクトで得られる基礎的な知識について説明しています。
プロジェクトを進めるための初期環境を設置して設定する方法についての講座が含まれています。本講義ではVS Code、
node.js、expressをインストールしてプロジェクトを進めるための初期環境設定について説明しています。
マップサービスの中核であるマップapiを設定して適用する講義を盛り込んだ。
このレッスンではネイバーマップapiを使用しており、applicationの生成とapi keyの発行、そしてWebでネイバーマップapiを浮かべる方法について説明しています。
指導サービスで見られるバナー部分とインフォボックスを生成する講義が盛り込まれました。
マップサービスとWebサービスに必要なトップバナーとインフォボックスを作成し、cssを介してユーザーに見せることを説明するレッスンです。このレッスンでは、地図上に情報を表示する方法であるバナーとインフォボックスを作成する方法を学びます。
マップサービスでデータを表示する方法の1つであるマーカーについて説明するセクション。
複数のマーカーを作成し、地図上に表示し、クリックイベントを追加する方法を説明するレッスンです。マーカーをクリックしたときにインフォウィンドウを表示して消える機能を作成し、地図にクリックイベントを追加する方法について説明します。
セクション6 - 現在地を地図上に表示する
地図サービスで最も活用され、基本となる現在位置を受け取り、それを地図上にマーカーを通じて表示する方法について説明するセクションです。
現在位置を取得するためのボタンを作成し、jQueryを使用してclickイベントを付与し、現在位置にマーカーを生成する方法について説明します。また、マーカーの周りに広がるアニメーション効果を付与する方法についても取り上げています。
Section 7 - 現在地を地図上に表示する
カカオapiを利用して目的地を検索し、地図を上に表示する方法を説明するセクション。
カカオが提供するキーワード検索apiを活用し、ユーザーに目的地を入力して地図上に表示する機能を実装します。その目的地の緯度と経度を結果値として受け取った後、それを処理する方法について学ぶことができ、地図上に一つのマーカーだけ浮かせるエラーハンドリングについても取り上げています。
コロナマップをいつ、どのように企画したのか開発日誌に解放しました。現在運営されているコロナマップがどのように誕生するようになり、どのようなきっかけで企画し、運営しているか簡単に紹介しました。
コロナマップ開発者が直接初期環境設定から指導サービスの実装まで教えてくれる講義です。
そのため、地図サービスを初めて経験する開発者も簡単にアクセスできるように製作しており、現在多くの利用者が使用している地図サービスをクローンすることで
単純なプロジェクトではなく、企画、開発過程で得たノウハウはもちろん、コロナマップで実際に利用するコードまで確認できます。
学習対象は
誰でしょう？
コロナマップのような指導サービスを作りたい方
地図関連apiを使いたいけど、どうすればいいかわからない方
自分だけのウェブサービスを作ってみたい方
前提知識、
必要でしょうか？
HTML
CSS
Javascript
1,332
受講生
118
受講レビュー
165
回答
4.8
講座評価
3
講座
안녕하세요 개발자 이동훈입니다.
4400만 조회수가 넘는 코로나맵을 최초로 기획하고 개발하였으며, 마스크맵, 코로나미를 통해 많은 사용자분들의 불편함을 해소하는 서비스를 운영하고 있습니다.
현재는 작은 스타트업을 창업하여 CTO로서 열심히 개발을 하고 있습니다.
감사합니다.
全体
25件 ∙ (1時間 57分)
全体
90件
4.8
90件の受講レビュー
受講レビュー 2
∙
平均評価 5.0
5
It was easy to watch because there were subtitles for each lecture~!! It was good for learning basic knowledge of map service.
Hello Hojin~😆 It was my first lecture, so it was lacking in many ways, but I am really grateful that it was helpful. I will continue to update the lectures in the future, so please show a lot of interest.🤗🤗🤗
受講レビュー 1
∙
平均評価 5.0
5
Hello. There are many people who don't share well because of the nature of computer science students, but thank you very much for going step by step from the beginning. In addition, the explanation is really, really good, it's really the best. As a tip for other students, as someone who just listened to the lecture and completed it, if you are good at distinguishing uppercase and lowercase letters, you will be able to complete it without any problems. Thank you very much.
受講レビュー 1
∙
平均評価 5.0
5
Your voice is so nice. It seems like a good tone for a lecture. It's easy to understand because you explain it in an easy-to-understand way. I've always been curious about the Corona Map service process... Thank you for giving me this opportunity. Fighting!!!!
Hello Eun-kyung~!! Thank you for giving me a good evaluation even though the lecture may be a bit lacking~!! We plan to continuously update the know-how we have gained while planning and developing the Corona Map, so please show a lot of interest.
受講レビュー 1
∙
平均評価 3.0
受講レビュー 3
∙
平均評価 5.0
5
This was a lecture where I could learn how to create and utilize map services in general through practical lectures. The instructor's kind and detailed explanations were really helpful. What impressed me the most was the speed of the Q&A response and the kindness of looking into the details. You said that you will update various contents such as DB in the future, so I will definitely check it out and study it additionally when it is uploaded. I sincerely thank you for creating such a useful lecture.
￥4,031
知識共有者の他の講座を見てみましょう！
同じ分野の他の講座を見てみましょう！
![[React Part 2] Advanced Topics and Hooks강의 썸네일](https://cdn.inflearn.com/public/courses/332123/cover/62407827-5375-47cf-91fa-4877bf72c139/332123-eng.png?f=avif&w=420)
![Learning Express.js Properly: Part 1, From Basics to Advanced [Basics]강의 썸네일](https://cdn.inflearn.com/public/files/courses/336833/cover/01jre8d93dtfptrdx7kjrt7rh0?f=avif&w=420)
![[2025] React Native App Development Masterclass for Non-majors강의 썸네일](https://cdn.inflearn.com/public/files/courses/332860/cover/01jnwb77yxra1hp8cm9hed0wnd?f=avif&w=420)
![Making [R shiny app] as told by Dad강의 썸네일](https://cdn.inflearn.com/wp-content/uploads/rshiny1.jpg?f=avif&w=420)