2017년 9월 29일 금요일

jquery id, name, class 로 접근방법

jQuery로 id 접근시 $(“#id”),

ex) $(“#header_area”)


class로 접근시 $(“.class”),

ex) $(“.section_nav”)


name으로 접근시 $(tag_name[name=name]),

ex) $(“input[name=search_value]“)

2017년 9월 14일 목요일

JSONP 및 Script console.log Tip


console.log 찍을 시 Object 상세 찍는법
console.log("object: %O", data); 

JSNOP  : http://kingbbode.tistory.com/26 여기에 제일 잘 정리되어있음
            크로스도메인 해결하는데 Spring security에서 막혀 있어 filter + jsonp 로 해결함
            http://www.codejs.co.kr/jquery-jsonp/
            http://dev.epiloum.net/1311



JSONP is a method for sending JSON data without worrying about cross-domain issues.
JSONP does not use the XMLHttpRequest object.

JSONP uses the <script> tag instead.

실행시 주의사항
1. web.xml 에 filter 설정해서 해당 url 크로스도메인 허용해줌
2. java 값 리턴시 callback 함수로 감싸주어야함
3. script에서 호출하고 받을때 callback 함수 이름이 동일해야함


XML 부분 
web.xml
<filter>
   <filter-name>cors</filter-name>
   <filter-class>com.test.api.common.util.CORSFilter</filter-class>
</filter>
<filter-mapping>
   <filter-name>cors</filter-name>
   <url-pattern>/test/*</url-pattern>

</filter-mapping>

Filter java 부분
public class CORSFilter implements Filter{

@Override
public void init(FilterConfig filterConfig) throws ServletException {
// TODO Auto-generated method stub

}

@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
throws IOException, ServletException {

        HttpServletResponse response = (HttpServletResponse) res;

        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        
        response.setHeader("Access-Control-Allow-Origin", "*");
        chain.doFilter(req, response);
}
}

JAVA 부분
@RequestMapping(value="/test.do", method = {RequestMethod.GET, RequestMethod.POST})
public void testApi(HttpServletRequest request, HttpServletResponse response) throws Exception{

try {
response.setContentType("text/html;charset=UTF-8"); //PrintWriter 한글깨짐해결

Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
TestDetail testDetail = (TestDetail ) authentication.getPrincipal();
String userId    = testDetail .getMember().getId();
String userName  = testDetail .getMember().getUserName();

String callBack = request.getParameter("callback");  //jsonp callback 함수명

JSONObject obj=new JSONObject();

obj.put("userId", userId);
obj.put("userName", userName);

PrintWriter out = response.getWriter();
out.write(callBack + "("+obj.toString()+")");
out.flush();
out.close();
}
catch (Exception e){
logger.error("Exception : " + e.getMessage(), e);
}

}
Script 부분 

function apiCheck(){
 var aPI = "http://test/testApi.do?callback=?";  //callback 이게 컬백함수 이름임
 $.getJSON( testAPI, 
function( data ) {
console.log("data : " + data);
console.log("object: %O", data)
 });
}

2017년 9월 12일 화요일

반복자 JAVA iterator

이터레이터(Iterator) 인터페이스
- 모든 컬렉션(Collection)으로 부터 정보를 얻을 수 있는 인터페이스 입니다.
- 즉, 자신이 컬렉션(List, Set 등)이라면 이터레이터 인터페이스를 사용할 수 있습니다.
도서관에 비유
- 우리가 책을 보관하는 책장(컬렉션)이 있고, 그 곳에는 책(컬렉션 안에 들어갈 객체)이 있습니다.
- 이 책장은 도서관 사서(이터레이터)가 관리하게 됩니다.
- 사서는 단순 무지한 녀석이라 책장 처음부터 끝까지 한번에 하나씩 밖에 못 가져옵니다.
이터레이터가 가지고 있는 메서드
- boolean hasNext() : 다음 값이 있는지 없는지 확인, 있으면 true를 리턴하고 없으면 false를 리턴 --> if나 while문에서 쓰면 되겠죠?
- E next() : 다음 값을 리턴합니다. 어떤 형태인지 모르기 때문에 리턴 유형을 E로 하겠습니다.
- void remove() : 삭제 하는 메서드


 Set<String> movie = new HashSet<String>();

    movie.add("대부");
    movie.add("반지의 제왕");
    movie.add("겨울왕국");
    movie.add("다크 나이트");
    movie.add("해리포터");
    movie.add("공공의 적");

    Iterator<String> itr = movie.iterator();
    // 이터레이터 객체 itr에 HashSet객체인 movie안에 있는 값들을 가져온다
    // 모든 컬렉션 안에는 iterator()메서드가 있기 때문에 점찍고 사용하면 movie안에 있는 값들을 가져올 수 있다
    while (itr.hasNext()) { // 값이 나올때까지 while문을 돈다
      String s = itr.next()// 문자열 변수 s에 다음값을 넣는다
      System.out.println(s);
    }

출처: http://bitnori.tistory.com/entry/JAVA-JAVA-ITERATOR-자바-이터레이터 [Bitnori's Blog]


출처: http://bitnori.tistory.com/entry/JAVA-JAVA-ITERATOR-자바-이터레이터 [Bitnori's Blog]

2017년 9월 1일 금요일

유효성 검사 jquery required

api 참조: https://jqueryvalidation.org/valid/

form 내부에
<input  required="required" data-title="테스트">

required 의미는 값이 꼭 있어야한다를 뜻한다
참조 블로그 : https://mytory.net/archives/195

이런식으로 적은 후 저장 버튼 함수에
유효성 검사를 넣어두면 jquery 에 의해서 자동적으로 체크가 되며
그 대상의 data-title 값 + 지정해둔 message로 alert창이 뜬다
data-title 값이 없으면 id 값을 알려준다

즉 jquery valid 함수 하나로 required 설정된 곳은 다 검사 할 수 가 있다

$('#btnSave').on('click', function() {
if(!$('#frm').valid()) {
return;
}
}


jquery 설정 파일은 jquery.utils.js 내에서
1
jrx.define('validate.init', function() {
  required : messages.해당값
  }
2 $.validator.setDefaults({
여기를 보면 잘 설정되어있다