[항해99 29일차] 2022.04.04 TIL /포스트 작성페이지, 포스트 상세페이지

<오늘 할 일>

1. 3주차 4주차 강의듣기

 

 

어우 어제 드라마보다 늦게잤더니 9시에 일어나서 지각이당. 😞

지각 하고 싶지 않았는데..

몸이 말을 듣지 않네 ㅠㅠ

 

export const emailCheck =(email) =>{
    let _reg= /^[0-9a-zA-Z]([-_.0-9a-zA-Z])*@[0-9a-zA-Z]([-_.0-9a-zA-z])*.([a-zA-Z])*/;
    //이메일 정규식 표현
    return _reg.test(email);
};

👉 이메일 정규식 표현

 

일단 포스트 목록은 뷰에 전부 다 그려놨다.ㅠㅠ

컴포넌트 쪼개기 넘 어려워ㅠㅠ

 

일단 강의 듣는데에 바빠서 정리를 못했는데ㅠㅠ...

갑자기 난이도가 너무 어려워졌다.

포기하고싶은마음이 굴뚝같지만, 포기하지 않을거다 ㅠ.ㅠ

할 수 있다는 마음으로...해야지 ㅠㅠ

할게 너무 많은데, 시간이 너무 부족하다...

 

 

Debounce와 Throttle은 이벤트를 관리할 수 있는 방법이다.

 

1. debounce란?

 👉 이벤트가 일어나면, 일정 시간을 기다렸다가 이벤트를 수행해요! 일정 시간 내에 같은 이벤트가 또 들어오면 이전 요청은 취소

 

2. throttle이란?

 👉 일정 시간 동안 일어난 이벤트를 모아서 주기적으로 1번씩 실행해준다.

 

lodash로 이벤트 관리하기

 

Lodash는 자바스크립트 유틸리티 라이브러리!

배열 관리부터 모듈화,

성능 향상과 관련된 것까지 엄청 많은 기능을 제공

debounce와 throttle도 제공

공식 문서 보러 가기 (링크→)

 

yarn add lodash

import React from "react";
import _ from "lodash";

const Search =()=>{

    const debounce =_.debounce((e)=> {
        
        console.log(e.target.value);
    }, 1000)

    const throttle =_.throttle((e)=> {
        
        console.log(e.target.value);
    }, 1000)

    return (
        <React.Fragment>
            <div >
                <input type ="text" onChange={throttle} />
            </div>
        </React.Fragment>
    )
};

export default Search;

이렇게 테스트하면, 어떻게 작동하는지 알 수 있다.

그런데 onChange함수에 넣으면 제대로 작동하지 않는다.

계속 리렌더링 되면서 초기화가 되기 때문

useCallback 을 사용해서 이것을 해결해줄 수 있음.

함수를 저장해주는 !! 최적화할때 중요한 친구

아래처럼 사용하면된다.

 

import React from "react";
import _ from "lodash"; // lodash 부르기

const Search = () => {
//   const debounce = _.debounce((k) => console.log("디바운스! :::", k), 1000);
//   const keyPress = React.useCallback(debounce, []);

  const throttle = _.throttle((k) => console.log("쓰로틀! :::", k), 1000);
  const keyPress = React.useCallback(throttle, []);

  const onChange = (e) => {
    keyPress(e.target.value);
  };

  return (
    <div>
      <label>Search:</label>
      <input onChange={onChange} />
    </div>
  );
};

export default Search;

<내일 할 일>

1. 4-3부터 5주차 강의 듣기

2. 알고리즘 문제 풀기