개요 자바스크립트 코딩을 하다보면 객체에 접근시 이벤트를 발생하거나 Validate를 해야하는 경우가 있습니다. 이를 Proxy 객체로 감싸고 ( Wrapper ) Trap( 핸들러 메소드 ) 를 사용하여 제어하거나 로직을 심을수 있습니다. Proxy 객체에 대해서 알아보았습니다. 문서 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy Proxy - JavaScript | MDN Proxy 객체를 사용하면 한 객체에 대한 기본 작업을 가로채고 재정의하는 프록시를 만들 수 있습니다. developer.mozilla.org 틀린것이 있을 수 있으니 양해부탁드립니다. 틀린점은 댓글로 알려주시면 정말 감사드리겠습..

개요 스크립트 개발 혹은 공부를 하거나 면접 준비를 하다보면, 호이스팅 이란 개념에 대해 자주 나옵니다 호이스팅을 공부하다 보면, 이번엔 실행 컨텍스트를 공부를 필수적으로 해야 합니다. 제가 문서를 보고 분석한 내용을 설명하고자 합니다. 문서 https://262.ecma-international.org/6.0/ ECMAScript 2015 Language Specification – ECMA-262 6th Edition 5.1.1 Context-Free Grammars A context-free grammar consists of a number of productions. Each production has an abstract symbol called a nonterminal as its left-..

Var , Let & Const 이해 ES2015(ES6) 부터 변수 선언에 사용할 수 있는 let 과 const가 추가되었습니다. 이전 개발 자료 혹은 소스코드를 보게 되면, var 로 변수선언이 이루어진 경우가 많은데 정확히 무엇이 다른지 알아보겠습니다 Var 스코프 레벨 - 선언된 위치에 따라 나뉨 var 가 함수 외부에서 선언될 때의 범위는 전역범위가 됩니다. 즉 함수 외부에서 var를 사용하여 선왼된 모든 변수를 전체 윈도우 상에서 사용할 수 있습니다. var 가 함수 내에서 선언된 경우에는 함수 범위로 지정됩니다. 함수 내에서만 사용 가능하고 접근할 수 있습니다. - 외부사용불가 가능) var test = "테스트입니다" var test = "변경합니다" 또한 var test = "테스트입니다..

개발 환경 : ES6 , jQuery 문제 발생 : custom 한 jQuery 이벤트 명칭 찾기 해결 방법 : $._data($("#id")[0],"events"); 혹은 jQuery._data($("#id")[0],"events"); 개발을 하면서 퍼블리싱 업체가 준 datepicker 에 change 이벤트를 발생시키고 싶을때 문제가 발생했습니다. ("#target).on('change',function(){ //events }) 위의 코드를 적용시켜도 반응이 없었습니다. 해당 엘리먼트에 걸려있는 이벤트를 확인하기 위해 다음과 같은 방법을 사용하였습니다. let test = document.querySelector("#id"); getEventListeners(test); 동적으로 F12(개발자 도..

개요 프론트 개발을 하면서 ()=> ( 화살표 함수 ) `` ( 템플릿 코드 ) forEach filter 등 최신문법을 사용하여 개발하였습니다. IE 테스트 단계에서 문제가 발생했습니다. IE의 경우 ES6 이상의 문법을 사용하게 되면 오류가 발생합니다. 한국에서는 공공기관의 경우 Active X 사용으로 인해 Internet Explorer 의 사용 비중이 높습니다. 따라서 IE 환경도 고려를 해야 합니다. 이를 해결할 수 있는 방법이 Babel, Babel-Polyfill 사용입니다. 1. Babel Babel 은 자바스크립트 컴파일러 입니다. 컴파일이란 어떤 언어의 코드 전체를 다른 언어로 바꿔주는 과정입니다. 즉 Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ (..

클로저 : 함수가 선언 되었을 때의 렉시컬 환경 클로저를 이해하기 전에 먼저 스코프의 개념에 대해 알아야 합니다. 스코프는 함수를 호출 할 때 정해지는 것이 아니라 어디에 선언되었는지에 따라 나뉘게 됩니다. 코드를 보면서 이해해 보겠습니다. pagination 이라는 함수 안에 increase, decrease , status 라는 3가지 내부 함수가 선언되어 있습니다. 내부함수 입장에서 바라보면, pagination 함수는 외부함수 입니다. 함수가 실행되었을 때 관점에서 바라보면, 1] 내부함수가 호출된다. -> 해당 컨텍스트가 실행 컨텍스트 스택에 쌓임 2] 변수 객체, 스코프 체인, this 객체가 결정 3] 스코프 체인이 바인딩 될 때 전역 스코프 -> pagination 스코프 -> 자기 자신을..

사용 언어 : ES6 ,JQuery 목적] li 의 class 명이 Open 혹은 Put 2가지의 ul li 리스트가 있습니다. 그중 Open이 먼저 선택시 선택된 값 은 Put 리스트에서 선택할 수 없게 하는것이 목표입니다. 구조 : div -> ul -> li 의 구조] 화면] 문제 코드] $("#tpOpenDtYmd, #tpPutDtYmd").on("change",function (e) { $(".Open").on("click", function () { if (!($(".Put").children(".selectedhour").text() == '')) { let text = $(".Put").children(".selectedhour").text(); let hour = text.slice(0,..

목적 ] Jquery 와 ES6 를 사용하여 input type="file" 의 다중 업로드 및 제약조건 부여하기 Front 부분] 찾아보기 label 에 for를 이용하여 디자인을 입힐 수 있습니다. input type="file" 에 accept 속성을 이용하여 파일 첨부시 보여지는 파일을 정할 수 있습니다. 단 완전하게 막지는 못하기 때문에 Controller 부분에서 제어를 해줘야 합니다. Script 부분] 1] 사용할 DataTransfer 객체와 총 파일 업로드 가능한 수 선언 const dt = new DataTransfer(); let totalCount = 5; 2] 파일 업로드 될 때 이벤트 걸기 $('#filename').on('change', function () { 부분으로 파일..

[환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis ---- 개발 목표 : 기존에 만든 게시판에서 페이징 처리가 가능하도록 기능 추가 [완료화면] 10개씩 보기 20개씩 보기 이전 조회 기능에서 변경점] https://yn971106.tistory.com/77?category=1000475 [포트폴리오 페이지]_9단계_CRUD 게시판 구현_(feat.조회기능 구현) [환경] 개발툴 : IntelliJ DB : oracle 프레임워크 : spring , mybatis ---- 개발 목표 : 오라클 디비를 이용해서 게시판 CRUD 중 R(read) 만들기 [완료 화면] [디렉토리] [설명] board에 관한 controller 와 VO.. yn971106.t..

기존 코드 ] $("#" + tabclosename).click(function () { // create 한 template 노드에 해당 아이디를 가진 버튼에 리스너를 Jquery 를 이용하여 부여 }); $(document).on("click", "#" + tabname, function () { // 문서 전체를 기준으로 해당 아이디를 가진 a 테그에 이벤트 부여 }); 수정코드] node.querySelector('a').onclick = function(){ //a 태그 이벤트 부여 } node.querySelector('input[type=button]').onclick = function(){ //여기에 닫기버튼 이벤트 부여 } 핵심] // 템플릿 만드는 곳 let node = documen..

목표] 위와 같이 동작하면서 닫고 새로 열기 전까지는 파일을 로드하거나 통신하지 않도록 하였습니다.] 코드 & 설명] 각각의 메뉴버튼에 리스너를 달아줍니다. openCheck 함수와 createTemplate 함수를 만들어서 사용하였습니다. openCheck 함수] 이전 포스팅에 있는 localstorage를 이용하여 해당 tabname에 맞는 이름이 열려있는지 닫혀있는지를 판별합니다. 만약 열려있으면 true 닫혀있으면 false를 반환합니다. 따라서 위에서 tab이 중복으로 열리는것을 방지한 코드입니다. createTemplate 함수] function creatTemplate(menuname) { //이름 변경 let url; let name; switch (menuname) { case 'menu..

저번에 뒤로가기를 구현했을 때 stack 구조를 이용하여 구현하였습니다. 이번에는 탭을 끄고 난뒤 탭이 닫혀있으면 rule에 의하여 닫힌 탭은 content 부분에서 사라지고 나머지 탭이 보여지는 기능을 만들어 보고자 합니다. - 우선 linkedList 를 이용하면 될꺼라 생각해서 시도해 보았으나, 코드가 복잡해지고 구현이 안되었습니다. 이번 포스트는 원인분석과 과정을 써보았습니다. 다음 포스트에는 다른방법으로 시도해 볼 것입니다. 1] 기본적인 linklist 구조 class Node { constructor(data, next = null) { //data와 next를 넣고 next의 디폴트는 null로 지정 왜냐하면 linkedlist의 tail(마지막은) null로 끝나기때문 this.data ..