TIL/20210825

📌今日やったこと

1)INS広告の準備
2)自動検索完了時にThrottle、Deboringを適用
3)図鑑で計数ゲージ表示を作成する

Instagram広告

広告をする方法はいろいろありますが、私たち呉戌はInstagramだけで広告をすることにしました.INSの広告の中でも多くの招待状の広告、ストーリの広告、検索の広告などがあって、最も适する広告が何なのかを学んで、もとは宣伝の招待状の话は自分でストーリ、検索エンジンに広告の形式をすることができます.よかった.🎉 初期にミスをする可能性があったので、2万ウォンを試した.やってるときはマーケティングも面白いと思うほほほ

自動補完にlodashを適用する

lodashが提供するThrottleとDeboringのどちらが適切ですか?

Deboringは入力の終了を無制限に待ちますが、Throttleは入力の開始時に一定周期で実行を続けます.

Deboringの時間を短縮すると、Throttleのような効果が出ますが、時間的な違いも出てきます.

ユーザーの場合、Throttleはより有利であり、Deboringはより効率的である.

結果としてThrottleを適用した.時間ごとに少なくとも1回の検索結果をロードする必要があり、バックグラウンドで多くの有効な面を考慮して開発されているので、Deboringを使用する必要はありません.

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で作成したコメント数を同時にロードするように要求します.いつでも、私たちのバックエンドは喜んで私たちのために働いています.
コメントの個数はProgress Barとして提示され、個数によって等級や状態(小酒飲み、ビール徳厚、ビールオムレツなど)も異なる様子を呈している.
Progressbarはライブラリを単独で使用するのではなく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;

コインの物語
私たちの奥術チームは忘れるとトックをテーマにしています.🤣 警備員が集まっているからです.私たちのグループは重いテーマでも笑って话せるので本当に楽しかったです.たまにはこのチームで始めようと思ったけど🥰 コインに関するものは参考資料で代用!
フリーフライトリクエスト:https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

📌参考資料

スター広告
: https://blog.naver.com/movabrave/222008969113
ジグルの適用
: https://webisfree.com/2020-11-26/react-%EA%B2%80%EC%83%89%EC%B0%BD%EC%97%90-debounce-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95
debonse、throttle比較:https://webclub.tistory.com/607