NAIAHD

이전 프로젝트

 

pom.xml->web.xml->각종 설정

 

**하이버네이트 설정

1.    하이버네티으를 사용하는 Dao클래스 생성

=>기본 패키지.dao.HibernateDao

package com.pk.db.dao;

 

import java.util.List;

 

import org.hibernate.SessionFactory;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Repository;

 

import com.pk.db.domain.Item;

 

//Bean(스프링이 생성하는 인스턴스)을 자동생성해주고

//데이터 관련된 클래스라는 알려주기 위한 어노테이션

@Repository

public class HibernateDao {

           //하이버네이트를 사용할 수 잇는 인스턴스를 주입

           @Autowired

           private SessionFactory sessionFactory;

          

           //전체 데이터 가져오는 메소드

           public List<Item> allItem(){

                       return sessionFactory.getCurrentSession().createCriteria(Item.class).list();

           }

          

           //데이터를 1개를 가져오는 메소드

           public Item getItem(int itemid) {

                       return sessionFactory.getCurrentSession().get(Item.class, itemid);

           }

}

 

2.    ItemServiceImpl클래스를 수정

=>hibernatedao를 주입받고 itemdao자리를 hibernateDao로 수정

package com.pk.db.service;

 

import java.util.List;

 

import javax.servlet.http.HttpServletRequest;

 

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

 

import com.pk.db.dao.HibernateDao;

import com.pk.db.dao.ItemDao;

import com.pk.db.domain.Item;

 

//bean을 자동생성해주는 어노테이션

@Service

public class ItemServiceImpl implements ItemService {

 

      //ItemDao타입의 bean이 있으면 자동으로 주입시켜주는 어노테이션

      @Autowired

      private ItemDao itemDao;

     

      //hibernate 전송하는 bean을 사용 주입

      //동일한 자료형의 bean이 있으면 자동 주입

      @Autowired

      private HibernateDao hibernateDao;

     

      @Override

      public List<Item> allItem(HttpServletRequest request) {

                 //Dao의 메소드에 파라미터가 없는 경우는 Dao 메소드를 출력해서 리턴

                 //return itemDao.allItem();

                 return hibernateDao.allItem();

      }

 

      @Override

      public Item getItem(HttpServletRequest request) {

                 //파라미터 읽어오기

                 String itemid = request.getParameter("itemid");

                 //파라미터를 정수로 변환해서 Dao 메소드를 호출

                 //return itemDao.getItem( Integer.parseInt(itemid));

                return hibernateDao.getItem( Integer.parseInt(itemid));

      }

 

      @Override

      public Item getItem(HttpServletRequest request, int itemid) {

                 //return itemDao.getItem(itemid);

                 return hibernateDao.getItem(itemid);

      }

 

}

 

 

 

 

트랜잭션 오류가 난다.

그래서 serviceimpl에 @Transactional 추가하기

 

=>처리하는 메소드 위에 트랜잭션 적용을 위한 @Transactional추가

package com.pk.db.service;

 

import java.util.List;

 

import javax.servlet.http.HttpServletRequest;

import javax.transaction.Transactional;

 

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

 

import com.pk.db.dao.HibernateDao;

import com.pk.db.dao.ItemDao;

import com.pk.db.domain.Item;

 

//bean을 자동생성해주는 어노테이션

@Service

public class ItemServiceImpl implements ItemService {

 

      //ItemDao타입의 bean이 있으면 자동으로 주입시켜주는 어노테이션

      @Autowired

      private ItemDao itemDao;

     

      //hibernate 전송하는 bean을 사용 주입

      //동일한 자료형의 bean이 있으면 자동 주입

      @Autowired

      private HibernateDao hibernateDao;

     

      @Override

      @Transactional

      public List<Item> allItem(HttpServletRequest request) {

                 //Dao의 메소드에 파라미터가 없는 경우는 Dao 메소드를 출력해서 리턴

                 //return itemDao.allItem();

                 return hibernateDao.allItem();

      }

 

      @Override

      @Transactional

      public Item getItem(HttpServletRequest request) {

                 //파라미터 읽어오기

                 String itemid = request.getParameter("itemid");

                 //파라미터를 정수로 변환해서 Dao 메소드를 호출

                 //return itemDao.getItem( Integer.parseInt(itemid));

                return hibernateDao.getItem( Integer.parseInt(itemid));

      }

 

      @Override

      @Transactional

      public Item getItem(HttpServletRequest request, int itemid) {

                 //return itemDao.getItem(itemid);

                 return hibernateDao.getItem(itemid);

      }

 

}

 

3.    실행했는데 트랜잭션 적용이 안되면 root-context.xml파일이 있는 트랜잭션 관련 설정을 servlet-context.xml로 이동하고 수정

=>servlet-context.xml에 파일에 tx네임스페이스를 추가

                       <!-- 하이버네이트는 트랜잭션 사용이 필수이기 때문에 추가 -->

           <tx:annotation-driven />

           <beans:bean id="transactionManager"

           class="org.springframework.orm.hibernate5.HibernateTransactionManager">

                       <beans:property name="sessionFactory" ref="sessionFactory" />

      </beans:bean>

 

 

sessionFactoctory가 고리가 생긴다.

 

 

controller 하는 것은 라우팅이다.

알고리즘만 바꾸고 싶으면 service에서 바꾸면 된다.

디비를 바꾸고 싶으면 dao만 수정하면 된다.

 

재사용 할 생각이 있으면  함수

class->배포할 생각

함수는 배포가 안된다. class는 배포가 된다.

여러 사람이 같이 쓸수 있다는 것

함수는 나 혼자 여러번 사용할 려고 한다.

 

파이썬  ->함수

           ->클래스

 

 

iBatis 버전 엎 해서 mybatis로 작성한다.

java하 spring 상 -> 이것은 이상한 것이다.

java를 못하면 spring을 잘 할 수 없다.

상중하로 사용하면 안된다.

 

 

스프링 컨트롤러는 뷰에 의존적이지 않습니다.

 

contentType="text/html; charset=UTF-8" =>html하면 html

 

 엑셀 파일 뷰를 만들기 위해서는 apache poi 라이브러리를 이용합니다.

 엑셀 파일로 출력 결과를 만들고자 하는 경우에는 AbstractXlsView 클래스로부터

상속받은 View 클래스를 이용하면 됩니다.

 AbstractExcelView 클래스는 poi.jar 파일에 포함되어 있습니다.

 이 파일을 이용하면 엑셀 파일을 읽을 수 있고 엑셀 파일로 내보낼 수 있습니다.

 AbstractExcelView 클래스로 부터 상속받는 클래스를 만들고 메소드를 재정의 해야

합니다.

protected void buildExcelDocument(Map<String, Object> model, Workbook

workbook, HttpServletRequest request,

HttpServletResponse response) throws Exception

Model은 넘어온 데이터입니다.

Workbook을 이용해서 엑셀파일을 생성됩니다.

Workbook 안에는 Sheet 가 있고 시트 안에는 Row가 있고 row 안에 다시 Cell이

있솟니다.

 

poi.jar 파일을 사용하기 위한 dependency럫 pom.xml 파일에 추가

<dependency>

<groupId>org.apache.poi</groupId>

<artifactId>poi</artifactId>

<version>3.16</version>

</dependency>

 

요청이 다운로드 받는 파일이름

 

 

**html 이외의 출력

=>html 이외의 출력을 하고자 하는 경우에는 spring설정 파일에 beanNameViewResolver를 추가해야 합니다.

이 때 기존의 InternalResourceViewResolver의 우선순위를 조정해야 합니다.

=><bean id="Controller에서 리턴한 뷰 이름" class="View 클래스 경로"/>

Controller에서 id에 해당하는 View이름을 리턴하면 class에 설정된 View클래스를 이용해서 내용을 출력하게 됩니다.

 

**Excel출력

=>appache poi라이브러리를 이용

=>AbstractXlsView 클래스를 상속받는 클래스를 만들어서 출력

=>Excel은 파일을 WorkBook이라고 하고 하나의 화면을 Sheet그리고 하나의 행을 Row하나의 칸을 Cell이라고 합니다.

실제 데이터 출력은 Cell에 합니다.

 

 

 Excel출력 실습

1.    html이외의 vIew를 출력할 수 있도록 설정

servlet-context.xml

1)    기존의 ViewReolver를 수정

      <!-- Controller에서 리턴하는 뷰 이름을 가지고 실제 출력할 뷰를 선택하도록 해주는 설정 -->

      <beans:bean

      class="org.springframework.web.servlet.view.InternalResourceViewResolver">

                 <beans:property name="prefix" value="/WEB-INF/views/" />

                 <beans:property name="suffix" value=".jsp" />

                 <!-- 우선순위를 수정 -->

                 <beans:property name="order" value="1"></beans:property>

      </beans:bean>

2)    새로운 ViewResoulver를 추가

<!-- html이외의 출력을 위한 ViewResolver설정 -->

      <beans:bean class="org.springframework.web.servlet.view.BeanNameViewResolver">

                 <beans:property name="order" value="0"></beans:property>

      </beans:bean>

 

2.    Excel 사용을 위한 의존성 라이브러리 설정을 pom.xml를 dependency에 추가

pom.xml

 

                       <!-- excel출력 라이브러리 -->

                       <dependency>

                                  <groupId>org.apache.poi</groupId>

                                  <artifactId>poi</artifactId>

                                  <version>3.16</version>

            </dependency>

                 

 

3.    home.jsp파일에 엑셀 요청을 생성

<a href="./item.xls">엑셀로 내려받기</a>

 

 

 

4.    HomeContrller클래스에 item.xls처리를 위한 메소드를 추가

     

           @RequestMapping(value="/item.xls",method = RequestMethod.GET)

           public String excel(HttpServletRequest request, Model model) {

                       //서비스 메소드 호출

                       List<Item> list = itemService.allItem(request);                   

//데이터 저장

                       model.addAttribute("list", list);

                       //뷰이름을 리턴

                       return "excel";

      }

5.    Excel출력 뷰를 생성

=>com.pk.db.view.ExcelView

=>AbstractXlsView로 부터 상속

package com.pk.db.view;

 

import java.util.List;

import java.util.Map;

 

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

import org.apache.poi.ss.usermodel.Cell;

import org.apache.poi.ss.usermodel.Row;

import org.apache.poi.ss.usermodel.Sheet;

import org.apache.poi.ss.usermodel.Workbook;

import org.springframework.web.servlet.view.document.AbstractXlsView;

 

import com.pk.db.domain.Item;

 

public class ExcelView extends AbstractXlsView {

          

           //엑셀 데이터 출력을 위한 View

           @Override

           //첫번때 매개변수는 COntroller가 Model에 저장한 데이터를 가진 Map

           //두번째 매개변수는 실제 출력할 파일

           //세번째 매개변수는 request와 response객체

           protected void buildExcelDocument(Map<String, Object> model, Workbook workbook, HttpServletRequest request,

                                  HttpServletResponse response) throws Exception {

                       //데이터 찾아오기 -Controller에서 저장한 이름으로 찾아옵니다.

                       //항상 형변환 작업을 해야 한다.

                       List<Item> list = (List<Item>) model.get("lists");

                      

                       //시트 만들기

                       Sheet sheet = workbook.createSheet();

                       workbook.setSheetName(0, "item");

                       //각 열의 너비 설정

                       sheet.setColumnWidth(0, 5120);

                      

                       //첫번째 행에 제목 출력

                       Row firstRow = sheet.createRow(0);

                       Cell cell = firstRow.createCell(0);

                       cell.setCellValue("아이디");

                       cell = firstRow.createCell(1);

                       cell.setCellValue("이름");

                       cell = firstRow.createCell(2);

                       cell.setCellValue("가격");

                       cell = firstRow.createCell(3);

                       cell.setCellValue("효과");

                      

                       //데이터 출력

                       int idx = 1;

                       for(Item item:list) {

                                  Row row = sheet.createRow(idx);

                                  cell = row.createCell(0);

                                  cell.setCellValue(item.getItemid());

                                 

                                  cell = row.createCell(1);

                                  cell.setCellValue(item.getItemname());

                                  cell = row.createCell(2);

                                  cell.setCellValue(item.getPrice());

                                  cell = row.createCell(3);

                                  cell.setCellValue(item.getDescription());

                                  idx += 1;

                       }

           }

 

}

 

 

 

6.    HomeController에서 요청후에 리턴한 뷰 이름과 엑셀 뷰 클래스를 연결하는 코드를 servlet-context.xml파일에 작성

      <!-- Controller가 리턴한 뷰이름과 뷰 클래스 매핑 -->

      <beans:bean id="excel" class="com.pk.db.view.ExcelView"></beans:bean>

     

 

 

**csvExcel파일 읽기

=>csv는 supercsv라이브러리를 이용

=>excel은 poi-ooxml이라는 라이브러리를 이용

 

**pdf출력 -엑셀 처름 테이블에 데이터를 출력

=>itext api를 주로 이용: 

=>의존성 설정을 해야 합니다.

<dependency>

           <groupId>com.lowagie</groupId>

           <artifactId>itext</artifactId>

           <version>2.1.7</version>

</dependency>

=>pdf는 기본적으로 한글 출력이 안됩니다.

한글 출력이 가능한 폰트를 설정해야 합니다.

 

windows의 font -> C:\Windows\Fonts

font 가 한글을 지원해야 한다.

 

1.pdf출력을 위한 의존성 라이브러리 설정

=>pom.xml파일의 dependencies태그에 추가

<dependency>

           <groupId>com.lowagie</groupId>

           <artifactId>itext</artifactId>

           <version>2.1.7</version>

</dependency>

 

2.home.jsp파일에 pdf출력 링크를 추가

<a href="./item.pdf">pdf로 내려받기</a>

 

3.HomeController클래스에 item.pdf요청을 처리해주는 메소드를 생성

           @RequestMapping(value="/item.pdf",method = RequestMethod.GET)

           public String pdf(HttpServletRequest request, Model model) {

                       //서비스 메소드 호출

                       List<Item> list = itemService.allItem(request);

                       //데이터 저장

                       model.addAttribute("list", list);

                       //뷰이름을 리턴

                       return "pdf";

           }

 

4.pdf 출력을 위한 view를 생성

=>AbstractPdfView로 부터 상속

package com.pk.db.view;

 

import java.util.List;

import java.util.Map;

 

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

 

import org.springframework.web.servlet.view.document.AbstractPdfView;

 

import com.lowagie.text.Cell;

import com.lowagie.text.Document;

import com.lowagie.text.Font;

import com.lowagie.text.Paragraph;

import com.lowagie.text.Table;

import com.lowagie.text.pdf.BaseFont;

import com.lowagie.text.pdf.PdfWriter;

import com.pk.db.domain.Item;

 

public class PdfView extends AbstractPdfView {

          

           //pdf출력을 위한 메소드

           //model은 controller가 넘겨준 데이터

           //document는 출력한 문서 파일

           //writer는 직접 그려서 출력하고자 할 때 사용하는 객체

           //request와 response는 이전과 동일

           @Override

           protected void buildPdfDocument(Map<String, Object> model, Document document, PdfWriter writer,

                                  HttpServletRequest request, HttpServletResponse response) throws Exception {

                       //데이터 찾아오기

                       List<Item> list = (List<Item>) model.get("list");

                       //한글 츨력을 하고자 하는 경우에는 한글을 ㅇ지원하는 폰트를 설정

                       BaseFont dfKorean = BaseFont.createFont("c:\\windows\\fonts\\malgun.ttf",BaseFont.IDENTITY_H,BaseFont.EMBEDDED);

                       Font font = new Font(dfKorean);

                      

                       //테이블을 생성 - 첫번째 매겹ㄴ수는 열의 갯 , 두번째 행의 개수

                       Table table = new Table(4, list.size()+1);

                       table.setPadding(10);//여백

                      

                       //제목 만들기

                       Cell cell = new Cell(new Paragraph("코드",font));

                       cell.setHeader(true); //제목 일 경우

                       table.addCell(cell);

                       cell = new Cell(new Paragraph("이름",font));

                       cell.setHeader(true); //제목 일 경우

                       table.addCell(cell);

                       cell = new Cell(new Paragraph("가격",font));

                       cell.setHeader(true); //제목 일 경우

                       table.addCell(cell);

                       cell = new Cell(new Paragraph("설명",font));

                       cell.setHeader(true); //제목 일 경우

                       table.addCell(cell);

                       table.endHeaders();

                      

                       //데이터 출력하기

                       for(Item item:list) {

                                  Cell imsi = new Cell(new Paragraph(item.getItemid()+"",font));

                                  table.addCell(imsi);

                                  imsi = new Cell(new Paragraph(item.getItemname(),font));

                                  table.addCell(imsi);

                                 

                                  imsi = new Cell(new Paragraph(item.getPrice()+"",font));

                                  table.addCell(imsi);

                                  imsi = new Cell(new Paragraph(item.getDescription(),font));

                                  table.addCell(imsi);

                       }

                      

                       //테이블을 문서에 추가

                       document.add(table);

                      

           }

 

}

 

 

5.servlet-context.xml파일에 controller가 리턴한 뷰 이름과 출력할 뷰 클래스를 연결

           <beans:bean id="pdf" class="com.pk.db.view.PdfView"></beans:bean>

 

 

** json출력

=>json: 자바 스크립트 객체 표현법으로 데이터를 표현하느느 방식(스마트 폰의 push메시지,  센서의 데이터 등을 json표현법으로 주고 받고 mongo db와 같은 NoSQL에서도 데이터를 json방식으로 표현 - 자바스크립트나 파이썬은 json현식의 데이터를 쉽게 읽을 수 있습니다.)

=>json은 이전의 html,excel,pdf와 다르게 데이터를 전달하는 것입니다.

=>json출력을 위해서는 jackson-databind라이브러리가 필요

                       <!-- json출력을 위한 라이브러리 -->

                       <dependency>

                                  <groupId>com.fasterxml.jackson.core</groupId>

                                  <artifactId>jackson-databind</artifactId>

                                  <version>2.9.4</version>

                       </dependency>

 

=>출력하는 방법은 여러 가지

1.출력하는 뷰를 MappingJacksonJsonView로 출력하면 데이터를 json으로 출력해줍니다.

 

1)home.jsp파일에 json출력 요청을 생성

           <a href="item1.json">json으로 내려받기</a><br/>

 

2).HomeControoler클래스에 item1.json요청을 처리하는 메소드를 작성

           @RequestMapping(value="/item1.json",method = RequestMethod.GET)

           public String item1json(HttpServletRequest request, Model model) {

                       //서비스 메소드 호출

                       List<Item> list = itemService.allItem(request);

                       //데이터 저장

                       model.addAttribute("list", list);

                       //뷰이름을 리턴

                       return "item1json";

           }

 

3)servlet-context.xml파일에 item1json과 json View와 연결

           <beans:bean id="item1json" class="org.springframework.web.servlet.view.json.MappingJackson2JsonView"></beans:bean>

 

 

2.Restful(Representational State Transfer) API

=>접속하는 기기에 상관없이 동일한 데이터를 요구하는 요청은 하나의  URL로 만들어지는ㄴ 개념

=>url을 요청하면 View대신에 Data를 주자는 개념

출력은 Data를 받은 클라이언트에서 자신에게 맞게 파싱해서 사용

 

 

3.RestController

=>요청을 처리하는 크랠스인데 이 클래스는 문자열을 리턴하면 csv 형식의 문자열로 출력하고 기본 자료형을 제외한 자료형으로 리턴하면 json형시긍로 출력

=>sprng 4.0 이상에서만 사용 가능

=>클래스 위에 @RestController만 추가하면 됩니다.

=>Jackson-Dating라이브러리는 추가되어 있어야 합니다.

 

4.RestController를 이용해서 문자열과 json출력

1)home.jsp파일에 문자열과 json을 요청하는 링크를 추가

           <a href="item.csv">csv로 내려받기</a><br/>

           <a href="item2.json">json으로 내려받기</a><br/>

 

2)프로젝트에 RestController로 사용할 클래스를 추가하고 작성

=>com.pk.db.JSONController

           //기본형 이나String또는 Data클래스를 제외한 형태로 리턴하면 json으로 응답

           //데이터만 return해주면 된다.

           @RequestMapping(value="/item2.json" , method = RequestMethod.GET)

           public List<Item> json(HttpServletRequest request) {

                       List<Item> list = itemService.allItem(request);

                       //실제 csv형식의 파일을 만들려면 문자열을 편집

                       return list;

           }

 

 

**ajax(Asynchronous Javascript XML)

=>자바스크립트를 이용해서 비동기적으로 데이터를 받아오는 기술

=>전체 화면을 갱신하지 않고 데이터를 받아서 일부분만 갱신하는 용도로 많이 사용

아이디 중복 체크, 댓글을 작성하고 전체화면 갱신없이 댓글이 업데이트

 

실습 - ajax로 item2.json이 리턴한 데이터를 받아서 화면에 출력

1.home.jsp파일에 ajax요청을 할 링크 추가

<a href="#" id="ajax">ajax로 json 데이터 사용하기</a><br/>

 

2.home.jsp에서 데이터를 출력할 영역을 생성

<div align="center" id="disp"></div>

 

3.home.jsp파일에 id가 ajax인 링크를 클릭하면 동작하는 스크립트 코드를 추가

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<link rel="stylesheet" href="./css/item.css">

<title>Insert title here</title>

</head>

<body>

${list }

           <h2 align='center'>상품목록</h2>

           <table border="1" align="center">

                       <tr class ="header">

                                  <th width='80'>상품ID</th>

                                  <th width='160'>상품이름</th>

                                  <th width='80'>가격</th>

                       </tr>

                       <c:forEach items="${list}" var ="item">

                                  <tr class="record">

                                              <td align='center'>${item.itemid }</td>

                                              <td >&nbsp;&nbsp;

                                                         <%-- <a href="detail?itemid=${item.itemid }">${item.itemname }</a> --%>

                                                         <a href="detail/${item.itemid}">${item.itemname}</a>

                                              </td>

                                              <td align="right">${item.price }원&nbsp;&nbsp;</td>

                                  </tr>

                       </c:forEach>

           </table>

          

           <a href="item.xls">엑셀로 내려받기</a><br/>

           <a href="item.pdf">pdf로 내려받기</a><br/>

           <a href="item1.json">json으로 내려받기</a><br/>

           <a href="item.csv">csv로 내려받기</a><br/>

           <a href="item2.json">json으로 내려받기</a><br/>

           <a href="#" id="ajax">ajax로 json 데이터 사용하기</a><br/>

           <div align="center" id="disp"></div>

           <!-- javascript:html 내에서 동적으로 변화를 주기 위한 언어 -->

           <script type="text/javascript">

                   document.getElementById("ajax").addEventListener("click",function(){

                                  //alert("클릭");

                                  //ajax객체 만들기

                                  request = new XMLHttpRequest();

                                  //요청 생성

                                  request.open('GET','item2.json');

                                  //요청 전송

                                  request.send('');

                                  //요청에 대한 처리를 위한 콜백 메소드 등록

                                  request.onreadystatechange = function(){

                                              //정상 응답

                                              if(request.readyState == 4 && request.status >= 200  && request.status < 300){

                                                         //데이터 확인

                                                         //alert(request.responseText);

                                                         //responseText, responseXML

                                                         //받아온 데이터를 json 파싱을 해서 배열로 만들기

                                                         list = JSON.parse(request.responseText);

                                                         //배열을 순회

                                                         msg =  '';

                                                         msg += "<table border='1'>";

                                                         msg += "<tr class='header'>";

                                                         msg += "<th width ='80'>코드</th>";

                                                         msg += "<th width ='160'>상품영</th>";

                                                         msg += "<th width ='80'>가격</th>";

                                                         msg += "</tr>";

                                                         for(i in list){

                                                                     //alert(list[i]);

                                                                     msg += "<tr class='record'>";

                                                                     msg += "<td align='center'>"+list[i].itemid+"</td>";

                                                                     msg += "<td align='left'>"+list[i].itemname+"</td>";

                                                                     msg += "<td align='right'>"+list[i].price+"</td>";

                                                                     msg += "</tr>";

                                                         }

                                                         msg += "</table>";

                                                         document.getElementById('disp').innerHTML =msg;

                                              }

                                  }

                       });

                      

           </script>

</body>

</html>

 

**xml 출력

=>xml(extensible markup language) : 데이터를 태그를 이용해서 표현하는 방식

xml은 브라우저가 해석하지 않고 개발자 또는 dto 설정에서 해석하는 마크업 언어

=>예전에 실시간 데이터 전송에 많이 사용했고 아직도 프로젝트 설정 파일로 사용됩니다.

twitter등이 얘전에는 xml서비스를 제공했지만 최근에는 json으로 많이 변경되고 있습니다.

=>서버 개발자가 아니라면 xml 은 생성보다는 파싱이 중요합니다.

=>spring-oxm, jaxb-api, jaxb-impl, jaxb-core라이브러리가 필요

=>출력은 MarchallingView를 사용

=>RPC(Remote Procedure call- 원격 프로시저 호출) 를 닷넷 계열에서는 Mashalling이 라고 합니다.

웹 서버나 클라우드 사용하는 것이 RPC입니다.

http://ip주소:9000/db를 브라우저에 입력하면  ip주소 컴퓨터에 있는 어떤 메소드가 호출되서 작업을 한 후 결과를 브라우저에 전송합니다.

이러한 기술을 rpc라고 하는데 spring이 중간 통신 작업을 다 해주기 때문에 rpc를 어떻게 만들어야 하는지 몰라두 구현이 가능

 

=>Item의 List를 xml로 출력

1. xml관련 의존성을 pom.xml 파일의 dependencies 태그에 추가

                       <!-- xml출력을 위한 라이브러리 -->

                       <dependency>

                                  <groupId>org.springframework</groupId>

                                  <artifactId>spring-oxm</artifactId>

                                  <version>${org.springframework-version}</version>

                       </dependency>

                       <dependency>

                                  <groupId>javax.xml.bind</groupId>

                                  <artifactId>jaxb-api</artifactId>

                                  <version>2.1</version>

                       </dependency>

                       <dependency>

                                  <groupId>com.sun.xml.bind</groupId>

                                  <artifactId>jaxb-impl</artifactId>

                                  <version>2.2.11</version>

                       </dependency>

                       <dependency>

                                  <groupId>com.sun.xml.bind</groupId>

                                  <artifactId>jaxb-core</artifactId>

                                  <version>2.2.11</version>

                       </dependency>

 

 

2. home.jsp파일에 xml요청을 생성

           <a href ="item.xml">xml로 내려받기</a></br>

 

3.Item클래스를 xml으로 출력할 수 있도록 어노테이션을 추가

 

@Data

@XmlAccessorType(XmlAccessType.FIELD)

@XmlType(name ="",propOrder= {"itemid","itemname","price" ,"descripttion","pictureurl"})

public class Item {

           private int itemid;

           private String itemname;

           private int price;

           private String description;

           private String pictureurl;

}

 

4.xml은 dto만을 출력할 수 없어서 dto 의 list를 property로 갖는 클래스가 필요합니다.

Item의 List를 property로 갖는 크랠스를 생성

=>com.pk.db.domain.ItemReport

//xml로 출력하는 것을 알려줄 것이다.

@XmlAccessorType(XmlAccessType.FIELD)

//루트 태그 설정

@XmlRootElement(name="itemlist")

public class ItemReport {

           //객체 1개만다 출력되는 태그 설정

           @XmlElement(name="item")

           private List<Item> list;

 

           public List<Item> getList() {

                       return list;

           }

 

           public void setList(List<Item> list) {

                       this.list = list;

           }

}

 

5.HomeController 클래스에 item.xml요청을 처리하는 메소드를 생성

           @RequestMapping(value="/item.xml",method = RequestMethod.GET)

           public String xml(HttpServletRequest request, Model model) {

                       //서비스 메소드 호출

                       List<Item> list = itemService.allItem(request);

                       //xml 출력 데이터 생성

                       ItemReport itemReport = new ItemReport();

                       itemReport.setList(list);

                      

                       //데이터 저장

                       model.addAttribute("list", itemReport);

                       //뷰이름을 리턴

                       return "xmlreport";

           }

 

 

6.servlet-context.xml 파일에 xml출력을 위한 생성을 추가

           <beans:bean class="org.springframework.oxm.jaxb.Jaxb2Marshaller" id="marshaller">

                       <beans:property name="classesToBeBound">

                                  <beans:list>

                                             <beans:value>com.pk.db.domain.ItemReport</beans:value>

                                  </beans:list>

                       </beans:property>

           </beans:bean>

           <!-- xml뷰 설정

           id는 COntroller가 티런한 View 이름이고

           modelKey에 설정하는 것은 model에 저장한 데이터 이름입니다.-->

           <beans:bean id="xmlreport" class="org.springframework.web.servlet.view.xml.MarshallingView">

                       <beans:property name="marshaller" ref="marshaller"></beans:property>

                       <beans:property name="modelKey" value="list"></beans:property>

           </beans:bean>

 

**file upload

=>파일을 업로드 위한 form은 반드시 method가 post 이어야 하고 enctype을 multipart/form-data로 설정해야 합니다.

=>spring은 multipart기능을 지원하기 때문에 별다른 설정없이도 multipart form의 데이터를 받을 수 있습니다.

 

=>spring에서는 file을 server에 저장할 떄 commons-fileupload의 의존성이 필요하고 CommonsMultipartResolver Bean이 필요합니다.

 

=>Spring에서는 3가지 방법으로 File Upload를 처리 할 수  있습니다.

HttpServeltRequest 대신에 MultipartHttpServletRequest를 이용해서 getFiles메소드를 처리

 

파라미터의 자료영을 multipartFile로 해서 처리하는 방법이 있습니다.

(@RequestParam, COmmand객체 이용도 가능)

 

=>MultipartFile에서 업로드하는 방법

getBytes()메소드로 파일의 내용을 바이트 배열로 리턴받아서 직접 전송하는 방법

 

transferTo(File dest)메소드에게 File객체를 대입해서 업로드 하는 방법

 

=>파일을 업로드 할 때 주의할 점은 동일한 파일명은 ?

uuid클래스를 이용해서 중복되지 않은 이름을 만들던가 업로드하는 유저의 id를 붙여서 동일한 파일명을 만들지 않도록 하는 방법이 있습니다.

 

이미지는 user마다 디렉토리를 따로따로 만든다.

 

=>삽입의 처리 과정

삽입링크 클릭 -> 삽입할 수 있는 페이지로 포워딩 ->입력을 하고 전송을 누르면 유효성 검사를 해서 유효성 검사를 통과하면 서버에게 전송 ->서버는 처리를 하고 결과 페이지로 리다이렉트를 합니다.

포워딩을 하면 새로고침하면 에러가 나든가 아니면 똑같은 것 2개 있는 가 한다.

 

=>서버가 처리를 하고 포워딩을 하게 되면 에러가 발생하던지 동일한 데이터가 중복해서 삽입되게 됩니다.

 

=>새로고침을 했을 때 이전에 수행한 작업이 다시 발생해도 되면 포워딩을 해도 되고 다시 발생하면 안되는 경우는 반드시 리다이렉트를 해야 합니다.

삽입.삭제, 갱신 ->리다이렉트 검색 -> 포워딩

로그인 리다이렉트

 

 

1.    데이터 삽입을 위한 링크를 home.jsp에 추가

      <a href="insert">데이터 삽입</a><br/>

 

2.    HomeController에서 insert요청을 처리하는 메소드를 추가

      @RequestMapping(value="/insert",method = RequestMethod.GET)

      public String insert(HttpServletRequest request, Model model) {

 

                 //뷰이름을 리턴

                 return "insert";//단순한 이름 만 포워딩 하는 것이다.

      }

 

3.    views디렉토리에 insert.jsp파일을 마들고 데이터 삽입 폼을 작성

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>데이터 삽입</title>

</head>

<body>

      <div align="center">

                 <h3>데이터 삽입</h3>

                 <form method="post" enctype="mulipart/form-data" id ="myform">

                             <table border="1">

                                        <tr>

                                         <td rowspan="5" align="center">

                                                   <p></p>

                                                   <img id="img" width="100" height = "100" border ="1" />

                                                   <br/>

                                                   <input type="file" id="pictureurl" name="pictureurl" accept=".jps,.jpeg,.gif,.png" /><br/>

                                         </td>

                                        </tr>

                                        <tr>

                                                   <td align="right">코드</td>

                                                   <td><input type="text" name="itemid" id="itemid" required="required"/><div id="iddiv"></div></td>

                                        </tr>

                                        <tr>

                                                   <td align="right">이름</td>

                                                   <td><input type="text" name="itemname" id="itemname" required="required"/></td>

                                        </tr>

                                        <tr>

                                                   <td align="right">가격</td>

                                                   <td><input type="text" name="price" id="price" required="required"/></td>

                                        </tr>

                                        <tr>

                                                   <td align="right">효과</td>

                                                   <td><input type="text" name="description" id="description" required="required"/></td>

                                        </tr>

                                        <tr>

                                                   <td colspan="3" align="center">       

                                                               <input type="submit" value="전송">

                                                               <input type="button" value="메인" id="mainbtn">

                                                   </td>

                                        </tr>

                             </table>

                 </form>

      </div>

</body>

</html>

 

4.    insert.jsp파일에 이미지 미리보기 기능 구현

=>javascript에서 파일을 불러오는 동작은 비동기적(순서대록 동작하지 않는다. -콜백)으로 처리됩니다.

       <script>

                       //이미지 미리보기

                       var pictureurl = document.getElementById("pictureurl");

                       var img = document.getElementById("img");

                      

                       //이미지 선택이 변경되면

                       pictureurl.addEventListener("change",function(){

                                  //업로드한 이미지 파일의 내용을  img에 출력

                                  //파일 객체 생성

                                  var reader = new FileReader();

                                  // 선택한 파일이 있다면

                                  if(pictureurl.files && pictureurl.files[0]){

                                              //파일 읽기

                                             reader.readAsDataURL(pictureurl.files[0]);

                                             //출력

                                              ///img.src = reader.target.result;

                                              //비동기를 할 때는 파일의 내용을 전부 읽으면 출력

                                             reader.addEventListener("load",function(e){

                                                         img.src  = e.target.result;

                                              })

                                  }

                       });

      </script>

 

 

5.    itemid중복 검사

1)    itemid를 받아서 중복 여부를 판별해서 리턴할 서버의 요청 처리 메소드를 생성

=>itemid를 파라미터로 받아서 서버에 가서 데이터가 존재하는지 확인하면 된다.

Service클래스의

=>jsoncontroller클래스에 itemid중복 검사를 위한 메소드를 생성

 

       //itemid를 파라미터로 받아서 중복체크를 해서 리턴하는 메솓,

           @RequestMapping(value="/itemidcheck",method =RequestMethod.GET)

           public Map<String, Object> itemIdCheck(HttpServletRequest request,@RequestParam("itemid") int itemid){

                       //서비스 메소드 호출

                       Item item = itemService.getItem(request, itemid);

                       //리턴할 Map을 생성

                       Map<String , Object> map = new HashMap<String, Object>();

                       if(item == null) {

                                  map.put("result", "true");

                       }else {

                                  map.put("result","false");

                       }

                       return map;

}

 

 

 

 

상세보기는 중복검사 할 때도 사용이 된다. 로그인할때도 사용이 된다.

 

 

2)insert.jsp에서 중복 체크 하는 코드 작성

 

 

**.Validatation(유효성 검사)

=>데이터를 삽입하거나 삭제 또는 갱신 및 조회를 할 때 올바를 데이터인지 호가인하는 작업

웹 애플리케이션에서는 클라이언트 (웹 브라우저 - 자바스크립트)와 서버의 service클래스 그리고 데이터베이스에서  할 수 있습니다.

할 수 있는 모든 곳에서 하는 것이 좋습니다.

클라이언트 측에서만 하는 경우에는 데이터를 전송할 때 헤더를 변경해서 자바스크립트에서는 올바른 데이터였지만 서버에 도달 할 때는 다른 데이터 일 수 있습니다.

ip와 userAgent값을 변경해서 전송하는 경우가 많습니다.

서버에서 header값들을 읽어서 확인해야 합니다.

데이터에비으세어 제약조건을 이용해서 다시 한 번 검사를 하는 것이 안전합니다.

 

보안 이 필요한 유효성 검사는 클라이언트에서 하면 안됩니다.

 

 

 

 

**DOM(Document Object Model)

1.정의

=>웹 브라우저가 HTML이나 XML 문서를 인식하는 방식 : 문서의 구조를 트리 형태로 펼쳐 놓은 것

=>document 객체와 관련된 객체의 집합: body 태그 내에 존재하는 태그

body 태그: document.body

 

2.document 객체의 프로퍼티 나 메소드

document.body: body 태그

document.innerHTML: body 태그 내의 내용 - HTML을 기재하면 body 태그에 출력

document.write 나 writeln(HTML 내용): innerHTML 속성에 기재한 것과 동일한 효과

 

document.referrer: 이 URL에 어떻게 접근했는지를 저장하고 있는 속성, 마케팅에서 중요한 속성

=>웹 사이트의 메인 페이지에 어떻게 접속했는지 어떤 페이지에 어떻게 접속했는지를 아는 것은 웹 로그 분석에서 가장 중요한 이슈 중의 하나

이러한 데이터를 수집해서 대시보드에 출력할 수 있도록 해주는 솔루션 중의 하나가 구글 애널리틱스입니다.

 

3.document 객체를 이용한 문서 객체(태그) 가져오기

document.getElementById(id): id를 가진 객체 1개를 리턴 - 가장 권장

document.getElementsByName(name): name을 가진 객체를 배열로 리턴

document.getElementsByTagName(tag): tag을 가진 객체를 배열로 리턴

document.getElementsByClassName(class): class를 가진 객체를 배열로 리턴

 

document.폼이름.요소이름 으로 폼의 요소에 접근 - 최근에는 권장하지 않음

 

document.getElementById(select 의 id).options[index]를 이용해서 select의 각 옵션에 접근할 수 있고 document.getElementById(select 의 id).options[document.getElementById(select 의 id).selectedIndex]

=>최근의 html을 구현할 때 테이블에 출력할 수 있는 개수를 선택하도록 하는 경우가 많습니다.

select에서 선택한 데이터를 찾아올 수 있어야 합니다.

 

4.DOM 객체의 속성 사용

1)속성 변경

DOM객체.속성이름 = 값;

=>img 태그의 이미지 파일 경로 변경

img객체.src = "이미지 파일 경로";

 

2)스타일시트 값 변경

DOM객체.style.속성이름 = 값;

 

3)태그 내용 변경

DOM객체.innerHTML = 값;

 

4)폼의 입력 객체들의 값을 변경하거나 가져올 때는 value 속성 이용

DOM객체.value

 

5)body 태그의 내용을 자바스크립트에서 수정할 때는 태그의 내용이 먼저 나오고 스크립트가 나와야 합니다.

스타일시트는 body에 내용을 전부 읽고 화면에 출력할 때 적용되기 때문에 style은 body 태그의 내용이 나오기 전이나 후 상관이 없습니다.

 

**DOM 객체의 이벤트 처리

1.event

=>사용자나 시스템이 다른 것에 영향을 미치는 사건

=>input 객체 안에서 사용자가 키보드를 누르는 것 등

 

2.javascript 의 이벤트

=>마우스 이벤트

=>키보드 이벤트

=>DOM 객체 관련 이벤트

=>기타 이벤트

 

3.이벤트 처리 방식

1)인라인 방식

<태그 on이벤트이름="이벤트 처리 내용"></태그>

 

2)스크립트 안에서 작성 - 고전적 이벤트 처리

DOM객체.on이벤트이름 = function(매개변수){

           이벤트 처리 내용;

}

 

3)스크립트 안에서 작성 - 표준 이벤트 모델

DOM객체.addEventListener("이벤트이름", function(매개변수){

           이벤트 처리 내용;

});

<body>

           <span id="disp">텍스트</span>

           <!-- 인라인 이벤트 모델: 태그 안에서 이벤트 처리

           태그에 스크립트 코드가 알아보기가 어렵고(유지보수가 어려움) 길게 작성하기가 어려움 -->

           <input type="button" id="stylebtn" value="글자색상변경"

           onclick="document.getElementById('disp').style.color='red';"/>

          

           <input type="button" id="contentbtn" value="텍스트 내용 변경"/>

           <input type="button" id="standardbtn" value="내용과 스타일 변경"/>

          

           <script>

                       //DOM 객체 찾기

                       var disp = document.getElementById("disp");

                       var contentbtn = document.getElementById("contentbtn");

                       var standardbtn = document.getElementById("standardbtn");

                      

                       //고전적 이벤트 처리 모델 - 이전에도 많이 사용했고 최근에도 많이 사용

                       contentbtn.onclick = function(e){

                           //태그 안의 내용 변경

                                  disp.innerHTML = "변경된 텍스트";

                       };

                      

                       //표준 이벤트 처리 모델 - W3C에서 권장

                       standardbtn.addEventListener("click", function(e){

                                  disp.innerHTML = "표준 이벤트 모델";

                                  disp.style.backgroundColor = "papayawhip";

                       });

                      

           </script>

</body>

 

4.이벤트 처리 함수에 넘어가는 데이터

1)this: 이벤트가 발생한 객체로 별도의 설정없이 바로 사용 가능

 

2)이벤트 처리함수의 매개변수

=>매개변수가 1개가 넘어가는데 이 매개변수가 이벤트 처리 객체

=>이벤트에 대한 정보를 가지고 넘어갑니다.

=>이벤트 처리 객체는 브라우저 별로 다르게 가져와서 사용합니다.

=>웹 클라이언트에서는 IE를 고려해야 합니다.

=>IE에서는 window.event로 가져오고 나머지 브라우저에서는 이벤트 처리함수의 매개변수를 이용

 

function(e){

           //e가 true이면 e를 대입하고 아니면 window.event를 대입

           //숫자 0이나 객체가 null 이면 false로 간주

          //python이나 javascript 와 같은 script 계열(R, Kotlin, Swift 등)의 언어에서 많이 등장하는 방법

           var e  = e || window.event;

}

 

3)이벤트 처리 객체의 속성

=>data: 드래그 앤 드랍을 했을 때 드랍되는 데이터

=>modifier: 같이 누른 조합키

=>screenX, screeeY: 이벤트가 발생한 좌표 - 마우스 이벤트에서 이용

=>which: 키보드이벤트에서 누른 키보드의 ascii 코드 값

 

5.이벤트 트리거

=>객체의 이벤트를 강제로 발생시키는 것

객체.on이벤트명() 으로 이벤트를 강제로 발생시킬 수 있습니다.

 

6.DefaultEvent

=>일부 객체는 기본적인 이벤트 처리 코드가 포함되어 있습니다.

a 태그는 클릭을 하면 href 속성에 대입된 URL로 이동

submit 은 form의 데이터를 서버에게 전송합니다.

reset은 form의 데이터를 삭제

<button> 태그로 만들어지 버튼은 form안에 있는 경우 submit으로 동작

 

=>기본 이벤트 처리 코드를 동작하지 않도록 하고자 할 때는 이벤트 처리 객체가 preventDefault() 메소드를 호출하면 됩니다.

preventDefault()->이벤트를 처리안하고자 할 경우이다.

 

7.이벤트 버블 방지 - 버블은 겹치는 이벤트가 있을 경우 처리

없을 경우 부모것만 띄워준다.

=>포함하고 있는 객체와 포함된 객체에 이벤트 처리 코드가 모두 작성된 경우 포함된 객체에서 이벤트가 발생하는 경우 포함하고 있는 객체의 이벤트 발생을 Event Bubbling 이라고 합니다.

=>자바스크립트에서는 이벤트 버블링을 방지하기 위해서는 IE에서는 이벤트 처리 객체의 cancelBubble 이라는 속성에 true를 대입하면 되고 그 이외의 브라우저는 stopPropagation()이라는 함수를 호출하면 됩니다.

 

8.이벤트 종류

1)click: 마우스로 클릭

 

2)dblclick: 더블 클릭

 

3)keyboard 이벤트

=>keydown -> keypress ->keyup

=>키보드를 누르면 keydown 과 keyup이 호출

=>문자 키를 누르고 누르고 있는 경우에 keypress 이벤트가 발생합니다.

=>이벤트 객체의 which 속성이 누른 키값을 리턴하는데 이 속성이 없으면 keyCode 속성을 이용해서 누른 키값을 가져옵니다.

 

4)mouse 이벤트

=>mousedown, mousemove, mouseout(마우스 영역 바깥으로 나갈 때), mouseover(마우스가 영역 안으로 들어온 경우), mouseup

 

5)move 와 resize

=>move 나 resize는 window객체나 frame 객체에 발생하는 것으로 이동하거나 크기가 변경되었을 때 발생하는 이벤트

 

6)포커스 관련 이벤트

=>포커스를 가졌을 때 발생하는 이벤트: focus, focusin

=>포커스를 잃어버릴 때 발생하는 이벤트: blur, focusout - id 입력란에서 포커스를 잃어버릴 중복검사를 수행하는 경우가 많습니다.

 

7)change

=>선택 가능한 객체들에서 선택을 변경했을 때 호출되는 이벤트

 

8)unload 와 load 이벤트

=>load 는 window 나 file, image 객체들에서 내용을 읽고난 후 발생하는 이벤트

window.load는 모든 태그를 읽고 난 후 발생하는 이벤트

이 이벤트를 처리하는 코드는 모든 태그를 인식하고 난 후 수행

script를 body 위에 작성하는 경우

window.addEventListener("load", function(e){

 

}) 또는

window.onload = funcation(e){

 

}

모든 태그를 읽어냈기 때문에 document.getElementById(id)로 모든 태그를 가져올 수 있습니다.

 

=>file을 읽는 이벤트는 비동기적으로 동작

file의 내용을 읽어서 어딘가에 출력하고자 하는 경우 읽기 메소드를 호출하고 load 이벤트 처리 코드 안에 작성해야 합니다.

file을 읽는 메소드를 호출하고 바로 출력하는 메소드를 호출하면 파일의 내용은 아직 읽지 못한 상태일 가능성이 높아서 출력되지 않습니다.

 

=>window.unload는 브라우저가 닫힐 때 발생하는 이벤트

서버에서 세션과 쿠키의 개념을 사용하는데 보통 사용자가 더이상 서버에 접속되어 있지 않으면 세션을 소멸시켜야 하는데 브라우저가 강제로 닫히는 경우 서버의 이벤트로는 감지할 수 없습니다.

unload 이벤트와 ajax를 이용해서 처리해야 합니다.

 

9)submit 과 reset

=>form에서만 발생하는 이벤트로 submit은 submit 버튼을 누른 경우이고 reset은 reset 버튼을 누른 경우에 발생하는 이벤트

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>다양한 이벤트 처리</title>

 

<script>

//window가 로드 되면 function을 수행

//window가 load 된다는 것은 태그를 전부읽고 메모리에 올리고 난 후

window.addEventListener('load', function(e){

           var n = document.getElementById("name");

           n.value="이름을 입력하세요!"

          

           //포커스가 생길 때

           n.addEventListener("focusin", function(e){

                       this.style.backgroundColor = "papayawhip";

           });

           //포커스가 없어질 때

           n.addEventListener("focusout", function(e){

                       this.style.backgroundColor = "white";

           });

           //키보드를 눌렀을 때 누른 키 값을 대화상자에 출력

           n.addEventListener("keydown", function(e){

                       //이벤트 객체 만들기

                       var e = window.event || e;

                       //누른 키 값 가져오기

                       //IE가 아닌 경우는 이벤트 객체의 which 속성으로 그리고 IE 이면 keyCode 속성으로 누른 키값을 가져옵니다.

                       var code = e.which ? e.which : e.keyCode;

                       alert(code)

           })

});

          

</script>

 

</head>

<body>

           <input type="text" id="name" size="20"/>

           <input type="text"  size="20"/>

</body>

</html>

 

 

 

**정규 표현식(Regular Expression)

=>문자열의 패턴을 정의하는 객체

=>문자열 검색이나 가공에 사용

=>원래는 Perl에서 시작되었지만 지금은 거의 모든 언어에서 사용

=>regexp 로 표현하는 경우가 많습니다.

=>규칙은 단순한데 가독성은 떨어짐

 

1.객체 생성

1)new RegExp(패턴, 한정자)

2)/패턴/한정자

=>한정자는 생략 가능

 

2.정규식 메소드

1)test(): 정규 표현식과 일치하는 문자열이 포함되어 있으면 true 없으면 false 리턴

2)exec(): 정규 표현식과 일치하는 문자열을 리턴

<script>

       var msg = "안녕하세요 1반갑습니다.";

       //msg에 숫자가 포함되어 있는지 확인

      

       //정규식 패턴을 생성

       var reg = /[0-9]/;

      

       //msg에 reg의 패턴이 존재하면

       if(reg.test(msg)){

               console.log("숫자가 포함되어 있습니다.");

       }else{

               console.log("숫자가 포함되어 있지 않습니다.");

       }

      

       msg = "문을 문이 안녕하세요 안녕문"

       //정규식을 기준으로 분할해서 배열로 리턴

       var result = msg.split(/문/)

      

       for(i in result){

               document.write(result[i] + "<br/>");

       }

      

       //처음 만나는 문은 삭제 아무것도 없는 글자와 치환

       //gm 이라는 한정자를 사용했기 때문에 문자열의 모든 곳에서 치환

       result = msg.replace(/문/gm, "")

       document.write(result + "<br/>");

      

      

</script>

 

</head>

<body>

 

</body>

</html>

 

3.String 객체의 정규식 관련 메소드

=>match(정규식): 정규식과 일치하는 부분을 리턴

=>replace(정규식, 대체문자열): 정규식을 대체문자열로 치환

대체문자열 자리에 $& 를 설정하면 원래 문자열

=>search(정규식): 정규식이 나오는 부분의 위치를 리턴

=>split(정규식): 정규식을 기준으로 분할해서 배열로 리턴하는 함수

 

4.한정자(제한자, 플래그)

i:대소문자 구분하지 않고

g:끝까지 반복 수행

m:여러 줄일 때 사용

 

/패턴/한정자

한정자는 여러 개 사용 가능

 

5.앵커문자

^: 패턴 앞에 붙이면 패턴으로 시작하는

$: 패턴 뒤에 붙이면 패턴으로 끝나는

/^문/	문 으로 시작 하는
/문$/	문으로 끝나는

 

 

 

6.메타문자

=>. : 아무글자1개

=>[문자나열] : 문자 중 1개

[abc] abc 중에서 1개

=>[^문자나열] : 나열된 문자를 제외하고

=>[문자1-문자2] : 문자1에서 문자2 사이

[가-힣]: 한글 1자

[0-9]: 숫자 1개  

[0-9a-zA-Z]:숫자나 영문 1글자

=>\d: 숫자 \D: 숫자가 아닌

=>\w:단어 \W: 단어가 아닌

=>\s: 공백문자(공백, 탭, 엔터 등) \S: 공백문자가 아닌

 

7.수량문자

A+: 1개 이상

A*: 0개 이상

A?: 0개 또는 1개

A{2}: 2개 이상

A{2,5}: 2-5개

A{2,}: 2개 이상

 

8.자주 사용되는 패턴들(email, 비밀번호, 전화번호 등)은 인터넷에 검색해도 됩니다.

정규식은 유효성 검사나 텍스트 가공에 많이 사용

 

=>이메일과 비밀번호가 패턴에 맞지 않으면 서버로 전송하지 않도록 하기

 

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>웹 브라우저에서의 유효성 검사</title>

 

<script>

           window.addEventListener("load", function(e){

                       //body 태그 안에서 필요한 객체 찾아오기 - id를 이용해서 찾아오기

                       var myform = document.getElementById("myform");

                       var errordiv = document.getElementById("errordiv");

                       var email = document.getElementById("email");

                       var pw = document.getElementById("pw");

                      

                       //이메일 정규식을 생성

                       var emailreg = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;

                       //비밀번호 정규식을 생성

                       var pwreg = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/;

                      

                       //폼의 전송 이벤트가 발생하면 유효성 검사를 수행

                       myform.addEventListener("submit", function(e){

                                  //email 란에 입력된 문자열에 emailreg가 포함되지 않았다면

                                  if(emailreg.test(email.value) == false){

                                              //에러 메시지 출력

                                              errordiv.innerHTML = "이메일 입력 형식이 잘못되었습니다.";

                                              errordiv.style.color = "red";

                                              //포커스 이동

                                              email.focus();

                                              //기본적으로 제공되는 이벤트 처리 코드를 제거 - 폼의 데이터가 전송되지 않음

                                              var evt = window.event || e;

                                              evt.preventDefault();

                                              return;

                                  }

                                  if(pwreg.test(pw.value) == false){

                                              //에러 메시지 출력

                                              errordiv.innerHTML = "비밀번호 입력 형식이 잘못되었습니다.";

                                              errordiv.style.color = "red";

                                              //포커스 이동

                                              pw.focus();

                                              //기본적으로 제공되는 이벤트 처리 코드를 제거 - 폼의 데이터가 전송되지 않음

                                              var evt = window.event || e;

                                              evt.preventDefault();

                                              return;

                                  }

                                 

                       });

 

           });

          

           try{

                       //이 문장에서 예외가 발생하면 멈추지 않고 catch 구문으로 이동하기 때문에 멈추지 않습니다.

                       var ar = new Array(4300000000);

           }catch(e){

                       console.log("배열 생성에 실패했습니다.")

           }

          

           alert("여기까지 수행")

</script>

 

</head>

<body>

           <form action="server.jsp" id="myform">

                       <div id="errordiv"></div>

                       <label for="email">이메일</label>

                       <input type="text" size="40" id="email" name="email"/><br/>

                      

                       <label for="pw">비밀번호</label>

                       <input type="password" size="20" id="pw" name="pw"/><br />

                      

                       <label for="name">이름</label>

                       <input type="name" size="15" id="name" name="name"/><br/>

                      

                       <input type="submit" value="전송"/>

           </form>

          

           <script>

                      

           </script>

</body>

</html>

 

**예외처리(exception handling)

=>Exception(예외): 문법적인 오류는 아니어서 실행은 되지만 실행 도중에 문제가 발생해서 중단되는 현상

=>Exception Handling: 이러한 예외가 발생했을 때 처리하기 위한 작업

1.예외처리의 목적

=>예외가 발생하더라도 정상적으로 코드를 계속 수행하기 위해서 : 서버에서

=>예외가 발생한 경우 그 예외 상황을 기록하기 위해서 : 문제점을 해결하거나 다음에는 이러한 예외가 발생하지 않도록 하기 위해서

 

2.예외처리 방법

try{

           예외 발생 가능성이 있는 코드;

}catch(예외 객체 변수 이름){

           예외가 발생한 경우 처리할 코드;

}finally{

           예외 발생 여부에 상관없이 수행할 코드;

}

 

3.예외 처리 객체의 속성

message: 예외 메시지

description: 예외에 대한 설명

name: 예외 이름

=>이 속성들은 대부분 로그 파일에 출력합니다.

 

 

**ajax(Asynchronous JAvascript XML)

=>비동기적으로 도메인 내의 데이터(XML 형식)를 가져오는 기술

=>이 기술을 대부분 현재 화면 내부에서 일부분을 주기적으로 교체하기 위해서 사용했기 때문에 하나의 웹 페이지에서 전체 갱신없이 일부분의 데이터를 갱신하는 기술로 여겨집니다.

 

1.ajax 요청 방법

1)XMLHttpRequest 객체 생성

 

2)요청 후 결과가 오면 호출되는 리스너를 등록(콜백함수를 등록)

=>데이터(csv, xml, json)를 정상적으로 받아오면 수행할 내용을 작성

 

3)서버로 보낼 데이터(파라미터)를 생성

 

4)요청

 

2.ajax 요청 객체 생성

=>IE: ActiveXObject("Microsoft.XMLHTTP") 로 생성

=>그 이외 브라우저: new XMLHttpRequest()로 생성

 

3.XMLHttpRequest 객체의 속성과 메소드

=>readyState: 한자리 정수로 객체의 상태를 나타내는 속성

1이면 객체 생성 직후이고 2이면 요청을 한 상태이고 3이면 서버에서 응답이 오고 있는 상태이고 4이면 응답 완료

 

=>status: 응답의 상태를 나타내는 코드 - 웹 과 관련된 개발자가 될 때는 외워야 합니다.

100번대: 처리 중

200번대: 정상 응답

300번대: 리다이렉트 중 - 결과 URL로 이동 중

400번대: 클라이언트 오류

500번대: 서버 오류

 

=>responseText: XML 형식을 제외한 데이터

=>responseXML: XML 데이터

 

=>onreadstateChange: readyState가 변경될 때 호출될 콜백 메소드 지정

 

=>open(요청방식, 요청주소, 비동기여부): ajax 요청 옵션 설정

=>send(파라미터): 실제 전송

 

4.ajax에서 주의 사항

=>ajax는 도메인(현재 프로젝트) 내의 데이터만 가져올 수 있음

=>외부 데이터를 가져와서 ajax로 사용하고자 하는 경우는 proxy를 구현해야 합니다.

proxy는 서버용 언어(Java 의 HttpURLConnection 클래스)로 데이터를 가져와서 넘겨주는 형태를 구현하는 것

 

5.텍스트 파일에서 데이터를 읽어와서 출력하기

1)프로젝트의 WebContent 디렉토리에 텍스트 파일 1개 생성

=>data.txt

Database,Java,Web FrontEnd,Java Web Server Programming

 

2)ajax 요청 파일을 생성

=>ajax.html

 

 

**HTML, CSS, JavaScript

HTML: 웹 문서의 구조를 만들기 위해서 사용, 정적(만들면 변경이 안됨)

CSS: HTML 문서의 스타일을 변경하기 위해서 사용, 정적(만들면 변경이 안됨)

JavaScript: HTML 문서의 구조를 동적으로 변경하기 위해서 사용

 

=>HTML 과 JavaScript는 한 줄 씩 읽으면서 수행을 하고 CSS는 문서를 전부 읽고 화면에 출력되기 전에 적용을 합니다.

=>각각의 역할이 다르기 때문에 별도의 파일에 만들어서 읽어내는 구조를 취하는 것이 좋습니다.

=>최근의 Application 개발 기법에서는 대부분 화면구조를 나타내는 디자인 파일과 이 구조를 가지고 동적인 작업을 하는 소스코드를 분리해서 작업을 합니다.

Android 나 iOS(Mac OS 포함) 그리고 MS-Windows Programming이 이러한 방식을 취합니다.

이러한 방식이 만들 때는 복잡하지만 코드의 분리로 인해서 가독성이 높아져서 유지보수에 유리합니다.