My space: 7월 2016

2016년 7월 25일 월요일

[WAS] Web / JSP : 동작구조

출처 http://installed.tistory.com/entry/1-JSP%EB%8F%99%EC%9E%91%EA%B5%AC%EC%A1%B0

< Web 프로그래밍 >

기본적으로 클라이언트/서버 방식으로 이루어진다.

클라이언트(웹 브라우저)가 특정 페이지를 웹서버에 요청(Request)하게 되면 웹서버가 이를 처리한 후 결과를 클라이언트(웹브라우저)에게 응답(Response)을 하게 되는 구조

① 요청 (Request) : 웹 브라우저가 웹서버에 해당 페이지를 요청

② 해당 웹서버는 요청페이지를 판단

html 인지 jsp인지 확인하여 html인 경우 html로 응답하고, 아닌경우는 요청된 페이지의 로직 / DB 연동을 위해 WAS에 처리를 요청한다.

③ WAS에서 DB연동이 필요하면 DB 처리를 수행한다.

④ 처리 결과를 웹서버로 응답한다.

⑤ 결과를 웹브라우저에 응답한다.

- 웹 브라이우저 : 사용자 작업창

- 웹 서버 : 웹브라우저의 요청을 받아들이는 곳이며, 기본인식 언어는 HTML 이다. 결과를 브라우저에 응답한다.

대표적으로 Apache, IIS ( windows 플랫폼에서만 )

- WAS : 요청 페이지의 로직 처리, DB 처리를 수행

WebLogic, WebSphere, 제우스 등

< 웹 어플리케이션 서버 방식 >

- 웹서버가 처리를 하는 것이 아니라 어플리케이션 서버에게 처리를 넘김.

- 여러명의 사용자가 동일한 페이지를 요청하여 같은 어플리케이션 프로그램을 처리할때 한개의 프로세스만 할당하고 사용자요청을 쓰레드 방식으로 처리한다.

< JSP동작구조 >

1. 사용자의 웹브라우저에서 http://서버주소/xxx.jsp 형태로 해당 페이지 (JSP 페이지)를 웹서버로 요청한다.

2. 웹서버는 JSP에 대한 요청을 JSP컨테이너(웹컨테이너)에 처리를 넘김.

3. JSP 파일이 처음 요청된 것이면 JSP파일을 서블릿(.java파일생성)으로 변화하는 파싱을 거친다.

(이전에 요청했던 페이지면 파싱할 필요 없이 파싱했던 클래스파일을 메모리에 적재한다.)

JSP파일은 실행을 위해 서블릿으로 파싱되고, 클래스파일로 컴파일이 되는데 이런 과정은 JSP파일이 처음으로 호출되었을때만 거친다.

4. 서블릿 파일은 자바에서 실행가능한 클래스파일로 컴파일 된다.

5. 클래스파일은 메모리에 적재가 되어 실행된다.

6. 실행결과는 다시 웹서버에게 넘겨진다.

7. 웹서버는 웹브라우저가 인식할수 있는 HTML형태로 결과를 응답한다. HTML페이지를 브라우저에서 실행시켜 표시한다.

( 브라우저는 HTML태그로 구성된 페이지를 실행시켜 주는 프로그램으로, 웹서버에서 HTML이 실행되는것이 아니라 브라우저에서 실행되어 보여진다.)

--> 과정은 해당 JSP페이지가 최초로 요청되었을때 한번만 실행된다. 이후 같은 페이지에 대한 요청이 있으면 변환된 서블릿파일로 서비스를 처리한다.

< HTTP 프로토콜 >

- 비 연결 : 클라이언트의 요청에 응답 후 연결을 끊음.

- 비 상태 : 서버 상태와 상관없이 요청함.

2016년 7월 21일 목요일

2016년 7월 20일 수요일

[html] dl dt dd 태그

출처: http://aboooks.tistory.com/211

[html/css]목록을 만드는 <dl><dt><dd> 태그

<dl>태그는 definition list(정의 목록)의 약자로, 사전처럼 용어 목록을 만듭니다.

<dt>는 definition term(정의 용어)의 약자로, 정의되는 용어의 제목을 넣을 때 사용합니다.

<dd>는 definition description(정의 설명)의 약자로, 용어를 설명하는 데 사용합니다.

html/css

<html>
<head>
<style>
body{background: #CEF279;}
h2{color:#997000;}
</style>
</head>

<body>

<h2>Definition List</h2>
<dl>
<dt>google</dt>
<dd>verb. to search for something on the Internet using the Google™ search engine</dd>
<dt>Google</dt>
<dd>Google is an American multinational corporation specializing in Internet-related services and products.</dd>
<dt>Google Chrome</dt>
<dd>Google Chrome is a freeware web browser developed by Google</dd>
</dl>

</body>
</html>

▶실행화면

Definition List

google

verb. to search for something on the Internet using the Google™ search engine

Google

Google is an American multinational corporation specializing in Internet-related services and products.

Google Chrome

Google Chrome is a freeware web browser developed by Google

<dd>를 사용하면 자동으로 들여쓰기가 되는데요.

들여쓰기 거리를 조절하려면 text-indent 속성이나 margin-left, padding-left 값으로 조절하는 방법이 있습니다.

예: dd{text-indent: 20px;}

dd{margin-left: 20px;}

오늘은 사전처럼 용어에 대한 목록을 만들 때 사용하는 <dl> <dt> <dd>태그를 배워 보았습니다.

2016년 7월 19일 화요일

[html] ul ol dl li 태그 차이점

http://aboooks.tistory.com/210

[html/css]목록을 만드는 <ul> <ol> <li>태그

목록을 만드는 방법은 아래 세 가지가 있습니다

<ol>태그는 ordered list의 약자로, 숫자나 알파벳 등 순서가 있는 목록을 만드는 데 사용합니다

<ul>태그는 unordered list의 약자로, 순서가 필요 없는 목록을 만듭니다

<dl>태그는 definition list의 약자로, 사전처럼 용어를 설명하는 목록을 만듭니다.

<ol>과 <ul>의 각 항목들을 나열할 때는
<li> 태그를 사용하는데 list item의 약자입니다.

▶사용 예

<ul>

</ul>

-->위 주소를 참고하면 되고 ol 의경우만 번호를 자동으로 매길 수 있는 기능이 있다

<h4>Ordered List</h4>
<ol type="I">
<li>영어</li>
<li>음악</li>
<li>수학</li>
<li>과학</li>
</ol>

[jquery] .on() 함수 설명

http://noritersand.tistory.com/218

위 주소를 참조하면 http://api.jquery.com/on/ API를 정리한 내용이 나온다

EX1) 1번 내용의 경우 demo6의 li 요소에 대해서 alert를 띄우는 것이다.
하지만 button을 눌러 append가 된 요소에 대해서는 alert를 띄우지 않는다.
이것을 개선한 내용이 EX2이다

<script>
    jQuery(document).ready(function() {
        $("#demo6 li").on("click", function() {
            alert($(this).text());
        });

        $("#demo6 button").on("click", function() {
            $("#demo6 ul").append("<li>added</li>");
        });
    });
</script>
<div id="demo6">
    <button>ADD</button>
    <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
    </ul>
</div>

EX2) 아래와 같이 .ON() 함수에 2번쨰 인자로 "li"를 써주면 동적으로 생긴 li에 대해서도 제어를 가능할 수 있게 해준다

<script>
    jQuery(document).ready(function() {
        $("#demo7").on("click", "li", function() {
            alert($(this).text());
        });

        $("#demo7 button").on("click", function() {
            $("#demo7 ul").append("<li>added</li>");
        });
    });
</script>

정리하면 아래와 같다

$(선택자).on(이벤트타입 [, 추가선택자] [, 데이터], 핸들러());

1. 파라미터에 추가선택자가 없다 → bind()와 동일, 동적처리 불가능

2. 파라미터에 추가선택자가 있다 → delegate()와 동일, 동적처리 가능

2016년 7월 17일 일요일

[spring] 스프링 4.0 특징

참고블로그
https://stargatex.wordpress.com/2014/11/19/spring-framework-4-0-%EB%AC%B4%EC%97%87%EC%9D%B4-%EB%8B%AC%EB%9D%BC%EC%A1%8C%EB%82%98/comment-page-1/

2016년 7월 13일 수요일

[git] git 작업 정리

이클립스로 git을 하는데 충돌이 너무 많이 일어나서
git bash 를 사용하는데 shell 쪽이 익숙치 않아 블로그를 참고하던 중
괜찮은 사이트를 찾았다
1. http://nolboo.kim/blog/2013/10/06/github-for-beginner/
(맨 아래 링크를 보면 관련 공부 자료가 나옴)

2. https://rogerdudler.github.io/git-guide/index.ko.html
(깃 흐름의 기초 자료)

가장 간단하게 GIT BASH ADD, COMMIT, PUSH 방법
1. GIT BASH 접속 후 PWD 로 현재 폴더 확인
2. CD ~/git (기본폴더에서 git폴더로 이동)
3. CD Algorithm 작업할 git 폴더로 이동
4. git status를 사용하여 변경된 내용 확인
5. git add * (index 생성)
6. git commit -m "코멘트 입력"
7. git push (branch가 origin master 만 있을 경우)

간단하게 폴더 삭제방법

git rm -r one-of-the-directories
git commit -m "Remove duplicated directory"
git push origin <your-git-branch> (typically 'master', but not always)

로컬을 서버에 있는것으로 덮어씌우기

git fetch --all

git reset --hard origin/master

git pull origin master

2016년 7월 11일 월요일

[eclipse] 이클립스 단축키 모음

http://www.silverwolf.co.kr/eclipse/8739

[eclipse] web에서 실행시 한글이 깨질 때

localhost:8080/web 이런식으로 호출할떄 json 한글이 깨질 경우

windows->preference -> general -> workspace 에서

text file encoding을 UTF-8로 변경하면 됨

jsp가 깨질경우 아래를 위에 넣어주면됨
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

-->참조 블로그 http://withcoding.com/29