[1008] 서치라이트 10일차

Today's Tasks

• KAN-132 - 블로그 페이지 스타일링 완료
  • 상세 페이지 내용 innerHTML로 적용
  • 게시물 목록 스타일링
  • 상세 페이지 스타일링
• 블로그 배포 완료!! 내가 한 건 아님 😎 쿄쿄쿄
  
• 점심 식사 후 커피챗

Learnings and Questions

• 커피챗에서 자기소개 꿀팁을 얻었다..!

Callback Ref

• Shadow DOM attach하다가 Callback Ref에 대해 알게되었다
• DOM에 접근할 때 ref 와 useEffect 를 함께 사용하는 경우 다수
  → useEffect가 실행될 시점에 ref에 값이 존재하지 않을 수 있다는 문제
  • 상호작용이 있어야 나타나는 컴포넌트
  • 렌더링이 지연된 컴포넌트
    → Callback Ref를 사용하면 node에 직접 접근할 수 있다
    → 렌더링할 때마다 매번 이 함수를 실행한다는 문제
    → useCallback을 사용하여 함수가 불필요하게 생성되지 않도록 한다

useEffect(() => {
  ref.current?.focus()
}, [])

<input
  ref={(node) => {
    node?.focus()
  }}
/>

base64

• 데이터를 64진법으로 나타내는 것
• 장점
  • 서버에 이미지를 넣지 않아도 됨
  • 문서와 함께 로딩됨. 끊기지 않음
• 단점
  • 코딩시 가독성이 떨어짐
  • 용량 커짐

참고 자료

callback refs 사용으로 useEffect 방지하기 | crsrn1874 | velog
Base 64와 base64 img 사용하기 | byeol4001 | velog

Plan for Tomorrow

• KAN-140 - 블로그 상세 페이지 스켈레톤 시작
• +) 모바일 헤더