프로그래머스 데브코스 59일차 with. TS 웹 풀스택

📚요약

지난 시간에 이어 프로젝트를 진행하겠습니다. 드래그 앤 드롭 기능을 추가하고 Firebase를 활용해 로그인 & 로그아웃 기능을 추가해 마무리하겠습니다. 최종적으로 firebase의 hosting을 이용해 배포까지 해보겠습니다.

 

📖리액트 - 업무 관리 프로젝트

📄드래그 앤 드롭 기능 추가

react-beautiful-dnd 라이브러리를 사용해 화면에서 일을 자유롭게 이동시키는 기능을 추가했습니다.

라이브러리 사용 사전 연습을 위한 코드는 Github에 있습니다.

ProgrammersSchool/FE-REACT/drag-drop at main · nulzi/ProgrammersSchool

 

📄Firebase 연동

Firebase의 사이트로 가서 새로운 프로젝트를 만들어야 합니다.

Firebase | Google's Mobile and Web App Development Platform

프로젝트를 추가하면 간단한 사용방법을 코드와 함께 알려줍니다.

 

📑로그인 & 로그아웃

이번 프로젝트에서는 Google 계정을 통해 로그인을 해보겠습니다. 이를 위해서 사전에 준비가 필요합니다. Firebase에서 프로젝트를 생성하면 Authentication을 설정할 수 있는 탭이 있습니다. 해당 탭으로 들어가면 다양한 로그인 방법을 고를 수 있는데 Google을 선택하고 넘어가겠습니다.

 

코드로 돌아와서 firebase 라이브러리를 활용하면 로그인은 signInWithPopup() 함수로 로그아웃은 signOut() 함수로 구현할 수 있습니다.

 

자세한 코드는 Github에 있습니다.

ProgrammersSchool/FE-TASK-MANAGER at main · nulzi/ProgrammersSchool

 

📑배포 with github actions

$npm i -g firebase-tools // 전역으로 firebase-tools를 설치
$firebase login // firebase에 로그인

 

Firebase 로그인 성공 화면

$firebase init // firebase 설정

Github 로그인 성공 화면

다양한 설정이 있고 원하는 기능을 찾아서 설정하면 됩니다. 자세한 내용은 Firebase 공식 홈페이지를 참고하면 됩니다.

 

❔▪❓

Q. main 브랜치에 한 개의 프로젝트가 아닌 여러 프로젝트가 폴더로 있는 경우에 그대로 진행해도 문제가 없는가?

A. github actions가 동작하지 않는다.

q. 그렇다면 브랜치로 원하는 프로젝트를 빼서 동작하는 것은 가능한가?

a. 

 

다음 시간에 계속...

 

출처 & 참고

John Ahn 강사님의 강의