jsp에서 include 하는 방식에는 두 가지가 있다. 정적인 include 지시문 <%@include file=""%> 그리고 동적인 include 지시문 <jsp:include page=""/> 이다. 이 두 가지 방식의 차이를 알아보았다.



1. 정적인 include 지시문 <%@include file=""%>

 jsp가 컴파일되기 전에 include한 파일이 부모 페이지에 삽입되어 컴파일된다. 즉, include 페이지에서 선언한 변수를 부모 페이지에서 별도의 변수 선언 없이 사용 가능하다. 단순하게, include한 파일의 코드가 텍스트로 포함되어 컴파일된다고 생각하면 된다. a.jsp에 b.jsp를 include할 경우 b.jsp의 코드는 a.jsp 안에 복사되어 컴파일되는 것이다.


 jsp파일이 java파일로 수정되기 전에 include한 파일의 모든 코드가 부모의 jsp로 복사된다. 그 후에 부모의 jsp는 java -> class파일 -> html문서 -> 웹 브라우져 의 순서로 처리된다.


 주의할 점은 포함되는 페이지의 한글을 제대로 처리하기 위해 한글 인코딩을 해주는 코드를 생략해서는 안 된다.

1
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
cs


 부모 페이지에 include한 파일이 많을경우 include 페이지에서 선언된 변수를 추적해야 하기 때문에 유지보수에 단점이 있다.



2. 동적인 include 지시문 <jsp:include page=""/>

 사용자가 부모페이지 호출 시 실행되어질 시점에 include한 파일이 삽입된다. 1번과 다르게 부모페이지와 include페이지는 변수를 공유하지 않는다. include한 페이지의 변수를 부모페이지에서 사용하고자 하면 <jsp:param name="" value="<%= %>"/> 형식으로 부모페이지에 지정해주어야 한다.


 부모 jsp가 java -> class -> html 문서로 처리되어 실행되어질 시점에 삽입된 후 브라우저로 렌더링된다. 해당 파일이 수정되는 경우 다시 컴파일이 진행된다. 즉, a.jsp에 b.jsp를 include할 경우 a..jsp에 b.jsp의 실행 결과 html문서가 삽입된다. a.js 페이지를 처리하는 도중 <jsp:include page=""/>를 만나면 프로그램 실행 제어가 b.jsp로 넘어간다. b.jsp의 실행이 끝나면 다시 a.jsp로 돌아와 남은 코드를 실행한다.



웹 서버 - Web Server

클라이언트가 서버에 전달한 request를 받아 정적인 컨텐츠를 제곡하는 서버이다. 

ex) html, css를 통해 이미지를 띄우는 경우


request를 받아 가장 앞에서 요청에 대한 처리를 한다. 요청이 많을 경우 웹 서버에서는 웹 문서를, WAS에서는 JSP 페이지를 양분하여 처리해 서버의 부담을 줄여주는 역할도 한다.



WAS - Web Application Server

동적인 컨텐츠를 제공하는 서버이다. JSP 등의 처리를 한다.

ex) DB연동을 통해 데이터를 주고받거나 프로그램으로 데이터 조작이 필요한 경우

<출처 : http://mindols.tistory.com/86>



웹 서버 동작 프로세스

1. 클라이언트가 요청을 보낸다.

2. 웹 서버는 요청을 받고 정적인 컨텐츠이면 웹 서버에서 처리해 응답을 클라이언트에게 보낸다.


<동적인 컨텐츠 처리>

3. 정적인 컨텐츠가 아니라면 WAS로 요청을 보낸다.

4. 웹 서버로부터 요청이 오면 컨테이너가 받아서 처리한다.


<컨테이너가 받아서 처리하는 프로세스>

5. 컨테이너는 web.xml을 참조하여 해당 서블릿에 대한 쓰레드를 생성하고 httpServletRequest와 httpServletResponse객체를 생성하여 전달한다.

6. 컨테이너는 서블릿을 호출한다.

7. 호출된 서블릿의 작업을 담당하는 쓰레드(5번)는 doPost()또는 doGet()을 호출한다.

8. 호출된 doPost(), doGet() 메소드는 생성된 동적 페이지를 Response객체에 담아 컨테이너에 전달한다.

9. 컨테이너는 전달받은 Response객체를 HTTPResponse형태로 바꿔 웹 서버에 전달후 생성했던 쓰레드를 종료하고 httpServletRequest, httpServletResponse 객체를 소멸시킨다.


10. WAS에서 처리한 컨텐츠를 웹 서버가 받아 클라이언트에게 응답한다.



아파치 - Apache

 아파치는 소프트웨어 단체이다. 우리가 사용하는 '아파치 서버'는 아파치에서 후원하는 오픈소스 프로젝트 커뮤니티에서 만든 http 웹 서버를 지칭하는 것이다. html 등의 정적인 컨텐츠를 처리할 때 사용하는 웹 서버 중 하나이다.



톰캣 - Tomcat

 jsp 등의 처리를 할 때 사용하는 WAS중 하나이다. 즉, 동적인 컨텐츠를 처리할 때 사용한다. 톰캣에는 아파치의 기능(웹 서비스 데몬, Httpd)를 포함하고 있다.


<참고>

http://sungbine.github.io/tech/post/2015/02/15/tomcat%EA%B3%BC%20apache%EC%9D%98%20%EC%97%B0%EB%8F%99.html

http://jeong-pro.tistory.com/84

http://mindols.tistory.com/86

CORS : Cross-origin resource sharing

 웹 브라우저들은 보안상의 이유로 javascript나 ajax로 외부 host로 접속하는 것을 막기 시작했다. 그래서 javascript를 Same Origin Policy(동일 출처 정책)라는 정책을 두어 다른 도메인의 서버에 요청하는 것을 보안문제로 간주하고 이를 차단한다. javascript는 자신이 속한 동일 도메인 내에서만 서버 요청을 허용하고 처리해 주겠다는 의미이다.



네 가지의 크로스 도메인 문제

1. 도메인은 같으나 서브도메인이 다르면 문제가 발생한다.

  www.xyz.com과 aaa.xyx.com 사이의 문제를 말한다.


2. 도메인이 다르면 문제가 발생한다.

 www.xyz.com과 www.abc.com 사이의 문제를 말한다.


3. 프로토콜이 다르면 문제가 발생한다.

 http에서 https로의 호출은 문제가 발생하지 않지만 https에서 http로의 호출은 문제가 발생한다.


4. 포트번호가 다르면 문제가 발생한다.

 http://zzz.com:8000 / http://zzz.com:8080 사이의 문제를 말한다.



프로토콜로 인한 크로스 도메인 오류 해결

 jsp 개발을 하면서 https에서 http로의 호출에서 크로스 도메인 문제가 발생했다. http에서 ajax로 폼 데이터를 넘기면 https에서 db에 insert를 하고 작성한 javascript를 response로 보내 http에서 실행하는 것이었다. 두 가지 방법의 해결법을 찾았다.


1. http로 접속하면 자동으로 https로 바꿔준다. 즉, 모든 페이지를 https로만 동작하게 한다.

1
2
3
4
5
String url = request.getRequestURL().toString();
if(url.startsWith("http://"&& url.indexOf("localhost"< 0) {
    url = url.replaceAll("http://""https://");
    response.sendRedirect(url);
}
cs


2. https의 jsp 파일에서 response 헤더필드에 Access-Control-Allow-Origin을 추가하여 해결했다.

     - 특정 host 접근 허용

1
Access-Control-Allow-Origin : http://www.xyz.com
cs


         - 모든 접근 허용

1
Access-Control-Allow-Origin : *

cs


모든 접근을 허용하게 되면 보안상의 문제가 발생할 수 있기 때문에 특정 host만 허용하도록 했다.

1
response.addHeader("Access-Control-Allow-Origin", "http://www.xyz.com");
cs




참고 : https://pedaler.github.io/CORS-%ED%81%AC%EB%A1%9C%EC%8A%A4-%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%9D%B4%EC%8A%88%EC%97%90-%EA%B4%80%ED%95%98%EC%97%AC/

크로스브라우징의 문제를 해결해준다.

jQuery에서 제공하는 Ajax를 사용하면 여러가지 장점이 있다. 그 중 하나는 브라우저간의 차이점을 jQuery가 알아서 처리해주는 것이다. 즉, 우리가 만든 어플리케이션을 어떤 브라우저를 사용해서 동작하든 간에 동일한 코드를 갖게된다는 것이다.



jQuery는 Ajax와 관련해서 많은 API를 제공한다.

http://api.jquery.com/category/ajax/

위 링크에서 확인할 수 있다.


- Global Ajax Event Handlers

jQuery를 이용해서 Ajax 통신을 할 때 여러 곳에서 Ajax를 사용할 경우 이것들 전체에 글로벌리하게 적용할 수 있는 여러 설정 등을  지정할 수 있는 기능이다. (고급기능!)


- Helper Functions

통신에 직접적으로 관여하는 API는 아니지만 통신을 하는데에 있어서 여러가지 편리한 기능들을 제공한다.

ex) Form 입력 값을 넘길 때 데이터를 하나로 모아주는 Serialize 등이 있다.


- Shorthand Methods

통신을 하는 방식이 무엇이냐에 따라서 더 적은 코드를 작성하면서 해당 기능을 사용할 수 있다.

ex) jQuery.get()은 get방식을 사용하는 것


- Low-Level Interface

위의 방식 말고 이곳에 있는 .ajax() API를 사용하는 것을 추천한다. 가장 기본적인 API이고 이것을 쉽게 사용할 수 있도록 한 것이 위의 방식이다.



jQuery.ajax()

jQuery에서 Ajax를 통해서 통신하는 데에 있어서 가장 근본이 되는 API이며 가장 많이 사용되는 API이다.

생활코딩 강의에서의 주제도 이 API이다.


$.ajax를 사용해서 호출한다. http://api.jquery.com/jQuery.ajax/ 이곳의 예제 코드를 확인하자.



$.ajax의 문법

1
jQuery.ajax( [settings ] )
cs


setting은 Ajax 통신을 위한 옵션을 담고 있는 객체가 들어간다. 주요한 옵션을 살펴보자.


- data

서버로 데이터를 전송할 때 이 옵션을 사용


- dataType

서버측에서 전송한 데이터를 어떤 형식의 데이터로 해석할 것인가를 지정한다. 값으로 올 수 있는 것은 xml, json, script, html이다. 형식을 지정하지 않으면 jQuery가 알아서 판단한다.


- success

성공했을 때 호출한 콜백을 지정한다. Function( PlainObject data, String textStatus, jqXHR jqXHR )


- type

데이터를 전송하는 방법을 지정한다. get, post를 사용할 수 있다.


앞의 게시물의 코드를 이 API를 활용하여 바꿔보면 훨씬 간결해진 것을 알 수 있다.


time.php

1
2
3
4
5
<?php
    $d1 = new DateTime;
    $d1->setTimezone(new DateTimezone($_POST['timezone']));
    echo $d1->format($_POST['format']);
?>
cs


demo.html





POST방식으로 서버와 통신하는 방법


예제 코드를 먼저 살펴보자


time.php

1
2
3
4
5
<?php
    $d1 = new DateTime;
    $d1->setTimezone(new DateTimezone("asia/seoul"));
    echo $d1->format('H:i:s');
?>
cs

demo_post.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
<p>time : <span id="time"></span></p>
<form>
    <select name="timezone">
        <option value="Asia/Seoul">asia/seoul</option>
        <option value="America/New_York">America/New_York</option>
    </select>
    <select name="format">
        <option value="Y-m-d H:i:s">Y-m-d H:i:s</option>
        <option value="Y-m-d">Y-m-d</option>
    </select>
</form>
<input type="button" id="execute" value="execute" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#execute').click(function(){
        $.ajax({
            url:'./time.php',
            type:'post',
            data:$('form').serialize(),
            success:function(data){
                $('#time').text(data);
            }
        })
    })
</script>
</body>
</html>
cs


26번째줄

1
data:$('form').serialize()
cs

이 코드는 form태그의 정보를 값의 이름 = 값의 내용&값 의 형식으로 바꿔준다. 즉, form의 값들을 하나의 텍스트로 만들어주는 것이다.




JSON을 처리하는 방법


time.php

1
2
3
4
<?php
    $timezones = ["Asia/Seoul""America/New_York"];
    echo json_encode($timezones);
?>
cs

두 개의 값을 담고 있는 배열 timezones을 json_enode를 통해서 json타입으로 변환 후 그것을 화면에 출력해준다.



demo_json.html (html 포맷 생략)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<p id="timezones"></p>
<input type="button" id="execute" value="execute" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    $('#execute').click(function(){
        $.ajax({
            url:'./time.php',
            dataType:'json',
            success:function(data){
                var str = '';
                for(var name in data){
                    str += '<li>'+data[name]+'</li>';
                }
                $('#timezones').html('<ul>'+str+'</ul>');
            }
        })
    })
</script>
cs

8번째줄 : time.php가 리턴해주는 데이터가 json형식이라는 것을 명시해줌



자바스크립트를 이용해서 내부적으로 통신할 수 있는 방법이다.


Ajax : Asynchronous JavaScript and XML -> 자바스크립트를 이용해서 비동기적으로 서버와 브라우저가 데이터를 주고 받는 방식을 의미


이 때 사용하는 API가 XMLHttpRequest이다. (IE5,6에서는 XMLHttpRequest 대신 ActiveXObject("Msxml2.XMLHTTP.6.0")을 사용해야 함)

꼭 XML을 사용해서 통신해야 하는 것은 아니다. XML보다 JSON을 더 많이 사용한다.



** Ajax를 실습해보기 위해서는 서버 환경이 구축돼있어야 한다.


demo1.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
</head>
<body>
<p>time : <span id="time"></span></p>
<input type="button" id="execute" value="execute" />
<script>
    document.querySelector('input').addEventListener('click'function(event){
        var xhr = new XMLHttpRequest();
        xhr.open('GET''time.jsp');
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                document.querySelector('#time').innerHTML = xhr.responseText;
            }
        }
        xhr.send();
    });
</script>
</body>
</html>
cs



time.php

1
2
3
4
5
<?php
    $d1 = new DateTime;
    $d1->setTimezone(new DateTimezone("asia/seoul"));
    echo $d1->format('H:i:s');
?>
cs



demo.html을 실행하고 개발자도구로 네트워크를 살펴보자

1. demo.html 실행



2. excute 클릭


php가 아닌 jsp로 만들어버려서 코드가 그대로 나온다. 여기서 살펴볼 것은 time 파일이 호출되는 것이다.

화면의 reload 없이 비동기적으로 데이터만 가져와 뿌려준다.

https의 탄생

http는 html같은 문서를 웹 브라우저가 웹 서버에 요청하는 프로토콜이다. 단순하게 보면 텍스트를 교환하는 것이라고 할 수 있다.

따라서 네트워크 안에서 내가 보낸 텍스트를 누군가가 가로챈다면 그 내용이 그대로 보이게 된다. 예를들어 A가 메일을 읽고 있는 도중에 B가 그 신호를 가로챈다면 B가 A의 메일을 읽을 수 있게 된다.


그래서 나온 것이 https이다.


https는 http + secure로, 공개키 암호화 방식을 사용하여 텍스트를 암호화하는 프로토콜이다.


그렇다면 왜 아직까지 http 방식을 사용하는 사이트가 많을까?

https 암호화를 하면 웹 서버에 부하가 생기기 때문이다. 따라서 우리나라같은 경우 보안이 철저하게 이루어져야 할 금융사이트 등에서 많이 사용한다.





이외의 다른 이유들도 있는데, 아래 링크를 참조하면 좋을 것 같다.


출처 - http://kmj1107.tistory.com/entry/Http-vs-Https-Http%EC%99%80-Https%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90



html의 form에서 submit할 경로를 지정할 때 https 프로토콜을 사용하는 url로 지정하는 것도 가능하다.

이것을 사용하면 폼 자체가 안정하지 않은 페이지에 https를 이용해서 접근하는 곳에 호스트된 경우 데이터는 나머지 요청들과 함께 암호화된다.

반면 만약 폼이 보안 페이지에서 호스트된 경우라도 action 속성에서 안정하지 않은 http url을 지정하면 모든 브라우저는 데이터가 암호화되지 않았기 때문에 데이터를 보낼 때마다 보안 경고를 출력할 것이다.


출처 - https://developer.mozilla.org/ko/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data




페이지 이동

https -> http 의 이동은 문제 없이 가능하지만, http -> https 의 이동은 할 수 없다. 이것은 크로스 도메인의 문제로, 다른 글의 주제로 포스팅했다. 

break는 해당 if문만 종료시키지만, return은 해당 메소드가 호출된 곳까지 종료시킨다. 즉, if문을 포함한 메소드 자체를 종료시킨다.

우분투에 apache thrift를 설치하려면 시스템 업데이트를 해야한다.

$ sudo apt-get update

이 명령어를 실행하였더니, 제목 그대로의 오류가 났다.


이 에러 메세지는 잦은 강제 리부팅 등이 발생하였을 때 나타난다고 한다.(구글링...)

해결방법은 간단했는데, reboot 명령어로 리부팅을 했더니 바로 해결되었다.

Installing Apache Thrift in Windows


http://thrift.apache.org/download 에서 Thrift compiler를 다운받으면 된다.

여기서 다운로드한 설치파일을 실행하기 위해서는 환경변수(PATH) 설정이 필요하다.


* 윈도우8 기준 PATH설정 하는 법

 제어판 -> 시스템 및 보안 -> 시스템 -> 좌측의 '고급 시스템 설정' -> 환경변수 순서로 들어가서 설정하면 된다.


thrift_logo

Apache Thrift는 다양한 플랫폼과 언어에 걸쳐 확장 가능한 분산 시스템을 구축하는데 도움이 되는 도구 중 하나이다.

원래 페이스북에서 내부적으로 사용하기 위해 개발했지만, 지금은 Apache Foundation에서 지원하는 오픈소스 프로젝트이다.

다양한 언어지원, 유연성 및 성능이 특징이다.


An introduction to Apache Thrift


Apache Thrift는 페이스북에서 개발한 다양한 언어를 지원하는 'RPC 프레임워크'다. IDL(interface definition language)로 작성된 단일 파일에서 여러 언어에 대한 코드가 자동으로 생성된다.


- RPC 프레임워크

 RPC(remote procedure call)는 원격 API를 호출하는 대표적인 방법이다. 원격 서버의 함수를 호출해서 결과를 얻는다. 즉, 별도의 원격 제어를 위한 코딩 없이 다른 주소 공간에서 함수나 프로시져를 실행할 수 있게 하는 프로세스 간 통신 기술이다.


- IDL : 인터페이스 정의 언어

 소프트웨어 컴포넌트의 인터페이스를 묘사하기 위한 명세 언어이다. 어느 한 언어에 국한되지 않는 언어중립적인 방법으로 인터페이스를 표현함으로써 같은 언어를 사용하지 않는 소프트웨어 컴포넌트 사이의 통신을 가능하게 한다.

 

Supported programming language


Apache Thrift로 일을 시작하기 전에 지원하는 언어들의 종류를 알아봐야 한다.

(version 0.9.3 기준 / http://thrift.apache.org/docs/features 참고)

ActionScript3, C++, C#, D, Delphi, Erlang, Haskell, Java, JavaScript, Node.js, Objective-C/Cocoa, OCaml, Perl, PHP, Python, Ruby, Smalltalk


Data types


Apache Thrift는 개발자들을 위해 모든 더러운(?)일을 한다. 고유한 데이터 유형을 제공하여 해당 프로그래밍 언어의 기본 데이터 유형에 매핑하므로 개발자는 통신 인터페이스(communication interface)가 아니라 application을 creating하는데 집중할 수 있다.



Interface description language


Apache Thrift의 핵심 기능은 간결성과 유연성을 제공하는 Apache Thrift만의 IDL이다. 현대의 프로그래밍 언어로 코딩을 한 사람이라면 누구나 한 번쯤은 볼 수 있을 것이다. IDL을 사용하면, 사용하는 모든 변수와 서비스를 하나의 파일에서 정의할 수 있다. 



Protocol Buffers


Protocol Buffers는 Apache Thrift의 older broter이고, 이것들은 비슷한점이 많다. 


 

 Thrift

Protocol Beffers 

개발사 

Facebook -> Apache 

Google 

지원 언어

많다(앞에서 설명함) 

C++, Java, Ptthon 

 자료형 지원

Map, List, Set 등 

지원 안 함 

 사용자

많다 

보통 


+ Recent posts