Session



세션 타임 설정을 위한 두가지 방법 

1. web.xml에 직접 설정하는 방법 

1
2
3
4
5
6
7
8
9
<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/j2ee" ... version="2.5">
  ...
  ...
  ...
  <session-config>
    <session-timeout>100</session-timeout> <!-- 분단위  -->
  </session-config>
</web-app>
cs

2. jsp 페이지에 임의로 설정

1
2
3
<%
  session.setMaxInactiveInterval(100 * 60); // 초 단위
%>
cs

 

아직 db에 대한 학습을 하지 않앟기때문에 web.xml에 임의로 저장하여 활용

 web.xml에 파라미터로써 로그인 ID와 Password를 저장하고 활용

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
               http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
  version="2.5"> 
 <!-- 기존 내용  -->
 <!-- 아래의 내용만 삽입  -->
 <context-param>
   <param-name>MasterID</param-name>
   <param-value>jspbook</param-value>
 </context-param>
 <context-param>
   <param-name>MasterPassword</param-name>
   <param-value>112233</param-value>
 </context-param>
 <!-- 삽입 끝  -->
 
</web-app>
cs


login.html

1
2
3
4
5
6
7
8
9
10
11
12
13
 <html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>로그인</title></head>
 </head>
 <body>
관리자  (Master)로 로그인하세요.<br/>
 <form action="loginProcess.jsp" method="post">
 ID : <input type="text" name="id"><br/>
 Password : <input type="password" name="pw"><br/>
 <input type="submit" value="전송">
 </body>
 </html>
cs

loginProcess.jsp

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
35
<%@ page contentType="text/html;charset=utf-8" %>
<%
 String storedID = application.getInitParameter("M
asterID");  
 String storedPW = application.getInitParameter("M
asterPassword");  
 String id = request.getParameter("id");
 String pw = request.getParameter("pw");
 if (id.equals(storedID) && pw.equals(storedPW)) { 
   session.setAttribute("MasterLoginID", id); 
%>
<html>
<head><title>로그인 처리</title></head>
<body>
로그인에 성공했습니다. <br/><br/>
<a href="loginCheck.jsp">로그인 체크</a>
</body>
</html>
<%
 } else if (id.equals(storedID)) { 
%>
<script>
alert("패스워드가 다릅니다.");  
history.go(-1);
</script>
<%
 } else {  
%>
<script>
alert("로그인  ID가 다릅니다.");
history.go(-1);
</script>
<%
 }
%>
cs

※ 대부분의 JSP 페이지 및 Servlet은 session 기본 객체를 사용하게 된다. 따라서 로그인과관련된 코딩이 없어도 session 기본 객체는 이미 생성되며 session 기본 객체의 생성 시점

로그인 성공 시점은 일치하지 않는다는 점에 유의해야 한다. 이는 곧 사용자가 로그아웃

하더라도 기존의 session 기본 객체는 계속 유지될 수 있다는 것을 의미한다.


로그인 지속 여부 판단

로그인이 되어 있다는 것을 판단하는 방법은 session 기본 객체에 로그인 표식을 위한 속성

이 존재하는지의 여부를 판단하는 것으로 이루어진다.

loginCheck.jsp

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
<%@ page contentType="text/html;charset=utf-8" %>
<%
 String masterID = (String)session.getAttribute("M
asterLoginID");
 boolean isLogin = false;
 if (masterID != null) {
   isLogin = true; 
 }
%>
<html>
<head><title>로그인여부 검사</title></head>
<body>
<%
   if (isLogin) {
%>
ID "<%= masterID %>"로 로그인 한 상태  <br/><br/>
<a href="logout.jsp">로그아웃</a>
<%
   } else {
%>
로그인하지 않은 상태
<%
   }
%>
</body>
</html>
cs

로그아웃 처리 logout.jsp

session.invalidate() 메소드를 통해 세션을 종료하면 된다 

1
2
3
4
5
6
7
8
9
10
11
<%@ page contentType="text/html;charset=utf-8" %>
<%
 session.invalidate();
%>
<html>
<head><title>로그아웃</title></head>
<body>
로그아웃하였습니다. <br/><br/>
<a href="login.html">처음부터</a>
</body>
</html>
cs

아래와 같이 세션에서 객체 속성을 삭제하는 방법으로도 처리 가능 

1
session.removeAttribute("MasterLoginID");
cs



로그인 처리를 위해 쿠키 대신에 세션을 사용하는 이유는?

쿠키는 클라이언트에도 정보가 저장되서 관리가 어렵지만 세션을 이용하면 서버에서만 데이터를 관리하면 되기때문에 관리가 용이하고 보안 측면에서 더 강화된다 


Cookie

쿠키(cookie)는 인터넷 사용자가 어떠한 웹 사이트를 방문할 경우 그 사이트가 사용하고 있

는 서버에서 인터넷 사용자의 컴퓨터에 설치하는 작은 기록 정보 파일을 일컫는다. 쿠키에

담긴 정보는 인터넷 사용자가 같은 웹 사이트를 방문할 떄마다 읽혀서 서버로 전송되고 새로운정보로 바뀔 수도 있다.



두 번째 인자로서 쿠키의 값을 지정

Cookie 객체의 멤버 메소드

Cookie의 생성 및 활용

1
2
3
4
<%
  Cookie cookie = new Cookie("cookieName", "cookieValue");
  response.addCookie(cookie);
%>
cs

Cookie 클래스 생성자의 첫 번째 인자로서 쿠키의 이름을, 두 번째 인자로서 쿠키의 값을 지정

createCookie.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- createCookie.jsp -->
<%@ page contentType="text/html;charset=utf-8" %>
<%@ page import="java.net.URLEncoder" %>
<%@ page import="java.util.Date" %>
<%
    Cookie cookie = new Cookie("name", URLEncoder.encode("jspbook 쿠키 테스트"));
    Cookie cookie2 = new Cookie("date", new Date().toString());
    response.addCookie(cookie);
    response.addCookie(cookie2);
%>
<html>
<head><title>쿠키생성</title></head>
<body>
쿠키 이름: <%= cookie.getName() %><br/>
쿠키 값: <%= cookie.getValue() %><br/>
<br/>
쿠키 이름: <%= cookie2.getName() %><br/>
쿠키 값: <%= cookie2.getValue() %>
<p><a href="getCookies.jsp">Next Page to view the cookie value</a></p>
</body>
</html>
cs

실행화면





• 쿠키 생성 및 응답전송 단계: JSP를 활용하여 서버 측에서 쿠키를 생성한다. 이렇게 생성

된 쿠키는 응답 데이터와 함께 브라우저로 전송된다.

• 쿠키 저장 단계: 웹 브라우저는 응답 데이터에 포함된 쿠키를 쿠키 저장소에 보관한다. 

대부분의 경우 하드디스크의 파일 형태로 저장된다.

• 쿠키 요청전송 단계: 한번 저장된 쿠키는 웹 브라우저에서 서버로 요청을 보낼 때마다 함

께 전송된다. 웹 서버는 웹 브라우저가 전송한 쿠키에서 필요한 데이터를 읽어서 필요한 

작업을 수행할 수 있다.

쿠키의 전송은 1)응답전송과 2)요청전송으로 나뉜다는 점에 유의하자. 응답전송은 서버가 

생성된 후 서버에서 브라우저로 한 번만 일어난다. 하지만 요청전송은 일단 웹 브라우저에 

쿠키가 저장되면 쿠키가 삭제되기 전까지 매번 웹 서버에 전송된다. 그러므로 쿠키를 활용

해서 지속적으로 브라우저로부터 데이터를 받아낼 수 있으며, 브라우저를 닫은 이후에 다시 

브라우저를 열어서 해당 사이트로 접속할 때에도 전송된다는 점에 유의하자. 


서버 측에서 전송받은 쿠키의 데이터 읽어오기

Cookie[] cookies = request.getCookies();

getCookies.jsp 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<%@ page contentType="text/html;charset=utf-8" %>
<%@ page import="java.net.URLDecoder" %>
<html>
<head><title>쿠키 목록</title></head>
<body>
쿠키 목록<br/>
<%
   Cookie[] cookies = request.getCookies();
   if (cookies != null && cookies.length > 0) {
       for (int i = 0 ; i < cookies.length ; i++) {
%>
<%= cookies[i].getName() %>=<%= URLDecoder.decode(c
ookies[i].getValue()) %><br/>
<%
       }
   } else {
%>
전송 받은 쿠키가 없습니다.
<%
   }
%>
</body>
</html>
cs

※ 쿠키 값이 인코딩되었을 가능성이 있으므로 URLDecorder.decode( ) 메소드를 활용해서 쿠키 값을 디코딩하는 메소드를 활용하면서 쿠키 값을 얻어와야 한다.

쿠키삭제 

아래와같은 방법으로 쿠키 삭제 

1
2
cookie.setMaxAge(0);
response.addCookie(cookie);
cs


deleteCookies.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%@ page contentType="text/html;charset=utf-8" %>
<%@ page import = "java.net.URLEncoder" %>
<%
 Cookie[] cookies = request.getCookies();
   if (cookies != null && cookies.length > 0) {
       for (int i = 0 ; i < cookies.length ; i++) {
           if (cookies[i].getName().equals("name
")) {
               cookies[i].setMaxAge(0);
               response.addCookie(cookies[i]);
           }
       }
   }
%>
<html>
<head><title>쿠키 삭제</title></head>
<body>
name 쿠키를 삭제합니다.
<p><a href="getCookies.jsp">Next Page to view the c
ookie value</a></p>
</body>
</html>
cs


쿠키의 유효 시간을 지정하지 않은 경우 웹 브라우저를 닫으면 쿠키는 자동으로 삭제되며 이후에 웹 브라우저를 실행할 때에 지워진 쿠키는 서버로 요청전송되지 않는다. 쿠키의 유효 시간을 설정하면 웹 브라우저를 닫더라도 유효 시간이 남아 있으면 해당 쿠키가 삭제되지 않고 이후 요청전송될 수 있다.


create1hourCookie.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 <%@ page contentType="text/html;charset=utf-8" %>
 <%
    Cookie cookie = new Cookie("cookieTime", "1 hour");
    cookie.setMaxAge(60 * 60); 
    response.addCookie(cookie);
 %> 
 
<html>
<head><title>쿠키유효시간설정</title></head>
<body>
유효시간이  1시간인  cookieTime 쿠키 생성.
<p><a href="getCookies.jsp">Next Page to view the c
ookie value</a></p>
</body>
</html>
cs


쿠키를 이용한 ID 기억하기 구현


login2.jsp

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
35
 <%@ page contentType="text/html;charset=utf-8" %>
 <html>
 <head><title>로그인</title></head>
 <%
  boolean isIDShow = false;
  String id = null;
  Cookie[] cookies = request.getCookies();
  if (cookies != null && cookies.length > 0) {
    for (int i = 0 ; i < cookies.length ; i++) {
      if (cookies[i].getName().equals("id")) {
       isIDShow = true;
       id = cookies[i].getValue();
      }
    }
  }
 %>
 <body>
관리자  (Master)로 로그인하세요.<br/>
 <form action="loginProcess2.jsp" method="post">
 <%
  if (isIDShow) {
 %>
 ID : <input type="text" name="id" value="<%= id %>">
 <input type="checkbox" name="idstore" value="store" 
checked>ID 기억하기
 </input><br/>
 <%
  } else {
 %>
 ID : <input type="text" name="id">
 <input type="checkbox" name="idstore" value="store
">ID 기억하기</input><br/>
 <%
  }
 %>
cs

login2.jsp는 간단한 로그인 폼 생성 페이지이지만 브라우저로부터 전송된 쿠키 정보 중 "id" 이름의 쿠키가 있는지 확인하여 그 쿠기가 있다면 ID 정보를 폼 입력에 미리 넣어주는 역할을 한다

loginProcess2.jsp

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
35
36
37
38
39
40
41
42
43
<%@ page contentType="text/html;charset=utf-8" %>
<%
 String storedID = application.getInitParameter("M
asterID");  
 String storedPW = application.getInitParameter("M
asterPassword");  
 String id = request.getParameter("id");
 String pw = request.getParameter("pw");
 if (id.equals(storedID) && pw.equals(storedPW)) { 
   session.setAttribute("MasterLoginID", id);
%>
<html>
<head><title>로그인 처리</title></head>
<body>
로그인에 성공했습니다. <br/><br/>
<a href="loginCheck.jsp">로그인 체크</a> 
</body>
</html>
<%
   String IDStore = request.getParameter("idstore");
    if (IDStore != null && IDStore.equals("store")) 
{
      Cookie cookie = new Cookie("id", id);
      response.addCookie(cookie);
     out.println("<a href='login2.jsp'>로그인 화면 다
시 보기</a>");
   }
 } else if (id.equals(storedID)) { 
%>
<script>
alert("패스워드가 다릅니다.");  
history.go(-1);
</script>
<%
 } else {
%>
<script>
alert("로그인  ID가 다릅니다.");
history.go(-1);
</script>
<%
 }
%> 
gcs

getInitParameter 와 getParameter 차이점

getInitParameter 

 web.xml 에다가 지정해둔 파라미터들의 값을 얻어 올수 있다.. 불변의 값들을 미리 xml 에다가 적어놓구 필요할때마다 호출해서 사용

getParameter 

리퀘스트 범위내에서 Parameter 값을 얻어오는 것. 전의 페이지에서 값을 넘겨주면 이 메소드를 활용하여 값ㅇ르 받아온다 


※ setPath() 메소드의 일반적인 활용법

일반적으로 쿠키는 웹 애플리케이션에 포함된 대부분의 JSP, 서블릿에서 공통으로 사용되는 

경우가 많기 때문에 대부분의 쿠키는 경로를 “/”로 지정한다. 즉, 생성된 쿠키가 cookie라면 

cookie.setPath("/")를 호출하면 된다. 

'Java > Servlet, JSP' 카테고리의 다른 글

HTTP 프로토콜의 이해  (0) 2014.11.05

교재 PDF

jQuery.pdf

jQuery 의 특징

DOM과 관련된 처리를 쉽게 구현

CSS 선택자를 이용하여 쉽고 편리하게 요소를 선택

일괄된 이벤트 연결을 쉽게 구현

시각적 효과를 쉽게 구현

Ajax 애플리케이션을 쉽게 개발

일반인들이 만든 플러그인을 이용할수 있음

jquey-1.11.2.js

jquery-1.11.2.js


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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 연결</title>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    //window.onload = function(){};
    //문서가 준비 완료되면 매개변수로 전달된 함수를 실행하라는 의미
    
    $(document).ready(function(){
        alert('First Ready');
    });
    
    $(document).ready(function(){
        alert('Second Ready');
    });
    
    $(document).ready(function(){
        alert('Third Ready');
    });
</script>
</head>
<body>
 
</body>
</html>
cs



jQuery 연결

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery 연결</title>
<!-- CDN : Contents Delivery Network  -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<!-- <script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script> -->
<script type="text/javascript">
    //HTML 페이지에 있는 모든 문서 객체를 선택하는 선택자
    $(document).ready(function(){
        
        $('*').css('color', 'red'); //* 전체 선택자
 
    });
</script>
</head>
<body>
    <h1>장마</h1><br>
    <h2>여름</h2>
</body>
</html>
cs


id선택자, 클래스 선택자, 태그 선택자

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id선택자, 클래스 선택자, 태그 선택자</title>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    //$(document).ready(function(){});
    $(function(){
        //태그 선택자    속성     속성값
        $('span').css('border', '3px solid blue');
        
        //클래스 선택자
        $('.my').css('border', '5px solid red');
        
        //id 선택자
        $('#content').css('background', 'green');
    });
</script>
</head>
<body>
    <p class="my">jQuery 실습</p>
    <div>
        <div id="content">id값이 content인 div 태그</div>
    </div>
    <span>span1</span>
    <span class="my">span2</span>
</body>
</html>
cs



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id선택자, 클래스 선택자, 태그 선택자</title>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        //여러개의 태그 선택
        $('h1,p').css('color', 'orange');
    });
</script>
</head>
<body>
    <h1>강물</h1>
    <p>파도</p>
    <h1>새벽</h1>
    <div>별</div>
    
</body>
</html>
cs


05.html - 특정 id 속성을 가지는 태그 선태 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id선택자, 클래스 선택자, 태그 선택자</title>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        //특정 id 속성을 가지는 태그 선택
        $('h1#target').css('color', 'orange');
    });
</script>
</head>
<body>
    <h1>header-0</h1>
    <h1 id="target">header-1</h1>
    <h1>header-2</h1>
</body>
</html>
 
cs


06.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>id선택자, 클래스 선택자, 태그 선택자</title>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        //특정 id 속성을 가지는 태그 선택
        $('h1#target').css('color', 'orange');
    });
</script>
</head>
<body>
    <h1>header-0</h1>
    <h1 id="target">header-1</h1>
    <h1>header-2</h1>
</body>
</html>
 
cs

자식 선택자 (직계 자식만 선택 - 후손선택자와 구분 중요) 

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자신 선택자</title>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $(function() {
        //자식 선택자
        //body 태그의 자식(직계자신)
        $('body > div').css('border', '3px solid red');
    });
</script>
</head>
<body>
    <div>
        <div>
            <ul>
                <li>사과</li>
                <li>바나나</li>
                <li>망고</li>
                <li>오렌지</li>
            </ul>
            <div>가을 여행</div>
        </div>
    </div>
    <p>
        <span>하하</span>
    </p>
    
</body>
</html>
 
cs


후손 선택자

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>
<head>
<meta charset="UTF-8">
<title>후손 선택자</title>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $(function() {
        //후손 선택자
        //body 이하 div 선택(후손 중 div 선택)
        $('body div').css('border', '3px solid red');
    });
</script>
</head>
<body>
    <div>
        <div>
            <ul>
                <li>사과</li>
                <li>바나나</li>
                <li>망고</li>
                <li>오렌지</li>
            </ul>
            <div>가을 여행</div>
        </div>
    </div>
    <p>
        <span>하하</span>
    </p>
 
</body>
</html>
 
cs


배열

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
35
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열</title>
<script type="text/javascript" src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
    $(function(){
        //배열 선언 
        var array = [
                     {name: 'naver', link:'http://www.naver.com'},
                     {name: 'daum', link:'http://www.daum.net'},
                     {name: 'nate', link:'http://www.nate.com'},
                     {name: 'google', link:'http://www.google.co.kr'}
                     ];
        
            // 배열     배열로부터 데이터를 받아서 처리하는 함수
        $.each(array, function(index, item){
            //index : 배열의 index
            //item : 배열의 인덱스를 통해 접근한 객체(key:value)
            
            var output='';
            output+='<a href='+item.link + '>';
            output+='<h1>'+item.name+'</h1>';
            output+='</a>';
            
            document.body.innerHTML += output;
        });
    });
</script>
</head>
<body>
 
</body>
</html>
cs







<div>

<h1>하늘<h1>

</div>

append 기능 을 이용하면 하늘 다음에 데이터가 들어간다 

HTML은 누적해서 데이터를 보여주지 못하므로 append 가능을 이용해서 데이터 표시

'App Development > Hybrid Programming' 카테고리의 다른 글

특강 3일차 (오후) - AJAX, JQueryMobile  (0) 2015.01.07
특강 3일차 (오전) - JQuery, AJAX  (0) 2015.01.07
특강 2일차 (오전) - 자바스크립트  (0) 2015.01.06
특강 1일차 (오후)  (0) 2015.01.05
특강 1일차  (0) 2015.01.05

하이브리드 특강 2일차 오전: 자바스크립트

웹에서 가져온 데이터를 뿌려줄때 자바스크립트를 이용해 DOM을 제어함

생성자를 이용한 객체 생성


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>
<head>
<meta charset="UTF-8">
<title>생성자 함수를 이용한 객체 생성</title>
<script type="text/javascript">
// 생성자 함수 지정
function Student(name, korean, math, english, science) {
this.이름 = name;
this.국어 = korean;
this.영어 = english;
this.수학 = math;
this.과학 = science;
 
// 메서드
this.getSum = function(){
return this.국어 + this.수학+ this.영어 + this.과학
};
this.getAverage = function(){
return this.getSum() / 4;
};
this.toString = function(){
return this.이름 + ', ' + this.getSum() + ',' + this.getAverage();
};
}
 
// 생성자 함수를 이용한 객체 생성
var student = new Student('홍길동', 100, 90, 98, 97);
document.write(student.toString());
</script>
</head>
<body>
</body>
</html>
cs

라이브러리를 만들어서 이용할떄 위와 같이 사용 

위와 같은 형태로 자바스크립트 상속도 가능(이번 수업에서는 배우지 않는다)

애플릿 -> 플래쉬 -> 자바스크립트

DOM 객체 트리 생성

출력

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<script type="text/javascript">
window.onload = function() {
//변수 선언
var output = '';
output += '<ul>';
output += ' <li>JavaScript</li>';
output += ' <li>JQuery</li>';
output += ' <li>Ajax</li>';
output += '</ul>'
 
//innerHTML 속성에 문자열을 할당
document.body.innerHTML = output;
};
</script>
</head>
<body>
 
</body>
</html>
cs

요소선택 

window.onload : HTML 문서가 완전히 업로드 된후 자바 스크립트 실행

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<script type="text/javascript">
window.onload = function () {
var spans = document.getElementsByTagName('span');
spans[0].innerHTML = '호수';
spans[1].innerHTML = '들판';
 
};
</script>
</head>
<body>
    <span>하늘</span>
    <span>하늘</span>
    
</body>
</html>
cs

For 문 이용해서 요소 선택후 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<script type="text/javascript">
window.onload = function () {
var spans = document.getElementsByTagName('span');
 
for (var i = 0; i<spans.length; i++){
if(i%2==1){
spans[i].innerHTML = '우주';
} else {
spans[i].innerHTML = '지하';
}
}
};
</script>
</head>
<body>
    <span>하늘</span>
    <span>하늘</span>
    <span>하늘</span>    
</body>
</html>
cs

ID를 이용한 접근

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title>
<script type="text/javascript">
window.onload= function(){
//문서 객체를 가져옴
var header1 = document.getElementById('header_1');
var header2 = document.getElementById('header_2');
 
header1.innerHTML = '하하';
header2.innerHTML = '호호';
};
</script>
</head>
<body>
    <h1 id="header_1">Header</h1>
    <h1 id="header_2">Header</h1>
</body>
</html>


태그에 접근하는 많은 방법중 가장 빈번한 방법은 태그와 아이디 

Event - inline 이벤트 처리

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>event - 인라인 이벤트 처리</title>
</head>
<body>    
    <input type="button" value="이동" onclick="location.href='http://www.naver.com'">
    
    <!-- 한라인에 여러 이벤트 삽입 끝을 제외하고는 ; 삽입  -->
    <input type="button" value="확인" onclick="alert('클릭');alert('클릭')">    
</body>
</html>
cs

이벤트 연결 처리

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>
<head>
<meta charset="UTF-8">
<title>event - script에서 이벤트 처리</title>
<script type="text/javascript">
window.onload = function(){
var header = document.getElementById('header');
 
//이벤트가 발생할 때 호출되는 함수 
function whenClick(){
alert('Click');
}
 
//이벤트 연결 
header.onclick = whenClick;
};
</script>
</head>
<body>
    <div id="header">클릭</div>    
</body>
</html>
cs

다른 이벤트 연결 처리 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>event - script에서 이벤트 처리</title>
<script type="text/javascript">
window.onload = function(){
var header = document.getElementById('header'); 
 
//이벤트 연결 
header.onclick = function whenClick(){
alert('클릭');
}
};
</script>
</head>
<body>
    <div id="header">클릭</div>    
</body>
</html>
cs

자바스크립트 기본이벤트와 기본 이벤트 제거를 학습해야 한다. 

기본 이벤트 연결 및 제거 예제

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
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>기본 이벤트</title>
<script type="text/javascript">
    window.onload = function(){
        var aa = document.getElementById('aa');
        //이벤트 연결 
        aa.onclick=function(){
            alert('이벤트 연결');
            
            //기본 이벤트 제거 
            return false;
        };
        
        var myForm = document.getElementById('myForm');
        
        //이벤트 연결
        myForm.onsubmit = function(){
            alert('이벤트 연결');
            
            // 기본 이벤트 제거
            return false;
        };
    };
</script>
</head>
<body>
    <a id="aa" href="http://www.naver.com">이동</a>    
    <br><br>
    <form id="myForm" action="a.jsp" method="get">
        <input type="text" name="name"><br>
        <input type="submit" value="전송">
        
    </form>
</body>
</html>



이벤트 버블링 (모든 브라우저에서 지원하므로 표준)

자시쪽에서 부모쪽으로 이벤트 전파 

이벤트 캡쳐링(IE는 지원하지 않는다)

부모쪽에서 자식쪽으로 이벤트 전파 

전달 막는것 예제

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
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이벤트 전파</title>
<script type="text/javascript">
    window.onload = function(){
        //문서 객체에 접근
        
        var header = document.getElementById('header');
        header.onclick = function(){
            alert('header');
            //this : 이벤트가 발생한 객체
            this.style.background='pink';            
        };
        
        var paragraph = document.getElementById('paragraph');
        paragraph.onclick = function(e){
            alert('paragraph');
            this.style.background='yellow';
            /*
                인터넷 익스플로러 8이하의 버전은 이벤트가 발생할 때 이벤트 객체를
                window.event 속성으로 전달하지만, 다른 브라우저는 핸들러의 
                매개 변수로 전달
                인터넷 익스플로러 9이상에서는 매개변수, window.event 둘 다 지원                
            */
            
            var event = e || window.event;
            
            //이벤트 전달을 제거            
            event.cancelBubble = true;
            if(event.stopPropagation){
                event.stopPropagation()
            }            
                        
        };
    };
</script>
</head>
<body>
    <h1 id="header">header
        <p id="paragraph">Paragraph</p>
    </h1>
    
</body>
</html>
cs

자바스크립트 마무리


'App Development > Hybrid Programming' 카테고리의 다른 글

특강 3일차 (오후) - AJAX, JQueryMobile  (0) 2015.01.07
특강 3일차 (오전) - JQuery, AJAX  (0) 2015.01.07
특강 2일차 (오전, 오후) - 제이쿼리  (0) 2015.01.06
특강 1일차 (오후)  (0) 2015.01.05
특강 1일차  (0) 2015.01.05

함수

선언적 함수


익명 함수

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>지역변수와 전역변수</title>
<script type="text/javascript">
/* 
1. 지역변수 
함수 안에서 var를 사용해서 선언한 변수, 함수가 끝나면 소열 
2. 전역변수
함수밖에서 만들어진 모둔 변수
함수안에서 var없이 만들어진 변수
함수가 끝나도메ㅗ
*/
 
function test1(){
var i = 10; // 지역변수 
document.write(i);
}
test1();
 
//document.write(i);
 
//지역변수는 함수가 끝나면 소멸
//document.write(i);
 
var j; //전역변수
function test2(){
j = 200;
document.write('<br>'+j);
}
test2();
document.write('<br>'+j);
 
//전역변수
//a;//var를 명시하지 않고 전역변수를 만들면 선언과 함께 초기해야함
a = 10;
 
function test3(){
a = 100;
document.write('<br>'+a);
}
test3();
 
//함수 내에서 var를 명시하지 않고 변수를 선언하면 전역변수
function test4(){
m = 300; // 전역변수
document.write('<br>'+m);
}
test4();
document.write('<br>'+m);
 
 
</script>
</head>
<body>
 
</body>
</html>
cs

매개 변수로 함수 전달하기

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
35
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수를 매개 변수로 받는 함수</title>
<script type="text/javascript">
//함수를 10번 호출하는 함수
function callfunctionTenTime(otherFunction){ //otherFunction 이 함수명을 대신
for(var i = 0; i<10; i++){
otherFunction();
}
}
 
//선언적 함수
function justFunction(){
document.write('Happy Day!<br>');
 
}
 
//함수로 전달할때() 적지 않는 것 주의
callfunctionTenTime(justFunction);
document.write("===============<br>");
 
//익명 함수 전달
callfunctionTenTime(function(){
document.write('Hello JavaScript<br>');
});
 
 
</script>
</head>
<body>
 
</body>
</html>
cs

내부 함수 

함수 내부에 선언한 함수

내부 함수를 사용하면 외구에 같은 이름의 함수가 있어서 우선

내부 함수 예제1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내부 함수</title>
</head>
<script type="text/javascript">
 
function f(){
//내부 함수
function g(){
document.write('g is called');
}
g();
}
//함수 호출
f();
</script>
<body>
    
</body>
</html>
cs

내부 함수 예제2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내부 함수</title>
<script type="text/javascript">
function f(){
var n = 123; //지역변수
function g(){
document.write('n is '+n+'<br>');
document.write('g is called');
}
g();
}
f();
</script>
</head>
<body>
 
</body>
</html>
cs

예제3 (클로저 사용)

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>내부 함수</title>
<script type="text/javascript">
/* 
지역변수는 함수가 실행될 때 생성되고 함수가 종료될 때 사라진다.
하지만, 클로저를 사용하면 이 규칙을 위반 할 수 있다.
지역변수를 남겨두는 현상을 클로저라고 부름 
*/
 
function f(){
var n = 123;
function g(){
document.write('n is'+n+'<br>');
document.write('g is called');
} 
return g;
}
//함수 호출 
var n = f();
document.write(n + '<br>');
document.write('====================<br>');
n();
</script>
</head>    
<body>
    
</body>
</html>
cs

- 클로저의사용 

함수안에있는변수는지역 변수이므로외부에서사용할수 없음. 클로저를사용하면 이규칙을 위반하여지역변수를사용할수 있도록할수 있음. 

익명함수를반환하는함수에지역변수가있으면익명함수는클로저함수로서지역변수를가져다 쓸수 있음. 

클로저란? 

- 지역 변수를남겨두는현상 

- 함수outerFunction()로 인해생성된공간 

- 함수outerFunction() 내부의변수들이살아있음 

- 리턴되는함수자체 

- 살아남은지역 변수

배열 

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열</title>
<script type="text/javascript">
var array = ['포도', '사과', '바나나', '망고'];
document.write(array[0]+'<br>');
document.write(array[1]+'<br>');
document.write(array[2]+'<br>');
document.write(array[3]+'<br>');
 
// 반복문을 이용한 출력
var output='';
/*  for(var i=0; i<array.length;i++){
output += i+ ' : ' + array[i] + '\n';
} */
 
// for in 반복문을 이용한 출력
for (var i in array){
output += i+ ' : ' + array[i] + '\n';
}
alert(output);
</script>
</head>
<body>
    
</body>
</html>
cs

배열 예제 2

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
35
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열</title>
<script type="text/javascript">
var array=['포도', '사과'];
document.write(array+'<br>');
 
array[2] = '사과';
document.write(array+'<br>');
 
array[10] = '망고';
document.write(array+'<br>');
/*  출력
포도,사과
포도,사과,사과
포도,사과,사과,,,,,,,,망고
*/
 
document.write(array[4]+'<br>'); /* 출력: undefined  */
document.write('============================<br>');
 
var array2 = ['one', 'two', 'three'];
array2.length = 2; // 마지막 데이터 제거
document.write(array2+'<br>');
 
array2.length = 4;
document.write(array2+'<br>');
</script>
</head>
<body>
    
</body>
</html>
cs

배열 예제 3

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>배열</title>
<script type="text/javascript">
//비어 있는 배열 생성
var array1 = new Array();
 
document.write(array1+'<br>');
document.write(array1.length+'<br>');
 
//데이터를 저장할 수 있는 10개의 공간을 생성
var array2 = new Array(10);
document.write(array2+'<br>');
document.write(array2.length+'<br>');
 
//저장된 데이터를 전달해서 배열 생성
var array3 = new Array(52, 273, 103, 57, 32);
document.write(array3+'<br>');
document.write(array3.length+'<br>');
 
</script>
</head>
<body>
 
</body>
</html>
cs

객체 

객체 예제1 

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체</title>
<script type="text/javascript">
var product = {
//속성(Key(프로퍼티):value)
제품명:'갤럭시노트4',
제품번호:'A1001',
기능:'멀티윈도우',
원산지:'대한민국',
가격:1000, 
업데이트지원:true
};
 
document.write(product.제품명+'<br>');
document.write(product.제품번호+'<br>');
document.write(product['기능']+'<br>');
document.write(product['원산지']+'<br>');
document.write(product['가격']+'<br>');
document.write(product['업데이트지원']+'<br>');
</script>
</head>
<body>
 
</body>
</html>
 
cs

객체 예제2

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
 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체</title>
<script type="text/javascript">
 
var name = '이순신';
 
var person = {
 
//속성 지정
name:'홍길동',
//메서드 지정
eat:function(food){
var name = '김유신';
//this:메서드 내에서 객체자신이 가지고 있는 속성을 호출하고 할 떄 
//객체 내부에서 객체를 참조할 때 사용
//지역변수를 찾고 없을 경우는 객체 밖에 선언된 전역번수를 찾음 
alert(this.name+'이 '+food+'을 먹습니다.');
//alert(name+'이 '+food+'을 먹습니다.');
 
}
};
//메서드 호출
person.eat('밥, 반찬');
</script>
</head>
<body>
    
</body>
</html>
cs

객체 예제 3

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
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>객체</title>
<script type="text/javascript">
var student = {};
 
 
//객체에 속성 추가
student.이름 = '홍길동';
student.취미 = '악기';
student.특기 = '프로그래밍';
student.장래희망 = '프로그래머';
 
document.write(student.이름+'<br>');
document.write(student.특기+'<br>');
document.write(student.취미+'<br>');
//반복문을 이용한 출력
var output = '';
for(var key in student){
output += key + ':' + student[key] + '<br>';
}
document.write(output);
document.write('---------------<br>');
 
//객체에 메서드 추가
student.toString = function() {
var msg='';
for(var key in this){//this: 자기자신
if(key!='toString'){
msg += key + ':'+ this[key]+'<br>';
}
}
return msg;
};
document.write(student.toString()); 
 
</script>
</head>
<body>
 
</body>
</html>
 
cs


'App Development > Hybrid Programming' 카테고리의 다른 글

특강 3일차 (오후) - AJAX, JQueryMobile  (0) 2015.01.07
특강 3일차 (오전) - JQuery, AJAX  (0) 2015.01.07
특강 2일차 (오전, 오후) - 제이쿼리  (0) 2015.01.06
특강 2일차 (오전) - 자바스크립트  (0) 2015.01.06
특강 1일차  (0) 2015.01.05

하이브리드 프로그래밍의 기본 기반은 HTML5

HTML5는 정적인 언어이기때문에

JAVASCRIPT 가 동적인 부분을 담당

수업 개요d


제3차 실무프로그래밍 강좌 강의계획서.pdf


JAVASCRIPT

JQUERY 

설치

Oracle.com -> JavaSE sdk 7버전 다운로드

강사님이 주신 Eclipse 사용

Ext JS - 데스크탑 환겨에서 사용

데이터 처리하면서 디자인적인면 두곳이 혼합되어 있음 

단점: 느려서 국내에서 사용하지 않았음

센차 터치 - 모바일에서 주로 사용

백엔드 스프링

웹 구현시 - 보통 하던데로 데이터를 받아와서 구현하면 된다.

모바일 구현시 - JSON 혹은 XML 로 데이터르 받아와 센차 터치에서 구현


사물인터넷의 시대를 준비하라


자바스크립트 기초 강의 자료

Javascript.pdf


이클립스 다운로드

톰캣 세팅

Dynamic Web Project 생성

Window -> Browser -> Default System Browser


JavaScript 객체 학습은 필요함 -> Professional JavaScript for Web Development


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

자바스크립트 body와 head에서의 실행순서가 다르다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>실행 위치</title>
<script type="text/javascript">
document.write('head에서 살행<br>');
</script>
</head>
<body>
<script type="text/javascript">
document.write('body에서 실행');
</script>
</html>
 
cs

- 자바스크립트를외부파일로사용 

<script type="text/javascript" src="자바스크립트파일명.js"></script> 

- HTML 태그에인라인(inline) 형태로삽입해서사용 

<input type=”button” value=”이동” onclick=”location.href=’index.html’”> 

자바 스크립트 출력

document.write('자바스크립트출력구문'); 

자바스크립트주석 

 //  : 한줄주석처리 

 /* ~ */ : 한줄이상의주석처리 

**자바스크립트와 다른 언어와 다른점: 함수를 자료형으로 취급

변수
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>변수</title>
<script type="text/javascript">
//변수 선언
var num;
 
//변수에 값을 할당
num = 123;
 
//출력
document.write('num = ' + num);
document.write('<br>');
 
//변수 선언과 초기화를 한 번에 함
var c = 10, d = 3.5;
// bracket 을 해주지 않으면 문자열로 변환되서 계산되지 않음
document.write('c+d='+(c+d)));
</script>
</head>
<body>
    
</body>
</html>
cs


자료형 
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자료형</title>
<script type="text/javascript">
//변수를 선언
var stringVar = 'String'; //문자열
var numberVar = 273; //숫자
var booleanVar = true; //boolean
var functionVar = function(){} // 함수
var objectVar = {};
 
//typeof 변수명: 해당 변수에 저장된 데이터의 타입을 알아내는 연산자
document.write('stringVar : '+typeof stringVar + '<br>');
document.write('numberVar : '+typeof numberVar + '<br>');
document.write('booleanVar : '+typeof booleanVar + '<br>');
document.write('functionVar : '+typeof functionVar + '<br>');
document.write('objectVar : '+typeof objectVar + '<br>');
 
 
</script>
</head>
<body>
 
</body>
</html>
cs


자료형과 형변환

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>자료형과 형변환</title>
<script type="text/javascript">
var input = prompt('숫자를 입력하세요', '숫자');
 
document.write(typeof(input)+':'+input);
document.write('<br>');
 
document.write(input*10); // 자동적으로 형변환 
document.write('<br>');
document.write(input+10);
 
//형변환
//문자(문자열)를 숫자로 변환
var numberInput = Number(input); // 문자->숫자
document.write('<br>형변환 이후 <br>');
document.write(typeof(numberInput)+':'+numberInput);
document.write('<br>');
document.write(numberInput+10);
 
</script>
</head>
<body>
    
</body>
</html>
cs

나머지 연산자 기능은 기존 프로그래밍 언어 문법들과 비슷

** 주의해야할 비교 연산자

 ==            a == b              a 와b 의값이같은지비교 

 !=            a != b              a 와b 의값이 다른지비교 

 ===           a === b             a 와b 의값뿐만아니라자료형도같은지비교 

 !==           a!==b               a 와b 의값뿐만아니라자료형도 다른지비교 

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>비교연산자</title>
<script type="text/javascript">
/* 
연산자 설명
=== 양 변의 자료형과 값이 일치해야 true
!== 양 번의 자료형과 값이 다르면 false
*/
var a = 20, b = '20', c;
 
c = a == b;
document.write('a == b : ' + c + '<br>'); // 자동 형변환이 이루어져서 true
 
c = a != b;
document.write('a != b : ' + c + '<br>'); 
 
c = a === b;
document.write('a === b : ' + c + '<br>');
 
c = a !== b;
document.write('a !== b : ' + c + '<br>');
 
</script>
</head>
<body>
</body>
</html>
cs


'App Development > Hybrid Programming' 카테고리의 다른 글

특강 3일차 (오후) - AJAX, JQueryMobile  (0) 2015.01.07
특강 3일차 (오전) - JQuery, AJAX  (0) 2015.01.07
특강 2일차 (오전, 오후) - 제이쿼리  (0) 2015.01.06
특강 2일차 (오전) - 자바스크립트  (0) 2015.01.06
특강 1일차 (오후)  (0) 2015.01.05

Spring MVC에서 정적 자원(css, js, etc)을 처리해본 경험

ResourceHttpRequestHandler

URL 패턴에 따라 정적 자원 요청을 처리

HTTP 캐시 설정 기능 제공

설정 간소화 기능 제공

:Java 기반 설정시 WebMvcConfigure

Gradle을 이용해서 build 자동화


프로젝트 구조

backend 

 - src

      - main 

                --java    

    -- resource

       - test

frontend 

- package.json

- bower.json

- groundfile.js

- src

-- assets

-- helpers

--layouts

--libs

-- pages


Backend 관리 

Sprinb boot, Spring I/O Platform, 공용 컴포넌트

Thymeleaf

html태그 /속성 기반의 템플릿 엔진

FrontEnd 관리

NPM 

BOWER 

GRUNT 

usermin

Fingerprinting : grunt-filerev 를통해 작동 

캐쉬를 효율적으로 이용하기 위해 이용

템플릿 생성: assemble

프론트 엔드 개발이 분리된 이유

Dependancy management

modularity

tests

build automation


FrontEnd의 자원 사용법

FrontEnd 의존성 활용법

WebJars 

Client-side 웹 라이브러리를 JAR로 묶어서 제공하는 서비스

JVM 기반 빌드 도구를 지원(maven 저장소)

-> frontend.jar로 만든후 backend 모듈에 의존성을 추가(Gradle로 통합)

frontend를 빌드후 jar로 만들기


개발과 배포는 다르다

배포시에는 최적화된 자원을 쓴다

개발시에는 작성죽인 css, js를 사용

backend 환격에 따른 자원 접근 전략 변경

ex) if(개발) { 개발용} else { 배포용 }


(time leaf)타임 리프: 프론트엔드가 개발한 환경 그대로 스프링에서 그대로 쓸수 있다. 

핸들바를 스프링측에 이미 있다. 

Spring 4.1 fingerprinting과 자원 최적화가 Spring에서 runtime 레벨에서 제공해준다.

참고 기트허브 gihub.com/arawn/resource-handling-in-springmvc


'Java > Spring' 카테고리의 다른 글

스프링 프로파일 (Spring profile) 을 통해 환경별로 다른 설정을 해보자  (0) 2016.11.24
Spring 내에서 리소스 불러오기  (0) 2016.11.18
스프링 Properties 파일을 이용해서 설정하기  (0) 2016.11.18
Mybatis + Myabtis Spring 사용시 마이바티스 설정파일 사용법  (0) 2016.11.14
Tomcat 으로 원격 배포와 서버 원격디버깅  (0) 2016.07.18

원클릭으로 파일 공유 쉽게 HFS

http://www.rejetto.com/hfs/

//단일 객체를 만들때
var obj = {
    //property, method가 '나올수' 있다
    // propery와 method를 표현''ㅎ'ㅏ'ㄹ 때는
    // key와 value이 쌍으로 표현
    myName: "백두산",
    "myAddress": "대전",
    myNumber: "비밀",
    "my hobby": "아우",
    myInfo: function() {
    }
}
//자주 쓰임 
console.log(obj["my hobby"]);


// 객체를 찍어내고 싶어요 마치 class로부터
// 찍어내듯이!!
// JavaScript는 Class 개념이 없어요!!
// 선언적 함수를 이용''해서 객체를 생성할 수 있어요!!
// 이런 선언적 함수를 생성자 함수라고 불러요!!

function Car(name, price, color) {
    this.name = name;
    this.price = price;
    this.color = color;
    this.info = function() {
        
    }
}

var car1 = new Car("쏘나타", 100, "검은색");
var car2 = new Car("그랜져", 2000, "흰색");


'Front-End > Java Script' 카테고리의 다른 글

자바스크립트 모듈 번들러 (1) - webpack  (0) 2016.07.25
ES6 문법 Cheat Sheet  (0) 2016.04.21
JavaScript 변수 타입  (0) 2014.11.06
javascript 기본 alert  (0) 2014.11.06
브라우저의 HTML 실행 구조  (0) 2014.11.06

JavaScript의 데이터 타입

// 1. 문자열

var variable1 = "홍길동";

// 2. 숫자

var variable2 = 10;

// 3. 논리

var variable3 = true;

// 4.undefined

var variable4;

// 5. null

var variable5 = null;

// 6. 함수

var variable6 = function() {

}

// 7. 객체

var variable7 = {}

// 8. 객체(배열)

var variable8 = [10, "홍길동", true, {}];


//function

// 함수 - 익명함수(람다함수)

// 이름이 존재하지 않기 대문에 

// 변수에 저장하'거나, 혹은 다른 함수의 인자로

// 함수가 사용되요!!

// 함수 - 선언적 함수

// first-class function(일급함수)

function myFunc (var1, var2) {

}


'Front-End > Java Script' 카테고리의 다른 글

ES6 문법 Cheat Sheet  (0) 2016.04.21
JavaScript 객체  (0) 2014.11.06
javascript 기본 alert  (0) 2014.11.06
브라우저의 HTML 실행 구조  (0) 2014.11.06
Java Script 용도와 실행순서  (0) 2014.11.06 
// blocking method
alert("화면에 경고창이 떠요");
alert는 실행화면 중지
//consol창에 출력'!!
console.log("이건 콘솔창에 출력되요");


'Front-End > Java Script' 카테고리의 다른 글

JavaScript 객체  (0) 2014.11.06
JavaScript 변수 타입  (0) 2014.11.06
브라우저의 HTML 실행 구조  (0) 2014.11.06
Java Script 용도와 실행순서  (0) 2014.11.06
JavaScript/Jquery 개발을 도와주는 IDE  (0) 2014.11.06

+ Recent posts

티스토리툴바