자기 개발하기

SVN Server와 이클립스 버전등의 정보가 맞지 않는다면 파싱되는 과정에서 에러가 발생해  e175002 에러가 난다

이를 해결하기위해 SVN 클라이언트를 설치후 SVN Server에서 소스를 다운받아 직접 이클립스에 넣는것을 추천한다

아래 SVN 설치 

https://tortoisesvn.net/downloads.html

아래사이트 참고

https://m.blog.naver.com/PostView.nhn?blogId=mongnme&logNo=220788195121&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F

path 는 \src\main\webapp\WEB-INF\web.xml 여기에있는 XML이구요

/code404.jsp 에 기본 전자정부 에러페이지를 주석처리후

제가만든 egovError2.jsp 페이지로 바꾸었습니다

<error-page>

    <error-code>400</error-code>

    <location>/egovError2.jsp</location>

    <!-- /code404.jsp -->

  </error-page>

  <error-page>

    <error-code>401</error-code>

    <location>/egovError2.jsp<!-- /code404.jsp --></location>

  </error-page>

  <error-page>

    <error-code>403</error-code>

    <location>/egovError2.jsp<!-- /code404.jsp --></location>

  </error-page>

  <error-page>

    <error-code>404</error-code>

    <location>/egovError2.jsp<!-- /code404.jsp --></location>

  </error-page>

  <error-page>

    <error-code>500</error-code>

    <location>/egovError2.jsp<!-- /code500.jsp --></location>

  </error-page>

이클립스 콘솔창 SQL로그찍기 log4sql

1.

log4sql은

 http://sourceforge.net/projects/log4sql/files 에서 다운 받을 수 있다.)

2.

다운받은후 프로젝트 lib 폴더에

jar파일을 넣는다

3. globals.properties 파일을 수정한다 

   프로퍼티스 파일 이름은 다다를수있다

드라이버 명을 바꿔줘야한다

oracle.jdbc.driver.OracleDriver 을

변경  -> core.log.jdbc.driver.OracleDriver

위 스샷처럼 이쁘게 로그가 찍힌다

@Controller 

@Controller
public class restClassName{

  @RequestMapping(value={"/uri"})
  @ResponseBody
  public ObjectResponse functionRestName(){
      //...
      return instance
   }
}

@RestController 

@RestController
public class restClassName{

  @RequestMapping(value={"/uri"})
  public ObjectResponse functionRestName(){
      //...
      return instance
   }
}

  @ResponseBody 가 기본적으로 적용됩니다@RestController 에서는요~

Vue.js가 무엇인가요?

Vue(/vjuː/ 로 발음, view 와 발음이 같습니다.)는 사용자 인터페이스를 만들기 위한 진보적인 프레임워크 입니다. 다른 단일형 프레임워크와 달리 Vue는 점진적으로 채택할 수 있도록 설계하였습니다. 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽습니다. 그리고 Vue는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원할 수 있습니다.

숙련된 프론트엔드 개발자이고 Vue를 다른 라이브러리/프레임워크와 비교하고 싶다면 다른 프레임워크와의 비교를 확인하십시오.

시작하기

공식 가이드는 HTML, CSS 및 JavaScript에 대한 중간 수준의 지식을 전제로 합니다. 프론트 엔드 개발에 완전히 익숙하지 않다면 첫 번째 단계로 프레임워크를 시작하는 것은 좋은 생각이 아닙니다. 기본을 파악한 다음 다시 해보세요! 다른 프레임워크에 대한 사전 경험이 도움 되지만 필수는 아닙니다.

Vue.js를 시험해 볼 수 있는 가장 쉬운 방법은 JSFiddle Hello World 예제를 사용하는 것입니다. 다른 탭에서 자유롭게 열어 본 후 몇 가지 기본 예제를 따라가십시오. 또는 단순히 index.html 파일을 만들고 Vue를 다음과 같이 포함할 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

설치 페이지에는 Vue 옵션이 추가로 제공됩니다. Node.js 기반 빌드 도구에 아직 익숙하지 않으면 vue-cli로 시작하는 것을 추천하지 않습니다.

선언적 렌더링

Vue.js의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링하는 것입니다.

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: '안녕하세요 Vue!'
  }
})

우리는 이미 첫 Vue 앱을 만들었습니다! 문자열 템플릿을 렌더링하는 것과 매우 유사하지만 사실 Vue는 더 많은 작업을 합니다. 데이터와 DOM이 연결되어 이제 모든 것이 반응형입니다. 어떻게 알 수 있을까요? 브라우저의 JavaScript 콘솔을 열고 app.message를 다른 값으로 설정해 보십시오. 그에 따라 렌더링 된 예제를 볼 수 있습니다.

텍스트 보간 이외에도 다음과 같은 엘리먼트 속성을 바인딩할 수 있습니다.

<div id="app-2">
  <span v-bind:title="message">
    내 위에 잠시 마우스를 올리면 동적으로 바인딩 된 title을 볼 수 있습니다!
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '이 페이지는 ' + new Date() + ' 에 로드 되었습니다'
  }
})

여기서 우리는 새로운 곳에 다다랐습니다. v-bind 속성은 디렉티브 이라고 합니다. 디렉티브는 Vue에서 제공하는 특수 속성임을 나타내는 v- 접두어가 붙어있으며 사용자가 짐작할 수 있듯 렌더링 된 DOM에 특수한 반응형 동작을 합니다. 기본적으로 “이 요소의 title 속성을 Vue 인스턴스의 message 속성으로 최신 상태를 유지 합니다.”

JavaScript 콘솔을 다시 열고 app2.message = '새로운 메시지'라고 입력하면 HTML(이 경우에 title 속성)이 업데이트되었음을 다시 한번 확인할 수 있습니다.

조건문과 반복문

엘리먼트의 존재 여부를 토글하는 것은 아주 간단합니다.

<div id="app-3">
  <p v-if="seen">이제 나를 볼 수 있어요</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

계속해서, app3.seen = false를 콘솔에 입력하세요. 메시지가 사라지는 것을 확인해야 합니다.

이 예제는 텍스트와 속성뿐 아니라 DOM의 구조에도 데이터를 바인딩 할 수 있음을 보여줍니다. 또한 Vue 엘리먼트가 Vue에 삽입/갱신/제거될 때 자동으로 트랜지션 효과를 적용할 수 있는 강력한 시스템을 제공합니다.

몇가지 디렉티브가 있습니다. 각 디렉티브마다 고유한 기능이 있습니다. 예를 들어 v-for디렉티브는 배열의 데이터를 사용해 항목 목록을 표시하는데 사용할 수 있습니다.

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'JavaScript 배우기' },
      { text: 'Vue 배우기' },
      { text: '무언가 멋진 것을 만들기' }
    ]
  }
})

콘솔에서, app4.todos.push({ text: 'New item' })을 입력하십시오. 목록에 새 항목이 추가되어야 합니다.

사용자 입력 핸들링

사용자가 앱과 상호 작용할 수 있게 하기 위해 우리는v-on 디렉티브를 사용하여 Vue 인스턴스에 메소드를 호출하는 이벤트 리스너를 첨부 할 수 있습니다 :

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">메시지 뒤집기</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: '안녕하세요! Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

이 메소드에서 우리는 단순히 DOM을 건드리지 않고 앱의 상태를 업데이트 합니다. 모든 DOM 조작은 Vue에 의해 처리되며 작성한 코드는 기본 로직에만 초점을 맞춥니다.

Vue는 또한 양식에 대한 입력과 앱 상태를 양방향으로 바인딩하는 v-model 디렉티브를 제공합니다.

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: '안녕하세요 Vue!'
  }
})

컴포넌트를 사용한 작성방법

컴포넌트 시스템은 Vue의 또 다른 중요한 개념입니다. 이는 작고 그 자체로 제 기능을 하며 재사용할 수 있는 컴포넌트로 구성된 대규모 응용 프로그램을 구축할 수 있게 해주는 추상적 개념입니다. 생각해보면 거의 모든 유형의 응용 프로그램 인터페이스를 컴포넌트 트리로 추상화할 수 있습니다.

Vue에서, 컴포넌트는 본질적으로 미리 정의된 옵션을 가진 Vue 인스턴스 입니다. Vue에서 컴포넌트를 등록하는 방법은 간단합니다.

// todo-item 이름을 가진 컴포넌트를 정의합니다
Vue.component('todo-item', {
  template: '<li>할일 항목 하나입니다.</li>'
})

이제 다른 컴포넌트의 템플릿에서 이 컴포넌트를 사용할 수 있습니다.

<ol>
  <!-- todo-item 컴포넌트의 인스턴스 만들기 -->
  <todo-item></todo-item>
</ol>

그러나 이는 모든 할 일 인스턴스에 똑같은 내용을 렌더링할 것입니다. 이래서는 무언가가 부족합니다. 부모 영역의 데이터를 자식 컴포넌트에 집어넣을 수 있어야겠습니다. prop을 전달받을 수 있도록 할 일 컴포넌트의 정의를 수정해봅시다.

Vue.component('todo-item', {
  // 이제 todo-item 컴포넌트는 "prop" 이라고 하는
  // 사용자 정의 속성 같은 것을 입력받을 수 있습니다.
  // 이 prop은 todo라는 이름으로 정의했습니다.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

이제 이 todo를 v-bind를 사용하여 각각의 반복되는 컴포넌트에 전달할 수 있습니다.

<div id="app-7">
  <ol>
    <!-- 
      이제 각 todo-item 에 todo 객체를 제공합니다.
      화면에 나오므로, 각 항목의 컨텐츠는 동적으로 바뀔 수 있습니다. 
      또한 각 구성 요소에 "키"를 제공해야합니다 (나중에 설명 됨).
     -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

이것은 인위적으로 만든 예시이지만, 우리는 앱을 두 개의 더 작은 단위로 나눌 수 있었고, 자식을 props 인터페이스를 통하여 부모로부터 합리적인 수준으로 분리할 수 있었습니다. 이제 앞으로는 부모 앱에 영향을 주지 않으면서 <todo-item> 컴포넌트를 더 복잡한 템플릿과 로직으로 더욱 향상시킬 수 있을 것입니다.

대규모 응용 프로그램에서는 개발 과정을 관리할 수 있는 수준 하에 두기 위해 전체 앱을 컴포넌트로 나누는 것이 필수적입니다. 나중에 이 가이드에서 컴포넌트에 대해 더 많은 이야기를 나누겠습니다. 하지만 여기서는 컴포넌트를 사용한 앱의 모습이 어떻게 구성될지에 대한 (상상의) 예를 제시하겠습니다.

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

사용자 정의 엘리먼트와의 관계

Vue 컴포넌트는 Web Components Spec의 일부인 사용자 지정 엘리먼트 와 매우 유사하다는 것을 눈치 챘을 수 있습니다. Vue의 컴포넌트 구문은 스펙 이후 느슨하게 모델링 되었기 때문입니다. 예를 들어 Vue 컴포넌트는 Slot API와 is 특수 속성을 구현합니다. 그러나 몇가지 중요한 차이가 있습니다.

1. Web Components Spec은 여전히 초안이며 모든 브라우저에서 기본적으로 구현되지 않습니다. 이에 비해 Vue 컴포넌트는 지원되는 모든 브라우저 (IE 9 이상)에서 폴리필을 필요로 하지 않으며 일관되게 작동합니다. 필요한 경우 Vue 컴포넌트는 기본 사용자 정의 엘리먼트 내에 래핑할 수 있습니다.

2. Vue 컴포넌트는 일반 사용자 정의 엘리먼트에서 사용할 수 없는 중요한 기능을 제공합니다. 특히 컴포넌트 데이터 흐름, 사용자 지정 이벤트 통신 및 빌드 도구 통합이 중요합니다.

더 해야할 것은 무엇인가요?

우리는 Vue.js 코어의 가장 기본적인 기능을 간략하게 소개했습니다. 이 가이드의 나머지 부분에서 더 자세한 세부 내용이 포함된 다른 고급 기능에 대해 다룰 예정이므로 꼭 읽어보시기 바랍니다.

출처 :  https://kr.vuejs.org/v2/guide/index.html

문제시 삭제하겠습니다.

특정 찾아서 개수 가져오기

exam )

var  abc = "bv.dd.dd";

 var ckyn = abc.match(/[.]/g) ;

하시고

if(1 < ckyn)

{

alert(ckyn);

} 

결과값은 : . << 점이 2개이므로 2입니다

특수문자 찾을시는 저렇게 [ ] 를 해주셔야합니다

특정 문자를 찾고싶을시에는 match(/문자/g) 하시면 됩니다

출처 : https://m.blog.naver.com/PostView.nhn?blogId=lool2389&logNo=220640716156&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F

리눅스에서 파일 검색을 하기 위한 명령어 find를 소개합니다.

저는 리눅스 상에서 주로 개발해서 자주 사용하는 명령어 입니다.

다음으로 파일 내부 문자열을 검색하는 명령어 grep 입니다.

사실 grep은 여러군데서 사용하고 있는 것이기 때문에, 파일 내부 문자열 검색만을 위해서 쓰이고 있지는 않습니다.

grep의 man을 보시면 -print lines matching a pattern 으로 나와있어요.

이번 포스팅에서는 grep을 통해서 파일 내부의 문자열을 검색해서, 

찾고자 하는 문자열과 동일한 문자열을 가진 파일을 찾아주는 것으로 

출처: http://ngee.tistory.com/83 [ngee]

앱을 개발할때, 누구나 자신의 앱에 사용자들이 대화하거나, 공지사항으로 앱의 새소식을 알리고, 댓글을 달면 알림이 가는등 사용자가 참여할 수 있는 커뮤니티 공간이 있었으면 좋겠다고 생각해봤을 것입니다.

하지만 만드는 데에는 그만큼의 시간과 노력을 들여야 합니다. 에를들어 서버 구축이라든지, 서버에서 처리하는 코드라든지, 클라이언트 코드를 짜야하는거라든지..

이런 과정 없이 다른 프로그래밍이나 서버구축 같은거 없이 그럴듯한 아래 사진과 같은 앱을 최소한의 과정으로 제작할 수 있는 오픈소스 커뮤니티 클라이언트 프로젝트입니다.

1. Favorite 앱

자신이 즐겨찾기한 페이지를 간단명료하게 보여주고 소통할수 있는 종합적인 어플리케이션입니다. 

- 페이지(커뮤니티)를 생성해  그룹이나, 소개용 등 목적에 따라서 다양하게 이용할 수 있습니다.

- 사진이나 파일 업로드가 가능하며 최대 30MB 업로드를 지원합니다.

- 나에게 글이나, 댓글 작성시 알림을 받을 수 있습니다.

Play 스토어에서 다운로드 가능하며, 오픈소스입니다.

Play Store : http://play.google.com/store/apps/details?id=com.tarks.favorite

Github : https://github.com/tarksgit/Favorite-Android-Client

2. Favorite Example

위의 Favorite을 여러분들이 쉽게 독립적인 어플로 만들기 쉽게 만든 데모 버전이며, 이 오픈소스를 어떻게 활용해야할지에 대한 하나의 적절한 예시입니다.

목록에서 자신이 의도한 페이지(커뮤니티)로 이동하게 하는 방법이 있습니다. 마찬가지로, 이 데모도 오픈소스입니다.

https://github.com/tarksgit/Favorite-Android-Client-Example

이 데모를 사용하여 자신만의 커뮤니티 앱을 만드는 더 자세한 방법은 아래 링크에 잘 설명되어있습니다.

http://tarks.net/favoritedevelop_android/105393

도움이 되셨나요?

그럼 손가락을 눌러주세요:)

출처: http://jhrun.tistory.com/172 [JHRunning]