아스피린 개발자

ES5 : Javascript 정리

필로그래머 — Sat, 7 Apr 2018 10:48:54 +0900

ES5 Seminar 정리! #양재동 코드랩

Javascript의 기능 (Control)

- DOM : HTML, CSS 컨트롤

- HTML5 API : File, IndexedDB

- 그래픽 : SVG, Canvas, WebGL

- 통신 : XMLHttpRequest, Socket

책 추천 - 몰입 자바스크립트!, EcmaScript6

함수 형태

빌트인(Built-in) function 오브젝트

- 내장 함수

- Array.isArray()

- Array.prototype.forEach()

function 오브젝트

- function book () {}

- var book = function() {...}

function 인스턴스

- new Book(), new 사용 ( 대문자 사용 )

- Book.prototype의 프로퍼티 사용 (이걸 이해하지 못하면 ES6의 많은 부분을 포기하는 것과 같다!)

▶ 오브젝트와 인스턴스의 차이

- function 오브젝트는 단일 수행이지만 function 인스턴스는 동일한 메소드를 가진 인스턴스를 생성하고 그 값들을 조작하여 수행할 수 있다.

function 오브젝트

호출 형태

- function sports() {...};

- sports();

▶ 함수가 오브젝트여야 호출이 가능하다

▶엔진이 function 타입 키워드를 만나면

- 빌트인 function 오브젝트의 prototype에 연결된 프로퍼티(call, bind 등)를 결합해 function 오브젝트를 알맞게 생성한다.

- 이렇게 생성한 오브젝트를 sports 변수에 할당한다.

▶ function 오브젝트 저장 형태

- function 명령어로 생성한 function 오브젝트를 { name : value } 형태로 저장한다.

ex) { sports : function 오브젝트 }

- 함수를 호출하면 함수 이름으로 저장된 오브젝트를 탐색하고 value 값을 구한 뒤 value 타입이 function 오브젝트이면 호출한다.

- javascript에선 타입을 컴파일할 때 결정하기 때문에 밑에서 얼마든지 key 값의 타입을 바꿀 수 있다. java나 c++ 같은 경우엔 타입을 프리 컴파일 과정에서 미리 결정을 해서 이런 오류가 발생할 가능성이 적지만 javascript의 자료형은 가변적이기 때문에 조심해야 한다.

▶ 함수가 호출되면 엔진은 { name : {{ name: value }, {..}} } 형태의 프로퍼티를 조합하여 실행 환경을 설정하고 함수 코드를 실행한다.

따라서 { name : value } 형태에 맞추어 생각을 전환할 필요가 있다.

▶ 어찌보면 HTML이나 CSS도 { name : value } 구조라고 볼 수 있다.

div = name

element = value

class = class

id = id

객체지향언어

javscript는 EcmaScript 스펙에 나와있듯이 객체지향언어이다.

그래서 function 오브젝트를 객체로 인식하고 접근할 필요가 있다.

OOP의 개념을 이해해야 한다.

ES6는 OOP의 개념을 정확히 구현할 수 있도록 환경을 조성했다.

그렇기에 더더욱 OOP 개념에 따라 코드를 작성해야 한다.

아키텍처, 메커니즘

아키텍처 : Architecture

- 목적을 가진 구조

- 자바스크립트 목적을 달성하기 위한 구조

메커니즘 : Mechanism

- 목적을 달성하기 위한 방법

- 목적에 따라 방법, 기준이 달라질 수 있음

아키텍처와 메커니즘 이해 필요

javascript 목적

javascript는 프로그래밍 언어다. 언어의 목적은 소통이다.

프로그램을 통해 javscript 엔진과 소통하자.

문법을 지켜야 소통이 가능하다.

function 오브젝트 예제

(1) function 오브젝트 생성

- 코드 : function sports(){};

(2) sports 오브젝트에 prototype 오브젝트 ㅊㅁ부

- 코드 : {

sports : {

prototype : { ... }

}

(3) prototype에 constructor 프로퍼티 첨부

- 코드 : {

sports : {

prototype : { ... },

constructor: sports 전체 참조

}

(4) prototype에 _proto_ 오브젝트 첨부

- ES5 스펙에 _proto_를 기술하지 않음

- ES6 스펙엔 _proto_ 기술, 엔진 사용 정의

- ES5 기준에선 표준이 아님

- 코드 : {

sports : {

prototype : { ... },

constructor: sports 전체 참조, __p

__proto__ : { ... }

// 엔진이 사용하는 key이기에 개발자는 건드리지 말 것!

}

(5) 빌트인 Object 오브젝트의 prototype에 연결된 프로퍼티를 결합해 Object 인스턴스를 생성한다. 생성한 Object 인스턴스를 prototype._proto_에 상속한다. (함수를 선언할 때마다 불필요하게 상속하기 때문에 설계 미스이다.) 마지막으로 sports 오브젝트에 _proto_ 오브젝트 첨부한다.

- 코드 : {

sports : {

prototype : { ... },

constructor: sports 전체 참조, __p

__proto__ : {

Object.prototype.call : { ... },

Object.prototype.apply : { ... },

Object.prototype... : { ... }

}

(6) 빌트인 function 오브젝트의 prototype에 연결된 프로퍼티로 function 인스턴스를 생성한 후 __proto__에 첨부한다.

- 코드 : {

sports : {

prototype : { ... },

constructor: sports 전체 참조, __p

__proto__ : {

function() {

Object.prototype.call : { ... },

Object.prototype.apply : { ... },

Object.prototype... : { ... }

}

(7) Math, JSON, Global Object를 제외한 모든 오브젝트는 prototype이 있다.

8. 내부 프로퍼티 분류

- 공통 프로퍼티, 선택적 프로퍼티

▶공통 프로퍼티 :

모든 오브젝트에 공통으로 설정되는 프로퍼티

▶선택적 프로퍼티 :

오브젝트에 따라 선택적으로 설정되는 프로퍼티, 해당되는 오브젝트에 설정

9. 함수 정의

함수 정의

- 함수가 실행될 수 있도록 javascript 문법에 맞게 작성

함수 정의 형태

- 함수 선언문 (function declaration)

- 함수 표현식 (function expression)

- new function(param1, param2, body)

--- 문자열로 작성 -> 해킹 위험

▶ 함수 선언문

- function [function] : function 키워드

- 식별자 [String] : 함수 이름

- 파라미터 [Any] : 파라미터 리스트

- 함수 블록 [Object] : 실행 가능한 코드

- 반환 [function] : 생성한 function 오브젝트

▶ 함수 표현식

- var name = function() {};

- function 오브젝트를 생성하여 변수에 할당

10. 엔진 해석

javascript는 script 언어이다. script 언어는 작성된 코드를 위에서부터 한 줄 씩 해석(컴파일, 실행)하지만 javascript는 조금 다르다.

함수 형태에 따라 해석 순서가 다르고 중간에 있는 코드가 먼저 해석될 수 있다.

먼저 전체 함수 선언문을 차례대로 해석한다.

- function sports(){};

이어서 차례대로 함수 표현식을 해석한다.

- var sports = function(){};

ex)

   
 window.onload = function sports() {
        debugger;
        var player = 11;

        function soccer() {
            return player;
        } // debugger 줄에서 이미 함수로 해석됨

baseball(); // undefined. 
 //함수 표현식은 변수에 undefined로 할당되기 때문

        var baseball = function() {
 console.log(player)
 }; 
 // debugger 줄에서 변수로 해석됨

        soccer();
    }

    sports();

▶ 코드 해석 단계

(1) 함수 선언문 해석 : 한번 쭉 내려가면서 함수를 탐색한다.

- function sports(){};

- function soccer(){};

(2) 변수 초기화

- var player = undefined;

- var baseball = undefined;

(3)

var player = 11;

var baseball = function() {};

11. 함수 선언문 오버라이딩

▶ 오버라이딩(Overriding)

- 함수 이름이 같을 때 함수 코드 대체(replace)

▶ 자바스크립트는 파라미터, 수, 데이터 타입을 체크하지 않는다.

모두 { name : value }로 저장하기 때문이다.

▶ 대체되는 상황

(1) 초기화 단계에서 위에서부터 함수 선언문을 function 오브젝트로 생성한다.

(2) 아래에 같은 이름의 함수 선언문이 있으면 아래의 함수 선언문이 호출된다.

ex)

   
 window.onload = function sports() {
        function soccer() {
            console.log('축구1');
        };
        
        soccer();

        function soccer() {
            console.log('축구2');
        }
    }

12. 함수 파라미터

파라미터(Parameter) 상호 관계

- 매개 변수

- 호출하는 함수 : 값 전송

- 호출받는 함수 : 전송된 값을 받음

파라미터 작성

- 호출하는 함수의 파라미터에 값 작성

- 호출받는 함수의 파라미터에 이름 작성

파라미터 값 처리

- 호출한 함수에서 보낸 값을 호출 받는 함수의 순서에 따라 처리

(엔진은 파라미터 순서로 값을 mapping 한다.)

파라미터 수가 유동적이라면 arguments를 사용해도 된다.

arguments[0] : 파라미터의 첫번째 값

그러나 ES6부터 rest parameter 문법이 생겼고 arguments는 거의 쓰지 않는다.

▶ arguments 값 반환

호출한 함수의 파라미터 값 타입 - 문자열, 숫자, 배열, 오브젝트 등

매커니즘

- 파라미터 순서에서 0부터 인덱스를 부여하여 key로 사용하고

파라미터로 받은 값을 value에 설정한다

- { 0 : value, 1 : value }

* 결론 : for()문 사용

- 파라미터가 배열일 때 for~in 문으로 읽으면 length 프로퍼티를 제외시키는 코드가 필요하기 때문이다.

Array-like

- key 값이 0부터 1씩 증가

- length 프로퍼티가 있어야 함

- 객체지만 인덱스값을 가지고 증가하기에 거의 배열 같은 친구

=> 이러한 연유로 ES6에선 for~of 문법이 나오게 된다.

▶ 엔진 처리

(1) 함수 호출

(2) 파라미터에 값 할당

(3) arguments 오브젝트 생성

(4) arguments 오브젝트에 파라미터 값 설정

(5) 함수 코드 실행

12. 스코프

Scope : 함수가 실행될 때 영향을 받는 범위.

ex) indexOf()의 스코프

(1) indexOf()는 String 오브젝트에 존재

- String 오브젝트가 indexOf()의 스코프

- indexOf()는 문자열을 처리하는 String 오브젝트의 영향을 받음

(2) Number 오브젝트에서 indexOf()를 호출하면 에러

Number 오브젝트에 indexOf()가 없기 때문이다.

Number 오브젝트가 indexOf()의 스코프가 아니기 때문이다.

▶ 사용 목적

(1) 범위 제한

- 신속한 검색 및 접근

- 스코프 안에서 우선 검색

(2) 같은 프로퍼티 이름 사용 가능

- String 오브젝트의 indexOf()

- Array 오브젝트의 indexOf()

(3) 오브젝트로 보면 오브젝트가 다르지만 함수에서 보면 스코프가 다르다. 실행될 때 함수의 스코프에서 검색하며 함수 안에서 밖으로 나가는 개념이다.

▶ 스코프 구조

- function 오브젝트를 생성할 때.

- 함수를 호출할 때 설정하는 게 아니다. 이를 정적 스코프라고 함.

- function 안의 코드에 대해서는 구조를 만들지 않는다.

*참고 : 동적 스코프란 함수를 호출할 때 설정하는 스코프를 의미한다. ES5에서 유일하게 동적 스코프를 허용하는 함수가 eval()다. 함수를 호출할 때마다 스코프를 형성하기 때문에 부담스럽다.

13. 글로벌 프로젝트

프로그램의 시작점

- 빌트인 오브젝트

글로벌 오브젝트 특성

(1) 전체 프로그램을 통해 하나만 존재

- 전체 프로그램 : 모든 <script>에 작성한 코드

(2) 오브젝트 이름을 작성하지 않고 함수를 호출하면 글로벌 오브젝트로 간주

글로벌 오브젝트 생성

(1) 첫 번째 <script>에서 한 번만 생성

- 자바스크립트 실행 환경 설정

(2) <script>의 프로그램 실행 전에 생성

new 사용 불가

- 인스턴스 생성 불가

▶ 글로벌 스코프

- 전체를 통해 하나만 존재하므로 스코프도 하나

- 글로벌 오브젝트와 글로벌 스코프가 같음

- 스코프가 전체이므로 모든 코드에서 사용 가능

* 최상위 스코프

- 함수에서 보면 최종 검색 스코프

- 검색한 프로퍼티가 없으면 undefined 반환

▶ 지역/글로벌 함수

- 지역함수 : 함수 안에서 var 키워드를 사용한 함수와 함수 선언문

- strict 모드일 때 -> var 키워드를 사용하지 않고 함수를 선언하면 에러 발생

* 글로벌에서 var 키워드를 사용하지 않으면 delete가 실행된다.

* 되도록 글로벌, 지역에 관계없이 var 키워드를 사용하자.

▶ 변수 사용(접근)

- 글로벌 변수 : 어느 위치에서도 변수 사용 가능

- 지역 변수 : 함수 안으로 들어가야 변수 접근 가능. 함수 외부에서 직접 사용 불가

14. 바인딩

바인딩(binding)

구조적으로 결속된 상태로 만드는 것

대상 - 오브젝트와 프로퍼티 이름

var get = {

... qty : value,

... price: value

};

바인딩 목적

- 스코프 결정

- 스코프에서 이름 식별

바인딩 시점 분류

- 정적 바인딩(Lexical, Static Binding)

- 동적 바인딩(Dynamic Binding)

스코프 체인

- 스코프가 상하구조로 연결된 개념/구조

- 스코프 체인을 사용하여 근접한 스코프에서 프로퍼티(함수, 변수) 검색

- ES3에서 채용

ES5에서 scope chain 개념이 폐지되었다.

- 렉시컬 환경(Lexical Environment) 개념 사용

▶ 바인딩 시점

* 정적 바인딩

(1) 초기화 단계에서 바인딩

(2) 함수 선언문 이름으로 바인딩

(3) 변수, 함수 표현식 이름으로 바인딩

(4) 대부분 정적 바인딩

(5) 값은 바인딩 대상이 아님

* 동적 바인딩

- 실행 단계에서 바인딩

- eval() 함수, with 문

▶ 바인딩 시점의 중요성

- 바인딩할 때 스코프가 결정되기 때문이다.

* function 오브젝트 생성 시점에 스코프가 결정된다.

- 인식한 스코프를 [[Scope]]에 설정하고

- 정적 바인딩은 [[Scope]]를 스코프로 사용한다.

- 스코프는 변경되지 않는다.

* 같은 단계의 모든 함수의 스코프가 같다.

▶ 프로퍼티 검색 방법

* [[Scope]] 프로퍼티에서 검색

엔진 해석 순서

-> 변수 생성 및 함수 생성 (key 값) -> 스코프 설정 -> (value) 값 할당 -> 함수 호출 -> 파라미터 값 할당 및 arguments 생성 -> 함수 실행

16. 렉시컬 환경

(1) 함수가 사용할 함수, 변수를 렉시컬 환경에 설정한다.

- 오브젝트, 변수, 다른 함수 참조가 가능하다.

(2) 함수가 구조적 환경에서 독립적으로 실행하기 위한 매커니즘 제공

초기화 단계에서 해석한 모든 함수와 변수를 { key : value } 형태로 저장한다.

▶ 렉시컬 환경 생성 : function, with, try ~ catch 문에서 생성됨

▶ 렉시컬 환경 구성 형태

- 렉시컬 환경(LE) = {

... 환경 레코드(ER: Environment Record) : {

sports: "농구",

member: "5명"

} ,

...외부 렉시컬 환경 참조

(OLER: Outer Lexical Environment Reference) : {

play: function() {},

values: [12, 34, 56]

}

▶ 외부 렉시컬 환경 참조

장점

- 근접한 렉시컬 환경의 논리적 연결을 통해, 현재 렉시컬 환경에 영향을 미치지 않으면서, 1단계 밖 스코프로 이동하지 않고 프로퍼티 사용

▶ 검색 메커니즘

1. 프로퍼티 검색 순서 방법

▶ 글로벌 환경

- 글로벌 오브젝트를 위한 렉시컬 환경

- 렉시컬 환경과 형태가 같음

특징

- 동적으로 함수와 변수 바인딩

- 함수에서 var 키워드를 사용하지 않고 함수/변수를 사용

17. 실행 콘텍스트

생성 시점

- 실행할 수 있는 코드를 만났을 때

실행할 수 있는 코드 유형

- 함수 코드(function code)

- 글로벌 코드(global code)

- eval 코드(eval code)

코드 유형 분리 이유

- 실행 컨텍스트에서 처리 방법과 환경이 다르기 때문이다.

- 함수 코드 : 렉시컬 환경

- 글로벌 코드 : 글로벌 환경

- eval 코드 : 동적 환경

18. 환경 컴포넌트

환경 컴포넌트 구성

- 렉시컬 환경 컴포넌트와 변수 환경 컴포넌트 지칭

19 . this 바인딩 컴포넌트

목적

- this로, 호출한 함수가 속한 오브젝트의 프로퍼티에 접근

접근 메커니즘

1. 호출한 함수가 속한 오브젝트를 참조할 수 있도록 this 바인딩 컴포넌트에 호출된 함수가 속한 오브젝트 참조 설정

2. obj.sports() 형태에서 this로 obj 참조

3. obj의 프로퍼티가 변경되면 동적으로 참조

4. obj를 this 바인딩 컴포넌트에서 참조할 수 있도록 설정

▶ this와 strict 모드

1. 글로벌 오브젝트에서 오브젝트를 작성하지 않고 함수를 호출하면

- this 바인딩 컴포넌트에는 undefined가 설정된다.

- strict 모드가 아닐 경우에는 this가 글로벌 오브젝트인 window를 참조한다.

      
 var sports = {
            value: 123,

            get: function() {
                var value = 456;
                console.log(this === window);
                console.log(this.value);
                
            }
        };

        var comp = sports.get;
        sports.get();
        comp(); // 이 경우 this 컴포넌트는 use strict 모드가 아니기
 때문에 global oject에 바인딩된다.

20. Constructor

▶ Constructor 프로퍼티

- Function 오브젝트를 생성할 때 설정되며

- 생성하는 Function 오브젝트를 참조하도록 설정

- prototype에 연결되어 있음

개인 경험

- constructor가 없더라도 인스턴스가 생성됨

- 엔진에서 이를 고려하여 생성하는 것으로 생각됨

- 하지만 필요하지 않다는 의미는 아님

- ES6에서 constructor가 중요하므로 이해가 필요하다.

▶ property

- 목적 :

(1) 프로퍼티 연결을 통한 프로퍼티 확장

(2) 생성한 각 인스턴스에서 prototype의 프로퍼티 공유

(3) 상속 : 다른 function 인스턴스를 연결

- 프로퍼티 확장

(1) prototype에 프로퍼티 {key : value}를 연결하여 확장

- 프로퍼티 공유

(1) prototype에 연결된 프로퍼티로 인스턴스 생성

(2) 인스턴스에서 prototype에 연결된 프로퍼티 값 공유

21. 오브젝트 반환

new 연산자로 인스턴스를 생성할 때

- 생성자 함수에 return 문을 작성하지 않으면 인스턴스를 반환한다.

- 생성자 함수에 return 문을 작성하면 표현식 평가 결과에 따라 인스턴스가 반환되지 않을 수도 있다.

22. call()과 this

- 예제

var get = function(value) {
    return this.base * this.rate + value;
}

var result = get.call({base: 20, rate: 30}, 50)
console.log(result);

/////////////////////////////////////////////////////////////////

var obj = {value: 100};

var values = [1,2,3].map(function(el, index) {
    return el + this.value;
}, obj); // 두번째 파라미터는 this가 참조되는 주소를 의미한다.

console.log(values);
 

var sports = {
    value: 123,
    soccer: {
        value: 456,
        get: function() {
            return this.value;
        }
    }
}

var result = sports.soccer.get.call(sports);
console.log(result); // 123

var result = sports.soccer.get.call(sports.soccer);
console.log(result); // 456

23. bind()와 this

- 예제

var el = document.getElementById('clickID');

var sports = {
    value: 123
}

el.onclick = show.bind(sports, el);
// 두번째 파라미터는 해당 함수의 첫번째 파라미터로 간다.

function show(element, event) {
    console.log(element.textContent);
    console.log(event.target.id);
    console.log(this.value);
}
 

24. 캡슐화

캡슐화

- 객체의 메서드와 프로퍼티를 외부에 숨김

- 처리 방법은 숨기고 사용할 수 있는 메서드와 파라미터를 외부에 공개

자바스크립트의 캡슐화

- 함수 안의 함수를 외부에서 호출 불가하게 하기

- 지역 변수 값을 외부에서 접근 불가하게 하기

- source가 오픈되는 것과 exe 파일의 차이가 있음

25. 다형성

자바스크립트의 다형성

- 파라미터 수와 데이터 타입에 영향을 받지 않음

- 메소드 이름이 같으면 나중에 작성한 것으로 대체됨

26. 상속(유전)

상속(유전)

- 상속의 목적은 객체의 재사용에 있다.

- 목적에 맞는 객체를 내 객체에 포함시키는 것

- 다중상속

자바스크립트의 상속(유전)

- 오브젝트{}와 오브젝틀르 병합

- 함수의 prototype에 인스턴스 연결

- 다중상속 불가

- 다수의 인스턴스가 연결된 형태: Prototype Chain

27. 검색 우선순위

/**
 *  반복되는 오브젝트의 전개 
 */
var sports = {
    soccer: {member: 11, time: 90},
    basketball: {member: 5, time: 48}
};

function showValues(sports) {
    var type, obj;

    for (type in sports) {
        obj = sports[type];
        typeof obj === 'object' ?
            showValues(obj) :
            console.log(type + ' : ' + sports[type]);
    }
}

showValues(sports)

28. 함수 즉시 실행

함수 즉시 실행이란?

- 엔진이 함수 코드를 만나면 자동으로 함수를 실행하는 행태

        (function() {
            console.log('스포츠');
        }());
        
        var total = (1 + 2);
        var value = function() {
            return 123;
        }
        console.log('함수호출: ' + value());

        value = function() {
            return 456;
        }();
        console.log('자동실행: ' + value);

        value = (function(){
            return 789;
        }());
        console.log(value);
        
        (function(){
            console.log('ABC');
        }());

29. 클로저

클로저 개요

- 자바스크립트의 특정 기능을 지칭

- function 오브젝트를 생성할 때 [[Scope]]에 렉시컬 환경을 설정하고

함수가 호출되었을 때 [[Scope]]의 프로퍼티를 사용하는 메커니즘

- function 오브젝트 생성 과정을 히해하면 클로저는 단지 논리적인 접근.

        function sports() {
            var value = 100;

            function setValue(param) {
                value = param;
            };

            var getValue = function(param) {
                value = value + param;
                return value;
            };

            return getValue;
        };
        
        var getObject = sports();

        console.log(getObject(123));
        console.log(getObject(77));
        console.log(getObject.value);
        

ㅁㄴㅇ

필로그래머 — Sun, 28 Jan 2018 21:06:55 +0900

블로그 관리를 안한지 몇 개월이 됐음에도 아직까지 방문해주시는 분들이 많이 있어 놀랐습니다. 초창기 Java와 서버 세팅에 대한 기초를 배울 때 스스로 정리해보자 했던 글들이 여러모로 검색이 되고 여전히 읽혀지는구나 싶어 신기하고 그렇군요.

사실 저는 현재 프론트엔드 개발을 주로 하고 있습니다. 실무에서 일을 하다보니 시간적인 여유 때문에 글을 쓰고 정리하는 것보단 그냥 저만의 사전에 추가하듯 필요한 내용이 있을 때 북마크에 추가하는 편입니다. 그런데 확실히 북마크에 추가해놓으면 다시 잘 확인해보질 않아서 곧 프론트엔드 개발 쪽으로 블로그 글들을 정리하는 게 좋겠다는 생각이 들더라구요. 앞으로 프로젝트를 진행하면서 기억해야 되는 부분이 있을 때 정리를 해보겠습니다.

또한 기회가 된다면 신입으로 회사에 들어가서 겪게된 이야기들도 정리해보고 싶어요. 다른 사람들과는 조금 다른 루트를 밟으면서 성장하고 있기에 색다르게 공유할 부분들이 있을 것 같은데 이 부분도 곧 글을 써보겠습니다. 이렇게 적어놓아야 제 스스로 무언가를 더 하게될 것 같아서요 :D

1년간의 회고록을 잘 작성할 수 있도록 열심히 작업해보겠습니다!

[ReactJS] ECMA2016 super() 메소드와 component

필로그래머 — Mon, 11 Dec 2017 23:39:54 +0900

■ ReactJS: constructor()

Q. constructor() 사용 시에 super() 메서드를 사용해야 하는 이유

- 'this' is not allowed before super() error

A. http://cheng.logdown.com/posts/2016/03/26/683329

[CSS3] float:left 속성의 이해와 overflow:hidden 응용

필로그래머 — Sun, 22 Oct 2017 19:36:40 +0900

✔︎ [CSS] float:left 속성의 이해

▶ float의 등장 배경

img 태그는 block 성질을 가지고 있습니다.

그래서 이미지의 width 값이 작더라도 한 줄을 통째로 차지해버립니다.

이 경우엔 이미지 바로 옆 쪽에 문장을 배치할 수 없습니다.

이러한 문제를 해결하기 위해 등장한 것이 float 속성입니다.

float 속성은 이미지의 왼쪽/오른쪽에 문장을 배치할 수 있도록 도와줍니다.

(물론 이미지 뿐만 아니라 다른 요소도 float 속성을 가질 수 있습니다.)

(다음 그림 참고)

출처 : https://www.1keydata.com/css-tutorial/float.php

▶ float:left 예제

float:left는 해당 속성이 적용된 태그를 왼쪽으로 배열하도록 합니다.

다음은 Aside와 Section에 float:left 속성을 적용시킨 결과입니다.

예상했던 대로, Aside 옆에 Section이 차례대로 붙어있는 것을 알 수 있습니다.

but,

<div id="wrap"></div> 안에 있는 Aside와 Section 태그는 잘 배치되었지만,

wrap 태그를 벗어난 footer 태그마저 '부유'하고 있는 것을 확인할 수 있습니다.

이러한 문제를 해결하려면 어떻게 해야 할까요?

▶ float:left 실무

float:left가 적용된 태그의 '부모 태그'에다가 overflow:hidden 속성을 주면

다음과 같이 float:left 속성이 적용되지 않은 다른 태그들이 부유하지

않고 있는 것을 확인할 수 있습니다. 이러한 방법을 One True Layout 방식이라고 부릅니다.

[CSS3] display:none과 visibility:hidden의 차이

필로그래머 — Sat, 21 Oct 2017 20:15:25 +0900

✔︎ [CSS] display와 visibility

: none과 hidden의 차이

화면에서 태그를 보이지 않게 하기 위한 속성으로는

display:none과 visibility:hidden이 있습니다.

두 스타일 모두 어떤 태그를 표시하지 않고 가릴 때 사용됩니다.

그러나 두 스타일에는 차이가 있습니다. 어떤 차이가 있을까요?

▶ display:none

display:none 속성은 태그 자체를 html 상에서 제거시키는 힘이 있습니다.

때문에 inspect(요소 검사)를 해도 해당 태그를 검색할 수 없습니다.

▶ visibility:hidden

visibility:hidden 속성은 태그 자체를 html 상에서 제거시키는 게 아니라

그저 사용자가 해당 태그를 볼 수 없도록 만들어줍니다. 도자기로 덮어놓은 것처럼 말이죠.

때문에 inspect(요소 검사)를 해도 해당 태그를 확인할 수 있습니다.

[CSS3] display 속성 : inline과 inline-block의 차이

필로그래머 — Sat, 21 Oct 2017 19:52:47 +0900

✔︎ [CSS] display 속성

: inline과 inline-block의 차이

css에서 display 속성 중 block은 'div 태그'나 'p 태그'에

기본적으로 적용되는 속성입니다. 자체적인 block을 가져서

해당되는 태그가 아예 한 줄을 차지해버리죠.

그렇다면 inline과 inline-block은 무엇일까요?

▶ inline

inline 속성을 가진 태그는 한 줄을 차지하지 않고, 다른 태그 옆에 나란히 표시됩니다.

width와 height 값이 적용되지 않습니다.

▶ inline-block

inline 속성을 가진 태그는 한 줄을 차지하지 않고, 다른 태그 옆에 나란히 표시됩니다.

덧붙혀 width와 height 값이 적용될 수 있습니다.

[CSS3] input 태그에 placeholder 스타일 효과 주기

필로그래머 — Fri, 20 Oct 2017 12:21:24 +0900

✔︎ [CSS] input 태그에 placeholder 스타일 효과 주기

예제 1.

https://codemyui.com/input-field-placeholder-to-label-transition/

예제 2.

https://jsfiddle.net/273ntk5s/2/

[Angular] AngularJS 시작하기

필로그래머 — Tue, 17 Oct 2017 17:37:22 +0900

■ Angular: 의미

☇ AngularJS는 매우 강력한 JavaScript 프레임워크입니다.

주로 싱글 페이지 어플리케이션 프로젝트에서 사용됩니다.

HTML DOM에서 추가적인 속성을 확장해 만들어졌으며

사용자의 액션에 따라 페이지를 동적으로 바꿀 수 있도록 도와줍니다.

✎ ng-app

ng-app 명령어는 AngularJS 어플리케이션을 시작하겠다는 의미입니다.

AngularJS를 HTML에 연결해주는 역할을 합니다.

✎ ng-model

ng-model 명령어는 AngularJS 어플리케이션 데이터의 벨류 값을

HTML의 input 태그에 연결시켜 줍니다.

(ng-model의 벨류 값에 바인딩 된 태그에 input 데이터가 넘어갈 수 있도록 도와줍니다.)

✎ ng-bind

ng-bind 명령어는 AngularJS 어플리케이션 데이터를 HTML 태그와 연결시켜줍니다.

☇참고

*https://www.tutorialspoint.com/angularjs/angularjs_first_application.htm

[Java] Spring WebMVC: 페이지 컨트롤러(Page Controller)를 만들어 보자 II

필로그래머 — Tue, 27 Jun 2017 12:55:29 +0900

■ Spring WebMVC:

페이지 컨트롤러 만들기 II

───────

Spring webMVC: Request Handler의 리턴값 다루기

/* Spring webMVC: Request Handler의 리턴값 다루기
 */   
package control;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller  
@RequestMapping("/control/controller15/")
public class Controller15 {
  
  // 1) void: 요청 핸들러에서 직접 출력하기
  @RequestMapping("ok1")
  public void ok1(HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("ok1(): 안녕하세요!"); 
  }

  // 2) String: 리턴 값을 클라이언트로 출력하기
  @RequestMapping(path="ok2", produces="text/plain;charset=UTF-8")
  @ResponseBody
  public String ok2(HttpServletResponse response) throws Exception {
    return "ok2(): 안녕하세요!"; 
  }

  // 3) String: 리턴 값을 클라이언트로 출력하기 - error
  @RequestMapping(path="ok3")
  @ResponseBody // <=== 리턴 값이 응답 데이터임을 표시하는 애노테이션
                // 리턴 값을 바로 출력할 때는 @RequestMapping의 produces 속성을 이용하여
                // 출력 내용의 타입과 인코딩을 지정한다.
  public String ok3(HttpServletResponse response) throws Exception {
    //@ResponseBody를 사용하여 리턴 값을 바로 클라이언트로 출력할 때는
    // 다음과 같이 UTF-8 처리를 지정할 수 없다.
    // 해결책? 위의 ok2() 메서드에서처럼 @RequestMapping의 produces 속성으로 지정해야 한다.
    response.setContentType("type/plain;charset=UTF-8");
    return "ok3(): 안녕하세요!"; 
  }

  // 4) String: JSP로 포워딩하기
  //    => @ResponseBody가 붙지 않으면 리턴 값을 JSP URL로 취급한다.
  @RequestMapping(path="ok4")
  public String ok4() throws Exception {
    return "/controller15_ok4.jsp"; 
  }
}

application-context.xml 파일에 다음과 같은 bean 객체를 등록해줍니다.

<!-- 페이지 컨트롤러가 JSP URL을 리턴할 때, 해당 JSP를 찾아 실행하는 객체 -->
    <bean id="jspViewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
    <property name="prefix" value="/"/>
    <property name="suffix" value=".jsp"/>
    </bean>

이렇게 JSP를 실행할 객체를 명시적으로 등록하게 되면 페이지

컨트롤러에서 JSP URL을 리턴할 때 이 설정을 고려하게 됩니다.

그러나 String을 리턴 값으로 설정해주고 JSP로 포워딩 해준 4번 예제의

코드를 바꿔야 합니다. 이유는 다음의 주석을 참고해주세요.

* Controller15의 ok4() 메서드를 다음과 같이 정의해야 합니다.

@RequestMapping(path="ok4")
  public String ok4() throws Exception {
//  return "/controller15_ok4.jsp"; // InternalResourceViewResolver를 설정하기 전에는 괜찮다.
                                    // InternalResourceViewResolver를 설정한 후에는 오류가 발생한다.
                                    // why? 리턴 값 앞 뒤에 문자열이 붙기 때문이다.
                                    // "/" + "controller15_ok4.jsp" + ".jsp"
                                    // 그래서 최종 url은 "/controller15_ok4.jsp.jsp"가 된다.
    
    return "controller15_ok4";        // 이렇게 InternalResourceViewResolver의 설정을 고려하여 리턴 값을 작성해야 한다.
  }

webapp 폴더 안에 controller15_ok4.jsp 파일을 만들고 다음처럼 작성합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charest="UTF-8">
<title>test</title>
</head>
<body>
<h1>contoller_ok4()</h1>
</body>
</html>

▶ 실행 방법 :

http:localhost:8080/spring-web01/control/controller15/ok4.do

───────

클라이언트로 리턴 값을 출력하지도 않고, JSP URL로도 지정하지 않을 때

▶ 앞서 application-context.xml 파일에 jspViewResolver bean 객체를 등록

해주었기에 다음과 같은 예제를 추가해주고 실행해보면 정상적으로 실행

되는 것을 알 수 있습니다.

// 5) void: 클라이언트로 리턴 값을 출력하지도 않고, JSP URL로도 지정하지 않으면 
  //    => 기본 JSP URL로 현재 URL을 사용한다.
  //    => 단 이럴 경우 스프링 설정 파일에 JSP를 어디에서 찾을 것인지 지정해야 한다.
  //       지정하지 않으면 URL이 
  @RequestMapping(path="ok5")
  public void ok5() throws Exception {
    System.out.println("ok5()");
  }

▶ 실행 방법 :

http:localhost:8080/spring-web01/control/controller15/ok5.do

───────

JSP URL을 바구니에 담아 리턴하기

// 6) JSP URL을 바구니에 담아 리턴하기
  @RequestMapping(path="ok6")
  public ModelAndView ok6() throws Exception {
    ModelAndView mv = new ModelAndView();
    mv.setViewName("controller15_ok6");
    return mv;
  }

기존 예제에 위 코드를 추가하고 webapp 폴더 안에 controller15_ok6.jsp 파일을 만듭니다. 만든 파일에는 아래와 같이 작성합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charest="UTF-8">
<title>test</title>
</head>
<body>
<h1>contoller_ok6()</h1>
</body>
</html>

▶ 실행 방법 :

http:localhost:8080/spring-web01/control/controller15/ok6.do

───────

JSP URL과 JSP 사용할 데이터도 함께 ModelAndView 바구니에 담아 리턴하기

// 7) JSP URL과 JSP 사용할 데이터도 함께 ModelAndView 바구니에 담아 리턴하기
  @RequestMapping(path="ok7")
  public ModelAndView ok7() throws Exception {
    ModelAndView mv = new ModelAndView();
    mv.setViewName("controller15_ok7");
    mv.addObject("title", "제목이네요!");
    
    Member member = new Member();
    member.setName("홍길동");
    member.setAge(20);
    member.setWorking(true);
    mv.addObject("member", member);
    
    /* 이렇게 ModelAndView 바구니에 값을 담아 두면,
     * 프론트 컨트롤러는 이 바구니에 담긴 값을 꺼내
     * JSP 가 사용할 수 있도록 ServletRequest 바구니에 옮겨 싣는다.
     */

기존 예제에 위 코드를 추가하고 webapp 폴더 안에 controller15_ok7.jsp 파일을 만듭니다. 만든 파일에는 아래와 같이 작성합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charest="UTF-8">
<title>test</title>
</head>
<body>
<h1>contoller_ok7()</h1>
${title}<br>
${member.name}<br>
${member.age}<br>
${member.working}<br>
</body>
</html>

▶ 실행 방법 :

http:localhost:8080/spring-web01/control/controller15/ok7.do

▶ 실행 결과 :

contoller_ok7()

제목이네요!
홍길동
20
true

───────

JSP URL은 리턴 값으로, JSP 사용할 데이터는 Model 바구니에 담아 리턴하기

// 8) JSP URL은 리턴 값으로, JSP가 사용할 데이터는 Model 바구니에 담는다.
  @RequestMapping(path="ok8")
  public String ok8(Model model) throws Exception {
    model.addAttribute("title", "제목이네요!");
    
    Member member = new Member();
    member.setName("홍길동");
    member.setAge(20);
    member.setWorking(true);
    model.addAttribute("member", member);
    
    /* 이렇게 ModelAndView 바구니에 값을 담아 두면,
     * 프론트 컨트롤러는 이 바구니에 담긴 값을 꺼내
     * JSP 가 사용할 수 있도록 ServletRequest 바구니에 옮겨 싣는다.
     */
    return "controller15_ok8";
  }

기존 예제에 위 코드를 추가하고 webapp 폴더 안에 controller15_ok8.jsp 파일을 만듭니다. 만든 파일은 아래와 같이 작성합니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charest="UTF-8">
<title>test</title>
</head>
<body>
<h1>contoller_ok8()</h1>
${title}<br>
${member.name}<br>
${member.age}<br>
${member.working}<br>
</body>
</html>

▶ 실행 방법 :

http:localhost:8080/spring-web01/control/controller15/ok8.do

───────

Model 대신 Map 객체를 바구니로 사용해서 리턴 값을 받기

// 9) Model 대신 Map 객체를 바구니로 사용할 수 있다.
  @RequestMapping(path="ok9")
  public String ok9(Model model) throws Exception {
    model.addAttribute("title", "제목이네요!");
    
    Member member = new Member();
    member.setName("홍길동");
    member.setAge(20);
    member.setWorking(true);
    model.addAttribute("member", member);
    
    /* 이렇게 Map 바구니에 값을 담아 두면,
     * 프론트 컨트롤러는 이 바구니에 담긴 값을 꺼내
     * JSP 가 사용할 수 있도록 ServletRequest 바구니에 옮겨 싣는다.
     */
    return "controller15_ok8";
  }

기존 예제에 위 코드를 추가하고 webapp 폴더 안에 controller15_ok9.jsp 파일을 만듭니다. 만든 파일은 아래와 같이 작성합니다.

[Java] Spring WebMVC: 페이지 컨트롤러(Page Controller)를 만들어 보자 I

필로그래머 — Tue, 27 Jun 2017 11:37:32 +0900

■ Spring WebMVC:

페이지 컨트롤러 만들기

─────

Spring에서 제공하는 프론트 컨트롤러와 협업할 페이지 컨트롤러 만들기

▶ Spring WebMVC 프로젝트 설정 방법

1) web.xml에 Spring webmvc의 프론트 컨트롤러를 설정합니다.

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
  xmlns="http://xmlns.jcp.org/xml/ns/javaee" 
  xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" 
  id="WebApp_ID" 
  version="3.1">

  <display-name>project01</display-name>
<!-- 프론트 컨트롤러 등록 -->  
    <servlet>
        <servlet-name>dispatcher</servlet-name>
        <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
        <init-param>
            <param-name>contextConfigLocation</param-name>
            <param-value>classpath:control/application-context.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup> <!-- 클라이언트가 요청하지 않아도 init() 함수가 호출. 즉 servlet 객체가 생성한다. -->
    </servlet>
    
    <servlet-mapping>
        <servlet-name>dispatcher</servlet-name>
        <url-pattern>*.do</url-pattern>
    </servlet-mapping>
</web-app>

2) Spring 설정 파일을 준비합니다.

/src/main/src/control/application-context.xml

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xmlns:context="http://www.springframework.org/schema/context"
    xmlns:mvc="http://www.springframework.org/schema/mvc"
    xsi:schemaLocation="http://www.springframework.org/schema/beans 
      http://www.springframework.org/schema/beans/spring-beans.xsd
      http://www.springframework.org/schema/context
      http://www.springframework.org/schema/context/spring-context.xsd
      http://www.springframework.org/schema/mvc
      http://www.springframework.org/schema/mvc/spring-mvc.xsd">

  <!-- Spring IoC 컨테이너를 위한 객체 등록 -->
  <context:component-scan base-package="control"/>
  
  <!-- Spring WebMVC 관련 기능을 처리할 객체를 등록한다. (RequsetMapping 되어 있는 객체를 등록) -->
    <mvc:annotation-driven/>
    
</beans>

3) Gradle 설정 파일을 준비합니다. (프로젝트 폴더 바로 아래에 위치시켜 주세요.)

build.gradle

apply plugin: 'java' 
apply plugin: 'eclipse-wtp' 
apply plugin: 'war'       

compileJava {
  options.encoding = 'UTF-8'  
  sourceCompatibility = '1.8' 
}

repositories {
  mavenCentral() 
}

dependencies {
  compile 'org.slf4j:slf4j-api:1.7.22'
  compile group: 'commons-fileupload', name: 'commons-fileupload', version: '1.3.2'
  compile group: 'javax.servlet', name: 'jstl', version: '1.2'
  compile group: 'org.springframework', name: 'spring-webmvc', version: '4.3.9.RELEASE'
  
  providedCompile group: 'javax.servlet', name: 'javax.servlet-api', version: '3.1.0'
  
  testCompile 'junit:junit:4.12'
}

4) cmd 명령창에서 해당 프로젝트 폴더로 경로를 설정한 후 "gradle eclipse"

명령어를 입력해 실행시킵니다.

* 이 글의 예제에서의 프로젝트 폴더는 spring-web01입니다.

▶ 페이지 컨트롤러 만들기

1) 클래스를 페이지 컨트롤러로 표시하기

- @Controller 애노테이션을 붙입니다.

2) 요청을 처리할 메서드를 표시하기

- @RequestMapping(URL) 애노테이션을 붙입니다.

/* Spring webMVC: 페이지 컨트롤러 만들기
 * 
 */
package step01;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller  // 페이지 컨트롤러 클래스임을 표시
public class Controller01 {
  @RequestMapping("/control/controller01") // 어떤 요청을 처리할지 표시
  public void service(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("Hello, world!");
  }
}

▶ 결과 :

웹 브라우저 url 주소에 http://localhost:8080/프로젝트명/패키지명/controller01.do 를 입력하면

화면에 "Hello, world!"가 출력되는 것을 확인하실 수 있습니다.

─────

▶ 설정 파일은 남겨둔 채 Controller01 파일을 다음 Controller02 파일로

업그레이드 시켜보겠습니다. 메소드의 이름은 꼭 service()일 필요가

없다는 것을 알 수 있습니다. @RequestMapping에서 설정해준 경로의

이름이 메소드 이름이 되면 됩니다.

/* Spring webMVC: 페이지 컨트롤러 만들기
 * 
 */
package control;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller  // 페이지 컨트롤러 클래스임을 표시
public class Controller02 {
  @RequestMapping("/control/controller02/a") // 어떤 요청을 처리할지 표시
  public void a(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("aaaa");
  }

  @RequestMapping("/control/controller02/b") // 어떤 요청을 처리할지 표시
  public void b(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("bbbb");
  }

  @RequestMapping("/control/controller02/c") // 어떤 요청을 처리할지 표시
  public void c(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("cccc");
  }
}

▶ 위 예제는 다음 Controller03의 예제와 똑같은 결과를 호출합니다.

공통되는 경로가 있다면 @RequestMapping을 통해 묶어줄 수 있습니다.

요청 URL 계산하기 = class에 붙은 URL + 메소드에 붙은 URL

/* Spring webMVC: 페이지 컨트롤러 만들기
 * 
 */
package control;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller  // 페이지 컨트롤러 클래스임을 표시
@RequestMapping("/control/controller03/")
public class Controller03 {
  @RequestMapping("a") // 어떤 요청을 처리할지 표시
  public void a(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("aaaa");
  }

  @RequestMapping("b") // 어떤 요청을 처리할지 표시
  public void b(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("bbbb");
  }

  @RequestMapping("c") // 어떤 요청을 처리할지 표시
  public void c(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("cccc");
  }
}

▶ 호출될 메서드가 한 개일 경우에는 첫번째 @RequestMapping의 경로만

설정해줘도 웹 브라우저에서 처리해줄 수 있습니다.

요청 URL 계산하기 = class에 붙은 URL + 메소드에 붙은 URL

/* Spring webMVC: 한 페이지 컨트롤러에서 요청 처리하기
 * 
 */
package control;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller  // 페이지 컨트롤러 클래스임을 표시
@RequestMapping("/control/controller04/ok")
public class Controller04 {
  @RequestMapping // 어떤 요청을 처리할지 표시
  public void a(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("aaaa");
  }
}

─────

요청 http method 구분하여 처리하기 I

/* Spring webMVC: 요청 http method 구분하여 처리하기
 * 
 */
package control;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller  // 페이지 컨트롤러 클래스임을 표시
@RequestMapping("/control/controller05/ok")
public class Controller05 {
 
  @RequestMapping(method=RequestMethod.GET)
  public void get(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("get");
  }

  @RequestMapping(method=RequestMethod.POST)
  public void post(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("post");
  }
}

GET 요청과 POST 요청을 가능하게 해주는 html 코드 I

*참고 : .html 같은 정적파일은 webapp 폴더 아래에 생성해줘야 합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="control/controller05/ok.do" method="GET">
    <button>GET 요청</button>
</form>
<hr>
<form action="control/controller05/ok.do" method="POST">
    <button>POST 요청</button>
</form>
</body>
</html>

▶ 실행 방법 : http://localhost:8080/spring-web01/controller05.html

GET 요청 버튼을 클릭하면 화면에 get 문장이 출력되고

POST 요청 버튼을 클릭하면 화면에 post 문장이 출력됩니다.

요청 http method 구분하여 처리하기 II

/* Spring webMVC: 요청 http method 구분하여 처리하기
 * 
 */
package control;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller  // 페이지 컨트롤러 클래스임을 표시
@RequestMapping("/control/controller06/")
public class Controller06 {
 
  //@RequestMapping(value="ok", method=RequestMethod.GET) // 이렇게 해도 되고
  @RequestMapping(path="ok", method=RequestMethod.GET) // 이렇게 해도 된다.
  public void get(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("get");
  }

  //@RequestMapping(value="ok", method=RequestMethod.POST) // 이렇게 해도 되고
  @RequestMapping(path="ok", method=RequestMethod.POST)
  public void post(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("post");
  }
}

GET 요청과 POST 요청을 가능하게 해주는 html 코드 II

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="control/controller06/ok.do" method="GET">
    <button>GET 요청</button>
</form>
<hr>
<form action="control/controller06/ok.do" method="POST">
    <button>POST 요청</button>
</form>
</body>
</html>

─────

요청 URL에 주는 파라미터에 따라 호출 메서드 제한하기

- 파라미터의 존재 유무로 요청을 구분합니다.

/* Spring webMVC: 요청 URL에 주는 파라미터에 따라 호출 메서드 제한하기
 * 
 */
package control;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller  
@RequestMapping("/control/controller07/")
public class Controller07 {
 
  @RequestMapping(path="ok", params={"name"}) 
  public void get(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("name 있어요!");
  }

  @RequestMapping(path="ok", params={"age", "tel"})
  public void post(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("age와 tel 있어요!");
  }
}

@RequestMapping의 params 속성에 지정한 값과 일치하는 요청

파라미터가 있을 경우에 호출됩니다.

▶ 실행 방법:

http://localhost8080:/spring-web01/control/controller07/ok.do?&age=20&tel=111

─────

HTTP 요청 프로토콜에 지정한 이름의 헤더가 있을 경우에 호출됩니다.

/* Spring webMVC: 요청 프로토콜의 헤더 이름을 요청 조건으로 지정
 * => HTTP 요청 프로토콜에 지정한 이름의 헤더가 있을 경우에 호출된다.
 * 
 */
package control;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller  
@RequestMapping("/control/controller08/")
public class Controller08 {
 
  @RequestMapping(path="ok", headers="aaaa") 
  public void get(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("aaaa 있어요!");
  }

  @RequestMapping(path="ok", headers={"bbbb", "cccc"})
  public void post(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("bbbb, cccc 있어요!");
  }
}

AJAX 요청을 통해 헤더 값을 넘겨주는 코드

* 참고 : 그냥 html을 통해선 헤더 값을 넘겨줄 수 없어요.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button id="btn1">"aaaa" 헤더 요청</button>
<button id="btn2">"bbbb", "cccc" 헤더 요청</button>
<div>
<textarea id="ta" cols="80" rows="8"></textarea>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$("#btn1").click(function() {
    $.ajax("control/controller08/ok.do", {
        method: "get",
        headers: {"aaaa":"hello"},
        dataType: "text"})
        .done(function(result) {
            $("#ta").val(result)
        })
        .fail(function(xhr, status, error) {
            $("#ta").val(xhr.responseText)
        })
})
$("#btn2").click(function() {
    $.ajax("control/controller08/ok.do", {
        method: "get",
        headers: {"bbbb":"hello", 
                   "cccc":"hello"}, // 한글은 헤더로 넘겨줄 수 없습니다.
        dataType: "text"})
        .done(function(result) {
            $("#ta").val(result)
        })
        .fail(function(xhr, status, error) {
            $("#ta").val(xhr.responseText)
        })
})
</script>
</body>
</html>

▶ 실행 방법:

http://localhost8080:/spring-web01/controller08.html

─────

요청 프로토콜의 Accept 헤더의 값에 따라 호출될 메서드 결정

/* Spring webMVC: 요청 프로토콜의 Accept 헤더의 값에 따라 호출될 메서드 결정
 * 
 */
package control;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller  
@RequestMapping("/control/controller09/")
public class Controller09 {
  
  @RequestMapping(path="ok", produces="text/plain") 
  public void get(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("text/plain 보냄!");
  }

  @RequestMapping(path="ok", produces="application/json")
  public void post(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("application/json 보냄!");
  }
}

▶ Accept 요청 헤더

- 웹 브라우저가 웹 서버에게 요구하는 콘텐트의 타입을 가리킵니다.

▶ produces란?

- 이 메서드를 생산하는 콘텐트의 타입을 가리킵니다.

Accept 헤더의 값에 따라 호출될 메서드를 결정하는 html 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button id="btn1">"text/plain" 콘텐트 요청</button>
<button id="btn2">"application/json" 콘텐트 요청</button>
<div>
<textarea id="ta" cols="80" rows="8"></textarea>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$("#btn1").click(function() {
    $.ajax("control/controller09/ok.do", {
        method: "get",
        headers: {"Accept":"text/plain"},
        dataType: "text"})
        .done(function(result) {
            $("#ta").val(result)
        })
        .fail(function(xhr, status, error) {
            $("#ta").val(xhr.responseText)
        })
})
$("#btn2").click(function() {
    $.ajax("control/controller09/ok.do", {
        method: "get",
        headers: {"Accept":"application/json"},
        dataType: "json"})
        .done(function(result) {
            $("#ta").val(result)
        })
        .fail(function(xhr, status, error) {
            $("#ta").val(xhr.responseText)
        })
})
</script>
</body>
</html>

▶ 실행 방법:

http://localhost8080:/spring-web01/controller09.html

─────

요청 프로토콜의 Content-Type 헤더 값에 따라 호출될 메서드를 결정하기

/* Spring webMVC: 요청 프로토콜의 Content-Type 헤더 값에 따라 호출될 메서드 결정
 * => Content-Type 요청 헤더?
 *    - 웹 브라우저가 웹 서버에게 보내는 데이터의 형식을 의미한다.
 */   
package control;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.http.MediaType;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

@Controller  
@RequestMapping("/control/controller10/")
public class Controller10 {
  
  @RequestMapping(path="ok", consumes="text/plain") 
  public void get(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("text/plain 데이터를 받아서 처리했음!");
  }

  @RequestMapping(path="ok", consumes="application/json")
  public void post(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("application/json 데이터를 받아서 처리했음!");
  }
}

▶ cosumes 란?

- 클라이언트가 보낸 데이터의 형식 중에서 이 메서드가 처리할 수 있는

형식을지정

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<button id="btn1">"text/plain" 콘텐트 요청</button>
<button id="btn2">"application/json" 콘텐트 요청</button>
<div>
<textarea id="ta" cols="80" rows="8"></textarea>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$("#btn1").click(function() {
    $.ajax("control/controller10/ok.do", {
        method: "post",
        data: "hello!",
        headers: {"Content-Type":"text/plain"},
        dataType: "text"})
        .done(function(result) {
            $("#ta").val(result)
        })
        .fail(function(xhr, status, error) {
            $("#ta").val(xhr.responseText)
        })
})
$("#btn2").click(function() {
    $.ajax("control/controller10/ok.do", {
        method: "post",
        data: '{"name":"hong", "age":"20", "tel":"1111-1111"}',
        headers: {"Content-Type":"application/json"},
        dataType: "json"})
        .done(function(result) {
            $("#ta").val(result)
        })
        .fail(function(xhr, status, error) {
            $("#ta").val(xhr.responseText)
        })
})
</script>
</body>
</html>

▶ 실행 방법:

http://localhost8080:/spring-web01/controller10.html

─────

Request Handler(요청을 처리하는 메서드)의 파라미터들 I

▶ 프론트 컨트롤러는 페이지 컨트롤러의 메서드를 호출할 때,

그 메서드가 어떤 파라미터 값을 요구하는 지를 분석하여

그에 해당하는 값을 자동으로 꼽아줍니다.

▶ Request Handler의 파라미터로 선언할 수 있는 것

1) HttpServletRequest, ServletRequest

2) HttpServletResponse, ServletResponse

3) HttpSession

4) Map, Model

5) 요청 파라미터

/* Spring webMVC: Request Handler(요청을 처리하는 메서드)의 파라미터들 I
 * => Request Handler의 파라미터로 선언할 수 있는 것
 *    1) HttpRequestServlet, ServletRequest
 */   
package control;

import java.io.FileInputStream;
import java.io.PrintWriter;
import java.util.Map;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller  
@RequestMapping("/control/controller11/")
public class Controller11 {
  
  @RequestMapping("ok1") 
  public void ok1() throws Exception {
    System.out.println("ok1(): 프론트 컨트롤러로부터 아무것도 받지 않는다.");
  }

  @RequestMapping("ok2")
  public void ok2(HttpServletRequest request) throws Exception {
    System.out.println("ok2()");
  }

  @RequestMapping("ok3")
  public void ok3(HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("ok3()");
  }

  @RequestMapping("ok4")
  public void ok4(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("ok4()");
  }

  @RequestMapping("ok5")
  public void ok5(HttpSession session, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("ok5()");
  }
  
  // 프론트 컨트롤러가 줄 수 없는 값을 메서드에서 요구할 경우,
  // 즉 파라미터에 선언할 경우,
  // 실행할 때 오류가 발생한다!
  // 예) 다음 메서드에서 FileInputStream 파라미터가 이런 경우이다.
  @RequestMapping("ok6")
  public void ok6(FileInputStream in, HttpServletResponse response) throws Exception {
    System.out.println(in);
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("ok6()");

  }
  
  // 이 메서드에서 실행한 결과를 담을 빈 바구니를 요구할 수 있다.
  // 이 바구니에 값을 담으면, JSP에서 꺼내 쓸 수 있다.
  // 바구니의 타입은 Map 또는 Model 등이 가능하다.
  @RequestMapping("ok7")
  public void ok7(Map<String, Object> store, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("ok7()");
    
    store.put("name", "홍길동");
    store.put("age", 20);
  }
  // 이렇게 바구니에 담은 데이터는
  // 스프링의 프론트 컨트롤러가 ServletRequest에 보관한다.
  // 그래서 JSP에서 꺼내 쓸 수 있는 것이다.

  @RequestMapping("ok8")
  public void ok8(Model store, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("ok8()");
    
    store.addAttribute("name", "홍길동");
    store.addAttribute("age", 20);
      
    // Model이나 Map이나 쓰임새는 같다.
    // 이렇게 바구니에 담은 데이터는
    // 스프링의 프론트 컨트롤러가 ServletRequest에 보관한다.
    // 그래서 JSP에서 꺼내 쓸 수 있는 것이다.
  }

  // 클라이언트가 보낸 데이터를 꺼내기
  // => 예전처럼 문자열을 원하는 형식을 직접 형변환 해야 한다.
  @RequestMapping("ok9")
  public void ok9(HttpServletRequest request, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("ok9()");
    
    out.printf("name: %s\n", request.getParameter("name"));
    out.printf("age: %d\n", Integer.parseInt(request.getParameter("age")));
    out.printf("working: %b\n", Boolean.parseBoolean(request.getParameter("working")));
      
  }

  // 클라이언트가 보내는 데이터의 이름과 동일한 이름으로 파라미터 변수를 선언한다.
  // 그러면, 프론트 컨트롤러가 파라미터 이름과 같은 데이터를 찾아서 호출할 때 꼽아준다.
  // 프론트 컨트롤러는 문자열을 원시타입의 값으로 자동으로 바꿔준다.
  // 그 외의 타입에 대해서는 오류가 발생한다.
  // 해결책? => 웹 파라미터 타입 변환기를 설치해야 한다.
  @RequestMapping("ok10")
  public void ok10(String name, int age, boolean working, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("ok10()");
    out.printf("name: %s\n", name);
    out.printf("age: %d\n", age);
    out.printf("working: %b\n", working);
    
  }
}

▶ 실행 방법:

http://localhost8080:/spring-web01/control/controller11/ok숫자.do?파라미터명=값&파라미터명=값

Request Handler(요청을 처리하는 메서드)의 파라미터들 II

/* Spring webMVC: Request Handler(요청을 처리하는 메서드)의 파라미터들 II - 
 */  
package control;

import java.io.PrintWriter;

import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@Controller  
@RequestMapping("/control/controller12/")
public class Controller12 {
  // 클라이언트가 보낸 파라미터 값을 받는 방법
  
  // 1) 보내는 데이터(요청 파라미터)의 이름과 같은 이름으로 아규먼트 이름을 짓는다.
  @RequestMapping("ok1")
  public void ok1(String name, int age, boolean working, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("ok1()");
    out.printf("name: %s\n", name);
    out.printf("age: %d\n", age);
    out.printf("working: %b\n", working);
  }
  
  // 2) 보내는 데이터(요청 파라미터)의 이름과 아규먼트 이름이 다를 경우
  //    @RequestParam 애노테이션을 사용하여 그 이름을 지정할 수 있다.
  //    단, @RequestParam을 붙이는 순간 필수 항목이 된다. URL에 파라미터로 넘겨주지 않으면 오류 발생!
  @RequestMapping("ok2")
  public void ok2(
      @RequestParam(name="name") String n, 
      @RequestParam(name="age")int a, 
      @RequestParam(name="working")boolean w, 
      HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("ok2()");
    out.printf("name: %s\n", n);
    out.printf("age: %d\n", a);
    out.printf("working: %b\n", w);
  }

  // 3) @RequestParam 애노테이션에서 요청 파라미터 값을 선택 항목으로 만들기
  @RequestMapping("ok3")
  public void ok3(
      @RequestParam(name="name", required=false) String n, 
      @RequestParam(name="age", required=false)int a, 
      @RequestParam(name="working", required=false)boolean w, 
      HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("ok3()");
    out.printf("name: %s\n", n);
    out.printf("age: %d\n", a);
    out.printf("working: %b\n", w);
  }

  // 4) @RequestParam 애노테이션에서 요청 파라미터의 기본(default) 값 지정하기
  @RequestMapping("ok4")
  public void ok4(
      @RequestParam(name="name", required=false) String n, 
      @RequestParam(name="age", required=false, defaultValue="0")int a, 
      @RequestParam(name="working", required=false, defaultValue="false")boolean w, 
      HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("ok4()");
    out.printf("name: %s\n", n);
    out.printf("age: %d\n", a);
    out.printf("working: %b\n", w);
  }

  // 5) 요청 파라미터 값을 바로 값 객체(Value Object; VO)에 저장하기
  //    VO 객체의 프로퍼티 이름과 일치하는 요청 파라미터를 찾아서 그 값을 넣어준다.
  //    누가? 프론트 컨트롤러가 Member 객체를 생성한 다음에 값을 넣어준다.
  @RequestMapping("ok5")
  public void ok5(Member member, HttpServletResponse response) throws Exception {
    response.setContentType("text/plain;charset=UTF-8");
    PrintWriter out = response.getWriter();
    out.println("ok5()");
    out.printf("name: %s\n", member.getName());
    out.printf("age: %d\n", member.getAge());
    out.printf("working: %b\n", member.isWorking());
  }
}

ok5() 메서드 파라미터의 Member.class 작성하기

package control;

public class Member {
  String name;
  int age;
  boolean working;
  
  public String getName() {
    return name;
  }
  public void setName(String name) {
    this.name = name;
  }
  public int getAge() {
    return age;
  }
  public void setAge(int age) {
    this.age = age;
  }
  public boolean isWorking() {
    return working;
  }
  public void setWorking(boolean working) {
    this.working = working;
  }
 
  
}

▶ 실행 방법:

http://localhost8080:/spring-web01/control/controller12/ok숫자.do?파라미터명=값&파라미터명=값