TIL : 51번째- 230215 [2-2-수]

I. 들어가며 

항상 포커스는 나누어지는데에는 이유가 있다. 나누는 것은 부담이 있다.

 

우선 뷰를 나누어서 뷰를만들 때 서블릿을 만드는게 아니라 JSP에대해서 재스퍼이용해서 만든다

JSP에 자바코드 포함돼어서 자바개발자가 손대게 됨

난이도가 그렇게 높지도 않은데, 표기법이 좀 더 정적이며 구조적인 표기법인 언어를 쓰는것이 바람직하다

 

언어를 생각해보자 프로그래밍언어들은 C HTML 뿐만 아니라 JSTL HTML CSS 등도 그러하다

이 둘은 어떤차이가 있을까? 언어는 절차지향언어 구조지향언어로 나누어진다 

언어는 어휘(명령어) + 규칙(방법) 이 있는 명령어 집합을 의미한다

 

HTML 은 컨텐트를 구조화 하는 언어이다 CSS 는 구조적 언어가 아니고, 스타일 언어이다.

JSTL 은 라이브러리라서 언어라고하기 애매하지만, 생긴게 태그집합으로 이루어져있고, 사용하는데 규칙이 있다

누군가는 언어라고, 누군가는 라이브러리라고 하는데, 내 마음속에 언어라고 부를만한 생각은 하는게 좋다 ( 언어범주에 포함되기도 함)

 

 

 

II. 웹개발 

1. JSTL

(1) 들어가며

forEach 가 들어가서 자바가 사라졌다.

 

 

(2) forEach 조작하기 : 출력코드의 변화 EL 사용하기

1)

<c:forEach items="menus2">

menus2에서 뽑아내서 특정한 곳에 담아준다.

 

 

2)

기존 getName() 방식을 보호하지말고, 변경하자

 

V인 HTML에 자바 코드가 섞여있다.

좌측 코드가 불편해 보이는데, 우측으로 짧은표현식으로 바꾸는게 좋다

이런것을 바꿀수있는 표현식이있다. 4대 저장장치(페이지,컨텍스트,리퀘스트,어플)에있는 것을 뽑아내주는 것이다.

 

우측 $안에다가 저장한 것의 키워드를 넣어주면된다

 

반복 횟수는 데이터 수만큼 된다.

다시말하면 $안은 4대 저장소에 있는거만 가능하고, 즉 4대저장소의 것을 담아야한다.

 

이경우 객체저장소의 명이 겹치면은 EL은 우선순위에 따라서 담게된다

여기서 우선순위는 객체의 크기에 따라서 결정된다(page, request, session, app 순서) 

 

 

3)

이러한것을 EL이라고 하고 이것으로 하면 바로 할 수있다.

1. 컨트롤러에서 저장소에 set 하고, view 에서 EL방식으로 get이 가능하다

2. List 컬렉션도 마찬가지이다.  기존에는 형변환을 해야하지만, 그럴필요가 없다.

3. request 도 가능하고 &List 도 형변환없이 수월하게 가능하다

4. HashMap 도 꺼낼 때 에는 형변환해야한다. 그런데 EL도 마찬가지이다.

JSON 방식과 비슷한 것으로 볼수있다.

객체를 뽑아 쓸 경우에도 이렇게 쓸 수있다.

 

따라서 자바 모를 때 뷰를 해야하면 JSTL과 EL이면 충분하다.

 

4)

<c:forEach var="m" items="${menus2}">
  <tr>

    <td>${m.id}</td>
    <%-- <%= ((Menu)pageContext.getAttribute("m")).getName() %> --%>
    <td>${m.name}</td>
    <td>${m.price}</td>            
</tr>

</c:forEach>

-EL 은 4대 저장소에 것만 가능하다

<% List<Menu> menus = (List<Menu>)request.getAttribute("menus2"); %>

그래서 위와같이 List컬렉션의 menus 참조 변수명이 아니라 request 하는 menus2 를 바로 넣은다

이제 이것을 지워도 된다.

 

EL은 저장소 꺼내는게 불편해서 쓰는것임 

 

이렇게 하면 

요소의 수만큼 반복해서 출력한다.

 

 

(2) formmatNumber 와 formatDate

1) 모델로부터 컨트롤러 뷰 까지 연결 체계 정리

날짜를 추가해보자!

<Menu.java>

import java.util.Date;

public class Menu {

	private int id;
	private String name;
	private int price;
	private String img;
	private Date regDate;
	
	//생성자(기본, 오버로드)
	//geter //setter
	//toString()
	
	public Menu() {
		// TODO Auto-generated constructor stub
	}

java.util.Date로 해준다.

while(rs.next())	// 서버의 커서를 한칸 내리고 그 위치의 레코드를 옮겨 오는 것. -> 레코드 하나가 저장되는 공간은?
{

    int id = rs.getInt("id");
    String name = rs.getString("name");
    String nicName = rs.getString("nicname");
    Date regDate = rs.getDate("reg_date");

    Menu menu = new Menu(id, name, 1000, "",regDate);

    menus.add(menu);

    }

    con.close();

} catch (ClassNotFoundException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
} catch (SQLException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
}

req.setAttribute("menus2", menus);

이후 DB로 부터 데이터를 받아서 List의 Menu 자료형의 menus인스턴스에다가 저장(menus.add(menu))한다

그리고 menus2 의 키값같은것으로 setAttr 을 해준다.

2) formating

날짜 출력시 내가 원하는 포맷이 아닐수도 있다.

컨트롤러에서 손을 댈 수있다

 

DB에서 받아올 때 가능하기도하고, DB에서도 가능하고, 뷰에서도 가능하다

데이터의 날짜는 큰 숫자가 있는데, 미리하기보다 나라마다 지역마다 페이지를 결정하는게 중요하다

이런것은 EL, JSTL 에서 제공되고 있다. 즉 formating 이다.

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

내가 출력하는 패턴을 지정하기가 가능하다

 

-jsp 는 바꾸어도 서버를 재시작할필요 없음

고치면 그냥 저장하고 새로고침하면 됨

 

3) 날짜 포맷팅

 

이 경우 y가 하나이면 년도는 한글자만 나온다.

<c:forEach var="m" items="${menus2}">
  <tr>

    <td>${m.id}</td>
    <%-- <%= ((Menu)pageContext.getAttribute("m")).getName() %> --%>
    <td>${m.name}</td>
    <td>${m.price}</td>   
    <%-- <td>${m.regDate}</td> --%> 
    <td><fmt:formatDate pattern="yyyy-mm-dd HH:mm:ss" value="${m.regDate}"/>
</tr>

 

 

 

4) 숫자 포맷팅

(참조주소 : https://www.javatpoint.com/jstl-fmt-formatnumber-tag )

 

포맷은 또다른 함축은 가격변환할 때 세글자(백자리)씩 ,로 나눌 때에도 가능하다.

<td>
    <fmt:formatNumber pattern="#,###" value="${m.price}"/>원
</td>

끝에 /> 를 넣어주자

 

5) var 설정하기

이렇게 날짜 포맷, 숫자 포맷을 쓰면된다

그런데 이렇게 쓰는것은 좋지않다.

 

var 에다가 "price"를 넣어주면 출력이 되지않는다.

현재 페이지 

<c:forEach var="m" items="${menus2}">
    <fmt:formatNumber var="price" pattern="#,###" value="${m.price}"/>
    <fmt:formatDate var="regDate" pattern="yyyy-MM-dd HH:mm:ss" value="${m.regDate}"/>
  <tr>

    <td>${m.id}</td>
    <%-- <%= ((Menu)pageContext.getAttribute("m")).getName() %> --%>
    <td>${m.name}</td>
    <td>${price} 원</td>   
    <td>${regDate}</td>
</tr>

</c:forEach>

 

6) forTokens

 

이미지파일의 파일명 정리가 필요하다.

파일명을 개별적으로 가지는 경우 

 

tokens 토근 수만큼 구분자에 따라서 자르기 이다.

용어는 토근이다.

 

 

우선

<list3.jsp> 

<c:forEach var="m" items="${menus2}">
    <fmt:formatNumber var="price" pattern="#,###" value="${m.price}"/>
    <fmt:formatDate var="regDate" pattern="yyyy-MM-dd HH:mm:ss" value="${m.regDate}"/>
<tr>
    <td>${m.id}</td>
    <%-- <%= ((Menu)pageContext.getAttribute("m")).getName() %> --%>
    <td>${m.name}</td>
    <td>${price} 원</td>   
    <td>${regDate}</td>
</tr>

<tr>
    <td colspan="4">
        <c:forTokens var="img" items="${m.imges}" delims=",">
            ${img}
        </c:forTokens>
</tr>

 

<Menu.java>

여기다가 images 자료형을 넣는다. 다만 임시로 하기때문에 생성자는 초기화하지않는다

public class Menu {

	private int id;
	private String name;
	private int price;
	private String img;
	private Date regDate;
	private String images;

 

 

 

<ListController2.java>

while(rs.next())	// 서버의 커서를 한칸 내리고 그 위치의 레코드를 옮겨 오는 것. -> 레코드 하나가 저장되는 공간은?
{

    int id = rs.getInt("id");
    String name = rs.getString("name");
    String nicName = rs.getString("nicname");
    Date regDate = rs.getDate("reg_date");
    String images = "pic1.png,pic2.png,pic3.png,pic4.png";

    Menu menu = new Menu(id, name, 1000, "",regDate);
    menu.setImages(images);

    menus.add(menu);

}

imges 를 , 를 기준으로 파일명을 넣어준다

그리고 Menu에 변경한 images에 대한 생성자를 바꾸어 주지않았기 때문에 별도로 setter를 이용해서 대입해준다

 

<td colspan="4">
    <c:forTokens var="img" items="${m.images}" delims=",">
        ${img}
    </c:forTokens>

결국 토근으로 나누어서 출력한다 

이 경우 colspan = 4 로 해서 4개의 속성을 차지할수있다

이러한 fortkoens는 구분자가 있을 때 효과적이다.

 

 

-1차 쓰는 기술

JSP & 타임리프 를 맛본다

현장에서는 스프링쓰면 JSP 씀(관공,기존서비스기업) / 그런데 타임리프도 씀 (스타트업)

프로젝트게 입혀보는 경험을 해보자!!

 

 

 

6) varStatus

<td colspan="4">
    <c:forTokens var="img" items="${m.images}" begin="2" delims="," varStatus="st">
        <a download href="upload/${img}">${img}</a>
        <c:if test="${!st.last}">|</c:if>

        ${st.current}<br>
        ${st.index}<br>
        ${st.count}<br>
        ${st.first}<br>
        ${st.last}<br> 
        ${st.begin}<br>

    </c:forTokens>

제어구조를 손쉽게 만들 수 있다.

이경우 begin 과 end 는 forTokens 조건에 설정한 경우에 출력이 된다.

 

7) EL 연산자와 HTML & XHTML

나누기의 경우 / 와 div  두가지가 있다

XML은 문자기반 언어이기 때문에 div를 쓴다

XHTML은 확장가능 하다 함은 well-formed만 되면 어떻게든 쓰기 가능하다

 

잡스는 XHTML2 가 나왔는데, 이후 HTML5 를 쓰겠다고 했다

왜 그랬는가? 데이터기반으로 설명하는건 맞는데 너무빠르다. 잡스는 문서기반으로 봄

XTML2 는 기존 HTML이 호환이 안되어버림, 그래서 브라우저가 완전 다 바뀜 (속도를 못따라감)

I-OS 주도의 모바일 시장이 확장되면서 MS 입지가 좁아지고, 모바일이 전체를 좌우 할 수있게됨

 

<c:if test="${!st.last}">|</c:if>

이렇게 표현을 해준다.

 

 

 

C:set 으로 경로설정을 바로 가능함

C:url  으로 컨텍스트 설정이 가능함

 

function 은 

 

 

여기까지 우리가 view 를 다 만들었다

 

 

 

2. controller

뷰는 땟지만, 점점 비대해지고있다

 

반복되는 부분이 있고,

쿼리를 잘 못하고,

분업화하고싶고,

나는 결과물인 list 인스턴스를 받고싶고,

데이터를 가져오는 작업 외 어떤 데이터를 가져올지 판단에 대한 업무자가 있음

 

서블릿가져오는 사람 / 디비다루는 사람 / 업무하는 사람 셋으로 나누기 등 으로 분업화 해야한다

 

내일은 이것을 잘라내서 해보자

 

---

1. 보충

 

 

 

2. 회고 

1) JSTL 과 EL 로 분업이 무엇인지 분업을 위해서 이렇게 만든점이 흥미롭고 MVC 스러운게 점점 완성되어 가는 것 같다.

 

2) 앞으로 무슨 기술을 이용해서 프로젝트를 진행하는지 알려주는데, 아직 못알아 듣고있지만 그럼에도 불구하고 많이 들었던것을 배우는것이 흥미롭고 재밌다.