Chrome 개발자 도구에서 팝업, 모달 및 애니메이션 디버깅

종종 팝업 위로 마우스를 가져간 다음 개발 도구를 연 다음 요소 탭에서 생성된 코드를 보려고 시도하여 팝업, 메뉴 또는 시간 지정 애니메이션을 디버깅하려고 합니다. 하지만 커서를 움직이면 코드가 사라집니다! 마우스를 올리면 두 요소가 나타나지만 마우스를 움직이면 사라집니다! Chrome 개발자 도구 열기(Cmd + Option + I) 콘솔 탭 열기 다음을 붙여넣고 히트 엔터: setTimeout(function(){debugger;}, 5000) 팝업으로 이동하고 5초 동안 기다리면 디버거가 페이지를 일시 중지하고 코드를 볼 수 있습니다! 디버깅을 즐기십시오! 출처 https://medium.com/@mitchwd/debugging-popups-modals-animations-e833856d80a9

• format_list_bulleted Javascript/jQuery
• · 2023. 6. 27.
• textsms

[Echarts]_3. Map 차트 생성, 활용

지도차트 그리기 Apache Echarts 를 이용하여 여러가지 차트를 생성 할 수 있습니다. 이번에는 Echarts 를 이용하여 지도차트를 생성하는 방법을 정리해보았습니다. Apache Echarts 설치 및 정보는 다음 포스트 참고 [Echarts]_1.Apache ECharts 설치,사용준비 1. 지도 생성을 위한 JSON 파일 추출 우선 Echarts 의 examples 에서 제공하는 USA.json 을 사용해 보았습니다. json 파일만 있다면, 어디던지 지도차트 생성이 가능합니다. https://echarts.apache.org/examples/en/editor.html?c=map-usa F12 를 통해 개발자 도구에서 USA.json 을 찾습니다 마우스 우클릭 -> 새창열기 -> 다른이름으로..

• format_list_bulleted Javascript/Apache ECharts
• · 2023. 1. 10.
• textsms

[Echarts]_2.Apache ECharts 공용 options 정리

Echart 설치 및 준비는 다음 포스트 참고 https://yn971106.tistory.com/119 이번에는 Echarts 의 series 의 type 속성과 상관없이 통상적으로 사용되는 옵션 몇가지를 공부해 보았습니다. 1.legend : 범례 구성 요소. 범례 구성 요소는 다른 시리즈의 기호, 색상 및 이름을 보여줍니다. 범례를 클릭하여 차트에 시리즈 표시를 토글할 수 있습니다. 기본 설정 방법 화면 data1 , data2 를 상단에 표시해 줍니다. 별도의 설정 없이 legend 박스 클릭시 해당 차트를 지워주는 기능을 가지고 있습니다. 또한 마우스 오버시 기본적으로 해당 차트의 데이터가 반짝거리는 효과가 있습니다. legendHoverLink: false 이는 series 에서 legendH..

• format_list_bulleted Javascript/Apache ECharts
• · 2023. 1. 10.
• textsms

[Echarts]_1.Apache ECharts 설치,사용준비

프론트를 개발하면서 차트는 굉장히 많이 사용됩니다. 그 중 프로젝트를 진행하면서 사용한 Apache Echarts 를 간단하게 다뤄보겠습니다. 공식 사이트 : https://echarts.apache.org/en/index.html 다운로드 https://www.jsdelivr.com/package/npm/echarts 저희는 JS 의 script 로 사용할 것이기 때문에 echarts.min.js 가 필요합니다. 위 사이트에서 아래의 목록 클릭 그럼 다음과 같은 페이지에서 마우스 우클릭 -> 다른이름으로 저장 echart.min.js 파일을 얻었습니다. 이제 사용하기 위해서 프로젝트로 이동합니다. 적용 jsp 의 head 부분에 위와같은 스크립트 형식으로 적용합니다. 경로는 해당 min파일의 위치가 되..

• format_list_bulleted Javascript/Apache ECharts
• · 2023. 1. 10.
• textsms

jQuery $.each() 주의사항

이번 글은 jQuery의 함수인 each의 주의사항을 다뤄본다. each 함수는 기본적으로 for문이라고 봐도 무방하다. jQuery에서 제공하는 일반적인 iterator function 이다. callback 개념이 부족하다면 발생할 수 있는 경우와, each 함수의 return에 대해 알아볼 것이다. 반복문을 쓰는 이유 중 하나의 예로, 배열에 있는 값 중 원하는 값을 찾기 위해 루프를 돌린다고 가정하자. 코드는 아래와 같다. someArray = new Array(); someArray[0] = 't5'; someArray[1] = 'z12'; someArray[2] = 'b88'; someArray[3] = 's55'; someArray[4] = 'e51'; someArray[5] = 'o322'..

• format_list_bulleted Javascript/jQuery
• · 2021. 9. 15.
• textsms

[javascript] js.cookie를 이용한 오늘 하루 열지 않기 팝업 구현하기

들어가며: 모든 사이트에 하나씩은 있는 팝업을 구현하는 방법에 대해서 설명을 하려고 합니다. 팝업을 열어주는 방법은 매우 간단하게 구현이 가능하지만, 오늘 하루 열지 않기, 하루 동안 열지 않기를 구현하기 위해서는 쿠키(cookie)를 사용해야 합니다. 쿠키는 간단하게 말하면, 하이퍼 텍스트의 기록서(HTTP)의 일종으로서 인터넷 사용자가 어떠한 웹사이트를 방문할 경우 그 사이트가 사용하고 있는 서버에서 인터넷 사용자의 컴퓨터에 설치하는 작은 기록 정보 파일을 말합니다. 사용자의 접속을 기록으로 남길 수 있고, 사용자가 방문한 시간으로부터 30초, 10분 등 다양하게 쿠키를 저장하고, 만료(expire)를 시킬 수 있습니다. 만료를 시킨다는 내용은 그 시간 이후에 이 쿠키파일을 없애겠다 라는 말입니다. ..

• format_list_bulleted Javascript/JavaScript
• · 2021. 5. 2.
• textsms

[웹프로그래밍] HTML 페이지 데이터 로딩 화면 구현하기

들어가며 웹페이지를 구현하다 보면 데이터를 비동기 식으로 호출할때가 있습니다. 데이터를 요청하는 호출 이후에 페이지는 로딩은 됬는데, 데이터가 채워지지 않는 경우가 있습니다. 그렇기 때문에 사용자들에게 데이터를 호출하고 있는 상태입니다. 라는 페이지 로더를 구현을 해야합니다. 아래와 같은 그림 회전을하고, 데이터가 전부 로딩이 완료가 되면 로더는 화면에서 사라지고, 내가 사용자애들에게 보여주고자 하는 페이지를 보여주면 됩니다. 아래 예제는 html파일, css파일, 그리고 javascript파일을 작성했습니다. 참고해서 사용하고 싶은 곳에 로더를 구현해보세요. 로딩 페이지 (loading-page.html) 아래는 로딩 페이지를 구현한 html파일입니다. div 태그로 loader, container를 ..

• format_list_bulleted Javascript/JavaScript
• · 2021. 5. 2.
• textsms

[Javascript] jQuery를 이용해 검색 화면 및 기능 구현

들어가며 처음에 javascript, jQuery, ejs를 사용을 하다보면 각 역할을 유기적으로 연결하는게 참 어려운 문제라고 생각합니다. ejs에서 선언한 값을 어떻게 가져오는지, jQuery로 가져온뒤에 javascript에서는 어떻게 처리를 해야하는지도 감이 안올때가 있습니다. 간단한 예제중에 입력창에 입력을 받고, 입력한 데이터를 가져오는 버튼을 구현하면서 ejs와 jQuery, javascript를 전체적으로 연결하는 연습을 할 수 있습니다. 아래 예제는 입력창과 버튼을 ejs로 생성을 하고, javascript에서 jQuery를 이용해 input과 button의 reference의 값을 가져온 뒤에 이벤트를 바인딩하고 결과를 가져오는 예제입니다. 소스코드 search_view.ejs 아래 소..

• format_list_bulleted Javascript/JavaScript
• · 2021. 4. 30.
• textsms

[JavaScript] 자바스크립트 Ajax 사용하는 방법 (POST/GET)

들어가며 JavaScript에서 웹 개발을 할때 Front의 코드를 구현할때 Ajax를 이용하면 쉽게 서버로부터 데이터를 받아오고, 전송을 할 수 있다. 아래 소스코드는 nodeJs와 같이 웹 서버 프레임워크가 설치가 되어있고, 서버가 실행이 되어 있어, 해당 요청 URL을 처리를 할 수 있는 상태가 필요하다. 전송하는 방법은 앞서 설명했던 HTTP Request를 사용하고, 보통은 HTTP GET을 통해 서버로부터 데이터를 받아오고, HTTP POST를 통해서 데이터를 전송하는 방법을 사용하지만. POST로도 데이터 전송이 가능하다는 점~ 서버에서 Web Front로 데이터 전송 서버로 부터 초기의 데이터를 Web Application으로 불러오는 소스코드입니다. ajax로 설정한 url을 요청을 하면..

• format_list_bulleted Javascript/JavaScript
• · 2021. 4. 30.
• textsms

[JavaScript] 자바스크립트 Dictionary 사용하는 방법

들어가며 JavaScript를 하면서 가장 많이 사용하는게 Collection이 리스트라고 생각한다. 그 다음에는 Dictionary가 아닐까 싶다. 사실 Python을 할 때도 Dictionary는 매우 유용하게 자주 사용한다. Dictionary는 key, value의 pair로 저장하게 되는데 리스트에서 인덱스로 접근하는거와 다르게 key의 값으로 접근하기 때문에 원하는 값을 찾을때 빠르게 찾을 수 있는게 장점이다. 아래 예제 정도만 알면 Dictionary 구현은 쉽게 할 수 있지 않을까 싶다. 추가적으로 필요한 내용이 생각나면 바로바로 추가를 해야겠다. 소스코드 // Dictionary 사용하는 방법 var dictObject = {} dictObject['banana'] = '바나나'; dic..

• format_list_bulleted Javascript/JavaScript
• · 2021. 4. 30.
• textsms