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

/

풀스택

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

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

(5.0) 수강평 1개

수강생 23명

Vue.jssupabaseVue 3PWA
Thumbnail

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

이런 걸 배울 수 있어요

  • Vue3의 핵심 기본 문법과 Composition API 다루기

  • Vue Router로 페이지 라우팅 하기

  • 재사용 가능한 코드를 모듈화 패턴으로 작성하기

  • Supabase를 활용한 데이터베이스 및 인증 시스템 구축하기

  • 데이터베이스 API 호출 및 비동기 처리하기

  • PWA(프로그래시브 웹앱) 빌드하기

vue3-supabase-banner

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

Vue.js와 Supabase를 활용하여 직접 구인구직 웹사이트를 만들 수 있다면 얼마나 멋질까요?


Vue3와 Supabase의 완벽 통합

우리가 만들게 될 구인구직 사이트는 사용자 등록, 구인 공고 작성 및 관리 등의 핵심 기능을 포함하며, 이를 통해 웹 애플리케이션 개발의 기본 구조부터 백엔드와의 연동, 데이터베이스, Storage 관리까지 전체적인 과정을 경험할 수 있습니다.

Vue3로 프론트엔드를 구축하고, Supabase를 통해 인증, 데이터베이스 처리, 파일 업로드 등 다양한 기능을 직접 구현합니다. 이 과정을 통해 실무에서 흔히 사용되는 웹 애플리케이션 개발 기술들을 학습할 수 있을 것입니다.


프로그래시브 웹앱(PWA) 빌드

웹사이트를 오프라인에서도 사용할 수 있도록 하여 앱과 같은 사용자 경험을 제공하는 PWA를 빌드하고 배포하는 방법을 다룹니다.


초보자를 위한 Vue3 기초 강의 제공

Vue가 낮설다고요? 걱정하지 마세요. 이해하기 쉽고 핵심만 정리한 기초 강좌도 제공됩니다.


본 강좌는 초보자와 중급자 모두를 위해 구성되어 있으며, 각 섹션마다 실습을 통해 개념을 확실히 익힐 수 있도록 돕습니다!

프론트엔드와 백엔드를 손쉽게, 목표한 개발에만 집중 가능!

shot2

Vue3로 프론트엔드를 구축하고 Supabase API와 여러 서비스 기능들을 통합합니다.

shot3

Supabase로 사용자 인증, 테이블 생성 및 Storage에 파일을 저장하고 관리할 수 있습니다.

  • Vue 3와 Supabase 활용: 프론트엔드와 백엔드를 통합해 사용자 인증, 데이터베이스 관리, 파일 저장 등 실용적인 풀스택 앱을 쉽게 구축할 수 있습니다.


  • PWA 구축과 배포: 오프라인에서도 작동하며 설치 가능한 웹 앱을 만들고 배포하는 과정을 이해하고 실습할 수 있습니다

학습 내용

shot1

설계를 바탕으로 한 체계적인 구현 과정

막연히 따라하는 것이 아닌 무엇을 목표로 하고 어떻게 만들어야 하는지에 대해 설명합니다.

Vue3 Composition API

Composition API는 Vue를 좀더 생산성 있게 개발할 수 있게 도와줍니다. 「Vue3 기초 다지기」로 Vue에 익숙하지 않은 초보자 뿐만 아니라 기존 경험자들도 맥락을 파악하실 수 있게 도와드립니다.

playground
시각자료 1

풍부한 시각 자료 제공

본 강의에는 핵심 개념과 동작 원리를 한눈에 파악할 수 있도록 다양한 시각 자료가 포함되어 있습니다. 이를 통해 복잡한 개념도 쉽게 이해할 수 있도록 직관적인 설명과 시각적 예시가 조화롭게 제공됩니다.

따라하다 보면 이해와 공감이 되는 네러티브 구성

흔한 오류도 경험해보며 자연스럽게 이해할 수 있는 강의 구성으로, 실습을 통해 개념을 손쉽게 익힐 수 있습니다. 단계별로 친절히 설명하여 목표에 도달할 수 있도록 돕습니다.

개발중 화면
app icons

PWA를 쉽게 만들고 배포

Vue로 간편하게 PWA를 제작하고 배포하는 방법을 다룹니다. 이 강의에서는 기본 설정부터 배포 과정까지 단계별로 설명하여 초보자도 쉽게 따라 할 수 있으며, 실제로 바로 적용 가능한 실습을 통해 PWA의 핵심 개념을 효과적으로 이해할 수 있습니다.

수강 전 참고 사항

실습 환경

  • 운영 체제 및 버전(OS): Windows 10 이상, macOS 11(Big Sur) 이상 권장, iOS 11 이상, Android 6 이상

  • 브라우저: Edge, Chrome 등 크로미엄 호환 브라우저, Safari(Mac OS Big Sur 이상)

  • 사용 도구: Visual Studio Code, Node.js(최신 LTS 버전 권장)

  • PC 사양: 메모리 8GB 이상

학습 자료

  • Github 및 주요 단원에서 보충 자료 제공


이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • Vue로 나만의 그럴 싸한 프로젝트를 만들고 싶은 분

  • 기초 강좌를 들었지만 아직은 서비스 개발이 낯선 개발자, 퍼블리셔, 디자이너

  • 백엔드에 대한 이해와 풀스택 실무 프로젝트를 다뤄보고 싶은 분

  • 취업용 포트폴리오를 준비하는 개발자 지망생

  • 나의 웹을 PWA로 만들어 보고 싶은 분

선수 지식,
필요할까요?

  • HTML, CSS, JavaScript 기초

안녕하세요
Michael Kwon입니다.

140

명

수강생

11

개

수강평

10

개

답변

5.0

점

강의 평점

4

개

강의

스타트업에서 멀티미디어 콘텐츠 크리에이터로 입문하여 한 분야에만 머물지 않고 게임과 웹, 멀티미디어 분야에서 기획과 개발을 주도하며 현업에서 다양한 상용 작품을 런칭했습니다. 대학에서 디지털 미디어와 영상학을 전공했으며 주요 교육기관에서 웹 디자인과 프론트엔드 개발 및 미디어 교육(10년 이상) 등을 진행하면서 튜토리얼도 제작하고 있습니다.

- 저서 -

자바스크립트 프로젝트북(한빛미디어,2017)

더보기

커리큘럼

전체

63개 ∙ (7시간 0분)

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

수강평

전체

1개

5.0

1개의 수강평

  • leejh님의 프로필 이미지
    leejh

    수강평 2

    ∙

    평균 평점 5.0

    5

    60% 수강 후 작성

    실용적이고 실무에 많은 도움이 됩니다. 좋은 딕션에 이해하기 쉽게 알려주셔서 정말 감사합니다!

    • Michael Kwon
      지식공유자

      소중한 의견 감사드립니다~

Michael Kwon님의 다른 강의

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

Figma 디자인부터 퍼블리싱까지강의 썸네일

Figma 디자인부터 퍼블리싱까지

Michael Kwon

디자이너와 개발자를 위한 올인원 강좌! 새로운 UI3 반영

초급

초급

Figma, HTML/CSS

바닐라 자바스크립트 & Tailwind CSS강의 썸네일

바닐라 자바스크립트 & Tailwind CSS

Michael Kwon

AI 활용과 컴포넌트 중심 UI 제작으로 배우는 실무형 웹 UI 개발, 디자이너+개발자 필수 코스!

초급

초급

JavaScript, vanilla-javascript, frontend

프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)강의 썸네일

프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)

Michael Kwon

체계적인 단계의 프로젝트 실습과 배포, 빌트인 store 활용, SvelteKit와 Supabase로 풀스택 애플리케이션까지 한방에!

초급

초급

Svelte, sveltekit, supabase

비슷한 강의

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

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

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

임종태

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

초급

초급

Vue.js, PWA, Firebase

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

[풀스택 입문] Firebase보다 10배 좋은 Supabase강의 썸네일

[풀스택 입문] Firebase보다 10배 좋은 Supabase

로펀

풀스택 개발에 날개를 달아줄 Supabase! Firebase의 상위호환인 Supabase로 풀스택 개발을 2시간만에 완성합니다.

초급

초급

PostgreSQL, Next.js, TailwindCSS

[웹 개발 풀스택 코스] Vue.js 프로젝트 투입 일주일 전 - 기초에서 실무까지강의 썸네일

[웹 개발 풀스택 코스] Vue.js 프로젝트 투입 일주일 전 - 기초에서 실무까지

개발자의 품격

본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈의 프론트엔드 부분에 대한 강의입니다. 이 강의는 강사의 저서 <Vue.js 프로젝트 투입 일주일 전>의 내용을 바탕으로 만들어진 강의입니다.

초급

초급

Vue.js

Vue로 Nodebird SNS 만들기강의 썸네일

Vue로 Nodebird SNS 만들기

제로초(조현영)

Vue와 Nuxt 프레임워크를 사용해 SNS 서비스를 만듭니다. 서비스에 필요한 풀스택 지식을 학습합니다.

중급이상

중급이상

Vue.js, Node.js, AWS

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

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

David

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

초급

초급

Firebase, Vue.js, PWA

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

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

bradkim

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

초급

초급

OAuth, oauth2, JWT

기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]강의 썸네일

기획자님 이 정도 웹 개발은 배워보면 어떨까요? [이론+실습]

개복치개발자

바쁜 기획자 분들을 위한 빠르게 진행되는 개발 강의입니다. 군더더기 없는 설명으로 웹 프론트엔드, 백엔드, DB를 직접 개발해보며 전체적인 개발 프로세스를 알아볼 수 있습니다.

입문

입문

HTML/CSS, JavaScript, Vue.js

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

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

호돌맨

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

중급이상

중급이상

Spring Boot, JPA, AWS

₩49,500