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

1. html에서 숫자 계산을 하려면 어떻게??

  

1.           
   <c:set var="eachAmount" value="${taxItems.itemUntpcSm}"/>

2. <input type="hidden" class="eachAmount" value="${eachAmount}"/>

3. <span id="totalPrice">0</span>

4. 스크립트는 아래를 참조

• <script>
•  
  var totalPrice = 0;

• $(function() {
  
  
      // 공급가액, 부가세, 합계 자동 계산 
      $(".priceAmount").each(function(index, element) {
          var eachPriceAmount = Number($(element).val());
          totalPrice += eachPriceAmount;
  
  
      });
      $(".taxAmount").each(function(index, element) {
          var eachTaxAmount = Number($(element).val());
          totalTax += eachTaxAmount;
      });
  
  
      totalAmount = totalPrice + totalTax;
  
  
      $("#totalPrice").text(comma(totalPrice));
      $("#totalTax").text(comma(totalTax));
      $("#totalAmount").text(comma(totalAmount));
  
  
      if (originalAmount != 0) {
          totalPrice = Math.round(originalAmount);
          totalTax = Math.round(originalAmount * 0.1);
          totalAmount = totalPrice + totalTax;
  
  
          $("#totalPrice").text(comma(totalPrice));
          $("#totalTax").text(comma(totalTax));
          $("#totalAmount").text(comma(totalAmount));
      }

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

알고보면 의외로 간단하게 추가하고 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에 설정된 아이콘의 클래스 명을 넣으므로써 사용 할 수가 있다.

mysql

1. round(x)

  - x의 값을 반올림 한 값을 리턴한다.

2. round(x, a)

 - x의 값을 반올림 한 값을 a자리까지 리턴한다.

3. truncate(x, a)

 - x의 값을 소수점 아래 a자리까지만 리턴

ORACLE

1. round(x, a)

 - x의 값을 반올림 한 값을 a자리까지 리턴한다.

2. trunc(x, a)

 - x의 값을 소수점 아래 a자리까지만 리턴

1. 자바스크립트 내에서 2진수로 계산을 하기때문에 단순계산으로는 잘못된 결과를 리턴하게 된다.

하지만 보통 우리가 이렇게 언제나 정해진 값을 함수에 사용하진 않는다.

아래의 함수는 사용자에게 입력 받은 계획 공수를 더해서 총 계획 공수를 구하는함수이다.

/*계획공수 계산*/
var calcPlanWorkTime = function () {
    var planWorkTime = $('td[name=planWorkTime]');
    var count = 0;

    for (var i = 0; i < planWorkTime.length; i++) {
        console.log(parseFloat($(planWorkTime[i]).html()));
        count += parseFloat($(planWorkTime[i]).html());
    }

    $('#totalPlanWorkTime').html(count);

};

단순한 덧셈식이라면 아래처럼 +를 해주면 되고

곱셈식 혹은 나눗셈 식이라면 위의 형식으로

count =  (((parseFloat(x)*10)*count)/10))  

로 계산 하면 정확한 계산 값을 얻을 수가 있다.

1. var ckeditor_config = {
2.   resize_enabled : false, // 에디터 리사이즈 여부
3.   autoUpdateElement : true, // 자동 textarea 업데이트 여부 (안됨)
4.   enterMode : CKEDITOR.ENTER_BR , // 에디터 엔터 <br/> 사용
5.   shiftEnterMode : CKEDITOR.ENTER_P , // 에디터 시프트 + 엔터 <br/> 사용
6.   toolbarCanCollapse : true , // 에디터 툴바 숨기기 기능 여부
7.   extraPlugins : "tableresize" , // 에디터의 플러그인을 추가할 경우 이름 입력 ( 테이블 리사이즈 플러그인을 내려 받아야함.)
8.   removePlugins : "elementspath", // 에디터의 플러그인을 사용하지 않을 경우 이름 입력 ( 에디터 하단 상태바에 태그를 표시하는 플러그인)
9.  
10.   // 에디터 툴바를 설정함.
11.   toolbar : [
12.     [ 'Source', '-' , 'NewPage', 'Preview' ],
13.     [ 'Cut', 'Copy', 'Paste', 'PasteText', '-', 'Undo', 'Redo' ],
14.     [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'],
15.     [ 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock' ],
16.     '/',
17.     [ 'Styles', 'Format', 'Font', 'FontSize' ],
18.     [ 'TextColor', 'BGColor' ],
19.     [ 'Image', 'Flash', 'Table' , 'SpecialChar' , 'Link', 'Unlink']
20.    
21.   ]
22.  
23. };
24.  
25. var editor = [ ];
26.  
27. // id 엘리먼트를 입력할 때 중복되는 id 명이 없어야 한다.
28. /*
29. CKEDITOR.replace( "content" , ckeditor_config ).on('key', function () {
30.   // 에디터에 값이 입력될때마다 textarea 에 업데이트한다. 하지 않을 경우 textarea 의 value 값을 알 수 없다.
31.   this.updateElement();
32. });
33. */
34.  
35. // [2013.06.20] 위방법은 문제가 있는 듯 하여~ 아래와 같이 한다.
36. editor[1] = CKEDITOR.replace( "content" , ckeditor_config );
37.  
38. // submit 이나 ajax 전송할때 같이 입력해준다.
39. editor[1].updateElement();

자바에서는 javamail 클래스를 통해 메일을 보낼수가 있다.

spring 환경에서 환경 설정을 잡고 간다

applicationConext.xml

<bean id="mailSender" class="org.springframework.mail.javamail.JavaMailSenderImpl">
    <property name="host" value="xx.xx.xx.xx"/>
    <property name="port" value="xxx"/>
    <property name="defaultEncoding" value="utf-8"/>
    <property name="username" value="윈도우서버 계정"/>
    <property name="password" value="윈도우서버 계정 비밀번호"/>
    <property name="javaMailProperties">
        <props>
            <prop key="mail.smtp.ssl.trust">xx.xx.xx.xx(호스트랑 동일하게)</prop>
            <prop key="mail.smtp.starttls.enable">true</prop>
            <prop key="mail.smtp.auth">true</prop>
            <prop key="mail.debug">true</prop>
        </props>
    </property>
</bean>

gmail 을 사용하는 경우 아래와 같이 설정 하면 된다

host : smtp.gmail.com

port : 587

username : 구글 이메일

password : 구글 패스워드

mail.smtp.ssl.trust : smtp.gmail.com

하지만 나는 윈도우 서버에서 구축한 smtp를 사용 하기에 위와 같이 설정 하였다. 

smtp 서버가 구축된 서버에서 해당 어플을 구동 할 경우는 localhost로 해도 무방하다

또한 위의 환경 설정 작업은 java 파일 내에서도 따로 설정이 가능하다

다음으로 mailSender를 구현한 자바 소스다 

public class mailSend {

    private final Logger logger = LoggerFactory.getLogger(this.getClass());

    @Resource(name="velocityEngine")
    VelocityEngine velocityEngine;

    @Autowired
    JavaMailSenderImpl mailSender;

    public void MailSet(String contentType, Map<String, Object> mailParam) {
        //MimeMessage생성
        try {
            MimeMessage msg = mailSender.createMimeMessage();
            MimeMessageHelper helper = new MimeMessageHelper(msg,"UTF-8");

            // 편지보낸시간 설정
            helper.setSentDate(new Date());

            // 송신자 설정
            helper.setFrom("이메일 주소");

            // 수신자 설정
            mailParam.put("sendTos", sendTos);
            if(!ObjectUtils.isEmpty(mailParam.get("sendTos"))) {
                helper.setTo((String[]) mailParam.get("sendTos"));
            }
            //cc 설정
            if(!ObjectUtils.isEmpty(mailParam.get("sendCCs"))) {

               helper.setCc("이메일 주소");
            }
            // 제목 설정
            helper.setSubject((String) mailParam.get("subject"));

            //내용 설정
            String content = VelocityEngineUtils.mergeTemplateIntoString(velocityEngine, "/template/"+contentType+".vm","UTF-8", mailParam);
            helper.setText(content, true);

            // 메일 송신
            mailSender.send(msg);

            logger.info("메일 발송을 완료 하였습니다.");


        } catch (Exception e) {  //예외처리 주소를 입력하지 않을 경우
            logger.error(e.getMessage());
        }

    }
}

MailSet 함수를 호출 하는 곳에서 각 각 상황에 맞는 이메일 제목, 메일본문 템플릿, 송신자, 수신자, 참조자의 값을 넣어서 호출 한다.

메일 템플릿은 velocity를 사용하였다. 최근에는 많이 이용하지 않는 템플릿이지만..... 

찾아보면 Gmail 등으로 설정된 부분은 많지만 windows smtp 를 사용 하는 경우의 포스팅은 못본것 같아서 정리 하였다.

자바에서 배열은 동적으로 사이즈를 조절 할 수 없으니 상당히 애를 먹게 된다.

이번에도 크기를 고정할 수 없는 두개의 배열을 한개의 배열로 합치는 것에 대해서 검색 후 기록으로 남긴다.

자바에서 기본적으로 제공 하는 System 내 arraycopy 함수를 사용한다.

실제 사용한 소스는 다음과 같다.

Tos1 과 Tos2 는 DB에서 리턴 되는 값에 따라 크기가 결정되고 배열이 만들어진다.

그 후 하나로 합칠 배열 Tos 는 Tos1과 Tos2의 크기를 합친 만큼의 배열로 만든뒤 

arraycopy 함수를 써서 두개의 배열을 합친다.

String[] Tos1 = userMgrService.getUserType3Mail(pramMap);
String[] Tos2 = userMgrService.getPerinchaMail(pramMap);
String[] Tos = new String[Tos1.length + Tos2.length];
System.arraycopy(Tos1,0,Tos,0,Tos1.length);
System.arraycopy(Tos2,0,Tos,Tos1.length,Tos2.length);

arraycopy 함수의 요소는 다음과 같다

2. System.arraycopy() 요소

Object src : 복사하고자 하는 소스입니다. 원본이라고 생각하면 됩니다.

int srcPos : 위의 소스에서 어느 부분부터 읽어올지 위치를 정해줍니다.

Object dest : 원본이 있다면 복사본이 있어야겠지요. 복사하려는 대상입니다.

int destPos : 위의 dest에서 자료를 받을 때, 어느 부분부터 쓸지 시작 위치를 정해줍니다.

int length : 원본에서 복사본까지 얼마큼 읽어 올지 입력하는 것 입니다.

간단하게 앞의 2개는 src(원본)에 관한 것이고, 그 뒤에 2개는 dest(복사본), 마지막으로 length는 가져올 길이라고 생각하면 됩니다.

출처 : http://forum.falinux.com/zbxe/index.php?document_srl=571358&mid=lecture_tip

위지윅 에디터들은 보통 내장 함수로 에디터에 작성한 내용을 가져올수가 있다. (ex setData())

하지만 이렇게 가져온 값이 TEXT 만 가져오는 것이 아닌 위지윅에서 자동으로 만든 HTML 형식으로 가져오는 경우도 발생하게 된다

예를 들면 ckeditor4가 그러하다 

내가 필요한 것은 에디터 내에 작성한 내용 중 태그들을 제외한 text들만 가져오고 싶고 에디터 내에서 그러한 함수를 제공하지 않는다면 

정규식을 이용하여 TEXT만 출력 하도록 할 수가 있다.

replace 함수를 이용하여 태그 형식으로 된 문자열을 모두 삭제하는 방식이다.

var editorContent = CKEDITOR.instances.editor.getData();
var convertContent = editorContent.replace(/(<([^>]+)>)/ig,"");
console.log(newText);
console.log(newText.length);

그 결과는 아래 그림 처럼 나오게 된다.

추가적으로 특정 태그만 제거를 하고 싶으 시에는 

정규화식을 다음과 같이 바꿔주면 된다.

var convertDivContent = editorContent.replace(/<(\/div|div)([^>]*)>/gi,"");

해당 자료는 https://webisfree.com/ 를 참조 하였습니다.