리액트 심화반 - 4주차 개발일지(Badge, RealTimeBase)

 

 

 

 

GD프로젝트 리액트 심화반

4주 차가 시작되었다.

이번에도 새롭게 배운 내용과 결과물들을 설명해보겠다.

 

 

목차

1. 새롭게 배운 내용(Badge, RealTimeBase)

2. 4주 차 과제 및 느낀 점

 

 

 

---

1. 새롭게 배운 내용

---

 

 

 

1. Badge

Badge는 PC 뷰에 비해 모바일 뷰같이 매우 작은 화면 공간을 효율적으로 사용하고

간편성 또한 추구하기 위해 

단축화시킨 모양이라고 생각하시면 된다.

(몰론 PC 뷰에서도 많이 쓰이기도 한다.) 

 

facebook badge

 위 사진은 페이스북 애플리케이션에서 사용하는 Badge이다.

왼쪽에서부터 타임라인, 내 홈피(?), 단체, 알림, 메뉴 기능인데

이걸 일일이 PC 뷰의 메뉴들처럼 이름으로 나열했으면 

공간도 부족하고 이쁘지도 않았을 것이다.

그래서 많은 모바일 어플리케이션에선 Badge로 메뉴 뷰를 나타내기를 선호한다.

 

 

이런 Badge는 라이브러리나 프레임워크에서 다양하게 가지고 올 수 있으며

이 글에서는 강의에서 사용한 Material-ui 를 사용할 것이다.

 

Material-ui Badge 부분 보기[클릭]

  

사용방법은 매우 간단하다.

일단 사용하기에 앞서 터미널에 material-ui/icons 모듈과 material-ui/core 모듈을 설치한다.

 

npm i @material-ui/core @material-ui/icons 
yarn add @material-ui/core @material-ui/icons 

 

 그리고 앞에 설명한 Material-ui Badge 부분 중 맘에 드는 부분을 카피한다.

 

 

 

그대로 vscode에 복사 붙여넣기 하면 된다.

 

 

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Badge from '@material-ui/core/Badge';
import ButtonGroup from '@material-ui/core/ButtonGroup';
import Button from '@material-ui/core/Button';
import AddIcon from '@material-ui/icons/Add';
import RemoveIcon from '@material-ui/icons/Remove';
import MailIcon from '@material-ui/icons/Mail';
import Switch from '@material-ui/core/Switch';
import FormControlLabel from '@material-ui/core/FormControlLabel';

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexDirection: 'column',
    '& > *': {
      marginBottom: theme.spacing(2),
    },
    '& .MuiBadge-root': {
      marginRight: theme.spacing(4),
    },
  },
}));

export default function BadgeVisibility() {
  const classes = useStyles();
  const [count, setCount] = React.useState(1);
  const [invisible, setInvisible] = React.useState(false);

  const handleBadgeVisibility = () => {
    setInvisible(!invisible);
  };

  return (
    <div className={classes.root}>
      <div>
        <Badge color="secondary" badgeContent={count}>		// 중요한 부분
          <MailIcon />
        </Badge>
        <ButtonGroup>
          <Button
            aria-label="reduce"
            onClick={() => {
              setCount(Math.max(count - 1, 0));
            }}
          >
            <RemoveIcon fontSize="small" />
          </Button>
          <Button
            aria-label="increase"
            onClick={() => {
              setCount(count + 1);
            }}
          >
            <AddIcon fontSize="small" />
          </Button>
        </ButtonGroup>
      </div>
      <div>
        <Badge color="secondary" variant="dot" invisible={invisible}>		// 중요한 부분
          <MailIcon />
        </Badge>
        <FormControlLabel
          control={<Switch color="primary" checked={!invisible} onChange={handleBadgeVisibility} />}
          label="Show Badge"
        />
      </div>
    </div>
  );
}

 

결과물

 

 

 

이 코드의 핵심은 Badge 컴포넌트 속성 중 badgeContent와 Invisible 안에 들어있는 값인 count와 invisible에 있다.

count라는 state 값에 따라 알림 개수가 

invisible이라는 state 값이 true, false에 따라 알림 옆에 빨간불 유무가 결정된다.

 

 이렇게 예시코드들이 어떻게 동작하는지 알아낸 후 자신의 프로젝트에 맞게 사용하면 된다.

다른 샘플도 같으며 다른 라이브러리나 프레임워크에서도 마찬가지이다.

 

 

공식 문서는 친절하고 쉽게 다 알려준다.

모르면 공식 문서를 찾아보고 알아내는 습관을 기르는 것도 개발자의 덕목이다.

 

 

 

 

2. RealTimeBase

 

 

 

 RealTimeBase는 말 그대로 실시간 데이터베이스이다.

기존 데이터베이스와 차이점이 무엇이냐하면은

 

카톡을 예로 보자면

우리가 상대방과 카톡으로 얘기할 때 카톡으로 메시지를 보내자마자 상대방은 바로 볼 수 있다.

카톡방을 나가고 다시 들어오거나 새로고침 등등

페이지를 refresh 할 필요 없이 데이터의 변경사항들이 바로바로 적용된다.

 

이러한 기능들은 RealTimeBase를 이용하는 것이 좋다.

그중 FireBase의 RealTimeBase는 데이터 형태는 다음과 같다.

 

 

 

데이터 형태들이 key : value 형식으로 이루어져 있다.

마치 Json 형태와 같다.

RealTimeBase 내에 데이터 값이 바뀌어지는 순간

그 데이터를 사용하는 컴포넌트 등이 바로 변한다.  

 

 

 

사용방법은 간단하다. RealTimeBase에 키와 값을 추가하고

 

import firebase from "firebase/app";
import 'firebase/firestore';
import 'firebase/database';		// realtimebase import!

const firebaseConfig = {
    apiKey: "~",
    authDomain: "~",
    projectId: "~",
    storageBucket: "~",
    messagingSenderId: "~",
    appId: "~",
    measurementId: "~"
};

firebase.initializeApp(firebaseConfig);

const firestore = firebase.firestore();
const realtime = firebase.database();		// 추가!!

export {firestore, realtime};

 

 

firebase를 관리하는 파일에서 realtimebase를 추가하고

 

import React from 'react';
import Badge from '@material-ui/core/Badge';
import MailIcon from '@material-ui/icons/Mail';
import { realtime } from './firebase';


export default function BadgeVisibility() {
  const [invisible, setInvisible] = React.useState(false);

    React.useEffect(() => { 
        const testDB = realtime.ref('test');		// 레퍼런스에 접근하기
        testDB.on("value", (snapshot) => {			// 실시간 기능 on
            console.log(snapshot.val());			// val()함수로 실시간 값을 읽어온다.
            setInvisible(snapshot.val());
        });
            return () => testDB.off();				// 컴포넌트가 사라지면 반드시 off해줘야한다.
    }, []);

  return (
      <div>
        <Badge color="secondary" variant="dot" invisible={invisible}>
          <MailIcon />
        </Badge>
      </div>
  );
}

결과물

 

값을 추가하거나 수정하는 것은 이와 같다.

const name = 'ablue';
testDB.set({username: name});
testDB.update({test : true});

 

더 자세한 것은 공식문서를 확인하자

 

 

 

 

 

---

2. 4주 차 과제 및 느낀 점

---

 

 

 

 

 

4주 차 과제

 구현된 기능 : 댓글 기능, 실시간 알림 기능, 무한 스크롤 기능

 사용된 기능 : Firebase RealTimeBase, FireStore Database, Material-UI Badge, Redux-action, immer

 

 

프로젝트에 사용중인 redux 상태 관리 변수들

 

느낀 점 : 이번 주 차부터 난이도가 매우 올라간 기분이다.

가장 힘들었던 점은 데이터 관리이다.

어느 모듈에서 데이터를 어떻게 접근하고 사용할 수 있는지

또한 어떤 시점에선 null포인터를 참조하고 있지 않는지

불러왔던 데이터를 또 불러오진 않는지

를 고려해야 한다는 점이다.

 

프로젝트 규모가 클수록 그러한 점은 관리하기 힘들 것이다.

물론 정말 완벽하게 관리하긴 힘들다.

테스팅으로 모든 결점을 찾아내긴 불가능하고 또한 그러한 테스팅 자체가 비효율적이듯이

데이터 저장, 송수신 부분들에 있어서도 그러지 않을까 조심스럽게 생각해본다.

 

하지만 개발자는 최대한 사용자가 편리하고 자원을 최대한 효율적으로 관리해야 하며 수많은 케이스에서

오류가 없는지 확인해야 하는 것이 개발자의 덕목이다.

 

그러므로 수시로 state값을 확인하며 react, redux, 크롬의 개발자 도구를 통해

페이지가 이동되거나 액션이 발생하거나 컴포넌트가 리랜더링 할 때마다 데이터 상태를 확인해야 한다.