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

Vue 공식 홈페이지에서 제공하는 Playground에서 간편하게 코드 연습을 할 수 있습니다.

데이터를 화면에 표시하는 방법에 대해 학습합니다.

일반변수와 상태변수의 차이에 대해 알아보고 데이터 값이 변경되었을 때 화면에 동시에 업데이트 하는 상태변수 ref 대해 다룹니다.

Vue template 영역에서 v-for로 데이터를 표시하는 방법과 v-if로 조건부로 콘텐츠를 표시하는 방법에 대해 다룹니다.

반복적으로 사용되는 코드 영역을 컴포넌트로 만들어 재활용 할 수 있으며 props를 통해 부모와 자식 컴포넌트 간에 데이터를 전달할 수 있습니다.

버튼 등을 클릭했을 때 사용자와 상호작용 하는 기능을 처리하기 위한 이벤트 기능에 대해 다룹니다.

컴포넌트가 시작되거나 종료되는 시점에서 필요한 로직을 수행할 수 있는 라이프사이클 훅에 대해 다룹니다.

구인 구직 사이트에 대한 디자인 시안 및 프로토타입을 통해 우리가 개발하게 될 서비스를 검토하고 이해할 수 있습니다.

효과적인 학습을 위한 약간의 잔소리

• Vite 개발도구를 통해 Vue 프로젝트를 생성하고 프로젝트를 초기화 합니다.

• 스타일을 효과적으로 작성하기 위한 SASS 모듈을 추가하고 기본 스타일을 설정합니다.

깃허브로 공유된 프로젝트 소스를 활용하는 법에 대해 소개합니다.

서비스 구조를 파악하고 각 페이지에 해당하는 컴포넌트들을 추가합니다.

라우터 모듈을 추가하여 url을 입력하면 페이지에 해당하는 개별 컴퍼넌트들을 연결할 수 있도록 합니다.

로그인 페이지에서 아이디와 비밀번호를 입력하여 로그인 버튼 클릭 시 ref 변수에 저장하게 하고 화면 디자인을 추가합니다.

공통 UI 영역인 네비게이션(NavBar) 컴포넌트를 추가하고 제목과 아이콘을 추가합니다. 아이콘은 아이콘 라이브러리를 설치하여 사용합니다.

router에서 페이지 이동시 경로가 변경되는 것을 감지하여 현재 접속된 경로(url)를 확인할 수 있도록 합니다.

현재 접속된 경로(url)를 확인하여 각 페이지별로 Navbar에 표시되는 제목과 기능 아이콘의 표시를 다르게 하는 기능을 추가합니다.

• 회원가입에 필요한 폼 입력 항목들을 추가합니다.

• 로그인, 회원가입, 프로필 등에서 공통되는 디자인은 전역 스타일로 제작합니다

• 폼에 입력된 내용을 상태변수(ref)에 저장하고 가입하기 버튼을 통해 입력값을 출력해 봅니다.

오픈 소스 백엔드 서비스인 supabase에 회원가입을 하고 프로젝트를 생성한 뒤에 vue에서 supabase 모듈을 설치하여 클라이언트와 서비스를 연동합니다.

supabase 라이브러리를 이용하여 회원가입 기능을 구현합니다.

auth(인증서버)의 사용자 정보와 별도로 타 사용자에게 공개할 수 있는 유저 프로필 테이블을 추가합니다. 이를 위해 관계형 테이블에 대한 개념과 supabase에서 테이블을 생성할 때 외래키(Foreign keys)를 참조하는 방법에 대해 다룹니다.

회원가입에서 기존의 입력 필드에 더하여 주소와 이름(닉네임)을 추가하는 과제에 대한 해설입니다.

회원가입 중 화면을 잠그고 서버에서 처리가 끝날때 까지 대기 후 로그인 화면으로 이동하도록 처리합니다.

회원가입 기능을 구현했으니 로그인 페이지에서 로그인 하는 기능을 추가합니다.

사용자 로그인을 확인하고 구인들록, 구인정보 상세보기, 프로필 등의 페이지 들에는 로그인한 사용자만 접근 가능하도록 권한을 부여합니다.

로그인 된 상태 확인 후 프로필 화면이 보여지도록 합니다. 조건부 콘텐츠 표시 기능을 이용합니다.

프로필 창에서 로그아웃 버튼을 클릭하면 로그인을 시키는 기능을 구현합니다.

프로필 페이지에서 현재 접속한 사용자의 프로필 정보를 데이터베이스에서 찾아 보여줍니다. DB에서 데이터를 가져오고 특정 조건에 맞는 자료를 찾는 방법을 다룹니다.

구인등록 페이지에 입력할 폼을 추가하고 디자인 합니다.

프로필 페이지와 동일하게 구인등록 페이지에서도 로그인한 회원만 접근 가능하도록 합니다.

사용자 인증을 하는 로직을 여러 컴포넌트들에서 재사용이 가능하도록 모듈로 분리합니다.

사용자가 업로드할 이미지 파일을 추가하면 미리보기 영역에 이미지를 표시하도록 합니다.

구인등록 글을 저장할 테이블을 데이터베이스에 추가합니다.

구인등록 폼 전송시 데이터베이스에 데이터를 추가하는 로직을 작성합니다.

데이터베이스에 저장한 구인 글들을 글목록 페이지(/job-list)에 표시합니다.

supabase의 order()메소드를 통해 최신글 순(내림차순)으로 글목록을 정렬합니다.

사용자가 글목록에서 특정 글을 클릭시 상세페이지로 이동합니다. router의 url parameter를 이용해서 글번호(id) 값을 전달합니다.

글목록 클릭을 통해 글번호(id)를 url 파라미터로 상세페이지에 전달하면 해당 글만 데이터베이스에서 가져와 상세정보를 표시합니다.

라우팅 할 때 페이지의 경로가 URL parameter로 인해 조건이 변경되어 Navbar 정보가 제대로 표시되지 않는 문제를 해결합니다. 문자열을 비교하는 다양한 조건에 대해 이해할 수 있습니다.

상세보기 페이지에서 로그인 한 사용자만 접근할 수 있도록 권한 설정을 합니다.

'상세보기'에서 자신의 글인 경우에 수정, 삭제가 버튼이 표시되도록 합니다.

구인등록 글 수정 페이지를 추가하고 라우터 경로를 추가합니다.

• '상세보기' 페이지의 '수정' 버튼에 '구인등록 수정' 페이지를 연결합니다. 

• '구인등록 수정' 페이지에서 가져온 글을 수정하여 데이터베이스에 저장할 수 있는 기능을 추가합니다.

상세보기 페이지에서 '삭제' 버튼을 클릭하면 해당 게시물을 삭제하는 기능을 추가합니다.

구직자가 볼수 있는 '전화걸기'와 '지원하기' 기능에 대해 알아보고 먼저 '전화문의' 기능을 구현합니다.

지원자가 구인 글에 ‘지원하기’를 클릭하면 '구인등록 테이블'에 저장이 되어 구직자와 구인자가 모두 참조 가능하도록 합니다.

구직자가 같은 글에 중복지원하지 않도록 판단하는 기능을 추가하고 이미 지원한 글에는 '지원하기' 버튼을 '지원완료'로 표시합니다.

프로필 페이지에서 구직자, 구인등록자가 각각 지원내역을 확인할 수 있도록 합니다.

Supabase에 이미지 파일들을 저장할 Storage를 추가합니다.

글 작성시 업로드한 이미지를 서버에 저장하는 기능을 구현합니다.

'구인 등록 수정' 페이지에도 '구인등록' 페이지와 동일하게 이미지 업로드 기능을 추가합니다.

수정하기에서 이미지를 새로 추가(변경)하는 경우 기존 이미지는 Storage에서 삭제해 주어야 합니다. 이 작업은 이미지가 새로 업로드 될 때 중복 파일을 피하고, 스토리지 용량을 관리하는 데 유용합니다.

글 삭제시 첨부된 이미지가 있는 경우 Storage에 저장된  이미지를 제거해 줍니다.

'글목록'과 '상세보기' 페이지에서 이미지가 ‘미첨부’된 글들은 이미지를 보여주지 않도록 조건부 콘텐츠로 수정합니다.

대표적인 클라우드 배포 서비스인 Vercel을 통해 프로젝트를 쉽게 배포합니다.