TIL / 20210825

장정윤·2021년 8월 25일

목록 보기

30/41

📌오늘한 일

1)인스타 광고 준비
2)자동완성 검색시 Throttle, Debounce 적용
3)도감 작성 개수 게이지로 표현

인스타그램 광고

광고를 하는 방법은 여러가지가 있는데 우리 오술은 인스타그램에만 광고를 하기로 했다. 인스타 광고중에서도 게시글 피드 광고, 스토리광고, 검색 광고등 많아서 가장 맞는 광고가 무엇인지 공부를 했는데 알고보니 게시물을 홍보하면 알아서 스토리, 검색엔진에도 광고를 해주는 형태였다.앗싸🎉 초기에 실수할 수도 있어서 2만원만 해봤다. 해보면서 마케팅 쪽도 재미있을거 같다는 생각을 했다.ㅎ

자동완성에 lodash 적용

lodash에서 제공하는 Throttle, Debounce 중 어느것이 더 적절한지 고민을 했다.

Debounce 는 입력이 끝날때까지 무한적으로 기다리지만, Throttle 는 입력이 시작되면, 일정 주기로 계속 실행한다.
Debounce 의 시간을 짧게 가져간다면, Throttle 와 비슷한 효과가 날 수 있지만, 그럼에도 시점에서 차이가 날 수 있다.
사용자 측면에서는 Throttle이 더욱 유리하고, Debounce는 효율에 유리하다.

결과적으로 우리는 Throttle를 적용했다. 일정 시간 마다 최소한으로 검색 결과를 불러오는 작업이 필요하다 생각했고, 이미 backend에서 효율적인 측면을 많이 고려해서 개발해주었기때문에 Debounce를 사용안해도 되지 않을까하는 이유 때문이다.

import { getSearchWord } from "../redux/async/beer";
import _ from 'lodash';

const Search = (props) => {
    const searchWord = () =>{//실시간으로 자동완성 된 값 불러옴   
        dispatch(getSearchWord(word));
    }

    const searchThrottle = _.throttle(() => {
        searchWord();
    }, 500);
  return(
    <>
    	<input          
          onKeyUp={() => {
          searchWord();
          searchThrottle();
 		}}></input>
    </>
    )

도감 작성 갯수 게이지로 표현

전체 리뷰 리스트를 불러와 작성 갯수를 length로 확인할 수도 있지만 이렇게 하면 너무 비효율 적이기 때문에 user 정보를 불러올 때 user가 작성한 리뷰 개수도 같이 불러오기로 백엔드에 요청했다. 언제나 그랬듯 우리 백엔드는 흔쾌히 작업을 해주신다.

리뷰 개수를 프로그레스바 형태로 보여주고, 개수에 따라 레벨과, 상태(리틀애주가, 맥주덕후, 맥주소믈리에 등)도 다르게 보여주었다.
프로그레스바는 따로 라이브러리를 사용하지 않고 css로 구현하였다.

import ProgressBar from '../componentsMypage/ProgressBar';
import { getReviewLength } from "../redux/async/mybeer";
import { count } from "../redux/reducer/mybeerSlice";

const MyPage = (props) => {
    const userInfos = useSelector(state => state.user.currentUser);
    const length = useSelector(count);
    const [levelText, setLevelText] = useState("");
    const dispatch = useDispatch();
    useEffect(()=> {
        dispatch(getReviewLength(userInfos.userId)); //사용자가 쓴 리뷰리스트 개수 디스패치
    }, [userInfos]);

    useEffect(() => {
        dispatch(userInfo());
        levelTextconfirm();
    }, [])

    const levelTextconfirm = () => {
        if(length < 33){
            setLevelText("리틀애주가")
        }else if(length < 66){
            setLevelText("맥주덕후")
        }else{
            setLevelText("맥주소믈리에")
        }
    }
    return (
        <React.Fragment>
            <GaugeWrap>
                <JustifyAlign>
                    <LevelText><span>Lv.{parseInt(length/10)+1}</span> 
		<span style={{color: "#FFC44F"}}>{levelText}</span></LevelText>
                    <DogamText><span>도감: {length}/101</span></DogamText>
                </JustifyAlign>
                <ProgressBar progress={length}/>                
         </GaugeWrap>
        </React.Fragment>
    )
};

export default MyPage;