SangJJang

1. node.js를 다운로드한다.

- 설치파일이 아닌, 바이너리(zip) 파일을 받아서, 자신이 원하는 경로에 압축을 푼다.

2. VSCode를 실행한다.

- VSCode 터미널을 연다.

아무것도 설정하지 않았으니, 당연하다.

- [Shift + Ctrl + P]를 누르고, settings.json이라고 검색한다.

- Preferences: Open User Settings (JSON)을 선택한다.

- settings.json 파일이 열린다.

- PATH 부분에 node 경로를 넣는다.

{
    "terminal.integrated.env.windows": {
        "PATH": "D:\\node\\node-v20.11.1-win-x64" // node 경로
    }
}

3. VSCode 터미널을 다시 열고, node 버전을 확인한다.

끝.

vscode 터미널의 powershell 로 npm install 작업하게 되면, poershell 실행 정책에 막히는 듯하다.

about_Execution_Policies - https://go.microsoft.com/fwlink/?LinkID=135170

vscode 터미널의 cmd 로 변경해서 node 작업을 하도록 하자.

- vue-router install

npm install vue-router

해당 폴더, 프로젝트에 package.json에 dependencies가 추가된다.

- main.js

import { createApp } from 'vue'
import router from '@/router'

import App from './App.vue'

const app = createApp(App)
app.use(router)
app.mount('#app')

참조. @는 src 폴더를 가리킨다.

- router 폴더 생성 후 index.js 파일 생성

import { createRouter, createMemoryHistory } from 'vue-router'

import HelloWorld from '@/components/HelloWorld.vue'
import AppLayout from '@/components/layouts/AppLayout.vue'

const Foo = { template: '<div>foo</div>' }

const routes = [
    {
        path: '',
        name: '',
        component: AppLayout,
        children: [
            {
                path: '/hello',
                name: 'hello',
                component: HelloWorld
            },
            {
                path: '/foo',
                name: 'foo',
                component: Foo 
            }
        ]
    }
]

const router = createRouter({
    history: createMemoryHistory(),
    routes // `routes: routes`의 줄임
})

export default router

라우팅의 방식 중에 named routes(이름있는), nested routes(중첩) 방식이 있다.

중첩방식을 통해서, 레이아웃을 그리고, 그 속에 view를 라우팅 할 것이다.

Nested Routes | Vue Router (vuejs.org)

- App.vue

<template>
  <h1>Hello Vue!</h1>
  <RouterView />  
</template>

<script>
export default {
  name: 'App'
}
</script>

- AppLayout.vue

<template>
    <div>
        app layout
    </div>

    <HeaderView />
    <LeftView />
  <main>
    <RouterView />
  </main>
</template>
<script>
import HeaderView from '@/components/HeaderView.vue'
import LeftView from '@/components/LeftView.vue'

export default {
    name: 'AppLayout',
    components: {
        HeaderView,
        LeftView
    },
    created () {
        this.$router.push({name: 'hello'})
    }
}
</script>

this.$router.push 로 화면이 생성되자마자 hello 페이지로 뷰 라우팅될 것이다.

- HeaderView.vue

<template>
    header HeaderView
    <nav>
        <RouterLink to="/hello">Go to hello</RouterLink>
        <RouterLink to="/foo">Go to foo</RouterLink>
    </nav>
</template>

여기까지 기본 설정.

끝.

- vue 설치

npm install -g @vue/cli

vue2 or vue3 설치 중 선택하라고 한다.

vue3 최신버전으로 선택.

- 프로젝트 만들기

vue create [프로젝트명]

- VSCode에 프로젝트 열기

File - Open Folder... 선택 후 프로젝트 폴더 선택해서 열면 끝.

아..

그리고

마지막으로..

- 메뉴 View - Open View... 선택하고, NPM Scripts 하나는 열어주자.

그러면, 

하단에 package.json 스크립트를 실행할 수 있는 영역이 표시된다.

serve - run을 클릭해서 실행하면 서버가 실행되고, 기본 vue 화면을 확인할 수 있다.

끝.

- 요 몇일 성과없는 개발이라고 해야 되나..

- 나름 공부도 했지만, 명확히 이것이 무엇이다 라고 할 수준까지는 못한 것 같다.

- 일정의 압박과 함께...

- 그래도 jquery plugin 쪽에 제일 기본이라고 되는 부분에 대해서는 나름대로 명확한 기준이 생긴것 같다.

- page tab 및 modal alert / confirm 창을 custom tag 나 jquery plugin 으로 개발을 하는 방법을 찾다가..

- plugin 쪽은 문외한이라.. 공부하다보니, 

- 제일 기본적인 개념 및 문법이라고 보이는 사이트(https://www.ostraining.com/blog/coding/custom-jquery-plugin/)라고 판단된다.

- https://www.ostraining.com/blog/coding/custom-jquery-plugin/

- hello 라는 이름을 가진 plugin 생성

; // plugin 의 앞의 종결문자 없을 경우를 대비해서 작성
(function ( $ ) { // 영역지정 
 
    $.fn.hello = function( options ) { // hello 라는 plugin 이름
 
        // Default options
        var settings = $.extend({
            name: 'John Doe'
            , color: 'orange'
        }, options );
 
        // Apply options
        // this 는 호출하는 태그이다. ( 아래 <div id='here'> )
        // div tag 에 name 을 붙이고, 색상을 설정한다.
        return this.append('Hello ' + settings.name + '!').css({ color: settings.color });

    };
 
}( jQuery ));

- plugin 호출

<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="/jquery-hello.js"></script>
<script>
$( document ).ready(function() {
    $( '#here' ).hello({
    	name: 'Valentin Garcia'
        , color: 'green'
    });
});
</script>

<div id="here"></div>

- plugin 확장(?)

- 스크립트 패턴이라고 해야할까?  jquery module 패턴이라고 해야 할까?

- 검색결과 모듈 패턴은 계속 만들어지고 있으며, 아래 소스는 현재 가장 많이 사용한다는 패턴으로 파악된다.

;(function( $, window, document, undefined ){
	let pluginName = "pageTabs";
    let defaultOption = {}    
    function Plugin( element , options ){
    	this.element = element;
        this.settings = $.extend( {} , defaultOption , options );
        this.init();
    }
    
    $.extend( Plugin.prototype , {
    	init : function(){}
    });
    
    $.fn[pluginName] = function(options){
    	return this.each(function(){
        	if( !$.data( this, "Plugin_" + pluginName)){
            	$.data( this , "Plugin_" + pluginName , new Plugin( this, options));
			}
		});
    };
}( jQuery, window, document ));

- 에공..

- spring 기반 egovframework 에서

- 서버에 데이터 request 를 json string 으로 받고

- json string 을 json object convert 할때 에러가 발생.

- json string 문자열 중에서 % 가 있으면 convert 과정중에 에러난다.

- 폭풍검색~

- 원인 : % 기호가 있으면 16진수로 변환이 안되서 나는 에러
- % -> %25 로 바꿔서 사용할 것

- 스크립트처리 또는 자바단에 처리해도 됨.

- 현재 공통 submit function 에 전체적으로 적용될 수 있게 해둠.

- 오늘 적용된거라, 앞으로 어떤 문제점이 발생할지는 미지수임.

// replaceAll
function replaceAll( str , targetStr , changeStr ){
	let regex = new RegExp(targetStr, "g");
	return str.replace(regex, changeStr);
}

// 전송할 임의 data
let jsonString = JSON.stringify({"data01" : "test%test"});
jsonString = replaceAll( jsonString , "%", "%25");

- 뒤로가기

history.back();
OR
history.go(-1);

- 앞으로 가기

history.forward();
OR
history.go(1);

- history 이벤트 감지 ( pushState / popstate )

// state : 직렬화할 수 있는 모든 것의 값
// title : history title
// url : history url / 익스플로러 url 변경됨.
history.pushState( state , title , url );

- history API 예제 ( https://developer.mozilla.org/ko/docs/Web/API/History_API )

window.onpopstate = function(event) {
  alert(`location: ${document.location}, state: ${JSON.stringify(event.state)}`)
}

history.pushState({page: 1}, "title 1", "?page=1")
history.pushState({page: 2}, "title 2", "?page=2")
history.replaceState({page: 3}, "title 3", "?page=3")
history.back() // alerts "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back() // alerts "location: http://example.com/example.html, state: null"
history.go(2)  // alerts "location: http://example.com/example.html?page=3, state: {"page":3}"

- Develop source

- pushState 할때, title 값에 따라 state 는 초기화가 되는 듯하다.

- state 의 직렬화되는 값은 현재의 정보가 아닌, 이전정보를 자동으로 가지고 온다.

- list 는 항상 push 로 동작하게 하고,

- popstate 할때,  list 를 state 정보로 교체한다.

// 전역변수
let list = [];

// history 이벤트 감지
$(window).bind("popstate" , function(event) {

  let state = event.originalEvent.state;
  if( state.length == 0 ){
    location.href = "/index.do";
  }else{
    list = state;
    
    let target = state[ state.length - 1 ];
    fnPageMoveXXXX( target.hUrl , target.hData ); // 사용자함수
  }  
});

// 화면이동 - 특정함수에 히스토리 push
list.push({ hUrl : "/test01.do" , hData : {} });
history.pushState( list , "contents", location.href );

1. FullCalendar 기본선언

let calendar01 = new FullCalendar.Calendar( document.getElementById('calendar'), {
	plugins : [ "dayGrid" ]
	, locale : "ko"
	...
});

calendar01.render();

2. 조회데이터 셋팅

- addEventSource 하게 되면 조회된 데이터가 계속 쌓이게 된다.

- FullCalendar 함수 중 getEventSourceById 을 통해서 삭제 후 다시 addEventSource 한다.

- EventSource Id 를 통해서 여러 Eventsource 를 관리할 수 있다.

if( calendar01.getEventSourceById("dataList") != null ){
	calendar01.getEventSourceById("dataList").remove();
}

calendar01.addEventSource({
	id : "dataList"
	, events : data.resultList // Array[JSON]
});

1. 조회화면 조회조건 엔터키 조회

$("#condDiv").on( "keyup" , function( e ){
	let keyCode = e.keyCode;
	if( keyCode == 13 ){ // enter key
		$("#btnSearch").click();
		return false;
	}
});

1. FullCalendar-4.3.1

let calendar = new FullCalendar.Calendar( document.getElementById('xxx'), { 
	plugins : [ "dayGrid" ] 
	, locale : "ko"
	... 
});