자바블로그

javascript 에서 const로 선언한 상수에 다시 값을 지정 하려고 하면 발생되는 에러 메시지

const dataNum = 1;

dataNum = 2; <-- 이 순간 에러 발생

const --> let 로 변경 하거나 해당 영역에서만 사용할 인스턴트 변수를 선언해서 활용 해야 함

작업 시 ajax 호출을 빈번하게 하는 경우 코드를 줄이기 위한 공통 코드 샘플 입니다.

-- ajax 호출 시 사용하는 공통코드 옵션은 상황에 맞춰서 추가, 삭제 해주면 됩니다.

const ajaxCall = {
   mainCall:function(url, type, dataType, successCallBack){
      $.ajax({
         url:url,
         type:type,
         dataType:dataType,
         beforeSend:function(xhr){
            //csrf 토큰 추가시 활성화 필요
            //xhr.setRequestHeader(token_header, token);
         },
         success:function(response){
            if(!cmmnUtil.isEmpty(successCallBack)){
               successCallBack(response);
            }
         }
      });
   }
}

- 넘겨받은 정보 체크 함수
const cmmnUtil = {
   isEmpty:function(value){
      if(value=="" || value==null || value==undefined){
         return true;
      }else{
         return false;
      }
   }
}

위의 코드를 html페이지에서 

ajaxCall.mainCall('/test/data/call', "get", "json", function(response){
   console.log(response);
});

형식으로 호출 할 수 있습니다.

vue.js 작업을 위한 vs-code관련 설정을 정리 합니다.

1. node.js 설치

2. vs-cdoe 설치

3. vue.js 작업을 위한 패키지 추가

3단계를 거치게 됩니다. 1,2번의 내용은 

https://kooremo.tistory.com/entry/window-react-%EA%B0%9C%EB%B0%9C-%ED%99%98%EA%B2%BD-%EC%84%A4%EC%A0%95

을 참고로 작업 해주시면 됩니다.

vs-code설치 후 실행 한뒤 초기 프로젝트 폴더로 비어있는 폴더를 생성 하고 해당 폴더를 선택 합니다.

왼쪽 최 하단의 Extensions 아이콘 혹은 view>Extensions 확장 메뉴를 선택 합니다.

Live Server->html파일을 localhost로 접속 할 수 있게 해주는 가상서버
Vetur->vue 코드 하이라이트,자동생성 등의 기능이 추가 됩니다.
vue->문법확인에 사용 됩니다.
Vue VSCode Snippets->vue코드 초기 구성 및 코드가이드 추가

4가지를 검색 및 install 해줍니다.(ESLint, Vue Peek 등을 추가 해도 좋습니다.)

index.html을 만들어 주고 vue관련 기본 코드를 작성 해줍니다.(첨부파일 참조

)

소스코드에서 오른쪽 마우스 클릭 후 'Open with Live Server' 메뉴를 클릭 해줍니다.

우클릭 후에 해당 메뉴가 나오지 않는 경우 확장 메뉴의 live server들어가 보면 

이렇게 보이는게 아닌 Enable 하지 않은 상태 일 수 있습니다.

Enable를 선택 해주시면 됩니다.

http://127.0.0.1:5500/index.html

접속 해주면 동작 하는걸 확인 할 수 있습니다.

전자정부 프레임웍의 validation을 사용할 수 없게 되어 jquery validation을 적용한 내용을 정리 했습니다.

정리에 참고한 사이트는 아래와 같습니다.

https://jqueryvalidation.org/validate/

사용하는 기본 방법은 위의 페이지를 참고 하면 됩니다.

간략하게 정리하면

1) 관련 파일 다운로드(https://github.com/jzaefferer/jquery-validation/releases/tag/1.19.3)

2) 다운로드 폴더의 dist 하위의 .min.js 파일 프로젝트에 등록

3) 사용하려는 페이지 혹은 layout페이지에 추가

<script src="../../plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="../../plugins/jquery-validation/additional-methods.min.js"></script>
<script src="../../plugins/jquery-validation/localization/messages_ko.min.js"></script>

4) 사용하려는 페이지의 form 태그 ID값으로 유효성 체크 호출

$("#siteInfoForm").validate();

간단하게 form유효성 체크를 추가 할 수 있습니다.

해당 플러그인의 옵션이 있는데 해당 옵션을 이용해서 사이트정보를 입력, 수정하는 페이지에 필요한 방식으로

좀더 추가를 해보려고 합니다. 사용하는 옵션은 아래와 같습니다.

--옵션

debug(false): 디버그 할 수 있도록 입력값이 유효해도 submit 하지 않는다.

submitHandler: 폼이 submit 될때 핸들을 넘겨준다.(한번더 form.submit()등을 하지 않으면 실제 submit이 동작 하지 않습니다._)

invalidHandler: 입력값이 잘못된 경우 이벤트 발생관련 핸들을 넘겨 줍니다.

ignore: 유효성 검사에서 제외할 대상을 지정 합니다.

rules: 체크할 항목의 룰을 정의 합니다.(input 태그의 attribute에 작성하지 않고 script에서 따로 정의 할 수 있습니다.)

message: 유효성 검사 발생시 관련 메시지를 정의 합니다.

onsubmit: 유효성 체크 없이 무조건 submit을 실행 합니다.

onfocusout(true): 포커스가 대상에서 나갈때 유효성 검사를 합니다.(onkeyup과 동시에 발생되는 경우 의도치 않은 이벤트가 실행 될수 있습니다.)

onkeyup(true): 키보드 키가 올라가는 순간 유효성 검사를 실행 합니다.

onclick(true): click이벤트가 발생되는 순간 유효성 검사를 실행 합니다.

focusInvalid(true): 유효성 검사 후 포커스를 대상에 표시할지 여부

focusCleanup(false): true로 설정된 경우 에러필드에 포커스가 오면 에러메시지를 지웁니다.(focusInvalid와의 충돌에 주의 해야 합니다.)

errorClass: error클래스를 재 정의 할 수 있습니다.(기본은 error라는 클래스 명을 사용 합니다. 사용하려는 페이지에 이미 사용중인 class명이라면
error2와 같은 다른 클래스명을 사용 할 수 있습니다.

validClass : errorClass와 동일 합니다. 대상이 valid클래스인 것만 다릅니다.

ignoreTitle(false): 에러메시지로 title 항목이 사용되는걸 정의 합니다. (false:title항목 사용, true: title항목 사용하지 않음)

위의 내용을 토대로 input태그에 required 등의 항목을 추가해서 유효성 체크를 진행 하려고 합니다.

진행항 작업은 -alert메시지 -유효성 체크 후  focus이동 -메시지 출력시 title항목 이용해서 출력

3가지 작업 입니다.

-공통 js에 아래의 내용을 추가 해줍니다.

$(function () {
//페이지 로드 후 설정 동작하게(js, alert관련 내용이 먼저 로드 되어야 해서)
$.validator.setDefaults({
    onkeyup:false,
    onclick:false,
    onfocusout:false,
    ignoreTitle: true,

    ignore: [],
    showErrors:function(errorMap, errorList){
        if(this.numberOfInvalids()) {
         let targetTitle = ""; 
         try{
         this.errorList[0].element.focus();
         targetTitle = this.errorList[0].element.title+"은(는) ";
         }catch(error){}
        
            ToastAlert.fire({ icon: 'error', title: targetTitle+errorList[0].message});
        }
    }
});
});

ToastAlert.fire({ icon: 'error', title: targetTitle+errorList[0].message}); <- 유효성 체크 후 alert메시지 출력(sweetalert2 사용)

this.errorList[0].element.focus(); <- 포커스 이동(focusInvalid 후에 alert을 뛰우면서 focus 가 사라져 버리는 문제 대응)

targetTitle = this.errorList[0].element.title+"은(는) "; <- 메시지 출력시 title항목 사용

위의 코드 추가 후 $("#siteInfoForm").validate();를 사용하면 됩니다.

(alert을 사용하지 않으면 focusInvalid 옵션으로 focus관리가 가능 합니다.)

(form안의 항목들이 display none인 경우 유효성 체크를 진행 하지 않습니다. 이 부분은 ignore: [] 옵션을 넣어줘서 예외처리 하지 않고 모두 검증 할 수 있습니다.($("#siteInfoForm").validate().settings.ignore = [];))

json 데이터를 가지고 와서 form 화면을 채우거나 modal창의 form내용을 초기화 해야 하는 경우 사용하는 javascript 소스 입니다.

(공통 소스가 필요해서 작업 했는데 추후 수정을 더 해서 계속 갱신할 예정 입니다.)

아래 나오는 targetObj 는 document.getElementById() 로 가지고온 최상위 노드 입니다.

--json -> input

--json key값을 기준으로 input태그 및 select등의 정보를 가지고 와서 데이터 셋팅(json key=input name이 동일 합니다.)

let keys = Object.keys(jsonData);
for (let i = 0; i < keys.length; i++) {
   let key = keys[i];

   let chilNode = targetObj.querySelector('input[name="'+key+'"]');
   if(chilNode==null || chilNode==undefined){chilNode = targetObj.querySelector('select[name="'+key+'"]');}
   if(chilNode==null || chilNode==undefined){chilNode = targetObj.querySelector('textarea[name="'+key+'"]');}

   if(chilNode!=null && chilNode!=undefined){
      inputSetData(key, chilNode, jsonData[key]);
   }
}

--전달 받은 input name, 대상node, 설정할 값을 기준으로 type에 맞춰서 데이터를 설정
function inputSetData(targetName, targetObj, targetValue){
   if(targetObj.type=="text" || targetObj.type=="textarea"){
      targetObj.value = targetValue;
   }else if(targetObj.type=="select-one" && targetObj.options!= undefined && targetObj.options.length>0){
      for(let i = 0; i < targetObj.options.length; i++) {
         if(targetObj.options[i].value==targetValue){
            targetObj.options[i].selected = true;
         }
      }
   }else if(targetObj.type=="checkbox" && targetObj!= undefined){
      let checkBoxList = document.getElementsByName(targetName);
      if(checkBoxList.length>0){
         for(let i = 0; i < checkBoxList.length; i++) {
            if(checkBoxList[i].value==targetValue){checkBoxList[i].checked=true;}
         }
      }
   }else if(targetObj.type=="radio"  && targetObj!= undefined){
      let radioList = document.getElementsByName(targetName);
      if(radioList.length>0){
         for(let i = 0; i < radioList.length; i++) {
            if(radioList[i].value==targetValue){radioList[i].checked=true;}
         }
      }
   }
}

--input 초기화

--input 태그 리스트 수집 최상위 노드 하위 노드를 전체 검색 text, select등의 정보를 수집 합니다.

function inputChildList(targetObj, inputList){
   let inputChildren = targetObj.children;
   if(inputChildren.length>0){
      for(let i = 0; i < inputChildren.length; i++) {
         if(inputChildren[i].type!=undefined && (inputChildren[i].type=="text" || inputChildren[i].type=="select-one" ||               inputChildren[i].type=="checkbox" || inputChildren[i].type=="radio" || inputChildren[i].type=="textarea")){
               inputList.push(inputChildren[i]);
         }
         inputChildList(inputChildren[i], inputList);
      }
   }
}

--대상 노드의 데이터를 초기화 합니다.

function inputReSetData(targetObj){
   if(targetObj.type=="text" || targetObj.type=="textarea"){
      targetObj.value = "";
   }else if(targetObj.type=="select-one" && targetObj.options!= undefined && targetObj.options.length>0){
      targetObj.options[0].selected = true;
   }else if(targetObj.type=="checkbox" && targetObj!= undefined){
      let checkBoxList = document.getElementsByName(targetObj.name);
      if(checkBoxList.length>0){
         for(let i = 0; i < checkBoxList.length; i++) {
            checkBoxList[i].checked=false;
         }
      }
   }else if(targetObj.type=="radio"  && targetObj!= undefined){
      let radioList = document.getElementsByName(targetObj.name);
      if(radioList.length>0){
         for(let i = 0; i < radioList.length; i++) {
            radioList[i].checked=false;
         }
      }
   }
}

let inputList = [];
inputChildList(targetObj, inputList);

for(let i = 0; i < inputList.length; i++) {
   inputReSetData(inputList[i]);
}

alert, confirm 메시지 출력시 브라우저 마다 다른 디자인이 노출되고 딱딱한 느낌이 강해서 sweetalert2을 이용 메시지 출력을 진행 하려고 알아 보았습니다.

모든 내용은 https://sweetalert2.github.io 참고 해서 작업 진행 했습니다.

-- alert

var ToastAlert = Swal.mixin({
       showConfirmButton: true
});

기본 설정을 Swal.mixin 을 이용해서 정의 해줍니다.

사용하려는 페이지 에서 ToastAlert.fire({icon: 'warning', title: '알림메시지'}); 와  같이 icon, title, text 같이 변경이 필요한 부분만 추가 해주면 됩니다.

--confirm

var ToastConfirm = Swal.mixin({
   showConfirmButton: true,
   showCancelButton: true,
   confirmButtonText : "예",
   cancelButtonText : "아니오"
});

기본 설정을 Swal.mixin 을 이용해서 정의 해줍니다. 보면 알 수 있는 내용이지만 옵션은 아래와 같습니다.

(

showConfirmButton=>확인버튼 출력 여부(기본 true)

showCancelButton=>취소버튼 출력 여부(기본 false)

confirmButtonText=>확인버튼 내용

cancelButtonText=>취소버튼 내용

)

사용하려는 페이지에서 

ToastConfirm.fire({icon: 'info', title: '확인 버튼을 눌러 주세요'}).then((result)=>{
   if(result.isConfirmed){
      alert("확인");
   }
});

같이 확인 버튼 누른 경우에 대한 처리만 추가 해서 confirm을 구현 할 수 있습니다.

그외 다양한 옵션이 있는데 사이트를 보면 아주 친절하게 설명이 되어 있습니다.

--페이지 loding 혹은 blockui대체

페이지 로딩 표시 혹은 blockUi를 대체하기 위해서 기본 설정을 아래와 같이 정의 합니다.

var ToastBlockUi = Swal.mixin({
   showConfirmButton: false,
   allowOutsideClick: false,
   padding: '3em',
   background: '#fff',
   backdrop: 'rgba(0, 0, 0, 0.7) left top no-repeat'
});

(

allowOutsideClick=>외부 화면 클릭시 화면 닫는 이벤트 비 활성화 false 설정 합니다.

padding, background, backdrop 디자인 적인 부분이라 화면에 맞춰서 수정 해주면 됩니다. rgba 부분은

http://www.codicut.com/util/index.html 사이트 참고 해서 지정 하시면 됩니다.

)

사용하려는 페이지에 아래와 같이 추가 합니다.

ToastBlockUi.fire({imageUrl: '<c:url value="/images/blockbusy.gif" />', imageWidth: 15, imageHeight: 15, title: '잠시만 기다려주세요.'});

로딩 이미지는 blockUi의 이미지 그대로 사용 했는데 필요에 맞춰서 수정 해주시면 됩니다.

block화면이 닫히는 부분은 

ToastBlockUi.close(); 을 이용하시면 됩니다.

테스트 시에는 setTimeout(() => ToastBlockUi.close(), 3000); 을 사용 했습니다.

(

c:url 을 사용하기 위해 fire 부분에 이미지 관련 내용이 들어가 있는데 mixin 부분에 

imageUrl: '../../images/blockbusy.gif', 
imageWidth: 15, 
imageHeight: 15

같이 설정 해도 됩니다.

)

ajax 동작 중 공통으로 처리 해야 하는 경우 아래의 소스를 공통 js에 추가 해줍니다.

//ajax시작
$(document).ajaxStart(function(){

});
//ajax종료
$(document).ajaxStop(function(){

});
//ajax완료
$(document).ajaxComplete(function(evnet, xhr, settings){
  if(xhr.status=="404"){
  }
  if(xhr.status=="500"){
  }
  console.log(xhr.responseText);
});

window10 환경에서 react 개발환경을 셋팅하는 방법을 간단하게 작성 합니다.

1. node js

2. yarn

3. vscode

3가지를 설치하고 실행하는 상황까지를 정리 합니다.

node js 설치를 위해서 https://nodejs.org/ko/download/ 경로의 설치파일을 다운로드 받아서 설치 합니다.

설치 후 콘솔 화면에서 node -v 명령어를 실행해서 버전 정보가 나오는지 확인 합니다.

yarn설치를 위해서 https://classic.yarnpkg.com/en/docs/install#windows-stable 페이지에 접속 하면 설치 파일을 다운로드 하는건 아니고 npm install --global yarn 명령어를 콘솔창에서 입력해 실행 하면 됩니다.

설치 후 콘솔 화면에서 yarn --version 명령어를 실행해서 버전 정보가 나오는지 확인 합니다.

vscode 설치를 위해 https://code.visualstudio.com/download 페이지에 접속 윈도우 설치파일을 다운로드 하고 설치 합니다.

3개의 기본 설치파일을 설치 한 후 react프로젝트를 생성 후 실행을 해보겠습니다.

사용할 폴더를 생성 해주고 해당 폴더로 이동 후 생성 명령어를 입력 합니다.

EX>

yarn create react-app project1 명령어를 실행 하면 project1폴더가 생성되고 기본 파일들이 생성 됩니다.

생성이 완료 되면 vscode에서 해당 폴더를 'File>Open Folder' 메뉴로 열어 주면 생성된 폴더 및 파일들을 확인 할 수 있습니다.

정상적으로 생성 된건지 확인 하기 위해 프로젝트 폴더로 이동 프로젝트를 실행 시켜 보겠습니다.

cd project1

yarn start

http://localhost:3000 접속을 하면 react기본 페이지가 출력 됩니다.

function headerValues(){
return $( '#jsGrid' ).data( 'JSGrid' )
.fields
.filter( function( d ){
return d.name != '';
})
.map( function( d ){
return d.name
})
}

function dataObjects(){
return $( '#jsGrid' ).data( 'JSGrid' ).data
}

function createJSONForSingle( object ){
var hash = {};

headerValues().map( function( key ){
hash[ key ] = object[ key ]
});

return hash;
}

function createJSON(){
objects = dataObjects().map( function( o ){
return createJSONForSingle( o )
});

return JSON.stringify( objects, null, 2 );
}

https://gist.github.com/georgeu2000/29b4d17168708208266e44ff5c197f4f

https://codepen.io/bravoury/pen/KqvdRx