원티드 프리온보딩 프론트엔드 4차 1일차 이론

gyujae·2022년 5월 3일
0
  1. event function -> handler로 무조건 뺴놓기

  2. css :focus-within
    CSS :focus-within 의사 클래스는 포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 나타냅니다. 즉 스스로 :focus 의사 클래스와 일치하거나, 그 자손 중 하나가 :focus와 일치하는 요소를 나타냅니다. (섀도 트리 내부도 포함)

  3. key 값 index 쓰지 말자.
    다른 map item key 값과 겹칠 수 있다.

	<div key={index}></div> // X
	<div key={`data-${index}`}></div> // O
  1. classname 라이브러리 cx 추천 (연습해볼것!!!)
    style -> cx

  2. useRef -> data 바꿀때 쓰지 말자

  3. regex101.com -> 정규식 제대로 쓰자 email -> email regex w3c

  4. event target -> x
    event current target -> O ----- event handler 부착 된것을 사용한다.

  5. email != "" -> !! email

	if(email != "" ) {
    } // X
	if(!!email) {
    } // O
  1. css 선택자는 className을 쓰자 Id는 쓰지 말자

  2. 앱에서 필수로 쓰는 image들은 src 안으로 넣어놔라
    image 절대 경로는 import CheckActive from "images/check_active.png"
    svg 파일 가져오는 법 -> import {ReactCompoent as svgName} from "src/sheack.svg" -> 이러면 className 넣을 수 있음
    svg 파일 우리가 control 할 수 있어야 한다.
    ------> 개꿀팁

  3. input -> autoCorrect, autoCapitalize ..... off

  1. useOnClickOutside, useClickAway -> 밖 클릭
    react use -> 개꿀 라이브러리
    ex) useMount -> useEffect 빈 값일때

  2. css -> checked

  3. scroll monitor

중요) 멘토님이 주신 react setting 익숙해질 때까지 연습하기!!!!
https://github.com/miriyas/foundation

0개의 댓글