채널톡 아이콘
개발 · 프로그래밍

/

풀스택

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

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

(5.0) 수강평 1개

수강생 21명

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입니다.

113

명

수강생

9

개

수강평

10

개

답변

5.0

점

강의 평점

3

개

강의

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

- 저서 -

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

더보기

커리큘럼

전체

63개 ∙ (7시간 0분)

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

수강평

전체

1개

5.0

1개의 수강평

Michael Kwon님의 다른 강의

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

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

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

Michael Kwon

₩49,500

초급 / Svelte, sveltekit, supabase

5.0

(7)

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

초급

초급

Svelte, sveltekit, supabase

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

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

Michael Kwon

₩66,000

초급 / Figma, HTML/CSS

5.0

(1)

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

초급

초급

Figma, HTML/CSS

₩49,500