[TIL] JS 화살표함수, 고차함수, DOM, Event

2025-02-03 TIL

📝 TIL (Today I Learned)
🔗 원본 이슈: #9
📅 작성일: 2025-02-03
🔄 최종 수정: 2025년 03월 05일


🍀 새롭게 배운 것

  • JavaScript 함수
    • 함수 표현식
    • 화살표 함수
      • this 바인딩
    • 고차함수 (map, filter, reduce)
    • 구조분해 할당
  • JavaScript DOM, Event

🍎 오늘의 문제 상황

  • GitHub Pages에서 배포한 웹사이트(여행지 이상형 월드컵)의 OG(Open Graph) 태그가 Slack에서 공유할 때만 미리보기 이미지가 표시되지 않는 문제 발생
    • 노션에서는 정상 표시됨
    • Slack 개발자 도구 Network 탭에는 200 OK 정상 응답
    • Metatags.io에서도 OG이미지 정상적으로 뜸
    • ?v=2 캐시 우회 추가했지만 여전히 안나옴
  • Slack이 OG캐시를 유지하여, 기존 데이터를 삭제하지 않음..
  • OG 이미지 파일 크기가 커서 Slack이 불러오지 못했을 수도 있음

해결 과정

  1. OG 이미지 크기 줄이기
    • magick London.avif -resize 1200x630 -quality 80 London.jpg
  2. GitHub raw.githubusercontent.com 대신 외부 이미지 호스팅 사용
  3. Slack 캐시 강제 우회 (?v=2 추가)
  4. Slack에서 직접 OG 캐시 삭제 요청
    • Slack에서 /collapse/expand 명령어를 입력하면 미리보기를 다시 불러옴

🦄 느낀 점

  • 이미지를 작은 것을 쓰는걸 우선적으로 생각해야 겠다.
    • 1MB 이하로!
  • 덕분에 magick을 설치하고 배우게 되어서 앞으로 이미지 사이즈 줄이는 것을 쉽게 할 수 있을 것 같다.
  • Slack과 카카오톡은 캐싱을 강하게 하는 것 같다.
  • Slack API까지 활용하는 것은 못했지만, 다음에 기회가 된다면 해보겠다.

🐬 깃블로그 정리

  • [JavaScript 함수] (https://nan0silver.github.io/miscellaneous/2025-01-30-js-function/)
  • [여행지 이상형 월드컵] (https://programmersaibe-nahyun.github.io/TravelWorldcupGame/)