개발새발! 🙉

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"); // 클립보드에 ..

개인적으로 도움이 됐던 포스팅입니다. 출처는 김정환 블로그 입니다. 웹 개발할 때 난 jQuery부터 사용하기 시작한 것 같다. 라이브러리가 주는 편리함 넘어 어떻게 DOM API를 사용하는지는 몰랐다. 앵귤러, 리엑트 같은 프레임웍을 사용할 때도 마찬가지다. 기능을 구현하는데 별다른 어려움은 없었다. 그러다 보니 다양한 개발 환경에 민첩하게 움직이기 쉽지 않다. 운영중인 서비스에 쉽게 UI 프레임웍을 도입할 수 없는 경우. 여러 버전의 jQuery를 혼용해서 사용하는 경우. 라이브러리야 어찌되었듯 DOM API만은 브라우저에서 지원하기 때문에 처한 상황에 관계없이 안심하고 사용할 수 있다. 이럴 때 순수 자바스크립트 개발 역량은 무엇보다 중요하다고 생각한다. 다시 기본으로… 우리가 자바 웹 개발을 공부..

바닐라 JS로 크롬 앱 만들기 크롬 앱 클론코딩하며, JS 이론 배우기 [초급] HTML, CSS, JS academy.nomadcoders.co Nomad Coders의 바닐라 자바스크립트 강좌는 '기초적인 자바스크립트'를 설명한다. 총 32개의 강의로 약 5시간의 분량이다. JavaScript의 기초 지식을 배우고, 모멘텀(Momentum) 앱을 클론 코딩하면서 투두 리스트, 날씨, 시계 기능을 만들어볼 수 있다. 즉, 이론을 배우는 것과 동시에 실전으로 만들어볼 수 있다. Momentum은 크롬 확장 앱으로, 새로운 크롬 탭을 열때마다 나타나는 생산성을 높여준다. 이를 클론 코딩한 앱은 Momoton이다. 구현 기능은 아래와 같다. 배경사진 : Unsplash API에서 랜덤으로 불러와서 출력한다...