DEPRECATED

This is the checklist of ways to improve WebStorm(PhpStorm, Idea, etc.) experience:

1. Use Vue.js plugin.

UPDATE: Both plugins have own problems atm

• vue-for-idea has weird side-effects (hiding node_modules from project view);
• John Kelly's Vue.js plugin force you to use special declarations for ES6 and scss, sass (see deprecated section below)

You can install it via Settings(Preferences) => Plugins => Browse repositories => (search for) "vue"

choose one or both: "Vue.js" or "vue-for-idea". It's up to you.

1. Set "Javascript Language Version" to ES6.

Open Settings(Preferences) => Language & Frameworks => JavaScript. Set Javascript Language Version to ECMAcript6

https://github.com/postalservice14/vuejs-plugin

1. Improve HTML-tag's attributes highlighting

Open Settings(Preferences) => Editor => Inspection => HTML => select Unknown HTML tag attributes => click Custom HTML tag attributes. Add your attributes. 

For example, my list: 

v-on,v-on:click,v-on:change,v-on:focus,v-on:blur,v-on:keyup,:click,@click,v-model,v-text,v-bind,:disabled,@submit,v-class,:class,v-if,:value,v-for,scoped,@click.prevent,number,:readonly,@input,@click,v-show,v-else,readonly,v-link,:title,:for,tab-index,:name,:id,:checked,transition,@submit.prevent,autocapitalize,autocorrect,slot,v-html,:style

P.S. For the full list of custom tags check @Alex's answer below

P.P.S. Actually it's should work in more common way:

Open Settings(Preferences) => Languages & Frameworks => Javascript => Libraries=> click Add (after this you should set path to the vue.js. You can dowmload it with npm or whatever)

(More info in this answer: https://stackoverflow.com/a/28903910/930170)

But I didn't get success with that.

1. Enable Node.js Coding Assistance:

Open Settings(Preferences) => Languages & Frameworks => Node.js and NPM

If "Node.js core library is not enabled", click button Enabled

DEPRECATED (may be required if you don't use vue plugins for IDE):

1. Make *.vue files to be recognized as a html flies.

Open Settings(Preferences) => Editor =>File Types find HTML in Recognized File Types, then add *.vue as a new Registered Patterns.

1. Improve ES6 highlight.

In each vue file with tag:

(This is would help to recognise constructions like setTimeout(() => {console.log(1) }, 100))

1. Improve styles highlight. (sass, scss, etc)

In each vue file with tag:

For scss it's gonna be <style lang="scss" type="text/scss">

For stylus please try <style lang="stylus" type="text/stylus">

UPD: The steps below are not so trusted, they may helps, or may not, some of them I didn't check personally, or I didn't catch is any effect exist or not.

1. Import TextMate Bundle functionality.

https://www.jetbrains.com/help/phpstorm/2016.1/textmate-bundles.html?origin=old_help

1. Import TypeScript tables for vue.

Open Settings(Preferences) => Language & Frameworks => JavaScript => Libraries. Click Download, Switch to TypeScript community stubs. And download all tabs with vueword.

Example: https://youtu.be/4mKiGkokyx8?t=84 (from 1:24)

UPD2: For more info check the issue at github: https://github.com/vuejs/vue-syntax-highlight/issues/3

출처: https://nickjoit.tistory.com/155 [nickjoIT]

Ctrl + Backspace : 행 삭제 (Ctrl + D)

Ctrl + D : 행 복사

Shift + Alt + 위, 아래 : 라인 이동

Ctrl + Alt + L : 코드 포맷

Alt + Enter : (해당 위치에서 임포트)

Ctrl + Shift + V : 클립보드 확인

Ctrl + Q : 종료

Ctrl + F4 : 해당 편집창 종료

Alt + F7 : 사용되는 곳 찾기 (Cmd + Shift + G)

Alt + Cmd + B : 구현체로

Alt + Cmd + O : import 정리

Ctrl + Shift + F : 전체 파일 검색

Ctrl + Shift + R : 전체 파일 변경

Ctrl + R : 파일 변경

Ctrl + F : 파일 검색

Ctrl + G : 다음 찾기

Ctrl + Shift + G : 이전 찾기 

Ctrl + E : 최근 파일

Shift + F6 : Rename

Ctrl + Shift + U : 대소문자 변환

Command + Alt + M : 메소드 추출

Double Shift : 모든것을 검색

Ctrl + Shift + O : 파일명으로 검색

Ctrl + E : 최근 사용 파일 

Intellij settings > Version Control > Git

SSH executable: Native

Apply

D:\프로젝트폴더\.git\config

파일을 연다

[remote "origin"]
//url = git@github.com:denodo1/front.git (default)

url = https://github.com/denodo1/front.git
fetch = ...

해결완료

.replace(/(<br>|<br\/>|<br \/>)/g, '\r\n')

GraphQL 은 페이스북에서 만든 어플리케이션 레이어 쿼리 언어입니다. 기존의 웹 혹은 모바일 어플리케이션의 API 를 구현 할 때는, 통상적으로 REST API 가 사용됩니다. 기존의 REST API 를 사용하여 API 를 구현을 한다면, 우리가 클라이언트사이드에서 어떠한 기능이 필요 할 때마다 그때 그때 새로운 API를 만들어주었어야했습니다.

예를들어 여러분의 어플리케이션에 Account 라는 모델이 있고, /accounts 라는 endpoint 가 있다고 가정해봅시다.

GET /accounts

{
  "accounts": [
    {
      "id": "1",
      "username": "velopert",
      "email": "public.velopert@gmail.com",
      "friends": [
        "2",
        "3"
      ],
      "first_name": "Minjun",
      "last_name": "Kim"
    },
    {
      "id": "2",
      "username": "jn4kim",
      "email": "jn4kim@gmail.com",
      "friends": [
        "1",
        "4"
      ],
      "first_name": "Jayna",
      "last_name": "Kim"
    },
    {
      "id": "3",
      "username": "abet",
      "email": "abet@gmail.com",
      "friends": [
        "4"
      ],
      "first_name": "Abet",
      "last_name": "Bane"
    },
    {
      "id": "4",
      "username": "Betty",
      "email": "betty@gmail.com",
      "friends": [
        "1",
        "3"
      ],
      "first_name": "Betty",
      "last_name": "Cain"
    }
  ]
}

만약에 특정 id 를 가진 계정의 정보를 가져오려면 다음과 같이 하겠죠.

GET /accounts/1

{
  "account": {
    "id": "1",
    "username": "velopert",
    "email": "public.velopert@gmail.com",
    "friends": [
      "2",
      "3"
    ],
    "first_name": "Minjun",
    "last_name": "Kim"
  }
}

위 데이터를 보시면 친구의 id들을 friends 라는 field 에 담습니다.

   "friends": [
      "2",
      "3"
    ]

이 목록에 따라서, 친구 계정들의 목록을 가져오려면, 이런 API를 만들어야겠죠..

GET /accounts/1/?include_friend_details=username,first_name

혹은, 이렇게 할 수도 있겠구요

GET /accounts_with_friend_details/1

이런식으로 진행하다가보면, 나중에 어플리케이션의 규모가 커지면 수많은.. 정말 수많은 endpoint가 생성되게 됩니다.

물론, documentation 이 잘 만들어진다면 유지보수하는데에는 그리 큰 문제가 발생하지는 않겠지만, 그래도 보다 간단한 방법이 없을까요?

만약에, 다음과 같이 클라이언트측에서 쿼리를 만들어서 서버로 보내면 우리가 원하는대로 결과를 반환해주면 좋지 않을까요?

쿼리

query {
    account(id: "1") {
        username
        email
        firstName
        lastName
        friends {
            firstName
            username
        }
    }
}

결과

{
  "data": {
    "account": {
      "username": "velopert",
      "email": "public.velopert@gmail.com",
      "firstName": "Minjun",
      "lastName": "Kim",
      "friends": [
        {
          "firstName": "Jayna",
          "username": "jn4kim"
        },
        {
          "firstName": "Abet",
          "username": "abet"
        }
      ]
    }
  }
}

이렇게 깔끔하게 우리가 필요한 정보를 쿼리로 만들어서 서버에 전달해 주면, 서버가 알아서 프로세싱을 하여 주어진 틀대로 데이터를 보여준다면, 정말 멋질것같지 않나요?

쿼리를 통하여 딱 필요한 데이터만 fetching 을 하기 때문에 overfetch 혹은 underfetch 를 할 걱정을 할 필요가 없습니다.

이 포스트를 보고계신 많은 분들께서 이미 예상을 하셨겠지만, 방금 여러분들이 본것이 바로 GraphQL 입니다.

이 GraphQL 기술은, 특정 언어에 제한된것이 아니여서, Node.js, Ruby, PHP, Python, Golang, 등 여러 환경에서 사용 할 수 있습니다. 심지어, HTTP 프로토콜에 제한되어있지도 않아서, WebSocket 이나 MQTT 프로토콜 위에서 사용 할 수도 있답니다. 데이터베이스도 어떤 데이터베이스를 사용하던 상관없습니다.

따라서, 이미 구현된 시스템에 도입을 해도 기존에 있던 시스템이 무너지지 않기 때문에 부담 없이 적용을 할 수 있습니다.

var tbodyObj = $('#medicalProcess');

if(data != null && data.length > 0) {
    $.each(data, function(idx, item) {
        var trObj = $("<tr></tr>");
        var tdObj = $("<td></td>");

        trObj.append(tdObj.clone().append(item.b_reqDate));
        trObj.append(tdObj.clone().append(item.b_infoOpen));
        trObj.append(tdObj.clone().append(item.b_name));
        trObj.append(tdObj.clone().append(item.b_patmas));

        // aObj.attr("onclick","fnSetRoadDetailList('"+item.city+"','"+item.gu+"','"+item.dong+"','"+item.roadNm+"','"+item.dongNm+"');$('#goDoroStep_3').focus();return false;");
        // aObj.text(item.roadAddr);
        tbodyObj.append(trObj);
    });
} else {
    var trObj = $("<tr></tr>");
    var tdObj = $("<td></td>");
    tbodyObj.append(trObj.append(tdObj.append("조회된 내역이 없습니다.")));
}

tb01 테이블의 user: 현 seq에 대한 전 seq 구하기 위한 쿼리

select    seq

  , lag(seq) over client_winodw as pre_seq

from tb01

where user = #{user}

window client_winodw as (partition by seq order by seq)

Request Body로 보내지는 JSON의 행방 불명

문제

api 테스트 시 Postman을 자주 사용하는데, 다음과 같이 JSON을 서버에 보내면,

서버의 Request에서 JSON 정보를 찾을 수 없다.

해결

하지만 동일한 json 데이터를 postman이 아니라 다음과 같이 실제로 ajax로 호출하는 코드를 통해 서버로 보내면 서버의 Request에서 JSON 정보가 잘 나온다.

<html>
<body>
<button id='tester'>JSON Request Test</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
var tester = document.getElementById('tester');
tester.addEventListener('click', function(e) {
	(function($) {
	    $.ajax({
	        url: 'http://---------/v1/logs/view/33/55',
//	        contentType: 'application/json',
	        method: 'POST',
	        crossDomain: true,
	        data: {
	            url: "++++++++++++++++++++++++++++++++++++",
	            ref: "====================================",
	            items: [
	                {id: "1198708089",
	                title:"나이키 에어맥스",
	                image:"%%%%%%%%%%%%%%%%%%%%%/1197829883_B_V2.jpg",
	                price: 12000,
	                currency:"KRW",
	                catalog: ["catalog_id"],
	                is_now_delivery: 0,
	                adult_only: 0,
	                is_hidden: 0}
	            ],
	            user: { gender: "F", birthyear:"1980", mid:"8371920381"}
	        }
	    });
	})(jQuery);
});
</script>
</body>
</html>

둘의 결정적인 차이는 ContentType 헤더의 값이다.

Postman에서 보낼 떄는 ContentType을 application/json으로 보냈고, 그 때문에 request에서 찾을 수 없었다.

jQuery의 ajax로 보낼 때 ContentType을 명시하지 않으면 디폴트로 application/x-www-form-urlencoded; charset=UTF-8로 지정되며(여기 참고), Request 요청을 브라우저에서 살펴봐도 아래와 같이 Request Body에 포함되고,

서버의 Request에서도 확인이 가능하다.

진짜 해결 맞아?

서버에서 읽힌다고는 하지만, 아무리 그래도 데이터를 JSON으로 넘기는데, ContentType을 application/json이 아닌 application/x-www-form-urlencoded; charset=UTF-8으로 주는 건 좀 아닌 것 같다.

그렇다고 ContentType을 강제로 application/json으로 주면 요청은 아래와 Form Data가 아니라 Payload로 날라가므로,

서버에서는 아래와 같이 request.getParameterMap()으로는 읽을 수 없고,

대신 아래와 같이 request.getReader()로는 읽을 수 있다.

하지만 이걸 사용하려면 또 parsing을 해야하고, stream에서는 한 번만 읽을 수 있는 등 불편한점이 많아서 실무적이지 않다.

실무에서는?

실제로는 request를 직접 핸들링하는 방식 대신에 DTO를 만들고 request 안에 json으로 넘어온 정보를 Jackson 같은 라이브러리를 써서 DTO에 집어넣는 방식을 택한다.

이때 프론트쪽에서 주의해야할 것이 있는데, jQuery의 ajax는 데이터를 문자열화 해주지 않기 때문에 아래와 같이 보내면,

$.ajax({
    url: 'http://---------/v1/logs/view/33/55',
    contentType: 'application/json',
    method: 'POST',
    crossDomain: true,
    data: {
        url: "++++++++++++++++++++++++++++++++++++",
        ref: "====================================",
        items: [
            {id: "1198708089",
            title:"나이키 에어맥스",
            image:"%%%%%%%%%%%%%%%%%%%%%/1197829883_B_V2.jpg",
            price: 12000,
            currency:"KRW",
            catalog: ["catalog_id"],
            is_now_delivery: 0,
            adult_only: 0,
            is_hidden: 0}
        ],
        user: { gender: "F", birthyear:"1980", mid:"8371920381"}
    }
});

서버에서는 대략 아래와 같은 에러가 발생한다.

org.springframework.http.converter.HttpMessageNotReadableException: Could not read document: Unrecognized token 'url': was expecting ('true', 'false' or 'null')

이는 url이 JSON 객체 내의 key로 인식되지 않기 때문에 발생하는 문제로서, 이를 방지하려면 다음과 같이 JSON.stringify()를 통해 url이 key로 인식될 수 있도록 "url"와 같이 문자열로 만들어서 보내줘야 한다.

$.ajax({
    url: 'http://---------/v1/logs/view/33/55',
    contentType: 'application/json',
    method: 'POST',
    crossDomain: true,
    data: JSON.stringify({
        url: "++++++++++++++++++++++++++++++++++++",
        ref: "====================================",
        items: [
            {id: "1198708089",
            title:"나이키 에어맥스",
            image:"%%%%%%%%%%%%%%%%%%%%%/1197829883_B_V2.jpg",
            price: 12000,
            currency:"KRW",
            catalog: ["catalog_id"],
            is_now_delivery: 0,
            adult_only: 0,
            is_hidden: 0}
        ],
        user: { gender: "F", birthyear:"1980", mid:"8371920381"}
    })
});

서버에서도 Spring을 예로 들면, controller 메서드의 파라미터에 JSON으로 받을 데이터를 매핑할 수 있는 DTO를 추가하고 앞에 @RequestBody를 꼭 붙여줘야 데이터가 DTO에 정상적으로 입력된다.

진짜 해결

• 프론트: JSON 데이터를 application/json으로 보내되, JSON 객체를 JSON.stringify()로 문자열화 해서 서버에 보내야 한다.

• 스프링 백엔드: JSON 데이터와 구조가 같은 DTO를 만들고, 컨트롤러 메서드에 @RequestBody를 붙여서 DTO를 파라미터에 추가하면 Spring이 Jackson을 통해 JSON의 값을 읽어서 DTO에 잘 넣어준다.

TO_CHAR를 사용하여 숫자를 문자로 변환하면 소수점 이상이 0일 경우 점(.)으로만 표시되어 변환이 된다. 아래와 같은 포맷(FORMAT) 옵션을 활용하여 변환된 수치 값의 형태를 결정할 수 있다.

FM9990.99의 의미

9는 해당 자리의 숫자를 의미하고 값이 없을 경우 소수점 이상은 공백으로 소수점 이하는 0으로 표시한다.

0은 해당 자리의 숫자를 의미하고 값이 없을 경우 0으로 표시하며 숫자의 길이를 고정적으로 표시 할 때 주로 사용한다.

FM은 좌우 9로 치환된 소수점 이상의 공백 및 소수점 이하의 0을 제거 한다.

[추가설명]

FM을 넣지 않을 경우 숫자소수점 이상은 공백으로 소수점 이하는 0이로 표시된다.

9는 가변적인 값이어서 0이거나 숫자가 존재하지 않을 시 값을 버린다.

0은 해당 값의 길이가 고정적으로 변환이 된다. 변환된 숫자의 길이를 일정하게 맞추고 싶으면 길이만큼 0으로 채우면 된다.

변환될 숫자의 길이보다 포맷의 길이가 작으면 오류가 발생한다.

포맷을 지정 시 변환될 숫자의 길이보다 최대 개수만큼 9 또는 0을 채워야 한다.

출처: http://gent.tistory.com/49

출처: https://www.slipp.net/wiki/pages/viewpage.action?pageId=5177633