너굴의 개발주니어에서 시니어되기

항상 아이콘을 사용하기 위해서는 퍼블리셔에게 매번 요청하고 그 답답함을 해소 하기 위해 내가 찾아 보기로 했다.

알고보면 의외로 간단하게 추가하고 CSS에서 사용 할 수 있다.

1.

https://icomoon.io/ 접속  - 상단 IconMoon App 클릭

2. 다음 화면에서 우선 Icon Library 를 클릭 하고 나오는 아이콘 라이브러리에서 추가하고 싶은 아이콘 라이브러리의 'Add' 버튼 클릭 

 - 다만 Purchase 버튼이 나오는 곳은 따로 구매를 해야 된다.

3. add 추가한 뒤 아이콘 라이브러리에서 사용하고자 하는 아이콘을 클릭 하여 선택 한다.

4. 선택 한 뒤 화면 하단에 font 부분을 누르게 되면 내가 선택 한 아이콘들로 구성 된 설정 페이지를 볼수 있다.

해당 화면의 상단 'Perferences'를 클릭 하면 font 의 이름, 클래스 앞 확장자, ie 지원 등 을 설정 할 수 있다.

모든 설정을 다 마친 후에는 font 밑 Download 버튼을 클릭 하여 다운 받는다.

5. 다운 받은 파일을 확인 해보면 

    - demo.html -> 이전 config 화면 

    - style.css -> 아이콘에 대한 정의가 된 css

    - fonts 폴더 -> 아이콘 사용에 필요한 폰트(우리는 아이콘들을 하나의 폰트로 저장을 한 것)

이후 단계에서는 

fonts, css 파일을 가져다가 사용할수도, css 파일 내의 값만 기존에 사용 중인 css 파일에 넣어서 사용 하는 등으로 사용 할 수 있다.

사용 방법을 간단히 demo.html 에서 파악을 하면 

<span class = "i-home">

<a href="#" class = "i-home"> 

등으로 클래스에 css에 설정된 아이콘의 클래스 명을 넣으므로써 사용 할 수가 있다.

<textarea>

<text>태그와 같은 기능을 수행하지만 

<input type='text'>, <text>는 한 줄의 텍스트를 입력 받게 된다.

반면

<textarea> 의 경우 여러 줄의 text 값을 입력 받을 때 사용하게 되는 텍스트 박스이다.

<textarea> 내의 엔터가 포함 된 text를 입력 하게 되고 해당 값을 자바스크립트 등으로 값을 출력해보면 

아래의 그림 처럼 값을 얻을수 있다.

- 화면 textarea 입력 화면

- jquery를 이용하여 textarea 값을 확인 

- textarea의 값을 자바 단에서 받은 값 

보통 우리는 화면에서 textarea의 값을 jquery를 이용하여 값을 가져오고 ajax를 통해 자바단(controller) 로 값을 던지게 된다.

이를 DB에 저장하고 추루 이 값을 그대로 출력했을때는 아래의 그림 처럼 엔터값(줄바꿈) 이 적용 안되는 것을 볼 수 있다.

이는 TEXTAREA의 값은 TEXT 값이고 이 안에서 엔터(줄바꿈) 값은 \n 으로 표현된다.

이를 <br> 로 치환하여 db 저장 하면 출력시 아래의 화면 같이 줄바꿈이 적용되어 표현이 된다.

하지만 아래 그림처럼 해당 값을 수정해야 될 경우가 있을 때는 아래처럼 줄바꿈을 나타내는 <br> 이 text로 표현 되어 나오게 된다.

이러한 경우를 다 고려 했을 때 다음과 같이 2가지 방법을 사용 할 수 있다.

1, textarea 값을 DB 저장 후 수정이 가능 할 경우 

textarea 값을 치환 없이 DB 저장 -> 수정 시에는 그대로 값을 출력,  단순 값 출력일 경우 '\n'을 <br> 태그로 수정하여 출력

2. textarea 값을 DB 저장 후 단순 출력 만 할 경우

textarea 값의 엔터값(줄바꿈) '\n' 을 <br> 로 치환 하여 DB 저장 -> 후에 DB 값 그대로 출력

load의 정의

웹 페이지의 내용을 동적으로 교체하기 위해서 Ajax로 서버에서 데이터 json 형식으로 받아 HTML 요소를 생성하여 페이지내의 원하는 위치의 

내용을 바꾸는 작업을 많이 합니다. jQuery의 .load() 메소드는 주어진 URL로부터 HTML 데이트를 받에서 jQuery 셀력터로 선택된 위에에 넣어 줌으로써 동적으로 페이지의 내용을 교체하는 작업을 간단하게 처리할 수 있도록 해줍니다.

출처: https://offbyone.tistory.com/235 [쉬고 싶은 개발자]

적용 사래 

한 페이지에서 댓글을 입력, 수정, 삭제 등의 작업을 한다. 

첫 구현은 ajax 후 페이지 리로드 되도록 작업 

$.post(url, dataParam, function (result) {
    if (result.resultCode === 'success') {
        alert("댓글 삭제 완료");
        location.reload();
    }
    else {
        alert("댓글 삭제 실패");
    }
})

하지만 댓글의 경우 작업 하나하나마다 페이지가 리로드 되면 사용성이 현저하게 떨어지기에 해당 페이지에서 댓글 작업 이후에는 댓글 부분만 변경 되도록 수정

댓글 관련 부분을 언제나 동적으로 가져와야 되기에 따로 jsp 파일로 빼놓고 필요한 곳에서 include 시킴

<div id="comment_container">
    <jsp:include page="comment.jsp"/>
</div>

댓글 입력, 삭제, 수정 등의 작업 ajax 에서 success 리턴 값을 받으면 댓글을 새로 조회하는 url을 호출 한다. 

여기서 comment_container 라는 div 안의 내용을 댓글을 조회하는 url에서 리턴 해주는 값으로 교체한다는 

load 함수를 사용한다.

$.post(url, dataParam, function (result) {
    if (result.resultCode === 'success') {
        alert("댓글 입력");
        var url = "/echoline/reloadComment?requestNo=" + $('#click-requestNo').val() + "&requestIndex=" + $('#requestIndex').val() + "&status=" + $('#status').val();
        $('#comment_container').load(url);


    }
    else {
        alert("회원가입 실패");
    }
})

load 함수의 파라미터 정의

Query .load() 메소드 사용법은 다음과 같습니다. 세 가지 인자를 가질 수 있습니다.

.load( url [, data ] [, complete ] )    반환값: jQuery

- url : 데이터를 받을 URL을 나타내는 문자열입니다.

- data : 선택적인 인자로 URL 로 요청을 보낼 때 같이 보낼 데이터로 자바스크립트 객체 또는 문자열 입니다.

- complete : 요청이 완료되면 호출되어질 콜백함수 입니다. Function( String responseText, String textStatus, jqXHR jqXHR )

출처: https://offbyone.tistory.com/235 [쉬고 싶은 개발자]