인프런 영문 브랜드 로고
인프런 영문 브랜드 로고
개발 · 프로그래밍

/

웹 개발

Vue js와 UI를 한번에 학습/Nuxt3 + OpenWeatherMap 으로 실시간 날씨 앱 제작

Nuxt UI, Nuxt SEO, Nuxt Server Api, Pinia, PWA, Firebase, Email Login, Google Login를 쉽게 배울수 있어요~~

11명 이 수강하고 있어요.

Vue.jsPWAFirebaseNuxt.jspinia

초급자를 위해 준비한
[웹 개발, 풀스택] 강의입니다.

이런 걸 배울 수 있어요

  • Vue 기반 웹 프레임워크 Nuxt 3 기초 학습

  • Nuxt 3 프로젝트 개발후 배포

  • Firebase Firestore v11

  • Nuxt 공식상태관리 라이브리 Pinia

  • vite-pwa/nuxt PWA(Progressive Web App)

  • Nuxt SEO(검색엔진최적화)

  • .env(API 키를 클라이언트에 노출되지 않도록 보호)

  • Login, Signup

  • tailwindcss

  • vue.js

  • Geolocation API

  • Pinia HMR

Nuxt3 + OpenWeatherMap으로 실시간 날씨 앱 제작 ?

(Vue.js와 UI를 한 번에 학습)🤔

일상생활에 꼭 필요한 기상정보를 제공하는 웹/앱을 프론트엔드 프레임워크 Vue js 기반 Nuxt 3을 기반으로 핵심적인 모듈과 컴포넌트를 학습하고, Pinia 상태 관리, API 데이터 처리, SSR을 적용하여 최적화된 웹 애플리케이션을 구축할 수 있습니다. Tailwind CSS로 반응형 UI를 디자인하고, Vercel을 통해 배포까지 진행합니다. 이 강좌를 통해 Vue.js 기반 Nuxt 3의 핵심 개념을 익히고, Pinia와 Firebase, PWA를 이용해서 실무에서 활용 가능한 프로젝트를 완성하세요!"

💡Nuxt 3 핵심기능 활용 강좌

  • Vue.js와 UI를 한번에 학습할수 있어요

  • Nuxt 3으로 날씨 앱 만들기: 초보자도 쉽게 따라 배울수 있어요



  • Nuxt 3의 주요 핵심 기능을 배워 활용할 수 있어요

  • 날씨 API 개발과 배포 까지 전체를 구성


이 강의의 특징

📌실전 프로젝트 중심 - Nuxt 3을 활용한 실용적인 날씨 앱을 직접 개발.

📌 API 연동학습 - OpenWeatherMap과 같은 날씨 API를 사용하여 실시간 데이터 활용.

📌 Firebase DB - 기상정보를 DB화 하여 기상정보 관리.

📌 초.중급자를 위한 강의입니다. 기초부터 차근차근 진행하며 실습위주 학습.

📌배포및 확장 가능 - 민든 앱을 실제 서비스로 배포하고, 추후 추가기능 확장 가능.

📌 Vue.js + UI + Nuxt + Tailwind CSS - 빠르고 효율적인 UI개발

💡핵심 특징과 차별점을 살펴 보면,

  • Nuxt 3 최신 기능 적용

  • Server Routes 활용: 백앤드 없이 Nuxt 3의 서버 기능을 사용하여 API호출 최적화

  • Pinia 상태관리: Vuex 없이 깔끔한 데이터 상태관리 적용

  • SSR(서버사이드 랜더링) & SEO 최적화 : Nuxt 3의 핵심기능 최대한 활용

  • PWA(Progressive Web App): 웹과 네이티브 앱의 장점을 결합한 웹앱으로 모바일기기에서 최적

  • Vercel 배포: 완성된 앱을 배포

이런 분들께 추천해요

💡이 강의가 필요할 수강생은 ?

  • 실시간 데이터 처리및 사용자 친화적인 UI개발을 경험하고 싶은 사람.

  • 포트폴리오 프로젝트가 필요한 사람.

  • 실무에서 사용할 수 있는 API연동 및 데이터 처리 기술을 배우고 싶은 사람.

  • SaaS 개발을 준비하는 사람.

  • 웹 서비스 배포 경험이 없는 개발자

  • CSS가 어려우신 분들은 미리 정의된 유틸리티 Class로 CSS작성 최소화

Vuejs는 알지만 Nuxt3을 처음 접하시는 분.

Vue js를 사용하시는 분이 Nuxt 3을 배우고 싶으신 분

실전프로젝트를 만들고 싶은분.
단순 이론을 뛰어넘어 실제 동작하는 날씨 앱을 실무 중심의 강좌

Pinia & PWA 궁금하신분.
Vuex를 사용하시다가 Pinia를 배우고 싶으신분, 웹앱을 배우고 싶은신 분

Vuex보다 강력하고 쉬운 Pinia

Vuex보다 간결하고 강력한Nuxt 3 공식 상태관리 라이브러리 임

SSR지원으로 서버 사이드에서도 최적화된 데이터 관리 가능

중복 코드를 최소화하여 직관적인 Store구성

단순히 강의를 듣고 끝나는 것이 아니라, 실제로 배포할수 있는 프로젝트를 완성

실제 프로젝트 경험을 쌓고 향후 API기반 다양한 프로젝트를 개발할 수 있는 기초를 학습

외부 API를 활용하여 실시간 날씨 데이터를 가져오고, 효율적으로 표시하는 방법을 배움

Open Weather Map, Dynamic Routes

외부 API에서 데이터를 가져와 활용하여 실전기술을 익힙니다.

Nuxt Dynamic Routes는 pages하위에 생성된 모든 컴포넌트에 라우터주소대신 컴포넌트 이름이 라우터 주소를 대신 합니다.

Nuxt 3 + Firebase Firestore 활용

NoSQL 기반 확장성 높은 클라우드 DB관리

서버 없이도 강력한 데이터 관리 가능

Pinia와 Firestore를 결합하여 효율적인 상태관리구현

Firebase Authentication으로 회원가입, 로그인

수강 전 참고 사항

실습 환경

  • 강의는 Windows 10 기준으로 설명합니다.

  • 강의에서는 Vscode, Node.js 22.

학습 자료

  • 자료실에서 관련 이미지및 배경 mp4자료를 받을 수 있습니다.

선수 지식 및 유의사항

  • javascript

  • Vue.js.

  • 기본 css 지식

💡강의 학습에 필요한 참고 사항

  1. 실습 환경

    • 운영 체제 및 버전(OS): Windows 10 이상

    • 사용 도구: Vscode,Github, Firebase, openWeatherMap등은 모두 무료이지만 일정사용량 이상이면 요금이 부과 됩니다. 하지만 무료 사용량에서 학습이 충분히 가능합니다.


    • PC 사양: CPU Intel i5 8세대 이상 또는 AMD Ryzen 5이상 RAM: 8GB이상, 인터넷연결

  2. 선수 지식 및 유의사항

    • HTML, CSS, JavaScript 기본 문법을 알고 있으면 학습이 더 쉬워요.

    • Vue.js를 간단히 경험해봤다면 Nuxt 3 학습이 어둑 수월합니다.

    • GihHub, Vercel, Google, openWeatherMap 계정

    • openWeatherMap 계정등록시 무료이지만 카드 등록이 필요합니다.

해당 템플릿은 '배달앱은 어떻게 내 주변의 맛집을 찾을까?' 강의를 참고하여 제공하고 있습니다.

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • Vue 기반 Nuxt의 핵심 기능을 단기간 배우고 싶은 분

  • 웹개발에 관심이 있는 분

  • DB가 어려운 분

  • PWA(Progressive Web App)을 배우고 싶은분

  • Vue.js에 관심있는 분

선수 지식,
필요할까요?

  • vue

  • javascript

안녕하세요
입니다.

안녕하십니까?

저는 드론맵핑 저자로서, 현재 드론을 이용하여 맵핑에 관심있는 분들에게 필요한 강좌를 개설하였습니다. 처음 드론맵핑을 하고 싶은분들은 무엇부터 시작해야 될지 모르는경우가 많습니다. 이 강좌는 그런 분들을 위하여 꼭 필요한 부분에 대하여 핵심적인 부분을 요약하여 담았습니다. 

또한, Nuxt 3를 활용한 웹 개발 강의를 진행하는 강사입니다. 이 강의에서는 Nuxt 3, Pinia, OpenWeatherMap API, Tailwind CSS를 활용하여 실전 프로젝트인 날씨 앱을 직접 만들어 봅니다. API 연동, 상태 관리, 반응형 UI 설계, 배포까지 배워 실무에서도 활용할 수 있는 기술을 익힐 수 있습니다. 쉽고 실용적인 강의로 Nuxt 3의 핵심을 함께 마스터해 보세요! 🚀

커리큘럼

전체

39개 ∙ (7시간 31분)

해당 강의에서 제공:

수업자료

  • 4. openWeatherMap Api key / Pinia 만들기

    06:34

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

수강평

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

임종태님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

누구나 쉽게 배울 수 있는 드론맵핑 전문가 과정강의 썸네일

누구나 쉽게 배울 수 있는 드론맵핑 전문가 과정

임종태

GIS 공간정보를 유용하게 활용할 수 있으며, 드론으로 촬영된 이미지를 이용하여 정사 지도를 만들 수 있습니다. 정사지도를 활용하여 수치지형도와 GIS 관련 주제도를 작성할 수 있습니다.

입문

입문

드론 개발, GIS, QGIS

비슷한 강의

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

핵심만 골라 배우는 Vue.js강의 썸네일

핵심만 골라 배우는 Vue.js

수코딩

프론트엔드 입문자들은 필수적으로 익혀야하는 Vue.JS!! 기초부터 시작해서 고급에 이르기까지 Vue.JS를 샅샅히 파헤쳐봅니다!

초급

초급

Vue.js, Vue 3, pinia

Vue3와 Supabase로 구인구직 사이트 만들기강의 썸네일

Vue3와 Supabase로 구인구직 사이트 만들기

Michael Kwon

나만의 풀스택 애플리케이션 개발에서 프로그래시브 웹앱(PWA)까지!

초급

초급

Vue.js, supabase, Vue 3

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React강의 썸네일

MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React

판다코딩

MERN Stack을 활용하여 커뮤니티 어플리케이션을 제작하고, 배포합니다. (MongoDB, Express, React, Node + Firebase)

초급

초급

MongoDB, Express, React

Vue 3 시작하기강의 썸네일

Vue 3 시작하기

장기효(캡틴판교)

Vue.js 최신 버전 Vue 3를 시작하는 분들을 위한 강좌입니다. Vue.js의 동작원리부터 실무 개발을 할 때 알아둬야 하는 기본 개념들을 배워보세요.

초급

초급

Vue.js, Vue 3, JavaScript

Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)강의 썸네일

Vue 3 & Firebase 10 커뮤니티 만들기 풀스택 - "활용편" (with Pinia, Quasar, Tiptap, VueUse)

짐코딩

Vue3 & Firebase(v10)를 활용하여 커뮤니티를 만드는 강의로 Vue3 실전 활용법, Firebase 기초부터 실전, 최신 웹 기술 활용법, 지식공유자 경험 공유 등 다양한 방면으로 개발자로써 한 단계 성장할 수 있도록 돕습니다!

중급이상

중급이상

Vue.js, Firebase, Quasar

iOS/Android 앱 개발을 위한 실전 React Native - Intermediate강의 썸네일

iOS/Android 앱 개발을 위한 실전 React Native - Intermediate

Wintho

React Native 기반 모바일 앱 개발을 위한 중급 강의입니다. 프론트엔드의 심화내용 학습 뿐만 아니라 Firebase 기반의 백엔드 내용까지 함께 배우면서, 서버 연동/ 로그인/ 데이터 송수신/ 공공API 활용 등이 가능한 하나의 완벽한 앱을 개발할 수 있도록 제작된 강의입니다.

중급이상

중급이상

React Native, Redux, Firebase

React + Firebase 풀스택 개발 - 파이어베이스 파이어스토어 Data Modeling강의 썸네일

React + Firebase 풀스택 개발 - 파이어베이스 파이어스토어 Data Modeling

브라이트코딩

이 강의를 통해 파이어베이스로 DB의 관계를 구현하는 방법을 배우시게 됩니다. 빠르게 리액트 풀스택 개발자가 될 수 있습니다. 고용이 불안정한 지금 이 시대에는 새로운 기술을 배워 자신의 가치를 올려야 합니다. 그리고 무언가를 만들어야 합니다. 그 사이드 프로젝트와 아이디어를 구현 할 때 데이터의 "관계"를 구현할 수 있어야 합니다. 이 강의는 파이어베이스 "파이어스토어"로 "관계"를 구현할 수 있도록 도와 드립니다.

초급

초급

Firebase, React, firestore

Flutter로 메신저앱 만들기강의 썸네일

Flutter로 메신저앱 만들기

DEV MOO

Flutter의 Riverpod 상태 관리와 Firebase를 활용해서 메신저 앱을 제작합니다.

초급

초급

Flutter, Firebase, riverpod

Flutter + Firebase로 넷플릭스 UI 클론 코딩하기 [무작정 플러터]강의 썸네일

Flutter + Firebase로 넷플릭스 UI 클론 코딩하기 [무작정 플러터]

권태뽕

본 강의는 Flutter와 Firebase로 넷플릭스 UI를 클론 코딩하는 강의입니다! 가장 빠르게 앱 개발을 공부할 수 있는 Flutter를 시작하세요:)

초급

초급

Flutter, 클론코딩, Firebase

카카오,구글 SNS 로그인(springboot3, vue3)강의 썸네일

카카오,구글 SNS 로그인(springboot3, vue3)

bradkim

springboot를 활용하여 카카오, 구글로그인을 구현합니다. jwt토큰 기반 로그인이 구현됩니다. vue3를 통해 간단한 화면을 구성합니다.

초급

초급

OAuth, oauth2, JWT

호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)강의 썸네일

호돌맨의 요절복통 개발쇼 (SpringBoot, Vue.JS, AWS)

호돌맨

단순히 애플리케이션 하나를 만드는데 끝나지 않습니다. Spring Boot를 활용한 백엔드부터 Vue.js 모던 프론트엔드 스택을 연동한 서비스 완성 A-Z를 보여드립니다.

중급이상

중급이상

Spring Boot, JPA, AWS

[2021] 요즘 누가 유료로 웹서비스 구축하나, 파이어베이스의 모든 것 - Javascript강의 썸네일

[2021] 요즘 누가 유료로 웹서비스 구축하나, 파이어베이스의 모든 것 - Javascript

David

2021년 새롭게 돌아온, "요즘 누가 유료로 웹서비스 구축하나, Firebase의 모든 것 - JavaScript" 강의! 1인 창업을 꿈꾸는 초급 개발자를 위한 바이블이 되어드립니다.

초급

초급

Firebase