개발모임 26~28 몰아쓰기) React Calendar 제작기

2달 분량의 내용을 몰아 쓰기때문에 내용이 길수 있다. 최대한 보기 쉽게 노력했음을 알아달라.

 

 

결과물 : https://react-calendar-ddcd7.web.app/

 

먼저 React란? 웹 프레임워크로, 자바스크립트 라이브러리의 하나이며,

페이스북(meta)과 개별 개발자 및 기업들 공동체에 의해 유지보수된다.

 

어머니의 숙박관련 업무를 돕기위해 만들었던 스프레드 시트가 사용이 불편해, 홈페이지로 제작하게 되었다.

 

사용중이던 스프레드 시트이다. 한눈에 보기에는 용이하지만 입력 부분에는 불편함이 따른다.

 

 

그래서 노마드 코드의 무료강의로 배운 React를 사용해 홈페이지화 시키고 싶다는 생각이 들었다.

 

 

구현목표

보기도 쉽고, 입력도 편리한 달력 형태공유가 가능하고 데이터 실시간으로 넘어감모바일 환경에서도 편안하게 사용가능

 

계획

직접 달력을 만들기 보다는 잘 만들어진 컴포넌트 가져오기.Firebase ReatimeDB를 사용해 실시간으로 데이터 공유하자.깔끔한 UI를 위해 Boot Strap사용, 최대한 버튼관련 인풋으로 만들자.

 

---

React Calendar

https://www.npmjs.com/package/react-calendar

react-calendar

 

 

---

 

 

Firebase

 

설정하기 위해서 파이어베이스 프로젝트를 추가해 주자.

https://firebase.google.com/

 

추가후, React 프로젝트에 npm install firebase 해주자.

 

프로젝트를 생성해 ID를 얻어오거나 기타 필요한 것들은 인터넷에 따로 검색해서 알아보자.

나는 여기를 참조했다.

https://kth990303.tistory.com/143

 

파이어 베이스를 사용하기 위해서는 아래 Config를 완료해 줘야 한다.

사용할 Firebase 기능을 임포팅 해주고, 필요에 따라 export 해준다.

나는 realtimeDB, auth를 사용했다. (database에서 realtime으로 갈아탓다.)

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
import { getDatabase } from "firebase/database";


//import 'firebaseInstance/storage'

const firebaseConfig = {
    apiKey: "AIzaSyB7fm_lVTe8nIQOa8h5S2h4xoMM07Xk3Zg",
    authDomain: "react-calendar-ddcd7.firebaseapp.com",
    databaseURL: "https://react-calendar-ddcd7-default-rtdb.firebaseio.com",
    projectId: "react-calendar-ddcd7",
    storageBucket: "react-calendar-ddcd7.appspot.com",
    messagingSenderId: "148971161305",
    appId: "1:148971161305:web:85698a9551fe92a4aa20c8",
    measurementId: "G-2D2Y0RCBL8"
};



const app = initializeApp(firebaseConfig);

export const getApp = app;
export const authService = getAuth(app);
export const dbService = getFirestore();
export const realtimeDB = getDatabase();

 

 

Firebase Auth

Firebase Auth 기능을 이용하여 로그인을 제작하였다.

Email인증도 설정하긴 했지만 구글만 사용한다.

 

메인 함수는 signWithPopup이다.

팝업을 열어주기 위해서는 Auth Setting에서 메인 주소를 도메인 승인을 해줘야 한다.

내부 테스트를 위해 내부IP주소도 추가해 두었다.

import {
    createUserWithEmailAndPassword,
    getRedirectResult,
    GithubAuthProvider,
    GoogleAuthProvider,
    signInWithEmailAndPassword,
    signInWithRedirect,
    signInWithPopup,
    signOut,
    signInWithCredential//소셜 로그인 //apple twitter ....
    
  } from "firebase/auth";
  import { authService } from "./firebase_config";

  //앞서 생성한 config파일과 Firebase/auth로 부터 함수들을 import
  



  export function loginWithSocialPopup(provider) 
  {
    if (provider === "google") {
      const provider = new GoogleAuthProvider();
      return signInWithPopup(authService, provider);
    }
  }

  //Logout 하는 함수
  export async function logout() {
    await signOut(authService);
    return;
  }

 

Firebase RealtimeDB

실시간 데이터 베이스 이다.

import {
    push,
    ref,
    limitToLast,
    onValue,
    orderByChild,
    query,
    remove,
    get,
    set,
    child,
    update,
  } from "@firebase/database";
import { arrayUnion } from 'firebase/firestore';
import { async } from '@firebase/util';


//유저의 정보 불러오기
export async function GetUser(userID)
{
    const path = "/users/" + userID;

    let res = null;
    
    await get(ref(realtimeDB, path)).then(got => {res = got.val();});

    if(res === null){
        set(ref(realtimeDB, path),
        {
            "Rooms" :"",
            "AuthSafe" : false,
        });

        return null;
    }

    else 
    { return res; }
    
}

 

 

 

 

 

Firebase Hosting

파이어베이스 에서 지원하는 웹 호스팅 서비스 이다.

https://hackernoon.com/how-to-deploy-a-react-application-with-firebase-hosting-p92m37b7

How to Deploy a React Application With Firebase Hosting | HackerNoon

위 홈페이지를 참고하여 쉽게 성공했다.

npm install -g firebase-tools

위를 통해 설치

 

설치를 완료했다면 프로젝트를 빌드 해야 한다.

npm run build

위를 실행하면 build 폴더에 빌드가 된다.

 

빌드가 완료되면 firebase init을 실행해 호스팅할 폴더를 지정하자.

 

 지정이 완료되면

firebase deploy

위를 실행하여 홈페이지를 호스팅 할 수 있다.

 

firebase.ps1 파일을 로드할 수 없습니다

위 메세지가 나오면 권한이 부족한것이다.

PowerShell을 열어

Set-ExecutionPolicy RemoteSigned

위를 실행 하여 권한을 해제하면 에러가 나타나지 않는다.

 

 

 

---

Boot Strap

 

빠르고 간편하게 미리 만들어진 CSS를 사용할수 있다.

 

아래 홈페이지를 먼저 참조하자

https://react-bootstrap.github.io/

React-Bootstrap

 

설치를 시작해 보자

npm install react-bootstrap bootstrap

 

 

먼저 bootstrap을 다운받자.

 

설치후 아래의 것을 붙여넣자.

 

public/index.html

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css"
      integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor"
      crossorigin="anonymous"
    />
    
    <script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>

	<script
  		src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
  		crossorigin></script>

	<script
  		src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
		crossorigin></script>

index.js

import 'bootstrap/dist/css/bootstrap.min.css';

 

 

여기서 사용하고싶은 css들을 검색하고 가져올 수 있다.

 

아래는 내가 가져온 navbar이다. 참고하여 여러가지 컴포넌트를 적용해보자.

import Container from 'react-bootstrap/Container';
import Navbar from 'react-bootstrap/Navbar';
import Dropdown from 'react-bootstrap/Dropdown';
import ButtonGroup from 'react-bootstrap/ButtonGroup';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Stack from 'react-bootstrap/Stack';
import { Button } from 'react-bootstrap';

import { Link, Navigate } from "react-router-dom"




//화면위에 고정되는 바
function NavigationBar(props) {


  return (
    <div>
      <Navbar bg="dark" variant="dark" fixed="top" >
        <Container>
          <Navbar.Brand>
            {/* <div className="justify-content-end">               */}
            <div>              
              
              <Stack direction="horizontal" gap={3}>
                <h3>CALENDAR</h3>  
                <h5 className="ms-auto"> {props.User} </h5>
                {['='].map(
                  (variant) => (
                    <DropdownButton
                      as={ButtonGroup}
                      key={variant}
                      id={`dropdown-variants-${variant}`}
                      variant={"dark"}
                      title={variant}
                    >
                      <Dropdown.Item onClick={props.FuncOne}>달력 생성하기</Dropdown.Item>
                      <Dropdown.Item onClick={props.FuncTwo}>달력 받아오기</Dropdown.Item>
                      {/* <Dropdown.Item onClick={OnClick_ToHome}>홈 돌아가기</Dropdown.Item> */}
                      <Dropdown.Divider />
                      <Dropdown.Item onClick={props.FuncThree}> 로그아웃 </Dropdown.Item>
                    </DropdownButton> ), )}
                </Stack>
            </div>

          </Navbar.Brand>
        </Container>
      </Navbar>
      <br/> <br/> <br/>
    </div>
    
  );
}

export default NavigationBar;