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

$('html').scrollTop(0);

페이징 후에 화면을 맨 위로 즉 상단으로 올릴수 있다.

1. 인텔리J 설정

  - Settings -> Build, Execution, Deployment -> Compiler 클릭

   - 상세 화면 내 Build project automatically 체크  확인

  - Registry 값 변경 (Search Everywhere로 'Registry' 검색, 혹은 Ctrl+Alt+Shift+/ )

 compiler.automake.allow.when.app.running 레지스트리 값을 체크 V

2. Spring-boot-devtools 의존성 추가

- Maven

   pom.xml 파일 내 추가

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-devtools</artifactId>
    <scope>runtime</scope>
</dependency>

- Gradle 

   build.gradle 파일 내 추가

compile('org.springframework.boot:spring-boot-devtools')

3. 프로퍼티 설정 값 추가 (application.properties or application.yml) 

spring.devtools.livereload.enabled=true
spring.devtools.restart.enabled=true
spring.thymeleaf.cache=false

참고 : http://lhb0517.tistory.com/entry/SpringIntelliJ-SpringBoot-HotSwap-with-IntelliJ

가령 a 태그, button을 페이지 로딩 후에 강제로 클릭 되었으면 하는 경우가 있다.

이때는 jquery의 trriger 함수를 이요하면 된다.

다만 a 태그의 경우 위와 같이 사용할 경우 적용이 되지 않는다.

a태그의 경우 아래와 같이 변경하여 사용한다.

위와 같은 코드처럼 우리는 jquery를 이용하여 해당 객체를 가져오고 가져온 객체에 val()함수를 사용해서 값을 가져오는 식으로 많이 사용한다.

하지만 $를 이용하여 객체를 가져오는 경우 즉 $()를 사용하는건 함수를 사용하는 것인 것을 잘 알지 못한다

즉 $('#checkvalue').val()즉를 두번 사용한 경우 함수를 두번 호출한 경우고 잦은 함수 호출은 성능에 영향을 끼치게 된다.

위처럼 jquery변수에 한번 값을 불러온 뒤 jquery변수를 계속 해서 사용하는 것이 좋은 방법이다.

jquery는 자바스크립트를 빠르고 간단하게 사용 할 수 있다는 장점을 가지고 있지만,

반대로 jquery 내부적으로 그만큼 많은 작업을 수행하고 있다는 점에서 자바스크립트만 사용한 것보다 약 10배 이상은 느리다는 단점이 있다.

jquery 뿐만 아니라 javascript를 사용할 때도 

예를 들어 반복문을 사용할 때 

반복문을 실행할 lenght도 변수에 넣어서 사용해야 올바른 사용 법이다.

해당 자료는 블로그 https://www.zerocho.com/category/jQuery/post/57c3a8821efc521700a70918

의 자료를 기초로 제작 하였습니다.

우리가 사용하는 Jquery 는 사실 상당히 느리고 브라우저에 과부하를 줄 수 있는 라이브러리다.

사실 이런 사실을 모른체 편하다는 이유로 계속 사용하였고, append()를 사용 할 때도 시간이나 성능 등을 생각지 않고 사용하였다.

append를 그냥 사용하는 것은 성능에 매우 부담이 가는 작업이다. 

아래와 같은 작업을 수행할때 브라우저는 array 크기에 맞춰 3번을 페이지를 새로 그려야 하는 작업을 수행하게 된다.

array 크기가 동적으로 늘어나 수천개가 되면 브라우저에 엄청난 성능저하를 가져오게 된다.

이때 사용할 수 있는게 jquery의 documentFragement이다.

$frag 라는 이름의 가상 메모리 공간을 만들고, 그 안에 append를 할 경우 브라우저 성능에는 지장을 주지않게 된다.

그렇게 몇번, 몇천번 append 작업을 거친 뒤 만들어진 $frag 를 우리는 원하는 test1 div 에 한번만 append 하게 되면 된다.

해당 작업은 평소 개발하면서 append 함수를 많이 사용하는데 위의 잘못된 방식으로 개발을 해오고 있어

고찰 하고자 블로그로 작성하게되었다.

해당 내용은 아래의 블로그 내용을 참조로 작성하였습니다.

https://www.zerocho.com/category/jQuery/post/57c3a8821efc521700a70918

위와 같이 사용하면 value 에 설정한 값을 가져올수 있다. 

만약

value 의 값을 따로 설정 하지 않을시 체크를 하지 않으면 'undefined'가 뜨게 되고

체크를 하였다면 'on' 이라는 값을 출력하게 된다.

또한 

라디오버튼, 체크박스의 체크 여부를 확인하기 위해서는 아래와 같이 사용하면 된다.

위지윅 에디터에서의 값을 저장 하기 위해 필드 타입을 TEXT 로 하였다.

하지만 에러가 발생하였고, 원인 분석 결과 

스크린샷을 그대로 복사해서 에디터에 붙여 넣게 되고, 그렇게 되면 스크린샷 그림 파일을 바이너리 형식 코드로 전부 변환해서 에디터에 붙여넣게 되고 그 길이는 그림파일의 크기랑 동일 시 된다.

애당초 에디터의 이미지 첨부 기능을 만들어놓았지만... 유저의 경우 아니 나라도 보통 복사 붙여넣기를 하지 이미지 첨부는 잘 하지 않게 된다. 

상황은 그러해서 TEXT 형식에 대해서 알아보기로 하였다.

TEXT 의 종류 다음과 같이 4종류가 있고

그 크기에 따라 구분이된다. 상황에 따라 구분하여 사용하면 되겠지만 아직 까지 TEXT 이상의 필드를 사용하는 것을 본적은 없다.

출처: http://sjpison.tistory.com/119 [비손의 블로그]

추가적으로 ORACLE에서는 CLOB을 사용했었는데 추가적으로 알아보자

https://docs.oracle.com/en/database/oracle/oracle-database/18/sqlrf/Data-Types.html#GUID-4570CDFD-8F91-44B9-BE7F-13076AA2AEBF

오라클 공식 문서를 확인해보면 

LOB 이라는 필드를 제공하며 이는 큰데이터를 담을 수 있다.

상황에 따라  CLOB, BLOB, NLOB 3가지로 사용 할 수 있으며 각 각의 

CLOB :  간단히 2기가 이하의 문자열을 저장에 적합

A CLOB (character large object) value can be up to 2,147,483,647 characters long. A CLOB is used to store unicode character-based data, such as large documents in any character set.

BLOB : 2기가 이하의 바이너리 코드 저장 에 적합

A BLOB (binary large object) is a varying-length binary string that can be up to 2,147,483,647 characters long. Like other binary types, BLOB strings are not associated with a code page. In addition, BLOB strings do not hold character data.

NLOB : 4기가 이하의 유니코드 저장에 적합

The NCLOB data type stores Unicode data. Both fixed-width and variable-width character sets are supported, and both use the national character set. NCLOB objects can store up to (4 gigabytes -1) * (the value of the CHUNK parameter of LOB storage) of character text data. 

참조

https://docs.oracle.com/javadb/10.8.3.0/ref/

https://docs.oracle.com/en/database/oracle/oracle-database/18/sqlrf/Data-Types.html#GUID-4570CDFD-8F91-44B9-BE7F-13076AA2AEBF

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));
      }