'어장 Develop/어장 JSP'에 해당되는 글 6건

웹 개발을 하면서 툴팁은 생각보다 많이 쓰인다. 항목별 도움말과 같이 동작할때가 가장 큰데, 이걸 관리자가 직접 관리할 수 있었으면 좋겠다는 요구사항이 나왔다. 허미 대체 이게 뭔말이래. 그러니까 간단하게 요약하자면 다음과 같다.

요구사항

1. 관리자가 툴팁관리 메뉴를 통해, 항목별로 툴팁을 등록/수정 등 관리를 할 수 있을 것

2. 등록된 툴팁은 화면상에서 보여질 것

대충 뭐 이런건데, 우리가 예시를 들자면 '저장'버튼 에 마우스 오버를 하면 '저장을 하기 위한 버튼이에용' 이라고 툴팁이 뜰 것이다.

그런데 저 툴팁메세지를 관리화면을 통해 추후에 바꾸겠다는거다. 이게 유동적으로 돼? 처음에는 반신반의 했는데, 이게 되네?

구현 - ModelAndView

결론적으로는 매우 쉽게 유동적으로 관리가 된다.

간단히 설명하자면, 해당 화면을 로딩하기 위한 controller 에서 ModelAndView에 jsp 경로를 리턴해줄것인데, 이 ModelAndView에 툴팁 Object를 함께 넣어주는 것.

그리고 해당 jsp 에서 툴팁Object 에서 html렌더링시 해당 value를 뽑아다 쓸 수 있는 것이다. 다음의 소스코드를 보자.

소스코드에 작성된 주석과 같이 Map 형태로 툴팁 메시지를 담고, 저걸 modelandview에 넣어준다.

현재 디비가 준비되어있지 않아Map형태로 구현하긴 했지만, 실제로 db 쿼리 시에도 vo 형태로 가져올것이기에 크게 문제가 될 부분은 없다.

그리고 jsp에서는 다음과 같이 꺼내쓰면 끝이다. 완전 쉬움.

그럼 툴팁이 별도 처리 없이 바로 저렇게 보인다. 이렇게 간단하다고?

응용 - 그리드

javascript 형태로 되어진 그리드는 거의 대부분 적용될 것으로 보인다.

ModelAndView로 tooltipMap오브젝트를 담아 jsp로 던졌으니, jsp는 해당 페이지에 매핑된 js로 값을 넘겨주면 된다.

그리고 js에서는 그리드 컬럼을 구성할 때 tooltipMap에서 꺼내 매핑하면 된다.

다음의 소스코드를 보자.

3번째와 같이 JSP에서 JS로 오브젝트 주입을 시도한다.

그리고 js의 그리드 컬럼 설정부에서 tooltip을 저러한 형태로 작성해주면 된다.

이렇게하면 상단의 검색조건/항목의 툴팁과 그리드의 툴팁을 모두 JAVA 에서 가져올 수 있게 된다. 한 건 해결! 

개발하다보면 해당 페이지의 table의 데이터들을 새로고침 없이 데이터를 붙여쓰는 경우들이 있다. 이는 대부분 리스트로 구성된 페이지에서 확인이 가능한데, 가령 오픈마켓의 주문배송리스트라거나, 뭐 카드사용 내역과 같은 페이지에서 주를 이룬다.

div태그를 쓰던 table태그를 쓰던 아마 과정은 비슷할 것이고, javascript에서 데이터와 html태그들을 어떻게 만들어서 jsp에 붙여주는지에 대한 예제를 작성해보고자 한다.

먼저 JSP에서는 다음과 같이 구성한다. 기본적으로 페이지가 로딩될 때, controller 단에서 modelAndView에서 데이터를 호출, List로 이루어진 객체들을 foreach 로 계속 붙여주는 구조로 되어있다.

modelAndView 에서는 resultHistory라는 네이밍의 List 객체에 데이터들을 담아준다. 그리고 해당 jsp페이지가 호출되면, foreach로 객체들을 돌리면서(?) 각 항목들을 구성하게 된다. 이 때, btnResultMore를 클릭한다고 하자. 그럴 때 해당 페이지를 새로고침 없이, 리스트의 하단에 추가적으로 데이터가 붙는 방식이면 훨씬 보기가 좋을 것이다. 새로고침을 하게 되면 현재 입력되어있는 값들도 저장하지 않는 이상 사라질 것이고, 무엇보다 좀 더 자연스러운 화면을 뿌려줄 수 있을 것이다.

btnResultMore 버튼에 매핑되어있는 javaScript의 펑션을 보자.

자바스크립트에서는 ajax 호출을 통해, 데이터를 더 가져오기 위한 controller 와 매핑을 시켰다.

정상적으로 쿼리가 이루어지는 경우에는 success flag를 탈 것이고, 이 때부터 로직이 시작된다.

기본적으로 들어있는 row를 날리기 위해, 14번 라인에서는 resultList의 자식들을 모두 비워준다.

그리고 18번 라인에서 가져온 데이터를 기반으로 forEach를 돌리면서, HTML tag를 새로 만들어주는 방식으로 이루어져있다.

위의 jsp와 마찬가지로 같은 구성으로 html과 데이터를 매핑해준 후에, 26번 라인에서 append를 시켜주면 끝.

추가적으로 btnResultMore를 누르게 되면 5개씩 항목을 더 붙여주는 기능을 포함한 것인데, pageNo 변수를 추가하여 이를 쿼리에 응용했다.

기본값은 0으로 처리가 되어서 쿼리에서는 기본 5개, 1일 경우에는 10개를 가져오는 방향으로.

javascript 에서 append와 appendTo의 쓰임새가 확연히 다르다.

$('#a').append(b); 의 경우에는 a에 b를 넣는 것이고, $('#a').appendTo(b);는 b를 a에 넣는것이다.

DB에서 데이터를 가져온 후, TextArea에 value 값을 지정할 때 줄바꿈 문자열을 넣어줘야 하는 경우가 있다.

<br>이라거나 \r\n 이라거나 잔뜩 있긴 하지만서도, jsp 안에서 html로 그려질 때에는 먹히지 않는다.

가볍게 &#10; 를 넣어주면 해결된다.

Starting Tomcat v5.5 Server at localhost' has encounterd a problem.

 

Server ports (8080, 8009) required by Tomcat v5.5 Server at localhost are already in use. The server may already be running in another process, or a system process may be using the port. To start this server you will need to stop the other process or change the port number(s).

어떠한 프로세스가 8080포트가 이미 사용중이기에 새로운 프로세스로 구동할 수 없다는 메시지이다.

이 메시지는 OS 상관없이 동일하며, 해당 포트를 사용중인 프로세스를 강제종료하거나 또는 위의 포트를 수정해서 구동하는 방법 등이 있다. 이는 현재 상태가 운영서버인지, 개발서버인지 또는 로컬개발환경인지에 따라 해결방법이 무궁무진하다.

대부분의 위의 오류메시지는 로컬개발환경임을 감안하고, 아래의 절차대로 수행한다.

1. Windows 기준 - 8080 포트를 사용중인 프로세스 확인

1-1. CMD 켜고 아래의 명령어 입력

/f 옵션은 강제종료를 의미한다.

2. Linux 기준 - 8080 포트를 사용중인 프로세스 확인

-9 옵션은 강제종료를 의미한다.

추가.

과거에 작성한 내용은 불확실한 정보가 너무나도 많아 아예 새로 작성하였다.

특히 SpringBoot를 주력으로 개발하다보니 Windows 상에서 포트충돌나는 일이 많아, 아예 cmd 명령어를 외우고 다닐 지경에 이르렀다. 부디 많은 개발자들에게 도움되었길 바란다.

JSTL 

Jsp표준 태그 라이브러리(Jsp Standard Tag Library)의 약어

jstl을 가지고 할수 있는일

간단한 프로그램 로직의 구사(자바의 변수선언,if문for문 등에 해당하는 로직)

다른JSP페이지 호출(<c:redirect>,<c:import>)

날짜,시간,숫자의포맷

JSP페이지 하나를 가지고 여러 가지 언어의 웹 페이지 생성

데이터베이스로의 입력,수정,삭제,조회

XML문서의 처리

문자열을 처리하는 함수 호출

위에 있는 여러 가지 기능들 중 제일 마지막에 있는 '문자열을 처리하는 함수 호출'을 제외한 나머지 기능들은 모두 커스텀 액션 형태로 제공된다.

(＊커스텀액션 : xml문법을 따르면서 특정한 동작을 수행하는 태그)
 

jstl을 살펴보면 커스텀액션이나 함수의 이름앞에 c,fmt,fn등이 접두어가 붙어 있는것을 볼수 있다 

표준 액션의 태그 이름 앞에는 모두 jsp라 는 한 종류의 접두어가 사용되는데 Jstl의 커스텀 액션과 함수에는 왜 이렇게 다양한 접두어가 붙는걸까?

그 이유는 Jstl이 다시 5개의 작은 라이브러리로 나뉘어지고 커스텀 액션과 EL 함수는 각각 다른 라이브러리에 속하기 때문이다. 

위 표를 보면 c.fmt,fn이라는 접두어가 있다. 그리고 이것은 각각 코어라이브러리,포매팅 라이브러리,함수라이브러리의 접두어라 표시되어 있다. 하지만 라이브러리를 구분하는 것은 사실상 접두어가 아니라 위표에 나와있는 URI실별자이다. 접두어는 단지 코딩을 간편하게 하기 위해 사용되는 수단일 뿐이다. 그러므로 Jsp페이지에서 이 접두어를 사용하기 위해서는 먼저 라이브러리의 UTI식별자와 접두어를 연결해야한다. 그런 일은 taglib 지시자를 통해 할수 있다.

taglib지시자는 다른 지시자와 마찬가지로 <%@ ~ %>로 종료된다. 이 지시자에는 uri와 prefix라는 두 개의 애트리뷰트를 써야하고 이 두 애트리뷰트에 각각 URI 식별자와 접두어를 값으로 주어야 한다.

                               ↑                                        ↑

                           접두어                         라이브러리를 식별하는 URI

taglib는 jsp페이지의 맨 위쪽에 기술한다. 하지만 어디에 써도 상관은 없다.

에러:Choose unique values for the 'webAppRootKey' context-param in your web.xml files

해당 에러는 패키지 파일 이름 변경 후 web.xml 등에서 context-param의 param-value 값을 바꿔주지 않아서 생기는 문제.

패키지 파일 이름과 param-value를 일치시켜주면 해결된다.