채널톡 아이콘

실전 React 포트폴리오 완성 – 공공 API + 지도 서비스 만들기 (배포까지)

이런 고민, 해보신 적 있나요? React는 배웠는데 막상 무엇을 만들어야 할지 모르겠다 포트폴리오를 만들고 싶은데 Todo 앱 말고는 떠오르지 않는다 지도 API나 공공 API는 어려워 보여서 시도조차 못 해봤다 배포까지 해본 적이 없어 항상 “로컬 프로젝트”로만 끝난다 코드가 점점 복잡해지는데 설계를 어떻게 해야 할지 모르겠다 🎯 이 강의가 해결해 주는 문제 이 강의는 단순히 지도를 띄우는 법을 알려주는 강의가 아닙니다. ✔ 공공 API를 실제 서비스에 연결하는 방법 ✔ 지도 SDK를 React 구조 안에서 안정적으로 설계하는 방법 ✔ 마커 최적화와 인포윈도우 재사용 구조 ✔ Context를 활용한 상태 관리 설계 ✔ Tailwind + SCSS 실전 활용 ✔ GitHub 정리 및 Vercel 배포까지 “기능 구현”이 아니라 실제 서비스 구조로 설계하는 방법을 알려드립니다. 💡 단순 따라치기 강의가 아닙니다 왜 useRef를 쓰는지 왜 마커를 매번 새로 만들면 안 되는지 왜 상태를 분리해야 하는지 왜 배포 환경에서는 환경변수를 따로 관리해야 하는지 모든 선택에는 이유가 있습니다. 이 강의는 그 “이유”를 설명합니다. 🚀 수강 후 여러분은 이렇게 됩니다 지도 기반 포트폴리오 프로젝트 1개 완성 공공 API 연동 경험 확보 외부 SDK를 React에 붙이는 구조 이해 실무형 프로젝트 구조 설계 경험 배포 경험 보유 그리고 면접에서 이렇게 말할 수 있습니다. “공공 API 기반 지도 서비스를 직접 설계하고 배포해봤습니다.” 이 한 문장이 큰 차이를 만듭니다. 👩‍💻 이런 분들께 추천합니다 React 기본 문법은 알고 있지만 프로젝트 경험이 부족한 분 취업용 포트폴리오를 만들고 싶은 분 지도/공공 API 프로젝트를 해보고 싶었던 분 실무에 가까운 설계를 배우고 싶은 분 🔥 이 강의의 목표 이 강의는 “지도 만드는 법”이 아니라“서비스를 설계하는 사고방식”을 배우는 강의입니다.

10명 이 수강하고 있어요.

난이도 초급

수강기한 무제한

react
react
react공공api연동지도
react공공api연동지도
tailwindcss
tailwindcss
github
github
react
react
react공공api연동지도
react공공api연동지도
tailwindcss
tailwindcss
github
github

수강 후 이런걸 얻을 수 있어요

  • 실전 포트폴리오 프로젝트 1개 완성

  • 외부 API & 지도 SDK를 React에 안정적으로 연동하는 설계 능력

  • 실무형 프로젝트 구조 설계 경험

  • GitHub 정리 및 Vercel 배포 경험

  • 서비스 관점에서 생각하는 개발 사고방식

실무처럼 설계하는 React 프로젝트, 지도 서비스로 완성하세요.

React 문법은 익혔지만, 막상 “서비스처럼 보이는 프로젝트”를 만들어본 적이 없으신가요?

이 강의는 단순 기능 구현이 아닌,공공 API와 지도 API를 활용해 실제 서비스 수준의 프로젝트를 완성하는 과정입니다.

마커 중복 생성 문제, 상태관리 충돌, SDK 연동 이슈,배포 환경에서의 환경변수 설정까지 —
실제로 겪었던 시행착오를 바탕으로 안정적인 설계 구조를 알려드립니다.

단순히 따라 만드는 것이 아니라,왜 이렇게 설계해야 하는지 이해하며
“코드를 아는 사람”에서 “프로젝트를 완성할 수 있는 사람”으로 성장하게 됩니다.

  • 공공 API + 지도 API 실전 연동 경험

  • Context 기반 상태관리 설계

  • 성능 최적화(useMemo, useRef 활용)

  • GitHub 정리 및 Vercel 배포까지 완성

  • 면접에서 설명 가능한 포트폴리오 확보

강의를 듣고 나면 이런 결과물을 만들 수 있어요

공공 API 검색 기능

지역의 공공 API를 검색할수 있습니다.

즐겨찾기 기능

즐겨찾기 기능을 통해 공공 API를 저장할 수 있습니다.

지도 랜더링 마커 표시

검색한 지도의 위치로 이동 마커로 표시할 수 있습니다.

  • 외부 API와 지도 SDK를 React 구조 안에서 안정적으로 설계하는 방법을 이해하게 됩니다.

  • 단순 기능 구현이 아니라, 상태관리(Context)와 컴포넌트 분리를 통해 유지보수 가능한 구조를 설계할 수 있게 됩니다.

  • useRef, useMemo 등을 활용해 불필요한 리렌더링과 성능 문제를 제어할 수 있게 됩니다.

  • 공공 API 데이터를 실제 서비스 형태로 가공하고 화면에 자연스럽게 연결할 수 있게 됩니다.

  • GitHub 정리부터 Vercel 배포까지, 프로젝트를 “완성”하는 경험을 갖게 됩니다.

학습 내용

  • 강의에서 무엇을 배우게 되는지 알려주세요. 섹션마다 어떤 내용을 배우는지 설명해주면 좋습니다.

  • 섹션별로 배우는 내용에 대한 예시 이미지가 있다면, 훨씬 더 매력적인 강의 소개를 만들 수 있어요.


섹션 (1) 프로젝트 소개 기본 설정하기

  • 프로젝트 개요

  • node / git 설치하기

  • github repository 만들기

  • local에서 인스톨 진행하기

  • react dev tools 설치하기

  • Github 작업 흐름

섹션 (2) 공공 API 데이터 처리 흐름 이해

  • tailwind 기본개념 및 세팅


  • browser router 세팅하기

  • 기본골격 만들기

  • git 신규 브랜치 작업물 업로드하기

섹션 (3) 데이터 처리 및 화면 출력

  • 공공데이터 이해와 WiFi 데이터 활용

  • 데이터 리스트로 뿌려주기

  • 카카오개발자 세팅

  • 커스텀 훅 만들어 지도로드 하기

섹션 (4) 리스트 ↔ 지도 연동 기능 구현

  • 선택된 장소 유지 & 지도 데이터 처리

  • 지도 선택 동기화

  • 지도 화면 연동 이해하기

섹션 (5) 즐겨찾기 기능 & 상태 관리

  • 즐겨찾기 관리 커스텀 훅

  • 전역 즐겨찾기 상태 관리

  • 라우팅 및 전역 상태 연결

  • 즐겨찾기 적용하기

섹션 (6) 앱 배포하기

  • Vercel rewrites 설정

  • GitHub Pull Request

  • Vercel 사이트 가입 및 연동

  • 카카오 개발자 도메인 추가

수강 전 참고 사항

  • 이 강의는 React 기본 문법을 이해하고 있다는 전제로 진행됩니다.

  • HTML, CSS, JavaScript 기초 및 useState / useEffect 사용 경험이 필요합니다.

  • 카카오 지도 API와 공공 API를 활용하므로, 개발자 센터 가입 및 인증키 발급 과정을 직접 진행하게 됩니다.

실습 환경

  • Windows 10 이상

  • macOS (최신 버전 권장)

  • Linux 환경에서도 가능

학습 자료

  • 노션 학습자료

  • github 소스코드 


선수 지식 및 유의사항

  • React 기본 문법 (컴포넌트, props, state)

  • useState, useEffect 사용 경험

  • 기본 JavaScript (ES6) 문법 이해

  • 간단한 CSS 이해

이 강의는 React 완전 입문 강의가 아닌, 기초를 알고 있는 분들을 위한 실전 프로젝트 강의입니다.


이런 분들께
추천드려요

학습 대상은
누구일까요?

  • React 문법은 배웠지만, 제대로 된 포트폴리오 프로젝트가 없는 분

  • 공공 API나 지도 API를 활용한 프로젝트를 해보고 싶었던 분

  • 취업 준비 중이며, 차별화된 포트폴리오가 필요한 분

  • 실무에 가까운 프로젝트 설계 경험을 쌓고 싶은 분

선수 지식,
필요할까요?

  • 이 강의는 React 기초 문법을 알고 있다는 전제로 진행됩니다.

  • 기본적인 JavaScript 문법 (ES6)

  • 간단한 CSS 이해

안녕하세요
LIZ.B입니다.

342

수강생

15

수강평

92

답변

4.9

강의 평점

3

강의

프론트엔드부터 백엔드까지 실무 중심의 수업을 진행하고 있으며, 오랜 강의 경험을 바탕으로, 실무 중심의 웹 개발을 가르치는 강사입니다.

강의 게시일: 
마지막 업데이트일: 

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!

얼리버드 할인 중

₩11,550

70%

₩38,500