강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Full-stack

How to create a map service with React + Express, as told by the developer of Corona Map (Typescript)

This is a lecture on creating a map service from start to finish using the MERN stack (feat. TypeScript). Let's create each part step by step by looking at the official API documentation.

(5.0) 4 reviews

111 learners

  • donghunee
mern
실습 중심
앱개발
MongoDB
Express
React
Node.js
TypeScript

Reviews from Early Learners

What you will learn!

  • React + TypeScript Development

  • Express + TypeScript Development

  • Using MongoDB + Mongoose

  • How to use Kakao Map API

  • How to use Naver Map API

With the developer of Corona Map with 44 million views
Take on the challenge of developing a map service 💻

<Source: KTV>
<Source: EBS>

Developing Map Services with the MERN Stack 🗺️

Hello, I am developer Donghoon Lee.
I planned and developed the Corona Map, which has been used by 16 million people and has been viewed over 44 million times, and the Mask Map, which shows the real-time inventory status of masks. I am currently working on a GIS-related product at a startup.

I think that map services will become one of the essential technology stacks in the future as location information becomes more important . However, it is true that the entry barrier to developing a map service for the first time is high. I hope that through this lecture, students will be able to create map services more easily and further feel the charm of map services.

This course teaches you how to set up the initial environment and implement a map service using React, Express, MongoDB, etc. You can experience the full-stack production process, i.e. front-end and back-end, by creating the service yourself.

For Naver Map and Kakao Map APIs, this is a lecture that uses official documentation to learn why they are used in this way rather than simply writing code. It will help students become more familiar with the official documentation.

This lecture contains knowledge related to maps used in practice . Of course, the lecture difficulty level is set to make it easy for beginners to understand, and subtitles are added to all lectures, so you can listen without any burden. We provide boilerplate source code to reduce the initial setup burden for students.

Inflearn has released two map service lectures that I created. Thanks to the support and interest of many people, I received a lot of good feedback even though it was a limited topic of map services. Among the feedback on the lectures, many people wanted to create services with the technology stack used in practice, so I created this lecture. (Below is a review of the previously opened 'Making Map Services with Corona Map Developers' lecture.)

★★★★★

It's good to listen to it little by little, and there are subtitles so you can listen without sound. And since it explains everything from the beginning to the end, it's easy to understand and follow along.

★★★★★

The explanation is really, really good, it's really the best. If I may give a tip to other students, as someone who just listened to the lecture and completed it, if you just distinguish between uppercase and lowercase letters, you will be able to complete it without any problems. Thank you so much.

★★★★★

Overall, it was a lecture where I could learn how to create and utilize map services. What impressed me was the speed of the Q&A response and the kindness in looking into the details. I sincerely thank you for creating such a useful lecture.


I recommend this to these people 🙆‍♀️

For those who want to create a map service with React and Express

For those who want to create a project from start to finish

For those who want to use the API by utilizing the official documentation


Lecture Features ✨

This lecture covers React, Express, MongoDB, mongoose, TypeScript, upload functions, query functions, search functions, etc. In the lecture, we will create a project like the one below.

Ability to query data and place markers and info windows on the map.

Location information search function using Kakao Keyword Search API

Location information upload function

  • You can learn how to use Naver and Kakao Map APIs by using the official documentation.
  • You will learn how to build a project using React, Express, MongoDB, and TypeScript.
  • When creating a project, you can understand and build the roles of front-end, back-end, and DB.

Learn things like this 📚

#0.
Introduction to the course and
Setting up the initial environment

This course introduces the project that will be created in the future and explains how to set up the initial environment for the course.

#1.
Frontend.
Creating a Navigation Bar

This is a lecture on creating a navigation bar required for project progress. We will first create basic components including Button and Input, and then proceed to create the navigation bar.

#2.
Frontend.
Display Naver Map

This lecture covers setting up and applying the map API, which is the core of the map service. This lecture uses the Naver Map API, so it explains how to create an application, issue an API key, and launch the Naver Map API in React. You will also learn how to add a map click event by referring to the official documentation.

#3.
Frontend. Jotai

This lecture introduces Jotai, a global state library, and covers how to use it.

#4.
Frontend.
Create a marker

This section explains markers, which are one of the ways to display data in a map service. This lecture explains how to create multiple markers, display them on a map, and add click events. It explains how to create a function that shows and hides an info window when a marker is clicked, and how to add click events to the map.

#5.
Frontend.
Creating an info window

This section explains how to get the current location, which is the most commonly used and basic method in map services, and display it on the map with a marker.

#6.
Frontend.
SearchBoard
Create a search box

This is a lecture on creating a SearchBoard to display search results and using hooks to create a search window. Using the keyword search API provided by Kakao, we implement a function to receive a destination from the user and display it on a map. You can learn how to process the latitude and longitude of the destination after receiving them as results, and we also cover error handling to display only one marker on the map.

#7.
Database. MongoDB

This lecture installs and sets up MongoDB, a NoSQL database. We use docker-compose to run the DB server in a local environment and connect to Compass, a MongoDB GUI tool.

#8.
Backend. Express

This is a lecture that uses Express to create an API for storing location data, retrieving all location data, and retrieving search results. Data is managed using mongoose in the previously set up MongoDB.

#9.
Frontend )
React-Query

This lecture covers how to use React Query to retrieve location data and search results, and communicate with the API to generate location data.


Expected Questions Q&A 💬

Q. What are the benefits of learning React, Express, MongoDB, and Node?

The biggest advantage is that you can create front-end and back-end at the same time with one language. React and Express are the most used libraries and frameworks in the Node environment, and MongoDB is a NoSQL database that goes well with Node and can be easily used through a package called mongoose.

Q. How difficult is the lecture for beginners?

Since we will create a project from start to finish, if you follow along slowly, it is a level of difficulty that anyone can create perfectly. However, due to the nature of the lecture, it does not cover basic knowledge (TypeScript, React hooks, Express structure, etc.), so you need to learn it in advance.

Q. Is there a cost to use Naver Map or Kakao Map API?

There is no cost to create a project for the lecture, so don't worry. :) Naver Map API provides 10,000,000 cases per month for free, and Kakao Map API provides 300,000 cases per day for free. You can use it for free as long as there is not a lot of traffic.


Recommended for
these people

Who is this course right for?

  • Anyone who wants to create a map service with React

  • People who want to learn how to use official documents

Need to know before starting?

  • React Basic Grammar (hooks, jsx)

  • Express Basic Structure (router)

  • TypeScript Syntax

  • yarn or npm

Hello
This is

1,334

Learners

119

Reviews

165

Answers

4.8

Rating

3

Courses

안녕하세요 개발자 이동훈입니다.

4400만 조회수가 넘는 코로나맵을 최초로 기획하고 개발하였으며, 마스크맵, 코로나미를 통해 많은 사용자분들의 불편함을 해소하는 서비스를 운영하고 있습니다.

현재는 작은 스타트업을 창업하여 CTO로서 열심히 개발을 하고 있습니다.

감사합니다.

Curriculum

All

45 lectures ∙ (4hr 24min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

All

4 reviews

5.0

4 reviews

  • ksh990913님의 프로필 이미지
    ksh990913

    Reviews 3

    Average Rating 5.0

    5

    100% enrolled

    타입스크립트 문법에 대해 배우고 리액트와 함께 사용해 보고 싶었는데 마침 방금 업데이트된 따끈따끈한 최신 강의가 있어서 듣게 되었습니다. 기존에 여러 api를 사용했었지만 거의 복붙하다시피 했었습니다. 하지만 이 강의를 통해 api 공식 문서를 어떻게 사용해야 하는지 알게 되었고 앞으로는 제가 필요한 기능을 찾아서 사용할 수 있을 거 같은 자신감을 얻었습니다. 그리고 타입스크립트에 대한 것도 어려운 내용이 아니고 설명도 잘해주셔서 처음 시작하는 사람들도 쉽게 따라갈 수 있을 거 같네요. 좋은 강의 감사합니다:)

    • ACACIA님의 프로필 이미지
      ACACIA

      Reviews 6

      Average Rating 4.7

      5

      100% enrolled

      참... 애매하네요. 고생하셨습니다.

      • baby4님의 프로필 이미지
        baby4

        Reviews 65

        Average Rating 5.0

        5

        100% enrolled

        지도 api는 어려운 느낌이 있어서 시도하지 못했는데 재밌게 수강 했습니다

        • JH님의 프로필 이미지
          JH

          Reviews 3

          Average Rating 5.0

          5

          100% enrolled

          정말도움이많이됬습니다.

          $26.40

          donghunee's other courses

          Check out other courses by the instructor!

          Similar courses

          Explore other courses in the same field!