짧

og 이미지: 링크 공유시 표시 되는 썸네일 이미지

• 권장 사이즈는 1200x630이다.

• 파일 크기는 100-300KB 정도

• 같은 파일명으로 이미지를 교체 한다면, 쿼리스트링 ?v=2..3..n을 추가해서 캐시를 우회할 수 있다.

바 UI의 너비를 측정해 놓고, 다음 UI에 적용하기

• 이전 UI의 너비를 그대로 다음 UI에 적용하고 싶다면 useRef를 사용하자.

  • 너비 변경 시 리렌더가 필요없으니 useState를 사용할 필요는 없다.

  • 정적인 너비로 통일 시켜도 되지만, 바 UI 같은 경우 항목이 늘어날 수 있기 때문에 동적으로 받아오는 것이 유지보수 하기 편하다.

  • 너비를 측정하기 위한 wrapper div를 만들어놓고, div의 ref와 다음 UI의 ref를 생성해놓음.

  • 이벤트 발생 시점에 wrapper div의 너비를 다음 UI의 ref에 캡처.(e.g. menuWidthRef.current = wrapperRef.current.offsetWidth;)

  • UI에 적용.(e.g. minWidth: menuWidthRef.current)

  • 참고로, 런타임에 측정 되는 동적인 값은 Tailwind CSS 클래스로는 적용하지 못함. 빌드 타임에 결정되는 고정 값만 지원하기 때문에 이런 동적인 값은 인라인 스타일로 처리했음.

CSS 줄바꿈 스타일: white-space 속성

• pre-line: 줄바꿈 보존, 연속 공백은 하나로 축소 -> 일반 텍스트 댓글에 적합 -> TIL 댓글

• pre-wrap: 줄바꿈 보존, 연속 공백도 보존 -> 코드 등 공백이 의미 있는 내용에 적합 -> 코드 첨부 기능이 있는 Q&A 댓글