목차(1주)
- 글로벌스테이트? props가 필요없대! >>> Recoil
- 로그인에도 역사가 있다며? >>> AccessToken / RefreshToken
- Next.js 렌더링에 이런 원리가 있다니? >>> Diffing / Hydration
- 잠깐, 이것 먼저 실행해줘 >>> Closure / HOC / HOF
- 폼을 자동으로 만들어준다고? >>> 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>태그로 아이들을 감싸주어야한다!
프론트엔드 개발자