TIL 1

검색 잘되는 사람이 되자

• 각종 채용 사이트에 자신의 이력서를 올려라
• 항상 업데이트 된 pdf파일로 들고 다녀라.

• 밖에 선언하라
  • 안에 바로 함수 선언 하지 말라 map 돌리고 있는 거 안에서 함수 바로 쓴 갯수만큼 함수 생성됨
    
  • 유지보수 측면에서 해로움 (useCallback 같은 걸 사용 시에도)
• 이름은 가독성 좋게 하는 것이 좋다. ex. handle
  

• 키 값에 index 그대로 넣는 것
• target.className
• DOM 직접 조작 (직접 땡겨 쓰는 것)
  • ex. innerText 대신 dataset 사용 권고
• css 선택자로 Id 쓰면 안됨.
  • 클래스로만 스타일링 권고
    • id는 어떤 의도가 있을 때 쓰는 것. 인풋을 어떻게 조작을 하겠다. js로 만지겠다. 등
      
  • 재사용 불가
  • 근거
• querySelector

• transition 0.2 빨라 보임
  
• focusaWithin
• cx
• classnames라는 라이브러리 (?) 삼항 연산자 대체에 좋다(?)
  
• data-ignore
• react-use
  • useClickoutside Hook 모바일까지 다 대응
    
  • useClickaway
  • usemount: 마운트 됏을때 한번 실행
  • useunmount: 언마운트 했을 때 한번 실행. useeffect 빈값 넣는 것보다 직관적
  • useTitle: 갖다 쓸 때 src 들어가서 document.title 에다가 title 쓰는 것(?)
    • 보통 document.title 에다가 스트링 박는다.
    • 탭 타이틀 : 값이 바뀔 때마다 타이틀 계속 바꿔줌
• e.target.validity.valid

• 구글 권고
• 비추: 네이버, 한글 검색

• 없으면 앱이 안돌아가는 반드시 필요한 것.
• ex. 인풋의 눈, 체크 아이콘, 앱 필수 이미지 (쓰는 폴더에 바로 넣거나 src/assets)

• 무조건 리액트 컴포넌트로 써라.
• 컬러 등 컴포넌트 처럼 튜닝 가능
• 거대한 이미지로 넣을 때는 그냥 img로 넣어라. 튜닝 안해도 되는 거.
• 코드

  // src/assets/svgs/index.tsx
  export { ReactComponent as BellIcon } from './ic-bell.svg'
  export { ReactComponent as CalendarIcon } from './ic-calendar.svg'
  export { ReactComponent as CalendarRangeIcon } from './ic-calendar-range.svg'
  export { ReactComponent as CancelAlertIcon } from './ic-cancel-alert.svg'

  import { BellIcon } from 'svgs'

• https://github.com/streamich/react-use

  https://github.com/streamich/react-use

1. 리팩토링

   // 기존
   className = {
   	active === 'detail-btn' ? "detail-btn active" : "detail-btn"
   }
   
   // 리팩토링
   className={cx('detail-btn', { [active]: detail-btn })}