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

목적 : 오늘 날자 구하기, 오늘 날자로부터 7일 뒤 날자 구하기, 년,월 이 지나도 정상적으로 작동 유지 문제점 : 년 월 일 을 나눠서 "-" 를 붙이면서 각각의 종류가 최대치를 넘기는 경우의 수를 예상하지 못하여 33일 등 말도 안되는 날자가 출력된 점 수정 let day = date.getDate() +7; 해결: let date = new Date(); date.setDate(date.getDate() +7); let year = date.getFullYear(); let month = date.getMonth() +1; let day = date.getDate(); let stringDate = year+"-"+month+"-"+day; date 객체를 생성한 뒤. setDate 를 사용해서 ..

목적 : 뒤로가기 버튼 구현 문제점 : 글 작성 -> 목록 -> 뒤로가기 버튼 클릭시 작성 페이지로 이동함과 동시에 값이 남아있는 점 history.back() 을 사용했을 때 로딩 되는 페이지에서 해당 url 로 인한 진입인지, back으로 돌아온 페이지 인지 감지하여 함수를 동작시킬 수 있습니다. window.onpageshow = function(event){ if(event.persisted || (window.performance && window.performance.navigation.type == 2)){ service.onLoadPage(); } } 해당 함수가 시작됨 -> back으로 돌아옴 -> 미리 지정한 로딩함수 등을 설정하여 값을 초기화 하는 방식으로 동작하게 하여, back버튼..

사용 언어 : 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 () { 부분으로 파일..

포스팅 목표] 파일 업로드 방식 중 많이 사용하는 을 사용해 여러파일을 등록 가능하게 하며, 등록된 파일의 썸네일 표출 , line 별 삭제기능 구현 방식 설명 완료화면] HTML ] 제목 : 내용 : 파일첨부 : 파일 등록 등록 취소 Input type="file" 을 그대로 사용하면, 버튼부분과 text 부분으로 나뉘는데, 동적변환시 해당 text가 바로바로 바뀌지 않아서 label 을 사용하여 클릭이벤트를 위임하고, css를 사용해서 input 을 숨길 것입니다. 또한 여러 파일을 전달할 수 있도록 multiple 속성을 부여합니다. CSS] .fileuploder label { display: inline-block; padding: .5em .75em; font-size: inherit; lin..

기존 코드 ] $("#" + 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 ..

목표] 메뉴 1, 메뉴 2를 선택하면 바로 아래부분에 a태그와 button을 가진 template이 추가되며 글로벌 변수에 open인지 close인지 상태를 저장한다. 메뉴의 종류에 따라 contents부분이 해당 jsp파일의 내용으로 교체된다. 히스토리 로드를 클릭하면 (뒤로가기) 이전에 객체형태로 저장한 content를 보여준다. 자료구조는 stack을 사용하였고, 뒤로갈 페이지가 없을시 해당 alert를 호출한다. 코드분석] 1] 메뉴 1, 2클릭 구현 각각 onclick 함수로 오프너 함수와 checktab 함수에 각각 메뉴인자를 전달. 2] menuopener함수 JQuery의 load 함수를 이용해서 content가 있는 부분인 의 id인 menucontent 부분을 해당 requestMapp..

팝업창과 모달창] 팝업창: 열려있는 브라우저 페이지에 다른 브라우저 페이지를 띄우는 것 -> 즉 창과 창 관계이기 때문에 부모의 창을 자식창을 띄워둔 상태에서도 조작이 가능하다. 모달창: 기존의 브라우저 페이지 위에 레이어를 까는 것입니다. 모달창을 띄웠을 때는 부모의 페이지를 조작 할 수 없다. 둘다 부모의 정보를 자식에게 줄 수도, 자식의 정보를 부모에게 전달 할 수도 있다. 오늘은 우선 간단하게 팝업하는 것만 해보았습니다. 목표] 버튼 클릭시 간단하게 팝업이 뜨는 모습입니다. 사용 메소드 : window.open(); https://developer.mozilla.org/ko/docs/Web/API/Window/open Window.open() - Web API | MDN Window 인터페이스인 ..

목표] 위와 같이 textfield에 값 입력시 local 저장소에 저장이 되는 것을 해보았습니다. 우선 사용한 메소드를 알아보겠습니다. 값 저장하기] setItem(keyName, keyValue); window.localStorage.setItem(constant,data); keyName으로 key의 값을 저장 이를 불러오는 방법] getItem('KeyName') let userData = window.localStorage.getItem(constant); 그외 사용가능한 window.localStorage 메소드 제거] localStorage.removeItem('KeyName') 전체 제거] localStorage.clear(); ---XMLHttpRequest--- XMLHttpReques..