코로나맵 개발자와 함께하는 지도서비스 만들기 2
이동훈
코로나맵 개발자가 알려주는 지도 서비스 제작 심화 강의입니다.
Intermediate
Node.js, MongoDB, Express
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.
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 💻
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.
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
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
This course introduces the project that will be created in the future and explains how to set up the initial environment for the course.
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.
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.
This lecture introduces Jotai, a global state library, and covers how to use it.
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.
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.
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.
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.
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.
This lecture covers how to use React Query to retrieve location data and search results, and communicate with the API to generate location data.
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.
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
1,334
Learners
119
Reviews
165
Answers
4.8
Rating
3
Courses
안녕하세요 개발자 이동훈입니다.
4400만 조회수가 넘는 코로나맵을 최초로 기획하고 개발하였으며, 마스크맵, 코로나미를 통해 많은 사용자분들의 불편함을 해소하는 서비스를 운영하고 있습니다.
현재는 작은 스타트업을 창업하여 CTO로서 열심히 개발을 하고 있습니다.
감사합니다.
All
45 lectures ∙ (4hr 24min)
Course Materials:
All
4 reviews
5.0
4 reviews
Reviews 3
∙
Average Rating 5.0
5
타입스크립트 문법에 대해 배우고 리액트와 함께 사용해 보고 싶었는데 마침 방금 업데이트된 따끈따끈한 최신 강의가 있어서 듣게 되었습니다. 기존에 여러 api를 사용했었지만 거의 복붙하다시피 했었습니다. 하지만 이 강의를 통해 api 공식 문서를 어떻게 사용해야 하는지 알게 되었고 앞으로는 제가 필요한 기능을 찾아서 사용할 수 있을 거 같은 자신감을 얻었습니다. 그리고 타입스크립트에 대한 것도 어려운 내용이 아니고 설명도 잘해주셔서 처음 시작하는 사람들도 쉽게 따라갈 수 있을 거 같네요. 좋은 강의 감사합니다:)
Reviews 6
∙
Average Rating 4.7
Reviews 65
∙
Average Rating 5.0
Reviews 3
∙
Average Rating 5.0
$26.40
Check out other courses by the instructor!
Explore other courses in the same field!