Web Application Architecture 교육 (2019/03/11~03/15)

3/11: HTML, CSS

• 구분자 역할: 요즘은 XML이 대신함
• 기능적 역할: 요즘은 거의 CSS가 대신함
• 주로 쓰는 건 3가지
• <a href..
• <a href="${root}/board/read.do?boardNumber=${board.boardNumber}">${board.subject}</a>
• <a> 태그로 요청시 post로 전달할 수 있는 방법은?
• <img>
• <form> https://www.w3schools.com/html/html_forms.asp
• parameter
• <input type="text" name="firstname" value=""/>
• input(name, value) ====> Request객체의 attribute(key, value) 가 된다!!!
• name이 없으면 서버에 아예 전달되지 않음
• request보내기 
• 한 form에서 여러 sumit 버튼 이용하기 

<form method="post" name="form"> -> action은 써도 소용없음 "javascript: form.action='/manage/update';"때문에 submit버튼 누를때마다 바뀌므로     <input type="text" value="value1" name="key1" /> -> 얘는 Request Attribute로 전달     <input type="text" value="value2" name="key2" /> -> 얘는 Request Attribute로 전달     <input type="submit" value="수정" onclick="javascript: form.action='/manage/update';"/>      <input type="submit" value="삭제" onclick="javascript: form.action='/manage/delete';"/>      <input type="button"...>에서는 form.action으로 전달못함? </form>

• 아래와 같이 하면 구지 <form> tag와 같이 쓰지 않아도 됨, but html5부터 지원하므로 IE9이하 브라우저에선 작용을 안함

<input type="submit" value="수정" formaction="/manage/update"> <input type="submit" value="삭제" formaction="/manage/delete">

• https://kutar37.tistory.com/entry/%ED%95%9C%EA%B0%9C%EC%9D%98-Form%EC%97%90%EC%84%9C-%EC%97%AC%EB%9F%AC%EA%B0%9C-Submit-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
• block vs inline
• block요소: 줄바꿈O, <div>
• inline요소: 줄바꿈X, <span>
• CSS는 block요소에 적용해야 제대로 적용됨, span, font등 inline 요소에 적용하면 width, height, margin, padding등이 의도한 것과 다르게 적용이 안되거나 함, 그럴때는 display: inline-block 속성을 줘서 inline애들을 inline-block으로 바꿔줘보자 
• 참고: https://www.w3schools.com/css/css_inline-block.asp
• Web에서는 상대경로 사용해야함
• ./ 현재폴더
• ../부모폴더
• ./../: 현재폴더의 상위폴더, 즉 상위폴더

 

jQuery

1) 선택자

2) 함수

ready(function): 문서가 로드되어 준비상태가 되었을 때 처리를 위한 함수

 

 

var obj=new jQuery(document); obj.ready(testFun); function testFun(){alert("hello");}

 

 

 

 

 

new jQuery(document).ready(testFun);

 

$(document).ready(function(){alert("hello");});

 

 

즉, new jQuery( ) → $( )

 

3) 이벤트, 효과, 테마

 

pattern

• 디렉토리 패턴: 각각 url로 요청
• 확장자 패턴: *.do로 요청
• @WebServlet(urlPatterns="*.do", initParams=@WebInitParam(name="configFile", value="/WEB-INF/commandURI.properties"))
• front controller pattern: 모든 요청을 특정 서블릿이 받아서 실제 controller에 전달해줌
• handler mapping
• @WebServlet(urlPatterns="*.do", initParams=@WebInitParam(name="configFile", value="/WEB-INF/commandURI.properties"))
• servlet init() method에서 파랑이 Properties를 불러와서 아래와 같이 request별 handler객체를 직접 생성하는 방법으로 handlerMapping함

HashMap<String, Object> commandMap = new HashMap<String, Object>();     Iterator<Object> keyIter=propertiesFile.keySet().iterator();     while(keyIter.hasNext()){     Class<?> handlerCalss=Class.forName(propertiesFile.getProperty((String)keyIter.next()));     Object handlerInstance=handlerCalss.newInstance();     commandMap.put((String)keyIter.next(), handlerInstance);      }

• 전달받은 view path를 forward하는 방법

RequestDispatcher rd=request.getRequestDispatcher(viewPath); //viewPath="/WEB-INF/board/writeOK.jsp" rd.forward(request, response);

 

JSP: 결국은 html +javascript로 변환되는 것 (JSP > Servlet > html+javascript)

• encoding
• html을 완전히 그대로 쓰면 한글 encoding이 깨짐
• 최소한 아래 1줄은 추가해줘야 한글 UTF-8 처리가능함
• <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
• 위 1줄 없이<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">이거만 쓰면 한글 깨짐
• 톰캣에 의해 생성된 객체 request, response, session등을 서블릿과 공유한다, 그래서 request에 setParameter하면 jsp에서도 접근가능 
• Controller(servlet)가 View(JSP)에게 model을 전달하는 방법이 바로 이것!
• request.setAttribute("writeResult", writeResult);로 세팅하면, JSP에서 ${writeResult}로 사용가능
• JSP에서 html comment <!-- --> 이거 안에 jsp syntax error있어도 에러남, <!-- -->안에 있어도 컴파일에러가 나며 컴파일에러는 무조건 잡아야 실행에러안남, syntax error 안고치고 주석처리하려면 태그내에서<% %> 주석을 써야함
• EL(Expression Language) 
• ${}이렇게 생긴거 
• ${root} root 선언 빼먹어도 syntax error(compile error)안나고 단지 html로 변환될 때 empty string이 됨, 실행시 syntax error는 어디가 잘못인지 알려주지만 위치를 알려주지만, 변수명 잘못 쓰거나 한건은 체크가 안되고 html로 변환된 소스를 참고하여 비교해야 하므로 주의를 요함
• JSTL
• Java를 tag처럼 쓰게해줌
•  
• <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
• <c:if test='${writeResult==1}'>
• <c:forEach var="board" items="${boardList}">
•   
• <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> 
• <fmt:formatDate value="${board.writeDate}" type="both"/>

 

myBatis 참고:http://www.mybatis.org/mybatis-3/ko/

• List<E> org.apache.ibatis.session.SqlSession.selectList(String arg0, Object arg1, RowBounds arg2)
• Map<K, V> org.apache.ibatis.session.SqlSession.selectMap(String arg0, Object arg1, String arg2, RowBounds arg3)
• T org.apache.ibatis.session.SqlSession.selectOne(String arg0, Object arg1)
• void org.apache.ibatis.session.SqlSession.select(String arg0, Object arg1, RowBounds arg2, ResultHandler arg3)
•  
• input: parameterType, 
• out: resultType, resultMap (DB 컬럼과 DTO/VO의 property변수명과 일치하면 resultType을 쓰고 아니면 매핑값을 지정해놓고 resultMap을 써야함)
• session.commit(); 해주는 거 잊지말자!!