JavaScript 'console' 객체 제어하기

필자는 웹 개발자다. 대부분 Chrome 브라우저를 사용하며, 동시에 개발자 도구를 띄워놓는다.종종 우리네의 실수가 아님에도, 혹은 데이터 확인 용도로 출력하는 console 내역들이 많을 수 있다.너무 보기 싫었다. 그래서 작성한다.   console 객체 자체가 전역으로 선언되어있기에, 해당 함수 또한 전역으로 사용할 수 있다.console 객체 내 신규로 넣어준 함수의 설명은 다음과 같다.console.off()document loading 완료 시, 기본적으로 실행된다.console 객체 내 함수들을 비어있는 함수 function() {} 로 선언해버려 작동을 방지한다.console.on()console 로그를 보고 싶을 때, 개별적으로 선언해줘야 한다.console 객체 내 함수들을 원복시켜 작..

• format_list_bulleted JavaScript/Default
• · 2024. 7. 15.
• textsms

XSS(Cross Site Scripting) 특수 문자열 변환(parsing)

XSS(Cross Site Scripting)XSS(Cross Site Scripting) 사이트 간 스크립팅이라고 불리는 공격에 대해서는 다른 블로거들이 정리를 잘 해놓았으니, 검색해서 알아보자. 필자는 DataBase 내 정상적으로 적재된 특수 문자열을 XSS 방어를 위해 별도 변환(parsing)을 한다. 마침 변환에 필요한 자료를 잘 정리하신 블로거 분이 계시니, 참고 바라며(최하단 출처에 기재). 하단에 기술된 내용은 필자가 사용하기 위해 별도 가공한 결과물을 공유하는 바이다.  XSS escape Object필자는 javascript를 통하여 미리 선언한 함수로 특수문자의 안전한 XSS excape를 시켜준다. 지역 변수로 해당 과정에 필요한 값들을 Object 형태로 담아두는데, 아래와 같다..

• format_list_bulleted JavaScript/Default
• · 2023. 3. 15.
• textsms

JavaScript Array 관련 내장 함수

JavaScript Array 내장 함수JavaScript 내 array 형태의 변수를 컨트롤 할 수 있는 내장 함수들에 대해 살펴보겠다.값 확인값 추가 // push(Object obj)값 제거(가장 마지막에 할당된) // pop()값 제거(가장 처음에 할당된) // shift()값 제거(인덱스를 이용한) // splice(int param), splice(int param, int param)값 추가(인덱스를 이용한) // splice(int param, int param, Object obj ... ...)  Array 값 확인테스트 목적으로 Array 변수를 다음과 같이 선언하였다.test: () => { // 테스트 array 선언 let testAry = ["오이", "피클"]; debugg..

• format_list_bulleted JavaScript/Default
• · 2022. 6. 15.
• textsms

Kendo UI [5] Toolbar

Toolbar 예제 jQuery 기반의 환경에서 구성할 수 있는 Kendo UI 중 Toolbar에 대해 알아보도록 하겠다. telerik 사에서 제공하는 기본 예제들은 다음의 URL을 통해 확인할 수 있다. https://demos.telerik.com/kendo-ui/toolbar/index Toolbar 예제 거의 왠만한 사용법은 공식 홈페이지의 demo, 그리고 공식 docs를 번역하여 확인하면 능숙하게 사용할 수 있다. telerik 사에서 다른 것은 몰라도 예제 만큼은 정말 풍부하게 잘 구현해놓았기 때문이다. 그렇기에 필자는 그 중에서도, 특히나 자주 사용될 것 같은 예제들에 대한 key point 만을 테스트하며 작성해보도록 하겠다. 1. Toolbar 영역 생성 다음과 같이 Kendo UI..

• format_list_bulleted JavaScript/Kendo UI
• · 2021. 8. 31.
• textsms

Kendo UI [4] DropDownList API

Kendo UI DropDownList API Kendo UI를 이용한 dropDownList를 control 할 수 있는 API 기능에 대해 알아보도록 하겠다. 필자가 느끼기에 API 라기에는 조금 애매한 듯 한데... telerik의 공식 docs에서 API라고 설명하니 그렇다고 하자. 1. API Function (상태 변경 : 읽기 전용, 비활성화, 활성화) 이번 게시물은 Kendo UI [3] DropDownList 게시물의 연장선으로 보면 되는 게시물이다. 그러므로 Kendo UI [3] DropDownList 게시물에서 사용한 소스코드를 재활용하도록 하겠다. 기존의 소스를 다음과 같이 수정하도록 하자. API Functions 읽기전용 비활성화 활성화 Example Kendo UI를 통하여 ..

• format_list_bulleted JavaScript/Kendo UI
• · 2021. 8. 31.
• textsms

Kendo UI [3] DropDownList

DropDownList 예제 jQuery 기반의 환경에서 구성할 수 있는 Kendo UI 중 DropDownList에 대해 알아보도록 하겠다. telerik 사에서 제공하는 기본 예제들은 다음의 URL을 통해 확인할 수 있다. https://demos.telerik.com/kendo-ui/dropdownlist/index DropDownList Custom 예제 거의 왠만한 사용법은 공식 홈페이지의 demo, 그리고 공식 docs를 번역하여 확인하면 능숙하게 사용할 수 있다. telerik 사에서 다른 것은 몰라도 예제 만큼은 정말 풍부하게 잘 구현해놓았기 때문이다. 그렇기에 필자는 그 중에서도, 특히나 자주 사용될 것 같은 예제들에 대한 key point 만을 테스트하며 작성해보도록 하겠다. 1. Te..

• format_list_bulleted JavaScript/Kendo UI
• · 2021. 8. 31.
• textsms

JavaScript 변수 선언 방식(var, let, const)

JavaScript에서의 변수 선언 java에서는 변수를 선언함에 있어, 해당 변수에 대하여 형태를 지정해줘야했다. 예를 들자면 다음과 같이 말이다. 문자열 / String test = "test"; 정수형 / int test = 0; 실수형 / double test = 0.2; boolean형 / boolean test = true; 그러나 기존의 JavaScript에서는 [ var ] -라는 형식으로, 혹은 생략함으로써 변수를 선언할 수 있었다. 다음과 같이 말이다. var test = "test"; var test = 0; var test = 0.2; var test = true; JavaScript의 ES 버전이란? JavaScript에서의 변수 선언 방식을 확인하기 전, JavaScript의 E..

• format_list_bulleted JavaScript/Default
• · 2021. 8. 31.
• textsms

Kendo UI [2] Grid

Grid 예제 jQuery 기반의 환경에서 구성할 수 있는 Kendo UI 중 Grid에 대해 알아보도록 하겠다. telerik 사에서 제공하는 기본 예제들은 다음의 URL을 통해 확인할 수 있다. https://demos.telerik.com/kendo-ui/grid/index Grid Custom 예제 거의 왠만한 사용법은 공식 홈페이지의 demo, 그리고 공식 docs를 번역하여 확인하면 능숙하게 사용할 수 있다. telerik 사에서 다른 것은 몰라도 예제 만큼은 정말 풍부하게 잘 구현해놓았기 때문이다. 그렇기에 필자는 그 중에서도, 특히나 자주 사용될 것 같은 예제들에 대한 key point 만을 테스트하며 작성해보도록 하겠다. 1. Test Data 및 Grid 영역 생성 grid에 들어가게될..

• format_list_bulleted JavaScript/Kendo UI
• · 2021. 8. 24.
• textsms

Kendo UI [1]

Kendo UI 소개 Kendo UI는 telerik 사에서 만든 library의 하나이다. Kendo UI는 jQuery 및 Angular, React, Vue 언어를 사용하는 환경에서 사용할 수 있으며 공식 docs에서는 이렇게 소개하고 있다. Kendo UI는 대화형 고성능 웹 사이트 및 애플리케이션을 구축하기 위한 포괄적인 HTML5 사용자 인터페이스 프레임워크입니다. 이 제품에는 70개 이상의 UI 위젯 라이브러리, 풍부한 데이터 시각화 가젯, 클라이언트측 데이터 원본 및 내장 MVVM(Model-View-ViewModel) 라이브러리가 함께 제공됩니다. jQuery용 Kendo UI는 Angular를 제공합니다.JS와 Bootstrap 통합은 프로젝트 요구 사항에 따라 선택할 수 있는 여러 제..

• format_list_bulleted JavaScript/Kendo UI
• · 2021. 8. 24.
• textsms