본문 바로가기

프로그래밍458

CKEditor 이미지 업로드시 JSON 응답, jQuery UI Dialog와 같이 사용시 콤보박스 안열리는 현상 해결 이전글 "CKEditor 4 설치와 PHP 연동 하기"에서 CKEditor의 사용법을 알아 보았습니다. CKEditor에서 이미지 업로드 후에 에디터에 이미지를 표시하기 위해서 반환되는 값은 다음과 같은 자바스크립트 입니다. 최근 새 버전을 설치하고 테스트해본 결과 이 반환값이 JSON 값으로 변경된것 같습니다. 1. 이미지 업로드 성공시 반환값 { "uploaded": 1, "fileName": "foo.jpg", "url": "/files/foo.jpg"} - uploaded : 1 로 설정합니다.- fileName : 업로드 된 파일의 이름입니다.- url : 업로드 된 파일의 URL (URL 인코딩 됨)입니다. 이 값을 이용해서 에디터 내부에 업로드된 이미지를 표시합니다. 2. 업로드 성공하였지만.. 2019. 1. 23.
Java에서 JSON 문자열 생성 및 JSON 문자열을 자바 객체로 변환하기 스프링 프레임웍을 사용하면 클라이언트와 JSON 형식의 데이터를 주고 받을 때, Java 객체를 JSON 문자열로 변환하거나, JSON 문자열을 Java 객체로 변환하는 작업은 보통 자동으로 처리되므로 신경쓸 일이 없습니다. 가끔은 이러한 변환 작업을 직접 해야 할 경우가 있습니다. 직접 하는 방법을 알아 봅니다. 1. Jackson 라이브러리를 사용하는 방법 Jackson 라이브러리는 JSON 뿐만 아니라 XML도 변환 해주는 많이 사용되고 있는 라이브러리 입니다. 다음 의존성을 추가해서 사용할 수 있습니다. com.fasterxml.jackson.core jackson-databind 2.8.8 jackson-databind가 jackson-core와 jackson-annotations에 대한 의존성.. 2019. 1. 18.
엑셀 드롭다운 리스트에서 선택해서 값 입력하기(데이터 유효성 검사, 이름 지정) 엑셀의 셀에 값을 입력할때 오류를 방지하기 위해서 지정된 값들 중에서 선택해서 입력할 수 있도록 드롭다운 리스트를 제공하는 방법을 알아 봅니다. 드롭다운 리스트를 만들 셀을 선택한 다음 "데이터 도구 그룹"에서 "데이터 유효성 검사"를 선택합니다. 데이터 유효성 창에서 다음과 같이 입력합니다. - 제한대상 : 목록을 선택합니다.- 공백무시 : 체크하면 공백을 입력할 수 있습니다.- 드롭다운 표시 : 드롭다운 리스트를 만들기 위해서 체크합니다.- 원본 : 선택할 수 있는 데이터를 콤마로 분리해서 입력합니다. 선택된 셀에 데이터를 선택할 수 있도록 드롭다운 리스트가 만들어 졌습니다. 데이터 원본을 콤마로 분리해서 입력하는 것이 아니라 시트내의 일부 데이터를 지정해서 만들수도 있습니다. 이럴 경우 지정된 영역.. 2019. 1. 16.
이클립스 Java, JSP, HTML 소스에서 공백 제거하기 1. Java 소스에서 라인 뒤에 붙는 공백 제거하기 - 메뉴에서 "Window -> Preferences" 를 선택합니다.- "Java -> Editor -> Save Actions" 를 선택합니다.- "Perform the selected actions on save" 를 체크합니다.- "Additional actions" 를 체크합니다.- "Configure..." 를 클릭합니다. - "Remove trailing whitespace" 를 체크합니다. 소스를 수정후 저장할때 공백이 제거 됩니다. 2. JSP, HTML 빈라인 제거하기 - CTRL + F 키를 눌러 "Find/Replace" 창을 엽니다.- 정규식을 사용하므로 "Regular expressions" 를 체크합니다.- Find: 에 ^.. 2019. 1. 15.
Java에서 HashMap 복사하기 와 모든 키, 값을 리스트 하기 Java에서 HashMap을 복사하는 방법을 알아봅니다. 다음 원본을 복사해 봅니다.HashMap origMap = new HashMap();origMap.put("TITLE", "제목");origMap.put("CONTENT", "내용");origMap.put("WRITER", "홍길동");System.out.println(origMap.toString()); 1. 생성자를 이용해 복사합니다.HashMap copyMap = new HashMap(origMap);System.out.println(copyMap.toString()); 2. clone() 을 이용해서 복사합니다.HashMap cloneMap = (HashMap)origMap.clone();System.out.println(cloneMap.t.. 2019. 1. 15.
이클립스 패키지를 폴더 형식으로 보기 이클립스에서 기본적으로 패키지 보기 형식은 파일을 포함한 패키지 명 전체가 폴더 처럼 보이는 것입니다. 패키지가 많아질수록 점점 파일 찾기가 어려워지는 단점이 있습니다. 패키지 보기 형식을 패키지 단계를 폴더 처럼 보여지도록 뷰를 지정할 수 있습니다. 좌측 프로젝트 트리쪽의 "View Menu" 버튼(아래쪽을 가리키는 삼각형 모양의 아이콘) 을 누르거나 CTRL + F10 키를 눌러 메뉴를 엽니다. "Package Presentation -> Hierarchical" 을 선택합니다. 패키지 표시형식이 계층형으로 변경되었습니다. 2019. 1. 15.
JSTL - <c:forEach>, <c:forTokens> 태그 사용법 는 List, 배열 요소를 순서대로 반복해서 처리할 수 있는 태그 입니다. 1. 이름 목록을 가진 ArrayList를 출력하는 예제 입니다. // 리스트를 만들어서 모델에 넣습니다. List nameList = new ArrayList(Arrays.asList("홍길동", "김철수", "박영희")); model.addAttribute("nameList", nameList); ${status.count} : 실행결과: 1 : 홍길동 2 : 김철수 3 : 박영희 2. 객체가 들어 있는 리스트를 출력하는 방법 입니다. 위 코드는 boardVO 객체의 getTitle() 메소드를 호출한 결과를 출력합니다. 3. Map 이 들어있는 리스트를 출력하는 방법 입니다. 위 코드는 boardMap 의 get("title.. 2019. 1. 11.
JSTL - <c:if>, <c:choose> 태그 사용법 jstl에서 조건에 따른 분기를 처리할 수 있는 태그로 와 가 있습니다. 1. 태그 test 속성내의 EL 의 결과가 참이면 실행됩니다. else 구문은 없습니다. 위의 코드는 변수 name의 값이 "홍길동" 이면 출력합니다. 태그에 사용될 수 있는 속성은 다음 세 가지 입니다. - test : 필수 속성으로 속성값으로 EL 비교식을 가집니다. - var : 조건 결과를 저장할 변수를 지정합니다. - scope : 조건 결과를 저장할 변수의 저장 scope을 지정합니다. 위 코드는 test 속성의 결과를 nameHong 변수 이름으로 session 영역에 저장합니다. 동일 세션의 다른 페이지에서 결과를 찾을 수 있습니다. 2. test속성에 사용될 비교 연산자 * eq(==) : 문자열 또는 숫자가 같으.. 2019. 1. 10.
JSTL - <c:set> 태그 사용법 태그는 EL에서 사용되어질 수 있는 Bean, Map등에 값을 설정을 하거나, 일반 변수를 생성해서 값을 할당 할 수 있습니다. 1. Bean에 값을 할당하는 방법 다음 빈을 예로 들어 보겠습니다. class Board { private String title; public void setTitle(String title) { this.title = title; } public String getTitle() { return title; }} 컨트롤러에서 model객체에 넣어서 JSP 에서 사용할 수 있습니다. model.addAttribute("board", new Board()); JSP에서 위의 Bean의 프로퍼티의 값을 변경하고 싶을 때 다음 처럼 사용합니다. 2. Map을 사용한 경우 model.. 2018. 12. 31.
이클립스 기본 에디터 변경하기 이클립스에서 jsp 파일을 클릭하면 기본 에디터로 Web Page Editor가 열립니다. Web Page Editor의 디자인 모드는 화면 크기만 줄고 별로 소용이 없는것 같습니다. 대부분 JSP 소스만 보고 미리보기는 Tomcat등을 실행해서 웹 브라우저로 보면서 작업을 하니까요. 클릭하면 JSP 에디터가 바로 열리도록 기본 에디터를 변경하는 방법입니다. "Window -> Preferences" 메뉴를 엽니다. "General -> Editors -> File Associations" 를 선택합니다. 오른쪽 File types에서 "*.jsp" 를 선택합니다. 아래의 Associated editors: 를 보면 Web Page Editor가 (default)로 되어 있습니다. JSP Editor를 .. 2018. 12. 30.
이클립스 블록 선택 모드(열 선택 모드) 코딩 작업중 SQL 쿼리나 HTML 태그등 일정한 열을 가지는 경우 사각형 블록 형태로 선택을 하고 편집을 할 수 있느면 편리합니다. 많은 텍스트 에디터들이 이러한 열 편집 기능을 지원합니다. 이클립스도 지원을 합니다. 이클립스에서 그냥 마우스로 드래그 해서 선택을 하면 라인 단위로 선택이 됩니다. 열 단위로 선택을 하기 위해서는 "ALT + SHIFT + A" 키를 눌러 블록 선택 모드로 바꿉니다. 커서가 커다란 십자 모양으로 바뀌고 드래그하면 라인이 아니라 사각형으로 선택이 됩니다. 만약 에디터의 폰트를 변경했다면 블록 선택모드로 바뀔때 폰트가 바뀌기전의 기본 폰트로 되는것을 볼 수 있습니다. 일반 에디터 모드와 블록 선택 모드의 폰트는 따로 설정할 수 있습니다. 모든 행에 동일한 문자를 입력하려면 .. 2018. 12. 27.
유용한 이클립스 단축키 1. CTRL + SHIFT + R : 파일 찾기(Open Resource) 원하는 파일을 찾기 위해서 Project Explorer나 Package Explorer의 트리를 사용해서 찾을 수도 있지만, 폴더와 파일이 많으면 빨리 찾기가 쉽지 않습니다. 파일 이름을 어느정도 알고 있다면 단축기 CTRL + SHIFT + R 키를 눌러 Open Resource 창을 열고 파일 이름의 전부 또는 일부를 타이핑하여 쉽게 원하는 파일을 찾을 수 있습니다. 파일명을 입력할때 대소문자를 구분하지 않습니다. 찾고자하는 파일 이름에 와일드카드 ? 와 * 를 사용할 수 있습니다. ?는 그 자리에 어떤 문자든 한글자가 올 수 있다는 것이고, * 는 어떤 문자열이라도 올 수 있다는 것입니다. 2. CTRL + SHIFT +.. 2018. 12. 27.
Eclipse + Weblogic 개발환경에서 Caused By: java.lang.OutOfMemoryError: PermGen space 오류 Eclipse와 Weblogic을 연동하여 개발하는 도중 소스를 수정 하고 컴파일 하는 과정을 반복하면 메모리 부족(PermGen space) 오류가 발생하고 Weblogic이 죽어 버립니다. 그렇게 되면 대부분 작업관리자에서 java.exe 프로세스를 끝내지 않으면 재시작도 되지 않는 경우가 많습니다. Caused By: java.lang.OutOfMemoryError: PermGen spaceat java.lang.ClassLoader.defineClass1(Native Method)at java.lang.ClassLoader.defineClassCond(ClassLoader.java:631)at java.lang.ClassLoader.defineClass(ClassLoader.java:615)at .. 2018. 12. 21.
jQuery UI Button 사용법 jQuery UI의 버튼 기능을 사용해 봅니다. 1. 필요한 라이브러리를 추가합니다. 2. 기본적인 사용법버튼1버튼2 $(document).ready(function() { $("#btn1").button(); $("#btn2").button();}); 2. 버튼 클릭 이벤트 처리$(document).ready(function() { // 버튼을 생성함과 동시에 이벤트 핸들러를 추가합니다. $("#btn1").button().on("click", function(event) { alert("버튼1이 눌러졌습니다."); }); // 버튼 생성과 이벤트 핸들러 추가를 분리합니다. $("#btn2").button(); $("#btn2").click(function(event) { alert("버튼2가 눌러졌습.. 2018. 12. 13.
FlexItem Properties - Flexible Box Layout(Flexbox) 예전글 "Flexible Box Layout(Flexbox) - Flex Container Properties" 에서 플렉스 컨테이너의 프로퍼티들에 대해서 알아보았습니다. 이번에는 플렉스 컨테이너 내부의 플렉스 아이템이 가지는 플로퍼티들에 대해서 알아봅니다. FlexItem의 프로퍼티는 다음의 여섯가지가 있습니다. 1. order정수를(-,0,+) 값으로 가지며, FlexItem의 순서를 지정할 수 있습니다. FlexItem이 컨테이너에 배치되는 기본 순서는 HTML태그를 추가한 순서가 됩니다. FlexItem의 order 프로퍼티를 사용하면 임의로 순서를 바꿀 수 있습니다. 주의해야 할것은 order는 보이는 순서에만 영향을 주지 탭순서등에는 영향이 없습니다. 2. flex-grow0이상의 실수를 사용.. 2018. 12. 3.

티스토리툴바