개발새발! 🙉

JavaScript 관련해서 세계적인 트렌트를 확인할 수 있는 사이트를 알게 돼서 내용을 공유한다. 무궁무진하게 생기는 JavaScript 시스템에서 트렌드를 쉽게 확인할 수 있다. 라이징스타 risingstars 사이트에 접속하면 2023년 프론트엔드 프레임워크 인기 순위를 알 수 있다. React가 2021년부터 현재까지 자바스크립트 생태계에서 1위를 유지하고 있다. 대표적인 프론트엔드 3대장 (React, Vue, Angular) 말고도 htmx, Svelte, Million 등 프레임워크가 인기를 끌고 있다. 그래프 오른쪽에는 사람들이 덧붙인 코멘트가 있어서 같이 읽어보면 좋다. 이 사이트의 장점은 프론트엔드 말고도 백엔드, 모바일, 빌드 도구, 테스팅 프레임워크, AI 등 다양한 자바스크립트 시..

웹에서 SNS로 콘텐츠를 공유하는 기능을 구현해야 할 때가 있다. 트위터, 페이스북, 카카오톡 같은 SNS에서는 이를 공유하는 기능을 제공하고 있다. 이 기능으로 이미지, 링크, 멀티미디어 등 다양한 콘텐츠를 공유할 수 있다. 아이콘 추가하기 이미지 버튼으로 보여줄 아이콘 이미지를 다운로드 받는다. (트위터, 페이스북, 카카오톡의 아이콘 이미지) CSS 추가하기 다운받은 아이콘 이미지를 적용하기 위해 아래 CSS를 추가한다. 각 이미지 버튼에 아이콘을 매핑하는 작업이다. .link-icon { position: relative; display: inline-block; width: auto; font-size: 14px; font-weight: 500; color: #333; margin-right: 1..

텍스트 복사하는 기능은 웹으로는 어떻게 처리할까? execCommand 기능을 이용하여 매우 쉽게 구현할 수 있다. JavaScript로 구현하기 let dummy = document.createElement("textarea"); document.body.appendChild(dummy); dummy.select(); // 복사할 URL 선택 document.execCommand("copy"); // 클립보드에 복사 document.body.removeChild(dummy); // 복사한 URL 선택 풀기 alert("URL이 클립보드에 복사되었습니다"); 웹스퀘어에서 구현하기 ibxObj.select(); // 복사할 URL 선택 document.execCommand("copy"); // 클립보드에 ..