Why Converting DOM to Images Is Hard (And How to Fix It)

[@sudo-rm--rf]

일러스트레이터나 Satori로 SVG 만들고 Resvg로 PNG로 렌더하는게 제일 편하더라고요. 조금 노가다긴 하지만 캔버스 2D Context로 그리는 것도 괜찮고요

[@순코딩]

기다리고 있었어요 ㅠㅠㅜㅠㅠ
영상 자주 올려주세요 ㅠㅜ

[@hyosunglim]

진짜 갬동.. 새해 복 두배로 받아여 ㅜㅜㅜ

[@hello-1024-wellcome]

감사합니다. 유익하면서 쇼츠같이 짧은 길이라서 부담없이 볼 수 있어서 좋았어요 게다가 bgm이 긴박한?음악이라서 더 몰입이됬네욬ㅋㅋㅋ

[@hyosunglim]

흐흐 감사합니다

[@ink____]

새해 복 많이 받으세요 오랜만이에요!😮

[@hyosunglim]

새복많이에요!!!

[@Cookys0162]

2번째 문제처럼 동적으로 그림을 생성해야할때
그리고 이미지가 복잡하지 않을때에
Canvas 2d context로 그리는게 최고.
항상 결과값도 같고 그리는것도 심플해서 어렵지 않음

[@MMulgogi]

오 안그래도 개인프로젝트 마무리에 캡쳐해야할 일이 있는데 미리 알게돼서 너무 좋아요!

[@hyosunglim]

오 굳타이밍이네여!!

[@순코딩]

@@MMulgogi 전체 캡쳐는 개발자 도구에서 컨트롤 P 누르고 Capture 검색하면 전체 스크린샷 찍을 수 있으니 참고하세용!

[@hyunbinseo]

처음부터 canvas로 만드는 방법도 있지 않을까요?

[@wy97765]

아ㅋㅋ UI 깨지는 거 겪으셨군요. 진짜 크로스 브라우징이랑 모바일 기기마다 다르게 나오는거 ㄹㅇ...

[@hyosunglim]

ㅂㄷㅂㄷ...

[@justhighway]

선생님 취준생 입장으로서 라이브러리 사용에 있어서 조금 조심스러워지는 부분이 있는데, react-query나 axios 같은 핵심 라이브러리 제외 기능 구현에 있어서 라이브러리를 가져다 쓰는 게 좋은 방법일까요? 😢

[@hyosunglim]

라이브러리를 잘 활용하는 것도 필요해요! 대신 세부 원리까지 이해하고 쓰는 게 좋습니당

[@hayeon_]

내용과 별개로 PTSD 오는 브금이네요

[@hyosunglim]

ㅎ 영화보셨군여

[@순코딩]

2:33 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

[@jwmsg_hacker]

새탭 띄우고 가로세로 고정하고 원하는 폰트 등등 전부 로드된 상태로 html 을 png 로 렌더링해서 다운 로드 시키자마자 탭을 꺼서 사용자 입장에선 "반짝" 하는 효과를 주며.... 이미지를 다운로드 시켜보았습니다 (라고 백엔드 개발자가 말합니다)

[@hyosunglim]

반짝🌟

[@undefinedcoding]

Satori + Resvg 추천드립니다

[@hyosunglim]

오.. 한번 볼게요

[@sorry-man-164kg]

저같은 초보자들은 어느것부터 공부하면 좋을까요?

[@hyosunglim]

프론트엔드 생각하신다면 아래 영상 참고해주세요!
ruclips.net/video/xUGUJU1m3xY/видео.html