메바동 서식지

Javascript의 window.open()을 이용하여 팝업창을 열었을 때, 해당 창이 닫힐 때 특정 행동을 수행하고 싶었다. 찾아보니 beforeunload 이벤트를 설정해주면 됐었는데 열린 팝업창의 스크립트에서 설정하는 방법이 있고, 팝업창을 여는 곳에서 직접 설정해주는 방법이 있었다. 열린 팝업창의 스크립트에서 설정하는 경우는 그냥 window.addEventListener('beforeunload', function(event) { // 특정 작업 }); addEventListener를 통해 beforeunload 이벤트를 정의해주면 된다. 하지만 내가 원한 작업은 부모 페이지의 요소를 변경하는 것이기 때문에 팝업창에 이벤트를 정의해주고 opener. ~ 하면서 작업하는 것보다 부모 페이지에서 ..

오늘 이것저것을 하던 중 Ajax의 결괏값을 변수에 대입하려고 하였는데 아무리 변수에 대입을 해도 원하는 결과가 나오지 않았다. var useYn; $.ajax({ url: 'http://localhost:8080/example', dataType: "json", type: "POST", data: { userSeq: $('#userSeq').val() }, success: function (result) { useYn = result; }, }); 이런 식으로 사용자의 시퀀스로 DB에 사용 여부를 조회한 다음 true, false를 useYn에 대입해주려고 하였다. 그런데 계속 원하는 결과가 나오지 않았고 디버그를 해보니 useYn의 값이 계속해서 undefined 였다. 그래서 jQuery.ajax(..

유튜브를 보다 보면 한국인이 올린 영상에 아무리 스크롤을 해도 한글로 작성된 댓글이 나오지 않는 경우가 많았다. 그래서 올해 초부터 '기회가 된다면 한글로 작성된 댓글만 필터링해서 보여주는 크롬 확장을 만들어보자.'라고 생각만 하고 만드는 방법도 제대로 모르겠고 귀찮기도 해서 만들지 않았었다. 이제 회사를 9개월 정도 다니다 보니 대충 어떤 식으로 뭘 찾아서 응용하면 되는지 알 수 있는 능력이 생긴 것 같았고 계속 생각만 했던 한글 댓글만 보여주는 확장 프로그램을 만들기로 하였다. 우선 생각한 게 댓글을 불러오는 ajax가 있을 거라 생각하였고 무작정 유튜브에 들어가 관리자 도구를 열었다. 그런 다음 댓글을 불러온 뒤 네트워크 탭에서 확인을 해보니 알기 쉽게 comment라고 붙어있는 ajax가 바로 보..

table을 이용하여 가입 경로를 표시해 주는 화면이 있었는데 기타 항목은 그 밑으로 세부 사항을 표시해 주고 있었다. 위와 같은 느낌이었는데 당연한 거지만 디자인은 훨씬 깔끔하고 제대로 된 내용이 담겨 있었다. 나는 이 화면에서 기타는 접혀 있다 사용자가 더 보기를 원할 때 클릭해서 하위 항목이 열리는 화면으로 바꾸고 싶었고 아무 생각 없이 ::after를 이용해 삼각형을 표시해주었다. .toggle::after { content: ''; position: absolute; top: 140px; left: 195px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top..

창이 열리면 input 태그에 focus를 주어야 하는데 자꾸 다른 곳에서 DOM이 변경되면서 focus가 나가버리는 상황이 있었다. 고민하다가 DOM이 변경될 때 input 태그에 focus를 주는 방법을 없을까? 하고 찾아보니 Mutation Observer가 있었다. 추가하기 1번 아이템 다음과 같이 페이지에서 ul에 li가 추가되거나 텍스트의 내용이 변경되거나 속성이 변경되거나 하는 것들을 감지하고 싶다면 Mutation Observer를 사용하면 된다. Mutation Observer를 이용하면 특정 노드의 DOM 변경을 감지할 수 있다. html 태그나 body 태그에 사용하여 페이지의 전체적인 변경을 감지할 수도 있을 것 같다. 위에 작성한 예제에 ul에 li가 추가될 경우 alert을 띄우..

Chart.js를 이용해서 원형 차트를 그리고 사용자 지정 범례를 만들어야 했다. 한 번도 사용한 적이 없어 사용 방법을 찾아보니 그리 어려운 라이브러리는 아니었다. window.onload = function () { pieChartDraw(); } let pieChartData = { labels: ['foo', 'bar', 'baz', 'fie', 'foe', 'fee'], datasets: [{ data: [95, 12, 13, 7, 13, 10], backgroundColor: ['rgb(255, 99, 132)', 'rgb(255, 159, 64)', 'rgb(255, 205, 86)', 'rgb(75, 192, 192)', 'rgb(54, 162, 235)', 'rgb(153, 102, 25..