TIL - 5주차 월요일

mangjell·2022년 4월 11일
0

목차(1주)

  1. 글로벌스테이트? props가 필요없대! >>> Recoil
  2. 로그인에도 역사가 있다며? >>> AccessToken / RefreshToken
  3. Next.js 렌더링에 이런 원리가 있다니? >>> Diffing / Hydration
  4. 잠깐, 이것 먼저 실행해줘 >>> Closure / HOC / HOF
  5. 폼을 자동으로 만들어준다고? >>> React-Hook-Form

코드리뷰(검색 부분 - 컴포넌트로 나누는 것이 효율적)

  • 시크릿 코드는 복잡하게! 유저가 사용하지 않을만큼.
  • uuid사용
  • isMatched=props.keyword === el >>> 검색한 것과 같은지 체크하는 부분!

컴포넌트와 props, el, prev, data의 실체

props의 실체

  • props는 사실 함수의 파라미터(매개변수)였다는 점!
  • 매개변수임으로, 이름은 자유롭게 들어올 수 있다!

el의 실체

  • el은 사실 map()이라는 내장함수의 파라미터(매개변수) 였다는 점!
  • 매개변수임으로, 이름은 자유롭게 들어올 수 있다!

prev의 실체

  • prev은 사실 함수의 파라미터(매개변수) 였다는 점!
  • 매개변수임으로, 이름은 자유롭게 들어올 수 있다!

graphql - variables의 실체

정규표현식

이메일 로직

w는 어떤 문자 또는 숫자를 의미
\w는 어떤 하나의 문자 혹은 숫자를 의미
^는 시작을 의미
$는 끝을 의미
+는 한개 이상이면~ 을 의미

?는 없거나 한개일때 사용한다

*는 없거나 한개이거나 그 이상일때 사용한다(즉 모든경우!)

(이메일을 검증하는 로직 >>> 최종본)

핸드폰 번호 로직

\d: 숫자를 의미하는 것
{자리 수}: 자리 수 정하는 방법
예제) (아래 그림)

문자만 의미하는 것은 존재하지않는다!
그래서, [a-zA-Z]문자만 의미하는 방법

\s: 공백(띄어쓰기를 체크하는 부분)

글로벌 스테이트(global state)

  • recoil-state: props로 넘기지 않고 꺼내서 쓸 수 있다는 장점!(API 이외)
  • cache-state: (API)

atom을 활용해서 global state를 만들어주고, app.tsx에서 <RecoilRoot>태그로 아이들을 감싸주어야한다!

profile
프론트엔드 개발자

0개의 댓글