자바스크립트로 애니메이션 구현 및 2D 성능 측정

안녕하세요. 이번 시간에는 자바스크립트를 활용하여 현재 보고 있는 웹브라우저 화면에 각각 독립적으로 움직이는 공 애니메이션 효과를 만들 거예요. 공을 그리기 위해 HTML5의 기능 중 하나인 Canvas를 사용할 건데요. Canvas는 동적인 그래픽을 그리기 위해 사용됩니다. 즉 2D 그래픽이나 애니메이션 효과를 웹 페이지에 하나도 안 쉽게 표현할 수 있어요. 웹브라우저에서 굴러다니는 공으로 대략적인 2D 그래픽 성능도 확인해 볼 수 있는데요. 시간이 지남에 따라 공의 개수가 많아지도록 해서 실시간으로 프레임을 측정하고 공이 최대 몇 개까지 안정적인 프레임을 유지하는지 확인해 보는 거죠! canvas는 그래픽카드의 하드웨어 가속을 사용하여 2D 그래픽을 렌더링 하기 때문에 가능한 거예요. 하지만 성능 테..

• format_list_bulleted 개발 이야기/Javascript 이야기
• · 2023. 5. 25.
• textsms

자바스크립트 웹스크래핑으로 구글 검색 결과 가져오기

안녕하세요. 이번 시간에는 사용하고 계신 인터넷 브라우저 콘솔에서 웹스크래핑 할 수 있는 자바스크립트를 만들 거예요. 웹스크래핑 대상은 구글의 검색 결과입니다! 입력받은 키워드로 검색 결과를 가져오도록 할 건데요. 알 수 없는 이상한? 사이트까지 목록에 나오지 않도록 필터링할 도메인(naver, daum 등)을 같이 입력받아서 제목과, URL 정보를 보여주도록 할 거예요. 참고로 웹스크래핑은 웹페이지의 HTML 구조가 변경될 경우, 코드도 함께 수정해 주어야 해요. 어느 날 갑자기 결과를 못 가져온다면? 아마도 HTML의 구조가 변경되었을 거예요. 그럼 그 웹페이지에 가서 다시 코드를 분석하고 기존 코드를 수정해야겠죠! 이번에도 CORS 우회 프록시 서버를 활성화해 주세요. 처음이신 분들은 아래 이전 글..

• format_list_bulleted 개발 이야기/Javascript 이야기
• · 2023. 5. 20.
• textsms

검색어 트렌드 비교, 분석하는 자바스크립트 만들기

안녕하세요. 지난 시간에는 네이버 검색 API를 활용하여 블로그 검색 순위를 알아봤는데요. 이번에는 네이버 데이터 랩의 API를 활용해서 검색어 트렌드를 분석해 볼게요. 기간별 검색어 트렌드를 기기, 연령, 성별 등으로 구분해서 세분화된 정보를 가져올 수 있답니다. 한번 발급받은 API는 계속 사용할 수 있으니 네이버 개발자 센터에서 받아보시길 바랍니다. (1분이면 끝!) 검색어 트렌드란? 검색어 트렌드는 검색량이나 인기 검색어 등을 조회하는 게 아니에요. 키워드 간의 상대적인 인기도를 확인할 수 있는 거예요. 즉 키워드의 검색량 비율을 비교해서 어떤 키워드가 더 많은 관심을 받고 있는지 검색 점유율 등을 추정할 수 있는 거죠. 시간에 따른 인기도라든가, 연령이나 성별 검색량을 비교해서 어떤 연령대와 성..

• format_list_bulleted 개발 이야기/Javascript 이야기
• · 2023. 5. 19.
• textsms

자바스크립트 예제로 배우는 정규식(regex) 패턴

안녕하세요. 오늘은 프로그래밍에서 문자열을 처리하거나 검증할 때 정말 중요한 정규식(Regular Expression)에 대해 알아볼게요. 정규식은 간단한 표현으로 복잡한 문자열 패턴을 다룰 수 있는 도구로, 프로그래밍의 다양한 영역에서 활용되고 있죠. ​ 이번 포스팅에서는 대부분의 프로그래밍언어에도 사용되는 일반적인 정규식 패턴을 다루지만, 자바스크립트 기반으로 예제를 통해 기본 개념을 알아보고, 사용법을 익혀볼 거예요. 그전에 자주 사용되는 정규식 패턴 예제부터 알아보고 갈게요! ​ 자주 사용되는 정규식 패턴 예제 ​ 이메일 주소 검증하기 function isValidEmail(email) { // 이메일 주소에 대한 정규식 let emailRegExp = /^[a-zA-Z0-9._%+-]+@[a-z..

• format_list_bulleted 개발 이야기/Javascript 이야기
• · 2023. 5. 14.
• textsms

블로그 순위 확인하는 자바스크립트 만들기

안녕하세요. 저번 시간에는 웹 스크래핑으로 네이버 블로그의 게시글 가져오는 법을 배웠는데요. 그 데이터들을 사용해서 내 글이 몇 번째에 검색되는지 순위를 확인하는 코드를 만들어 볼 거예요. 이번 시간에도 브라우저의 개발자도구 콘솔을 사용합니다. 시작하기 전에 준비할게 하나 있는데요. 바로 네이버 검색 API입니다. 아래 네이버 개발자 센터를 통해 1분이면 발급이 가능합니다! 네이버 검색 API 발급받기 검색 - SERVICE-API 검색 NAVER Developers - 검색 API 소개 웹, 뉴스, 블로그 등 분야별 네이버 검색 결과를 웹 서비스 또는 모바일 앱에서 바로 보여 줄 수 있습니다. 또한 ’OO역맛집’과 같은 지역 검색을 할 수도 있으 developers.naver.com 1. 오픈 API ..

• format_list_bulleted 개발 이야기/Javascript 이야기
• · 2023. 5. 12.
• textsms

자바스크립트로 웹스크래핑 하는 방법

안녕하세요. 오늘은 자바스크립트(JavaScript)로 웹 스크래핑(Web Scraping) 하는 방법에 대해 알아볼 거예요. 웹 스크래핑이란 웹 페이지에 있는 정보를 추출하는 과정이에요. 웹페이지는 HTML로 작성되어 있는데 웹 스크래핑을 통해 HTML 코드에서 우리가 원하는 정보를 찾아낼 수 있답니다. 웹 스크래핑은 서버 사이드 언어를 사용해서 수행하는 것이 일반적이에요. 하지만 프로그래밍에 필요한 소프트웨어 설치와 설정 과정이 복잡하기 때문에 오직 인터넷 브라우저만 있으면 바로 수행할 수 있는 자바스크립트로 알아보도록 할게요. 1. 아래와 같이 메뉴로 이동하거나, F12 키를 눌러서 개발자 모드를 활성화합니다. 2. 개발자 모드에서 아래 빨간 네모칸의 콘솔 모드 탭을 선택합니다. 콘솔 창만 띄우면 ..

• format_list_bulleted 개발 이야기/Javascript 이야기
• · 2023. 5. 11.
• textsms