예전부터 정규식 개체(Regexp)를 사용할 때 값이 제대로 일치하다 말다 한다는 생각을 많이 했습니다. 그래서 가급적 정규식 개체를 사용하지 않았는데...... 의외로 원인은 쉬운 곳에 있었습니다. 1. 문제의 발견 아래와 같이 정규식 개체를 만들고 /** 정규식 개체 */ reg = /\{\{[a-zA-Z0-9]+:[a-zA-Z0-9]+\}\}|\{\{[a-zA-Z0-9]+\}\}/g /** 테스트 문자열 */ testString = "{{test001}}, {{test001:test1}}, {{test001:a}}, {{aa}}"; 아래와 같이 정규식 개체를 사용하는 함수를 만들어 줍니다. private F1(): void { console.log("F1 : " + this.reg.exec(this..

정규식을 사용할 때 테스트로 다음과 같은 사이트들을 이용합니다. regexr.com regex101.com 1. 문제의 발견 다음과 같은 정규식을 만들면 아래와 같은 결과가 나옵니다. /\{\{[test001]+:[a-zA-Z0-9]+\}\}|\{\{[test001]+\}\}/g //테스트용 텍스트 {{test001}}, {{test001:test1}} 그런데 이걸 자바스크립트에 넣으면 아래와 같이 하나만 적중되는 현상이 일어납니다. //let sReg = "/\{\{[test001]+:[a-zA-Z0-9]+\}\}|\{\{[test001]+\}\}/g";//결과 : null let sReg = "\{\{[test001]+:[a-zA-Z0-9]+\}\}|\{\{[test001]+\}\}/g"; let r..

자바스크립트(Javascript)에서 'this'는 일반적인 언어에서의 'this'와 조금 다릅니다. 이것은 자바스크립 특성때문입니다. 0. 테스트 코드 작성 설명하기 전에 테스트에 사용할 코드를 작성해 봅시다. index.html 환영! 클릭!! 클릭2!! 클릭3!! 클릭4!! app.js export default class StartUp { A = "StartUp A"; B = "StartUp B"; constructor() { document.getElementById("btnClick").onclick = this.TestCilck; document.getElementById("btnClick2").onclick = this.TestCilck2; document.getElementById("bt..

오류 내용만 보면 "뭔 소린가?" 싶겠지만 정확하게 오류 원인을 설명하고 있습니다. Failed to execute 'fetch' on 'Window': Request with GET/HEAD method cannot have body. '창'에서 '가져오기' 실행 실패: GET/HEAD 메서드를 사용한 요청은 본문을 가질 수 없습니다. 1. 원인 'fetch'를 'GET'이나 'HEAD'로 호출했을 때 바디(body)이 있다면 발생하는 에러입니다. 이 두 메소드는 본문을 가질 수 없고 대신 URL 쿼리로 데이터를 전달합니다. 그래서 바디가 있다면 에러가 나게 됩니다. 2. 해결 방법 인터넷을 뒤져보면 'POST'로 바꾸라는 소리도 나오는데..... 그건 'REST(Representational Stat..

자바스크립트(javascript)에서 콜백 대안이라고 프로미스(promise) 내놨을 때는 뭐 하는 짓인가 싶었는데.... 다른 언어들처럼 어싱크/어웨이크(async/await)가 생기면서 이제야 좀 비동기 관리가 편해졌네요 ㅎㅎㅎ 테스트 한번 해봅시다. 1. 패치(fetch) 기존의 XMLHttpRequest대신 패치(fetch)를 사용하는 것이 좋습니다. 패치(fetch)로 네트워크 통신을 하면 프로미스(promise)처리가 가능한 리스폰스가 리턴됩니다. (MDN - Fetch API, Using Fetch, XMLHttpRequest ) 예> fetch('http://example.com/movies.json') .then(response => response.json()) .then(data =>..

DG_jsModuleLoad 1.0 - 다중 파일 로드(다운로드하여 내용을 전달) 기능 - 각 파일 로드 완료 시 콜백 제공 - 모든 파일 로드 완료 시 콜백 제공 테스트 용 프로젝트 : https://github.com/dang-gun/DotNetSamples/tree/master/JavascriptUtilTest 프로그램 소스 : github - https://github.com/dang-gun/DG_JavaScript_Utility/tree/master/DG_jsModuleLoad Author : Dang-Gun Roleeyas ( http://blog.danggun.net/ ) Create date : 2021.12.01 License : MIT( https://opensource.org/lice..

ES6(ECMAScript6)에서 생긴 기능 중에 Import/Export라는 기능이 생겼습니다. 개념은 다른 언어들의 using(C#), import(Java) 등등을 구현한 것입니다. 0. 서론 html에서 자바스크립트(Javascript) 파일을 전역 스코프(scope) 불러와 사용하는 것이 기존 방식입니다. 이 방식의 문제는 1) 각자 참조하고 있는 파일이 무엇인지 확인하는 것이 어렵다. 2) 한 번에 스크립트를 모두 메모리에 올리다 보니 첫 로딩이 길다. 3) 전역 스코프에 올리다 보니 외부 라이브러리를 사용할 때 변수명이 겹쳐서 문제가 발생하는 경우가 있기도 하다. (이건 라이브러리 설계를 잘하면 회피 할 수 있습니다.) 이러한 문제들이 있습니다. 그래서 다른 언어들 처럼 참조를 명시하도록 하..

DG_JsFileSelector 0.8- 파일 드래그 엔 드롭 기능- 파일 선택 기능- 서버 업로드를 위한 개체 제공 라이브러리 테스트 : https://dang-gun.github.io/DG_JavaScript_Utility/DG_JsFileSelector/DG_JsFileSelector.html프로그램 소스 : github - dang-gun/DG_JavaScript_Utility/DG_JsFileSelector Author : Dang-Gun Roleeyas ( http://blog.danggun.net/ )Create date : 2020.04.24License : MIT( https://opensource.org/licenses/MIT ) 사용기술 : javascript, jQuery 유틸리티 ..

DG_Popup 1.0- DIV 팝업(혹은 다얄로그)를 생성하고 관리- 팝업에서 팝업을 열어 관리함- 사용자가 만든 Html을 사용함- 창 이동 가능 라이브러리 테스트 : https://dang-gun.github.io/DG_JavaScript_Utility/DG_Popup/DG_Popup.html프로그램 소스 : github - dang-gun/DG_JavaScript_Utility/DG_Popup/ Author : Dang-Gun Roleeyas ( http://blog.danggun.net/ )Create date : 2019.02.27License : MIT( https://opensource.org/licenses/MIT ) 사용기술 : javascript, jQuery 유틸리티 설명Div로 팝..

JsDataBind 1.0- 자바스크립트를 이용한 데이터 교체 라이브러리- 문자열을 'Json'으로 받은 데이터로 교체기능- 사용자 정의 패턴 정의 가능 라이브러리 테스트 : https://dang-gun.github.io/DG_JavaScript_Utility/DG_JsDataBind/test/index.html 프로그램 소스 : (깃 허브) dang-gun/DG_JavaScript_Utility/DG_JsDataBind/ Author : Dang-Gun Roleeyas ( http://blog.danggun.net/ )Create date : 2019.09.20License : MIT( https://opensource.org/licenses/MIT ) 사용기술 : javascript 라이브러리 설명..