Dev/Frontend

크롬브라우저 개발자도구에서 POST로 API 호출하는 방법// 전달할 데이터 포맷을 설정합니다 // 데이터 설정 예시const formData = new FormData();formData.append('id', 2); formData.append('mode', 'insert'); formData.append('page', 1); formData.append('etc', null);// POST로 API 호출fetch('{API URL 작성}', { method: 'POST', body: formData}) .then(response => response.text()) .then(data => console.log(data)) .catch(error => console.error('E..

Dev/Frontend

최근에 자주쓰고있는 차트 사이트 amcharts 개인적으로 기능성, 응용성, 디자인 세 가지 모두 괜찮은 차트다.사용법도 너무 간단하고, 디자인도 예쁘고, 무엇보다 응용력이 쩌는 차트!한 차트를 가지고 기능을 추가하고 삭제하면서 무한히 새로운 차트를 만들 수가 있다. 무료버전은 차트의 왼쪽하단에 amcharts의 브랜드마크(?)가 있고, 유료버전은 마크 없이도 사용가능하다고 한다.   amcharts(www.amcharts.com/demos/)  사이트에 들어가면 데모를 볼 수 있는데, 원하는 차트를 클릭하면 코드 전체를 볼 수 있고, 사이트의 상단 메뉴바에 있는 Docs 를 들어가면 차트들을 어떻게 응용하여 사용할 수 있는 지 친절하게 알려준다.Chart Demos - amCharts www.amcha..

Dev/Frontend

맨날 구글링해서 찾기 불편해서 써두는 제이쿼리 최신버전 링크~   html 상단에다가 복붙하면 바로 사용가능하다

Dev/Frontend

openlayers의 기본 지도 타일맵(배경지도)은 OpenStreetMap(OSM)인데요. 이 배경지도를 카카오나 네이버, 구글, 브이월드 타일로 변경해보려고 합니다. 1. vworld 배경 지도 사용하기 vworld에는 2D (일반, 위성, 하이브리드), 3D지도가 있습니다. 2D 지도 타일 요청방법에 대해서는 vworld 오픈API에서 확인할 수 있습니다. https://www.vworld.kr/dev/v4dv_wmtsguide_s001.do 브이월드 오픈API WMTS/TMS API 레퍼런스 WMTS/TMS API 레퍼런스입니다. --> WMTS 레퍼런스 WMTS 레퍼런스 TMS 레퍼런스 WMTS 레퍼런스 TMS 레퍼런스 소개 WMTS(Web Map Tile Service) 및 TMS(Tile M..

Dev/Frontend

먼저 datatables cdn들을 임포트합니다. 자세한 다운로드 / cdn 임포트 방법은 아래 홈페이지를 참고하세요. https://datatables.net/download/ Download Download Compatibility A detailed compatibility table shows the browser's that DataTables supports and also which features of the extensions can be used with the other extensions. A few features may not always be fully compatible with every other aspect of datatables.net html에 동적으로 생성할 빈 ..

Dev/Frontend

가끔 javascript 사용하다가 구글링하기에는 귀찮고 함수 이름을 보면 알 것 같은데 뭐였는지 기억이 안날 때 활용할 수 있는 방법을 기록하려고 합니다. console 을 예로 들면 console.log() 함수가 있고, console.debug(), console.dir(), console.clear() 등등이 있는데요. 이 외에도 많습니다. Object.getOwnPropertyNames(console); (25) ['debug', 'error', 'info', 'log', 'warn', 'dir', 'dirxml', 'table', 'trace', 'group', 'groupCollapsed', 'groupEnd', 'clear', 'count', 'countReset', 'assert', 'p..

Dev/Frontend

NodeList.prototype.forEach() NodeList 인터페이스의 forEach() 메서드는 리스트 내의 각각의 값 쌍에 대해 매개 변수에 지정된 콜백을 삽입 순서로 호출합니다. 문법(Syntax) NodeList.forEach(callback[, thisArg]); 파라미터, 리턴 값, 예외처리 관련해서는 공식 문서를 참고하세요. https://developer.mozilla.org/ko/docs/Web/API/NodeList/forEach NodeList.prototype.forEach() - Web API | MDN NodeList 인터페이스의 forEach() 메서드는 리스트 내의 각각의 값 쌍에 대해 매개 변수에 지정된 콜백을 삽입 순서로 호출합니다. developer.mozill..

Security/CTF

문제 개요 Javascript Debugging and Deobfuscating Source Code 문제 풀이 우선 개발자도구로 디버깅하는 것을 막는 것이던지 개발자도구로 디버깅을 할 수 없었습니다. 그래서 일단 주어진 html 소스코드로 분석을 진행하였는데요. // Prevent setting breakpoints €from the dev console UI directly€ by defining the function as string var code = `\x60 console.log({flag}); for (i=0; i 0) if(flag.shift() != pool.splice((i = (i || 1) * 16807 % 2147483647)%pool.length, 1)[0]) return fa..

Dev/Frontend

원하는 구간만 계속해서 반복하여 복제하는 코드 html 이름 전화번호 추가 jquery/javscript 복제결과 !

Dev/Frontend

section 클래스를 가진 div에 clone_div 클래스를 가진 div를 복제하여 붙여넣었습니다. 하지만 여기서 오류가 등장.. 아래 클릭이벤트가 호출되지 않습니다. clone_div = $(".clone_div").clone(); $(".section").append(clone_div); $(".clone_div").click(function(){ .... }) 요 문제를 해결하기 위한 두가지 방법! 1. 아래와 같이 document가 생성된 후 클릭하면 호출되도록 변경합니다 $(document).on("click", ".clone_div", function(){ .... }) 2. 복제시 파라미터로 true를 넣어주면 됩니다 clone_div = $(".clone_div").clone(true)..

Dev/Frontend

[오류해결] Uncaught TypeError: Cannot read properties of null / Uncaught TypeError: Cannot read properties of undefined JavaScript 개발자라면 정말 많이 봤을 법한 오류 문장이죠? 아래 오류는 정의되지 않은(undefined) 객체(object)의 속성(property) 값 또는 함수를 읽으려고 하거나 호출하려고 할 때 발생하는 오류입니다. 그리고 아래 테스트 결과는 실제로 크롬브라우저의 개발자도구(F12)의 Console 탭에서 오류를 발생하게 하여 출력해본 결과입니다. 보시다시피 domdomi 라는 변수가 있고 그 변수에 blog 라는 property 가 존재하는지 확인해봤을 때 애초에 정의조차 하지 않았기..

Dev Env/DB

말머리 본 포스팅은 dreamhack(드림핵)의 mongoboard라는 문제를 풀다가 정리하는 내용입니다. 문제 내용이 궁금하다면 아래 링크를 참고해보세요. 별로 궁금하지 않다면 다음 제목으로 넘어가세요. https://dreamhack.io/wargame/challenges/128/ mongoboard Description node와 mongodb로 구성된 게시판입니다. 비밀 게시글을 읽어 FLAG를 획득하세요. MongoDB < 4.0.0 dreamhack.io 해당 문제는 아래와 같이 게시글 목록이 존재하고 관리자가 작성한 글에만 mongodb의 ObjectID가 보이지 않는 형태인데요. 다만 이렇게 /detail/{ObjectID} 로 직접 접속하게 되면 비밀 글도 보이게 되는 비인가 접근이 가능..