개발 기록용 블로그

//print할 영역의 id값으로 해당 영역만 출력, 출력 후 새로고침 및 기존 영역으로 돌아간다.
function printFn(id) {
    //beforePrint, afterPrint 함수 에서의 변수를 초기화
    let div;
    let initBody;
    //goPrint 함수를 호출
    goPrint(id);

    function goPrint(id) {
        div = document.getElementById(id);

        window.onbeforeprint = beforePrint;
        window.onafterprint = afterPrint;
        window.print();
    }

    function beforePrint() {
        initBody = document.body.innerHTML;
        document.body.innerHTML = div.innerHTML;
    }

    function afterPrint() {
        document.body.innerHTML = initBody;
        location.reload();
    }

//id값으로 동작하기때문에, 출력할 영역에 id값을 할당해준다.
                let id = document.getElementById("PAGE_BODY").id;
                printFn(id);

가격수정처리를 하려한다.

여러개의 input이 동일한 name을 가지는데, name의 값을 배열로 초기화하여 처리하는 프로세스이다

Js

$("#priceUpdateBtn").on("click", function () {
               
                let state = $("input[name='state']").val();
                let price = [];
            
                $("input[name='updatePrice']").each(function (i) {
                    price.push($(this).val().replaceAll(",",""));
                });
                

                $.ajax({
                    url     : "/priceUpdate",
                    type    : "post",
                    data    : {
                        state : state 
                        , price         : price
                    },
                    success : function (data) {
                        alert("수정되었습니다.");
                        location.reload();
                    }, error: function () {
                        alert("error");
                    }
                });
            });

HTML

<input type="hidden" th:value="${state}" name="state"/>
<tr>
    <td class="t_right" name="updatePriceInputTag">
        <input type="text" value="price" name="updatePrice"/>
    </td>
</tr>

Controller

@PostMapping({"/priceUpdate"})
@ResponseBody
public void priceUpdate(@RequestParam(value="state") String state,
                       @RequestParam(value="price[]") List<String> price) throws Exception{  
     priceService.priceUpdate(state, price);
}

Service

@Transactional
    public void priceUpdate(String state, List<String> price) throws Exception{
        //List로 받아온 price의 값을 담을 변수
        Integer priceItem = null;

        //key와 value로 담을 MAP 객체 초기화
        Map<String, Object> obj = new HashMap<String, Object>();
        
        //List로 받아온 price의 값을 반복
        for (int i = 0; i < price.size(); i++){

            /*System.out.print(state+",");
            System.out.println(price.get(i));
           */
            //price 하나의 값
            priceItem = Integer.parseInt(price.get(i));
            //초기화 한 obj에 담는다.
            obj.put("state", state);
            obj.put("priceItem", priceItem);
            //mapper로 보낸다. 
            //Mybatis에서는 #{obj에 담았던 key명} << 으로 파라미터를 전달
            //Mybatis ParameterType은 HashMap으로 선언한다.
            priceUpdateMapper.priceUpdate(obj);
        }
    }
}

웹개발을 할때의 MVC 패턴을 기준으로 보며 이해해보자

스프링을 이용한 개발을 할때, 서블릿이라는 용어가 많이 보여 따로 공부를 해보았다

1. 서블릿이란 웹서버에 포함되어 실행되는 JAVA 클래스이다

2. 웹 브라우저를 통해 클라이언트가 요청하면 요청에 대해 동작하고, HTTP 형식으로 응답한다

3. MVC 패턴에서 controller로 이용된다

서블릿 컨테이너 (Web Application Server) 란?

1.DB조회나 동적인컨텐츠를 제공하기 위해 만들어진 WebServer 이다

2.비즈니스로직에서 실제 업무를 처리를 수행한다.

3.굳이 WebServer가 있는데도 Was가 존재하는 이유는 클라이언트에게 제공하는

정적인 페이지와 동적인페이지를 WebServer에서 처리하게 된다면 여러 단점이 발생하게 된다

3-1.WebServer의 부담이 커지고 처리속도가 저하된다.

3-2.특히, 대용량어플리케이션에서 WebServer와 서블릿 컨테이너의 기능을 분리하여 사용하게 된다면,

운영에 대한 장애극복에 쉽게 대응이 가능하다.

3-3.WAS를 통해 요청에 맞는 데이터를 DB에서 가져와서 비즈니스 로직에 맞게 그때 그때 결과를 만들어서 제공

함 으로써 자원을 효율적으로 사용할 수 있다.

​

서블릿의 생명주기는 아래 블로그에서 참고하면된다.

출처: https://kadosholy.tistory.com/47 [KADOSHoly]

 /*<![CDATA[*/
            let searchYear = /*[[ ${searchParam.searchYear} ]]*/ "";
            let searchMonth = /*[[ ${searchParam.searchMonth} ]]*/ "";
            let now = new Date();
            let nyear = now.getFullYear();
            let nmon = (now.getMonth()+1) > 9 ? ''+(now.getMonth()+1) : '0'+(now.getmonth()+1);

//기존코드
for(let sy = 2016 ; sy <= nyear ; sy++) {
                $('#fd_year').append('<option value="' + sy + '" ' +sy == searchYear ? "selected" : "" +' >' + sy + '년</option>');
            }
//괄호처리한 코드
for(let sy = 2016 ; sy <= nyear ; sy++) {
                $('#fd_year').append('<option value="' + sy + '" ' +( (sy == searchYear) ? "selected" : "")+' >' + sy + '년</option>');
            }

 /*]]*/

* 코드부분을 보면 HTML코드에서 사용하는 삼항연산자인데 처리가 안되었다

알고보니 append로 추가하는 HTML코드에서는 괄호처리를 해야한다고한다

괄호처리한 코드로 다시 리로드하니 검색후에도 selected가 유지된다

/*<![CDATA[*/

 let searchYear = /*[[ ${searchParam.searchYear} ]]*/ "";

/*]]*/

*​ 추가로 thymeleaf를 js안에서 사용할때는

thymeleaf코드를 사용할 수 있게 CDATA 선언부를 만들고 그안에서 코드처리를 해야한다

controller에서 model로 던진 데이터 값은 변수로 선언해 아래 처럼 가져오면되고

데이터값이 없을때를 대비해 코드뒤에 ""를 붙여처리한다

input을 나누어 받아 전화번호 유효성검사를 처리

//실제 코드는 아래와 같진않다. 간단하게 이해를 돕기위해 타이핑한것.
//오타가 있을수있으니 복붙한 후 확인하고 처리해야함.
//concat()함수는 문자를 연결해준다.  
<script>
$(function(){
   //전송버튼클릭이벤트
   $(".submit").on("click", function(){
      let phone = $("input[name='tel1']").val().concat('-', $("input[name='tel2']").val()).concat('-', $("input[name='tel3']").val());
      let email = $("input[name='tel1']").val();
      if(checkEmail(email)==false){
        alert("이메일을 다시 입력해주세요.")
        return false;
      }else{
         $.ajax({
           url : "/controllermappingurl",
           type: "post",
           data: {phone:phone, email:email}
           success: function(data){
              alert("성공");
           }, error: function(){
              alert("실패");
           }
         });
      }
    });
   
});
//입력받은 value를 0 ~ 9 값이 아니면 return false;
//연락처유효성검사
//input태그에 keydown이벤트가 발생하면 실행되는 function이다. key코드를 이용하여 처리했다.
//keycode : 키보드에 키를 개별로 코드를 준것. js내에 약속된 코드이다.
//input에 아래 지정된 키보드 키를 제외하고 입력하면 alert창을 띄우고 value를 없애주었다.
//공통 js파일 안에 function을 넣어 필요한 페이지마다 호출하는게 코드재사용성에좋을듯.
function checkNumber(event) {
    if(event.key >= 0 && event.key <= 9
        || event.keyCode == 8 //backspace
        || event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 39//방향키 →, ←
        || event.keyCode == 46 //delete키
        || event.keyCode == 16 || event.keyCode == 17 || event.keyCode == 9) {
        return true;
    }else {
        alert("숫자만 입력하세요");
        $(this).value = "";
        return false;
    }
}
function checkEmail(email){
    let exptext = /^[A-Za-z0-9_\.\-]+@[A-Za-z0-9\-]+\.[A-Za-z0-9\-]+/;
    if(exptext.test(email)==true){
        return true;
    }else{
        //이메일 형식이 알파벳+숫자@알파벳+숫자.알파벳+숫자 형식이 아닐경우
        alert("이메일형식이 올바르지 않습니다.");
        $(this).value = "";
        return false;
    }
}
</script>
<body>
<form >
<table>
  <tr>
   <td>
    //checkNumber(event) 함수에서 유효성 검사를 진행한다. 
    <input type="text" classname="t_inp" name="tel1" onkeydown="return checkNumber(event);">
    <input type="text" classname="t_inp" name="tel2" onkeydown="return checkNumber(event);">
    <input type="text" classname="t_inp" name="tel3" onkeydown="return checkNumber(event);">
   </td> 
   <td>
   <input type="text" classname="t_inp" name="email">
   </td>
   <td>
   <input type="text" classname="t_inp" class="submit" value="전송">
   </td> 
  </tr>
</table>
</form>
</body>

url.openStream()

-요청한 url의 사이트 데이터를 읽어들인다.

InputStreamReader 

- 바이트단위로 읽어들이는 inputstream을 통해 문자 단위로 읽어오는 방식으로 변형한다.

BufferedReader 

- 입력속도향상을 위해 사용

-  데이터를 문자하나씩 읽는것보다 일시적으로 데이터를 저장하는 버퍼영역에서 문자를 보관하고,

 문자를 다 읽어들이면 한번에 읽는다.

StringBuffer 

- StringBuffer 자료형은 append 라는 메소드를 이용하여 계속해서 문자열을 추가해 나갈 수 있다.

- String + 연산이 있는 경우 객체가 자동으로 생성되지만, StringBuffer 경우 한번의 객체만 생성된다.

- String보다 메모리사용량이 많기때문에, 문자열 추가/삭제가 빈번한 경우에만 사용하는 것이 좋다.

readOnly 

- 사용자가 값을 변경할 수 없고, 값이 controller로 넘어감.

​

disabled

- 사용자가 값을 변경할 수 없고, 값이  controller로 넘어가지않음.

$(function () {
            let orderCnt = parseInt($(".orderCnt").text());
            let rows = document.getElementById("tableset").getElementsByTagName('tr');
            let sum = 0;
            for (let i = 1; i <= rows.length; i++) {
                sum += parseInt(rows[i].cells[2].innerText) || parseInt(inputcnt) || 0;
                let excnt = orderCnt - sum;
                let exCnt = $(".exCnt")[i - 1];
                exCnt.innerText = excnt;
                //console.log(excnt);
            }
}