[TIL] JS 화살표함수, 고차함수, DOM, Event
in TIL on Til, Javascript Last modified at:
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이 불러오지 못했을 수도 있음
해결 과정
- OG 이미지 크기 줄이기
magick London.avif -resize 1200x630 -quality 80 London.jpg
- GitHub
raw.githubusercontent.com
대신 외부 이미지 호스팅 사용 - Slack 캐시 강제 우회 (
?v=2
추가) - Slack에서 직접 OG 캐시 삭제 요청
- Slack에서
/collapse
→/expand
명령어를 입력하면 미리보기를 다시 불러옴
- Slack에서
🦄 느낀 점
- 이미지를 작은 것을 쓰는걸 우선적으로 생각해야 겠다.
- 1MB 이하로!
- 덕분에 magick을 설치하고 배우게 되어서 앞으로 이미지 사이즈 줄이는 것을 쉽게 할 수 있을 것 같다.
- Slack과 카카오톡은 캐싱을 강하게 하는 것 같다.
- Slack API까지 활용하는 것은 못했지만, 다음에 기회가 된다면 해보겠다.
🐬 깃블로그 정리
- [JavaScript 함수] (https://nan0silver.github.io/miscellaneous/2025-01-30-js-function/)
- [여행지 이상형 월드컵] (https://programmersaibe-nahyun.github.io/TravelWorldcupGame/)