쥬케의 개발다이어리: 2016

2016년 6월 2일 목요일

jQuery.extend의 의미

자바스크립트 jQuery를 보다가 혹은 include되어있는 js파일에서 흔히 보이던 문구

jQuery 1.0 version
jQuery.extend = jQuery.fn.extend = function (obj, prop) {
if(!prop) {prop = obj; obj = this;}
for( var i in prop) obj[i] = prop[i];
return obj;
};

jQuery.fn

jQuery.prototype( jQuery 객체의 부모같은 역할)

jQuery.extend = jQuery.fn.extend = ...

jQuery함수 객체와 jQuery 함수 객체의 인스턴스 모두 extend함수가 있다는 말.
> new jQuery(..).extend(); jQuery.extend() 둘 다 가능하다는말

if( !prop) { prop = obj; obj = this;}

extend함수 인자가 한개만 들어올 경우, 현재 객체 (this)에 인자로 들어오는 객체의 프로퍼티 복사, 두개가 들어오는 경우에는 첫번째에 두번째 객체의 프로퍼티를 복사하겠다는 것

for( var i in prop) obj [i] = prop [i];

얕은복사 (shallow copy) : not copy the data just reference it.
> 보통 extend구현 대상이 객체일경우 deep copy를 하는 것이 일반적
함수 객체인 경우는 그대로 얕은 복사 진행.

출처: 인사이드 자바스크립트 06장 - 객체 지향 프로그래밍

2016년 6월 1일 수요일

jQuery에서 즉시 실행 함수 (immediate function) window 를 사용하는 이유

jQuery 코드를 보면 아래와 같이 작성되어 있다.

( function(window, undefined) {

//to implement

} )( window );
jQuery에서 immediate function을 쓰는이유는 자바스크립트에서 variable scope때문.
function안에서만 존재하는 "함수유효범위"를 사용하여, 그 내부에서만 사용되어 외부에서 접근하여 조작되는 data corruption을 방지할 수 있기 때문이다.

(왜냐하면 자바스크립트에서는 변수를 선언하면 보통 전역변수로 사용되기 때문이다.)

프론트엔드 개발자를 위한 자바스크립트 프로그래밍 - 발췌독 및 정리 (수정중)

1장. 자바스크립트란 무엇인가

1.2 자바스크립트 구현

자바스크립트 구성

코어(ECMAScript)
문서 객체 모델(DOM)
브라우저 객체 모델(BOM)

1.2.1 ECMASCript
단순 명세에서 설명하는 부분들을 구현한 언어를 부르는 말.
즉 자바스크립트는 ECMAScript를 구현한것
1.2.2 문서 객체 모델
XML을 HTML에서 사용할 수 있도록 확장한 애플리케이션 프로그래밍 인터페이스(API)
DOM은 전체 페이지를 노드의 계층 구조로 변환.
DOM은 문서를 표현하는 트리를 생성하고, 개발자는 이를 통해 문서의 콘텐츠와 구조를 자유롭게 수정할 수 있게 됨. DOM API를 통해 노드를 쉽게 추가,교체,제거,수정 가능함
1.2.3 브라우저 객체 모델
브라우저 창에 접근하고 조작할 수 있게 하는 인터페이스
BOM을 이용하면 브라우저에 표시된 페이지와는 별개의 컨텍스트에서 브라우저와 상호 작용 가능.
[한계점] 자바스크립트 표준이 존재하지 않음 > HTML5등장하며 개선중.

1.4 요약

자바스크립트는 웹 페이지와 상호작용하도록 디자인된 스크립트 언어이며 다음 세 부분으로 구성됨

ECMA-262에서 정의하는 ECMAScript, 핵심 기능을 제공합니다.
문서 객체 모델(DOM). 웹 페이지 콘텐츠를 조작하는 메서드와 인터페이스를 제공합니다.
브라우저 객체 모델(BOM). 브라우저와 상호작용하는 메서드와 인터페이스를 제공합니다.

2장. HTML속의 자바스크립트

자바스크립트가 HTML페이지 렌더링을 방해하지 않으면서 공존할 길을 모색

2.1 <script>요소

여섯가지 속성

async- 스크립트를 즉시 내려받지만, 자원을 내려받거나 다른 스크립트를 불러오는 등 다른 페이지 작업 방해해서는 안된다고 지시. 외부 스크립트 파일을 불러올때만 유효
charset - src속성으로 명시한 코드의 문자셋을 지정. 브라우저는 대게 이 속성의 값을 무시하므로 좀처럼 쓰이지 않습니다.
defer - 문서의 콘텐츠를 완전히 파싱하고 표시할때까지 스크립트 실행을 지연해도 안전함을 나타냄. 외부 스크립트 파일을 불러올때만 유효. IE 7이전 버전에서는 인라인 스크립트에서도 위 속성 유효
language - 폐기됨: 사용하지 X
src - 실행할 코드를 포함한 외부 파일의 위치 지정
type - language 속성 대체할 의도로 만들어짐. 스크립트 언어의 콘텐츠 타입(마임 타입)을 지정.

인라인 자바 스크립트 코드 : <script>요소 안에 작성한 자바스크립트 코드
위에서부터 차례대로 해석. <script>요소 내부의 코드 전체를 evaludate하기 전에는 나머지 페이지 콘튼체를 불러오지도 않고 표시하지도 않음.
외부파일에서 자바 스크립트 불러옴: <script>내부에 src속성 사용(js파일 URL지정)
외부 파일의 코드를 해석하는 동안에는 페이지 처리 멈춤 + 파일다운로드 시간.
XHTML에서는 <script></script>닫는태그를 생략할수 있지만 HTML에서는 <script />이 문법을 허용하지 않음. 특히IE.

2.1.1 태그 위치
전통적으로 <script> 요소는 <head> 요소 안에 쓰는것이 일반적.
CSS파일이나 JS파일같은 외부 파일에 대한 참조를 한곳에서 관리하자는 것 --> [문제점] 자바스크립트 코드 전부 내려받고, 파싱하고, 해석 끝낼때까지 페이지 렌더링 멈춤. b/c 브라우저는 body태그를 만나면서 페이지 렌더링을 시작하기 때문. head요소에 스크립트 모두 불러오면 눈에 띌 정도로 페이지 렌더링 지연되며, 이 시간 동안 브라우저에는 텅빈 화면만 존재. 이런 이유로 최신 웹 앱에서는 body요소안에, 페이지 콘텐츠 마지막에 씀--> 브라우저가 페이지 렌더링 모두 마친 다음 js 코드 처리. 빈 화면 떠있는 시간 줄어서 빠르다고 느껴짐
2.1.2 스크립트 처리 지연
defer속성의 목적은 스크립트에서 페이지 구조를 바꾸지 않는다고 명시하는 것. 따라서 페이지 전체를 파싱한 후에 스크립트 실행해도 상관없음. defer속성을 설정하면 브라우저는 해당 요소를 만나는 즉시 코드 내려받지만, 실행은 지연. 외부 스크립트 파일만 적용(not 인라인스크립트)
-스크립트 요소가 head에 있어도, 브라우저가 </html>태그를 만날때 실행됨. HTML5명세서는 스크립트 요소 순서대로 실행하도록 정의되어있지만, 현실에서는 defer로 지연시킨 스크립트가 순서대로 실행되지도 않고, DOMContentLoaded 이벤트 > ex1.js > ex2.js 보장 불가
-따라서 <script>요소 하나만 사용하는 것이 최선
-IE4, FF 3.5, Safari5, Chrome7 이상 지원. 다른브라우저는 무시하므로
=지연하고싶을때 페이지 맨 마지막에 놓는것이 여전히 최상임

2.2 인라인 코드와 외부파일
HTML파일에 JS직접 써도되지만, 외부 파일로 분리하는걸 추천

관리하기 쉬움: 마크업과 무관하게 js 수정가능
캐싱 - 브라우저는 특정 설정에 따라, 외부에서 연결된 js파일 모두 캐시. 서로 다른 페이지에서 같은 파일 사용한다면 한번만 내려 받을 수 있으므로 속도 빨라짐
미래에도 안전: 외부파일 call문법은 XHTML이나 HTML모두 비슷

//todo..

3장. 언어의 기초

3.3 변수ECMAScript는 느슨한 변수 타입 사용 = 어떤타입의 데이터라도 변수에 저장 가능var msg; //undefined 할당var msg; // locally assignedmsg = 10 ; //globally assigned
3.4 데이터 타입

기본데이터 타입 primitive data type

Undefined
Null
Boolean
숫자
문자열
객체: 이름-값 쌍의 순서 없는 목록

3.4.1 typeof연산자

정의되지 않은 변수: "undefined"
boolean
string
number
함수를 제외한 객체 또는 null : "object"
함수: function

3.4.2 undefined 타입
명시적으로 undefined할당가능, 변수 할당안된경우 default로 undefined할당
출력시 명시적인경우 undefinedㄹ고 나오지만 묵시적인경우 error
> 권장 : 변수 늘 초기화하면, undefined를 초기화여부를 확인 가능한 field
3.4.3Null타입
빈 객체 가리키는 포인터.
3.4.4 boolean
데이터 타입 변환규칙

데이터 타입	true로 변환되는 값	false로 변환되는 값
불리언	true	false
문자열	비어있지 않은 문자열 모두	""(빈문자열)
숫자	0이아닌 모든 숫자, 무한대 포함	0,NaN
객체	모든 객체	null
Undefined	해당없음	undefined

3.4.6 문자열타입
문자 리터럴

리터럴	의미
\n	줄바꿈
\t	탭
\b	백스페이스
\r	캐리지리턴
\f	폼 피드
\\	역슬래시(\)
\' , \"	작은따옴표, 큰따옴표 - "He said \"hey.\""
\xnn	16진수 코드 'nn'로 표현한 문자입니다. 여기서 'n'은 0부터 f까지의 16진수 \x41 > 65(decimal) > ascII> '"A"입니다.
\unnnn	16진수코드 'nn'로 표현한 문자. \u03a3은 그리스 문자 입실론???임

문자열의 성질
: 문자열은 불변(ECMAScript)입니다.
//todo: 더 추가하기

3.5.7 동일 연산자
-종류:
[ 타입강제 ]동일 /비동일 연산자(타입변경후 비교) , == , 객체에 대한 참조 비교(reference 비교)
[타입비강제] 일치/ 불일치 ,===
3.7.1 매개 변수의 이해
매개변수 숫자, 데이터 타입 체크 X (interpreter 에러로 간주 X) > b/c 매개변수가 내부적으로 arguments 배열로 표현되기 때문에.

//todo: 변수 등등 다 정리해야해 중요

4.4 요약

자바스크립트 변수의 종류 : 원시값, 참조값

원시값은 고정된 크기를 가지며 스택 메모리에 저장됨
원시 값을 한 변수에서 다른 변수로 복사하면 값 자체가 복사
참조 값은 객체이며 힙 메모리에 저장
변수에 참조값을 저장하면 객체에 대한 참조만 저장할뿐
typeof연산자는 값의 원시 타입 판별, instanceof 연산자는 값의 참조타입 판별

원시값과 참조값의 모든 변수는 스코프라고 불리기도하는 실행 컨텍스트에 존재, 실행 컨텍스트는 변수가 존재하는 기간을 결정하며 어느 코드가 해당 변수에 접근할 수 있는지도 결정함.

실행 컨텍스트에는 전역 컨텍스트와 함수 컨텍스트가 있음
실행 컨텍스트에 진입할 때마다 스코프 체인이 만들어지며, 스코프 체인은 변수와 함수를 검색하는데 쓰임
함수 컨텍스트는 해당 스코프에 있는 변수, 해당 스코프를 포함하는 컨텍스트에 있는 변수, 전역 컨텍스트에 있는 변수에 모두 접근가능
전역 컨텍스트는 전역 컨텍스트에 있는 변수와 함수에만 접근할 수 있으며 로컬 컨텍스트(함수) 있는 데이터에 직접접근 불가
실행 컨텍스트는 변수에 할당된 메모리 언제 해제할 수 있는지 판단하는데 도움

자바스크립트는 자동으로 가비지 컬렉션을 수행하므로 개발자가 메모리 할당,회수에 신경쓸 필요 없음
자바스크립트 GC 루틴 요약

값이 스콮 벗어나면 자동 표시되고, 다음 GC실행시 값 삭제
주로 쓰이는 GC 알고리즘은 '표시하고 지우기'로, 현재 사용하지 않는 값에 표시 남겨서 메모리 회수
다른 알고리즘 -카운팅: 값 참조 추적: 거의안씀, IE에서 아직 쓰임. DOM요소처럼 네이티브 자바스크립트 객체가 아닌 객체를 JS에서 접근해야하기 떄문에
참조 카운팅 알고리즘은 순환 참조 문제가 있음
변수에서 참조 제거하면 순환 참조 문제 해결할 수 있고, GC에도 도움. 가능한 많은 메모리 회수해 효율적 관리하려면- 전역 객체, 전역 객체의 프로퍼티, 순환 참조에 대한 참조를 제거해야함

5장. 참조 타입

5.2 Array 타입

다른 언어와 달리, 어떤 타입의 데이터도 넣을 수 있음

생성방법: 생성자 new Array(length), new Array("data1", "data2" , "data3");
배열 리터럴 var colors = ["red","green","blue"];

5.2.1 배열감지
객체와 배열의 구분 어려움
> if (value instanceof Array) 문제점 : 실행 컨텍스트가 하나뿐이라고 가정.
만약 웹 페이지에 프레임이 여러개 있다면, 전역 실행 컨텍스트가 2개 있고, Array생성자도 두개있음.
-> ECMAScript 5는 Array.isArray()메서드 제공. (실행컨텍스트와 무관하게 주어진 값이 배열인지 확인)
5.2.2 변환 메서드
toString(), valueOf(), arrays.join(",")
5.2.3 스택 메서드
var count = colors.push("elem1","elem2"); //return the length of array
var item = colors.pop(); //the last elem comes out
5.2.4 큐 메서드
var count = colors.push("red", "green"); //put data in the tail
var item = colors.shift(); //the first elem comes out
var count = colors.shift("first"); //put data in the head
5.2.5 정렬 메서드
reverse(), sort();
var values =[0,1,5,10,15];
values.sort(); //0,1, 10, 15,5
values.sort(compare);

function compare(val1, val2) {if(val1 < val2) return -1; else if(val1 > val2) return 1; else return 0;}
//자신을 호출한 배열에 대한 참조 반환 > array.sort(compare).reverse() 가능하다는 뜻
5.2.6 조작 메서드
concat(): var colors2 = colors.concat("two", ["three","four"]);
slice()
splice()
5.2.7 위치 메서드
5.2.8 반복 메서드
매개변수 2개 받음: 각 데이터에서 실행할 함수, 함수 실행할 스코프 객체

every() - callback 호출결과 전부 true일경우 return true
filter () - callback 값이 true인경우에 해당하여 새 배열에 저장
forEach() - callback호출. 반환값 없음.
map() - callback호출하고 결과를 배열에 저장
some() - callback결과 하나라도 true이면 return true;

5.8 요약

자바스크립트 객체는 참조 값이라고 불리며 다음과 같이 내장된 참조 타입을 통해 특정 타입의 객체를 만들 수 있음

모든 참조 타입은 Object 타입의 작동방식을 상속
Array타입은 데이터 순서 있는 목록이며 포함 값을 조작하고 변환하는 기능 제공
Date타입은 현재 날짜 시간 포함해 그에 관한 정보를 제공, 가공하는 메서드 제공
RegExp타입은 //todo

자바스크립트의 독특한 점은 함수가 Function 타입의 인스턴스, 즉 함수도 객체의 일종
함수는 객체이므로 메서드가 있고, 이 메서드를 통해 함수 동작방식 확장 가능

JS는 원시 래퍼 타입이 있어서 원시값을 객체처럼 다룰 수 있음.
원시 래퍼 타입: Boolean, Number, String

각 래퍼 타입은 같은 이름의 원시 타입에 대응
원시 값을 읽기 모드로 접근할 때, 원시 래퍼 객체의 인스턴스가 만들어지며 이를 통해 데이터 조작
래퍼 객체는 원시값을 조작하는 문장이 실행되는 즉시 파기

내장 객체인 Global, Math 객체는 코드가 실행되는 즉시 생성.
ECMAScript에서 Global 객체에 접근방법은 없지만 웹 브라우저는 Global 객체를 window객체로 구현.
Global 객체는 모든 전역 변수와 함수를 프로퍼티 형태로 포함.
Math객체에는 수학계산에 필요한 프로퍼티와 메서드 내포.

8장. 브라우저 객체 모델

8.1 window객체

BOM의 핵심에는 브라우저의 인스턴스인 window객체가 있음

window객체의 역할: 브라우저 창의 자바스크립트 인터페이스 구실, ECMAScript Global객체로 기능
Therefore, window가 global객체 구실함 > @ 웹페이지에서 정의한 모든 객체,변수,함수

8.1.6 인터벌과 타임아웃
브라우저에서 자바스크립트는 단일 스레드로 실행되지만, 타임아웃과 인터벌을 통해 코드가 특정 시간에 실행될 수 있도록 조절 가능.

절대하면안됨, 성능저하: setTimeout("alert('AA')", 1000);
다음과 같이: setTimeout(function() {alert('AA');},1000);
타임아웃으로 실행하는 코드는 항상 전역 스코프에서 실행, 함수의 this값은 스트릭트 모드가 아닐때는 항상 window이고 스트릭트 모드에서는 항상 undefined

2016년 5월 25일 수요일

Cross Domain 문제 해결법 (jsonp, cors )

문제상황: Cross Domain

Cross Domain문제란?
ajax호출을 통해 다른 도메인에 있는 자원에 접근할 때
다른 도메인에 존재하는 데이터를 가져오는 경우, 자바스크립트가 있는 서버가 아닌 다른 서버와 통신하면 보안이슈에 의해서 통신할 수 없음. ( mash up application개발시에 주로 발생)

해결방법

Server Proxy

웹 브라우저에서 보여지고 있는 문서와 동일한 origin에 proxy를 두고, 다른 origin의 데이터를 가져옴.

Cross Document Messaging

페이지간 커뮤니케이션 지원하는 API

JSONP

html에 script src를 추가하여, 필요한 자원을 로드하듯이, 필요한 페이지 주소를 cript사이에 넣음
예)
<script> function test(data) {
console.log(data); //log로 데이터 출력됨
}
</script>

<script src="http://google.co.kr/example/api/getSearchPages/news.json?callback=test"></script>
한계점: HTTP METHOD:GET만 가능

CORS

cors.js를 이용하여 요청
response.setHeader("Access-Control-Allow-Origin","*");

참고

https://www.w3.org/TR/cors/
https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

2016년 5월 12일 목요일

IntelliJ 한글 인코딩 깨짐 해결 (properties file, utf-8 encoding): "Transparent natvie-to-ascii conversion"

[문제상황]: 프로젝트 Import후 모든 한글 파일들이 깨짐

project > preferences > 에서 인코딩 UTF-8선택하였지만 --> 한글깨짐

[해결방법]: 다음과 같이

Project> preferences > editor> file encodings에서 Properties File에 Transparent native-to-ascii conversion체크
Transparent native-to-ascii conversion:
JetsBrains의 설명에 따르면, Standard JAVA API는 ISO 8859-1을 이용하여 Properties파일을 인코딩함.
하지만 위에서 properties파일을 UTF-8로 세팅함
만약 위의 설정을 체크하면 다른인코딩을 사용한다면, properties파일은 \0A 과 같은 escape들의 연속으로 저장되더라도, 보여지기는 한글이나 ASCII아스키로 보일 수 있도록 지정해주는 옵션이다. //해결!
https://www.jetbrains.com/help/idea/2016.1/configuring-encoding-for-properties-files.html?origin=old_help

2016년 5월 9일 월요일

[spring] difference between @ModelAttribute method and parameter @modelattribute 차이점

@Controller@RequestMapping("/admin/survey")
public class SurveyManageController {

    @Autowired    private SurveyService surveyService;
    @Autowired    private StoreService storeService;
    @ModelAttribute("hello")
     public SurveyOpen testShowModelAttribute() {

        SurveyOpen surveyOpen = new SurveyOpen();        surveyOpen.setStoreNum(100);        surveyOpen.setMenuNum(200);        surveyOpen.setName("테스트");
        return surveyOpen;
    }

    @RequestMapping(method = RequestMethod.GET)
    public String showSurveyList(Model model) {

        List<SurveyListVo> surveyList = surveyService.getOpenSurveyList();        model.addAttribute("surveyList", surveyList);        return "/admin/survey_list";    }

    @RequestMapping(value="/open", method=RequestMethod.GET)
    public String showRegisterForm(Model model) {

        List<Store> storeList = storeService.getStoreList();        model.addAttribute("storeList", storeList);        model.addAttribute("surveyForm", new SurveyOpen());        return"/admin/survey_submit_form";    }

  @RequestMapping(value="/open", method=RequestMethod.POST)
    public String registerSurvey(@ModelAttribute("surveyForm") SurveyOpen survey){
        surveyService.registerSurvey(survey);        return"/admin/survey_submit_form";//        return "redirect:/admin/survey";    }

@ModelAttribute("model")
public ObjectToSendViewPage methodName() {
return new ObjectToSEndViewPage();

}

@ModelAttribute at Method: whenever controller is called, this method will be populated to deliver the object to view page.

upper code, hello object (@ModelAttribute("hello")
will be delivered to view all the time when showRegisterForm function or showSurveyList function is called.
access in view (jsp page)
${model.attributeName}

@ModelAttribute at Parameter: it only populated when the function containing this parameter is called.
public SurveyOpen testShowModelAttribute()

On the other hand, surveyForm object will be delivered only when registerSurvey method is called

-------------------------------------------------------------------------------------------

컨트롤러 안에 @ModelAttribute메서드
public SurveyOpen testShowModelAttribute()는, 위 메서드를 포함하는 컨트롤러중 어느것이라도 호출되면 뷰에 전달

파라미터로 전달된 @ModelAttribute,

@ModelAttribute("surveyForm") SurveyOpen surveyOpen

은

public String registerSurvey

호출시에만 view에 전달됨

[spring] handlerInterceptor calls in order

Spring interceptor works before or after a controller called.

Usage : Login check, common validation check, set up uri parameter
todo: implement prehandle(), postHandle(), or AfterCompletion() method

before controller called : preHandle() works
after controller called: postHandle() works
After view made : afterCompletion() works

xml file
<bean class="org.springframework.web.servlet.handler.SimpleUrlHandlerMapping">
<propery name="interceptors">
<list>
<ref bean="interceptor1"/>
<ref bean="interceptor2"/>

</list>
</property>
</bean>

Specific handler Calls in order

preHandler() works

interceptor1.preHandle()
interceptor2.preHandle()

handleRequest() at Controller
postHandler() works

interceptor2.postHandle()
interceptor1.postHandle()

render() at View Object called and makes the result for response
afterCompletion() works

interceptor2.afterCompletion()
interceptor1.afterCompletion()

reference: 최범균 - 웹개발자를 위한 Spring3.0 프로그래밍

[spring] 뷰에 전달되는 모델 데이터

커맨드 객체

종류: @ModelAttribute로 설정된 파라미터

@ModelAttribute어노테이션이 적용된 메서드가 리턴한 객체
메서드의 Map, Model, ModelMap 타입의 파라미터를 통해 설정된 모델

@Controller

public class GameSearchController {

    private SearchService searchService;        @ModelAttribute("searchTypeList")
    public List<SearchType> referenceSearchTypeList() {
        ArrayList<SearchType> options = new ArrayList<SearchType>();        options.add(new SearchType(1,"all"));        options.add(new SearchType(2,"item"));
        return options;    }
    @RequestMapping("/search/game.do")
    public ModelAndView search(@ModelAttribute("command")SearchCommand command, ModelMap model) {
        String[] queryList = new String[]{"one","two"};        model.addAttribute("queryList", queryList);                ModelAndView mav = new ModelAndView("search/game");        mav.addObject("searchResult",searchResult);    }
}

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html><head>    <title></title></head><body>  Popular Keyword: 
  <c:forEach var="popularQuery" items="${popularQueryList}">
    ${popularQuery}
  </c:forEach>
  검색 list
  <c:forEach var="searchType" items="${searchTypeList}">
    <c:if test="${command.type == searchType.code}">selected</c:if>
  </c:forEach>

  <input type="text" name="query" value="${command.query}"/>
  검색결과 : ${searchResult}
</body></html>

참조: 스프링3.0 프로그래밍 - 최범균

[spring] 컨트롤러 메서드의 리턴타입

컨트롤러 메서드는 ModelAndView를 비롯한 몇 가지 리턴 타입을 가질 수 있으며, 아래와 같다

@RequestMapping 메서드의 리턴타입

리턴타입	설명
ModelAndView	뷰 정보 및 모델 정보를 담고 있는 ModelAndView객체
Model	뷰에 전달할 객체 정보를 담고 있는 Model을 리턴한다. 이때 뷰 이름은 요청URL로 부터 결정된다. (RequestToViewNameTranslator를 통해 뷰 결정)
Map	뷰에 전달할 객체 정보를 담고 있는 Map을 리턴한다. 이때 뷰 이름은 요청URL로 부터 결정된다. (RequestToViewNameTranslator를 통해 뷰 결정)
String	뷰 이름을 리턴한다
View 객체	View객체를 직접 리턴. 해당 view 객체를 이용해서 뷰를 생성한다
void	메서드가 ServletResponse나 HttpServletResponse타입의 파라미터를 갖는 경우 메서드가 직접 응답을 처리한다고 가정한다. 그렇지 않을 경우 요청 URL로 부터 결정된 뷰를 보여준다.(RequestToViewNameTranslatro를 통해 뷰 결정)
@ResponseBody어노테이션 적용	메서드에서 @ResponseBody 어노테이션이 적용된 경우, 리턴 객체를 HTTP응답으로 전송한다. HttpMessageConverter를 이용해서 응답 스트림으로 변환한다.

//todo

contentNegotiation 을 통한 다양한 view제공 (REST서비스에서 XML VIew, JSON View, jsp view , etc..)
Message converter이용가능에 대하여 학습하고 정리하기 ( client츨의 accept-header를 근거로 적절한 MessageConverter에 해당하는 view 매핑하여 변환)

reference: 웹개발자를 위한 Spring 3.0 프로그래밍 - 최범균 지음- 가메출판사

[Spring] Command 객체 vs Model 객체

Command Object - 폼 형식에서 instance화되어 만들어진 된 자바객체 : 주로 사용자의 정보를 담는다

HTTP요청 파라미터를 저장한 객체, 기본적으로 클래스 이름을 모델명으로 사용. @ModelAttribute 어노테이션을 사용하여 모델명을 설정할 수 있음

Model Object :사용자에게 보여줄 뷰를 만들기 위하여 필요한 것으로서, 주로 response생성시에 사용됨

reference : http://www.coderanch.com/t/547052/Spring/Difference-Command-object-Model-object
reference: http://stackoverflow.com/questions/7583577/what-is-the-command-object-in-spring-framework
reference: 웹개발자를 위한 Spring 3.0 프로그래밍 - 최범균 지음- 가메출판사

Linux (UTF-8) Window 엑셀에서 CSV파일 한글 깨짐 (인코딩)

문제상황

Linux에서 CSV파일 생성(인코딩: UTF-8)
Window로 복사해서 open할경우 인코딩 깨짐

상황

Linux, MAC : CSV작성시 --> ( 한글 인코딩 : UTF-8 )
Window: EXCEL에서 CSV파일 생성 --> CP949
Window에서 EUC-KR파일을 그냥 저장하면 --> ASCII (한글날라감)

해결방법

(파일을 윈도우에서 수정하지 않고, 열어서 보기만 할경우)
(1)sublime text > Set file encoding to > UTF-8 선택
(2) 직접 linucx서버에서 파일 생성시 UTF-8 BOM생성해서 입력 해줌 (Hexa: EF BB BF)

public static final byte[] BOM = {(byte) 0xEF, (byte) 0xBB, (byte) 0xBF};

(파일을 윈도우에서 수정할 경우) --> 내용을 수정시 Window Excel에서 그냥 저장 누르면 ASCII로 인코딩되어 한글 깨짐, 다른이름으로 저장을 눌러 원래파일이름에 덮어쓰기 저장하면 EUC-KR로 저장됨
(파일을 서버에서 읽어야 할 경우) --> JAVA에서 fileInputStream 맨앞3Byte (BOM) 을 확인하여 fileread시에 파일의 인코딩에 맞게 read(4byte씩: utf-8은 가변길이로 1byte~4byte이므로 max길이인 4byte씩읽어야함)

참고: 한글인코딩에 관하여
http://d2.naver.com/helloworld/19187
참고: 한글인코딩 CP949 <> EUC-KR <>UTF-8에 관하여
http://studyforus.tistory.com/167

2016년 5월 8일 일요일

System.out.println 보다 Logger를 사용해야 하는 이유

Logger가 장려되는 이유

퍼포먼스가 좋다
Logger4J등 요새 나온 로거들은 비동기식 로그 지원(Asynchronous logging)은 I/O 연산 지원시 별도의 thread로 동작하므로 성능ㅑㅇ상이 됨
여러가지 모드 설정가능
debug, warning, error, info등 여러가지 모드가 지원되어 개발환경에서 모드별로 보이는 방식 설정할 수 있고
info모드는 local모드에서 개발시에는 보이지만, 배포시에는 log기록이 되지 않는등 여러가지 설정이 가능함

[mac] port forwarding: pfctl

MAC HTTPS 연결

[문제점] : MAC의 경우 1000이하의 port ( 80, 443 ) 막아둠
[해결방법] port tunneling (pfctl 사용: control the packet a filter):

실행
$sudo pfctl -ef "filename.conf"

[ filename.conf]
rdr-anchor "forwarding"
load anchor "forwarding" from "/etc/pf.anchors/eclipse.tomcat.forwarding"
[eclipse.tomcat.forwarding]
rdr pass on lo0 inet proto tcp from any to ip port {443, 8443} -> targetip port target-port //case your local ip
rdr pass on vmnet8 inet proto tcp from any to ip port {443, 8443} -> targetip port target-port //case when window vm ware network

port forwarding 중지
$sudo pfctl -d

hybrid app view rendering 빠르게 하는 방법 (수정중)

먼저 view페이지를 보여주고, <body>시작이후 script를 추가하여 ajax로 필요한 데이터를 호출
CDN 서버를 이용해 이미지 빠르게 사용자에게 제공해줄 수 있도록
이미지와 loading되는 소스 등을 cache하여 보여줄 수 있도록
뷰 페이지 (jsp)에서 이미지를 base64인코딩 이미지를 이용하여 바로 작은사이즈 이미지파일을 보여준 이후에, ajax호출을 통하여 실제 이미지로 교환

[java] vm options: system property ,시스템 프로퍼티, java -D옵션

(사용) tomcat run 실행시에 vm options에 -Dfile.encoding=utf8 와 같은 옵션 설정
tomcat이 JVM하에서 로드되는건데, system properties 를 통해 JVM통해 TOMCAT까지 전달한다고 생각하면 편함
vm options이란?

java file run이란, compile 된 프로그램을 실행하는 것과 같은데
실행시에 $ ./실행파일 -옵션[VM options] 과 같음
사용 이유: runtime시 (실행시점) 에 결정되는 변수들 설정에 용이
[ 사용예시1 ] 지금 어디 인스턴스에서 띄우는지, log configurationfile을 위치 설정할 수 있음
지금 개발환경/상용환경/QA환경인지 표시해 줄수 있고, 이에 따라 각각 맞는 properties를 띄울 수 있음
[ 사용예시2]
Tomcat Run시에 VM Options --> -Dservice.type =local 설정
java코드에서 System.getProperty("Dservice.type").equals("local") ? 이에 맞게 각각 설정 가능

cf) local,dev,stg등등 개발환경 설정시에
스프링에서 제공하는 VM option에
-Dspring.profiles.active=dev 과 같이하면 테스트에 조금 더 유용하긴 함
우리팀은 maven에서 classpath별로 위치를 잡음

[shellscript] source 명령어 (source ~/.bash_profile)

문제: bash_profile에 설정사항들이 바로 터미널에 반영되지 않는다
이유: 같은 세션내에서는 아직 새로 만든 bash_profile 파일이 적용되지 않았기 때문
해결방법: source ~/.bash_profile

source명령어의 역할?

그 해당위치의 파일을 지금 다시 읽어서 재실행
현재 다시 파일을 다시 load하는 기능

[source command] 에 대한 원문
The source command can be used to load any functions file into the current shell script or a command prompt.
It read and execute commands from given FILENAME and return.
The pathnames in $PATH are used to find the directory containing FILENAME. If any ARGUMENTS are supplied, they become the positional parameters when FILENAME is executed.

reference : https://bash.cyberciti.biz/guide/Source_command

MAC IntelliJ shorcuts 신박한 단축키 (introduce local variable) (세로줄 편집) (수정중)

기본

Project Structure (프로젝트 세팅) : ⌘;
Call hierarchy (호출한 것) : ^ ⌥ H
introduce local variable(자동 변수생성) : command + alt(option) + V

new String --> introduce local variable --> String aa = new String();

자동생성 : command + N
한줄 지우기 : command + X
세로 편집: Shift + command + 8
import 최적화 : Ctrl + Alt + O

[스프링배치 / Springbatch] transaction commit dao모드 선택

문제사항:

SQLException발생할 부분에 try catch가 안먹고exception도 propagation되지않는 기이한 현상
Transaction commit이 TaskletTemplate.java에서 동작하는 이상한 일이 발생하였었다.
그곳 <T> execute()내의 transaction.commit();후 query가 동작하게 되었었다.

원인

commonDAOSpsacSpbatBatchMode 라는 addbatch mode( query모아 놓았다가 commit)하는 빈을 사용하였기 떄문이다

일반 common을사용하였다.

문제 해결

//SQLException이 아닌

DuplicateKeyException발생

[JAVA] String.equals == 비교, DB필드로부터 String은 runtime생성

== , reference check

reference값이 같고, reference에있는 value값이 같은지 체크

DB로부터 값 주입시에는 literal이 아닌 instance생성이므로
DB값과 String비교시는 == 가 아닌 equals로 비교해야함
String strFromDB = DB에 있는 "Y"값 주입
String comp = "Y"
strFromDB=="Y" --> false

str1.equals(str2)

내부구현코드 보면, 하나하나씩 for문을 돌며 str1[i] 와 str2[i]의 값 비교
같은 값을 가졌는지 비교

String str1="aaa"
String str2="aaa"
str1==str2 --> false
str1.equals(str2) -->true

HTML 자바스크립트 script import되지 않을경우 : script src=""

문제점 <script src="aaa"/> src가 인클루드 되지 않음.
해결법: <script 파일 <script> </script>로 닫아줘야 제대로 include된다.
설명:

XHTML에서는 <script></script>닫는태그를 생략하고 <script src="URI_PATH" /> 사용해도 되지만
HTML에서는 <script src="URI_PATH" />이 문법을 허용하지 않음. 특히IE는 허용하지 않으므로 반드시
<script src="URI_PATH"></script>로 사용해야함

출처 : 프론트엔드 개발자를 위한 자바스크립트 프로그래밍

Head First Servlets & JSP(3) 기초개념 - 필터와 랩퍼

13. 필터와 랩퍼

: 필터는 요청을 중간에서 가로챕니다
요청(Request)을 중간에서 가로 챌 수 있다는 것은 응답(Response)도 함께 가로챈다는 것을 의미

[장점]은 서블릿이 눈치채지 못한다는 것
--> 클라이언트의 요청과 컨테이너가 서블릿의 service()메소드를 호출하는 중간에 끼어 들기 때문
--> 서블릿 수정하면서 보냈던거 필요없음. 필터하나만 수정하면 모든 서블릿에 적용됨
학습목표

웹 컨테이너가 요청을 어덯게 처리하는지 설명가능해야함
필터를 DD에 설정, 작성가능해야함
요청, 응답 랩퍼(Wrapper)를 만들 수 있어야함
문제 해결할 수 있는 패턴 선택가능해야함

인터셉팅 필터 패턴
모델-뷰-컨트롤러
프론트 컨트롤러
서비스 로게이터
비지니스 델리게이트
트랜스퍼 오브젝트

필터란?

자바 컴포넌트(서블릿과 비슷)
필터를 사용해서 서블릿으로 요청이 넘어가기전, 요청을 가로채 어떤 처리 할 수 있으며 서블릿 작업 완료 후 응답에 어떤 작업 가능

DD에 필터를 선언해둔 정보에 기초해서, 컨테이너는 언제 필터를 실행할지 인지하고 있음
배포자(Deployer)가 URL패턴에 따라 호출할 필터가 무엇인지 매핑함
--> 프로그래머가 아닌 배포자가 어떤 서블릿이 어떤 필터에 의해 처리되는지 결정함

14.패턴과 스트럿츠(엔터프라이즈 디자인 패턴)

reference : Head First Servlet & JSP

Head First Servlets & JSP(1) 기초개념 - 컨테이너

웹 클라이언트와 웹 서버가 어떻게 서로 커뮤니케이션하는가

웹서버는 어떤 일을 하나요? 웹 서버는 클라이언트로부터 요청을 받아, 요청한 것을 넘겨주는일

클라이언트는 무엇을 하나? 사용자가 서버에 요청을 보낼 수 잇는 기능 제공. 요청 보내고 난 다음, 서버가 보내온 요청의 결과를 화면에 출력
HTML코드를 읽어서(파싱) 화면에 보임

(클라이언트)와 (서버)는 HTML과 HTTP를 어떻게 다룰지 압니다
HTML

(클라이언트) 요청 수신후; 서버는 브라우저에게 컨텐츠 타입이 무엇인지 알려줌.
(브라우저)는 이 내용에 기초하여 어떻게 화면에 출력할지 준비
HTML이라는 명령어로; 브라우저가 화면에 컨텐츠를 출력할지에 대한 명령문(instruction)

컨테이너가 주는 혜택	서블릿 실행하고 관리
1. 통신(커뮤니케이션)지원	서블릿과 웹 서버가 서로 통신할 수 있는 손쉬운 방법 제공. 개발자가 서버와 대화하기 위해 ServerSocket을 만들고, 특정 포트에 리스닝 하고, 연결요청이 들어오면 스트림 생성 // 할필요 없음 컨테이너는 어떻게 웹 서버와 통신해야하는지 잘 알 고 있으며, 이런 통신기능을 API로 제공함
2. 생명주기(라이프사이클)관리	컨테이너는 서블릿의 탄생과 죽음을 관리 컨테이너는 서블릿 클래스를 로딩하여 인스턴스화하고, 초기화 메소드를 호출하고, 요청이 들어오면 적절한 서블릿 메소드를 호출하고, 서블릿이 생명을 다하면 GC진행 // 서블릿 자원을 효율적으로 관리해줌
3. 멀티스레딩 지원	//다중요청에 대한 스레드 생성 및 운영에 대해서 처리해줌(스레드안전성보장) 컨테이너는 요청마다 스레드 만듬 클라이언트 요청에 따라 적절한 HTTP서비스 메소드를 실행하면, 스레딩 작업끝남(스레드 죽음)
4.선언적인 보안관리	보안관련된 내용을 서블릿 또는 자바 클래스 코드안에 하드코딩 할 필요없고 XML 배포서술자(Deploy Descriptor)에 기록하면됨. -->보안 수정사항시 javacode수정하고 다시 컴파일하지 않아도 보안관리 가능
5. JSP지원	JSP코드를 실제 자바코드로 변환

개발자가 비지니스 로직에 충실하게 해주며, 스레딩이나 보완 네트워크 통신에 관련된 문제를 컨테이너에 위임.
서블릿은 서비스 클라이언트;클라이언트 요청 수신 및 응답; 컨테이너는 서블릿을 관리해주고 생성, 소멸하는 사후까지 관리가 컨테이너

1. 서블릿과 JSP는 어디에쓰는 물건인고?

웹 애플리케이션은 이제 막 달아오른 시장.

2. 웹 애플리케이션 아키텍쳐

서블릿은 도움이 필요합니다. 요청이 들어오면, 누군가 서블릿을 초기화해서, 요청을 처리할 새로운 스레드를 만들어야 합니다. 그러면 그 누군가는 서블릿의 doPost()또는 doGet()메서드를 호출.
여기에 또 하나, 이 두 메소드의 매개변수로 들어가는 HTTPRequest 와 HTTPResponse객체를 누군가가 생성해서 서블릿으로 넘겨주어야 겠지요. 또한 누군가는 서블릿이 생성, 소멸하는 시점에서 리소스 관리도 해야합니다. 그 누군가가 누구냐 하는 것인데, 바로 컨테이너입니다.

3. 초간단 미니 MVC 튜토리얼

4.서블릿이 되어보자

서블릿은 평생을 서비스 클라이언트로 삶니다.
서블릿이 하는 일은 클라이언트로부터 요청을 받아 이에 응답하는 일입니다.
요청은 "환영페이지 보여주세요(GET)"에서부터 "결제해주세요"라는 것까지 다양. Request객체에는 사용자의 중요한 데이터들이 들어있기 때문에, 서블릿은 어떻게 이 정보를 읽어오고, 사용할 것인지 알아야 합니다. Response객체는 브라우저가 화면에 정보를 출력하거나, 바이트 정보를 내려받는것과 같은 정보 전송역할을 하기에, 서블릿은 데이터를 어떻게 전송하는가도 미리 알고 있어야 합니다.

5. 웹애플리케이션이 되어보자

6. 대화 상태 유지하기
웹 서버에는 메모리가 없습니다.
웹 서버는 응답을 보낸 다음에는 당신이 누구였는지 조차 잊어버립니다. 다음 번에 다시 요청을 해도, 그가 이전의 당신이었다는 것을 모르죠.

7. JSP가 되어보자
JSP, 서블릿이 되다.
개발자가 서블릿을 만들지는 않았지만, 컨테이너는 알아서 JSP를 서블릿 소스코드로 변환한 다음, 컴파일하여 완전한 서블릿 클래스로 탈바꿈시킵니다.

8. 스크립트가 없는 페이지

9. 막강한 커스텀 태그

10. JSTL만으로 만족스럽지 않을때

11. 웹 애플리케이션을 배포해보자
이제 개발한 웹 애플리케이션을 배포할 때가 되었군요.

12. 비밀스럽게, 안전하게
지금 당신의 웹 애플리케이션이 위험에 처해 있다.

13. 막강 필터
필터는 요청을 중간에서 가로 챕니다.
요청(Request)을 중간에서 가로챌 수 있다는 것은 응답(Response)도 함께 가로챈다는 것을 의미합니다. 이 방식의 장점은 무엇보다도 서블릿이 눈치채지 못한다는 것이죠. 즉 클라이언트의 요청과 컨테이너가 서블릿의 service()메소도를 호출하는 중간에 끼어 들기 때문에 무슨 일이 있었는지 모른다는 말이죠. 그런데 뭐하려고 이러냐고요?

14. 엔터프라이즈 디자인 패턴
누군가는 이 문제를 겪었습니다.
자바로 웹 애플리케이션 개발이 처음이라면, 운이 좋군요. 이제 J2EE 셔츠를 입고, 이 길을 걸어간 수 많은 개발자들이 흘린 땀과 지혜의 총화를 만나게 될 것입니다.

reference : Head First Servlet & JSP