HTML form의 입력값 JSON 객체로 변환시키기

    const formToJSON = (elements) => [].reduce.call(elements, (data, element) => {
            data[element.name] = element.value;
            return data;
        },
        {}
    );

    let form = formToJSON(document.querySelector('#event01Form'))
    console.log(form, '\n', JSON.stringify(form));
728x90
반응형

'Language > JavaScript' 카테고리의 다른 글

[JS] 페이지 리로드  (0) 2021.06.07
[JavaScript] url을 a 태그로 변환하기  (0) 2021.01.06
windows 10 NVM 과 nodejs 설치하기  (0) 2020.12.09
[JS] 날짜 비교  (0) 2020.11.11
[Modern JS] 동기 처리를 위한 Async Await  (0) 2020.06.14

페이지 리로드 하는 방법이 필요해서 찾아보다 기록할 할 필요성있는 문제인거 같아서 남겨본다.

일반적인 js로 페이지 리로드 하기

일반적인 html을 리로드 할 때는 location.reload(); 하나면 된다.

frameset reload 하기

삽질은 여기서 시작 됬다.

    <!DOCTYPE HTML>
    <html>
      <head>생략</head>
      <body>
        <frameset>
            <frame name="top" src="~~"/>
            <frame name="sidebar" src="~~"/>
              <frame name="content" src="~~"/>
              <frame name="footer" src="~~"/>
        </frameset>
      </body>
    </html>

frameset 으로 된 페이지의 리로드는 location.reload()로는 가능하지 않다.
각각의 프레임당 location이 다르기 때문.
사실 이 명령도 DOM 구조를 파악하면 쉬운 문제인데, parent.frames.location.reload(); 명령이면 모든 프레임이 리로드 된다.

728x90
반응형

화면을 수정했는데, 클라이언트의 브라우져에 캐시가 남아서 이전 화면이 나오는 경우가 있다.
직접 브라우져 설정 들어가서 캐시를 지워달라고 요청 할 수도 있지만, 그게 한두번이 아니게 되니 코드에서 캐시를 지울수 없는지 찾아보았다.
이럴수가...
크게 어렵지도 않지만, html한정으로 이게 꼭 필요한 화면이 아니면 아래 설정은 가급적 안 하는게 좋을 것 같다.

HTML 메타태그 이용하기

    <!-- 1990년 이후 이 페이지의 캐시를 만료시킴. -->
    <meta http-equiv="Expires" content="Mon, 06 Jan 1990 00:00:01 GMT" />

    <!-- 캐시를 바로 만료시킴. -->
    <meta http-equiv="Expires" content="-1" />

    <!-- 페이지 로드시마다 페이지를 캐싱하지 않음. (HTTP 1.0) -->
    <meta http-equiv="Pragma" content="no-cache" />

    <!-- 페이지 로드시마다 페이지를 캐싱하지 않음. (HTTP 1.1) -->
    <meta http-equiv="Cache-Control" content="no-cache" />

JSP, Java 사용시

자바 코드 지만 html과 같음.

    response.setHeader( "Pragma", "no-cache" );
    response.setDateHeader( "Expires", -1 );
    response.setHeader( "Cache-Control", "no-cache" );

JS, CSS 파일 캐시 사용 방지

js나 css등 정적파일도 종종 변경을 해도 캐시문제로 적용이 되지 않는 경우가 많다.
그럴 경우 파일의 url 뒤에 ?timestamp 형태를 넣어준다.

  <link rel="stylesheet" href="/css/common.css?20210512" />
  <script type="text/javascript" src="/js/common.js?20210512"></script>

728x90
반응형

'WEB > JSP, JSTL' 카테고리의 다른 글

[JSP, JSTL] fn function 정리 - 2  (0) 2020.12.11
[JSP, JSTL] fn function 정리  (0) 2020.11.30
[JSP, JSTL] forEach 잘 사용하기  (0) 2020.11.30

아래 정규표현식은 html 태그를 제거하기 위한 식으로 모든 태그를 제거함.
html 태그가 포함된 src라는 문자열에서 <tag></tag>를 '' 빈 문자열로 치환해 줌.

  const extractTextPattern = /(<([^>]+)>)/gi;

 

모든 태그 제거하기

  <div id="target">
    <h1>This Content is target</h1>
    <span>to replace</span>
    .
  </div>

아래 코드로 위의 #target 엘리먼트를 innerHTML을 통해 하위 모든 문자열을 불러온 후 담은 태그들을 제거할 것임.

  let target = document.getElementById('target');

  let src = target.innerHTML;
  console.log( src );
  /**
   * ->
   * <h1>This Content is target</h1>
   * <span>to replace</span>
   * .
   */
  let extractedText = src.replace(extractTextPattern, '');
  console.log( extractedText );
  /**
   * ->
   * This Content is target
   * to replace
   * .
   */

모든 태그 요소가 제거되어 안의 텍스트만 꺼낼 수 있음.

 

원하는 태그만 제거하는 방법

모든 태그가 아닌 내가 원하는 태그만 선택하여 제거하는 방법도 있음.
h1 태그만 없애고 싶다면, 다음 패턴을 사용하면 됨.

  const extractSpanPattern = /<(\/h1|h1)([^>]*)>/gi;

  let eraseSpan = src.replace(extractSpanPattern, '');
  console.log( eraseSpan );
  /**
   * ->
   * This Content is target
   * <span>to replace</span>
   * .
   */

 

script 태그와 javascript 소스까지 제거하는 패턴

종종 script 태그와 js 소스까지 지워야 하는 경우도 있음.
이럴 경우에는 패턴을 다음과 같이 사용하면 됨.

  const jsPttrn = /<script[^>]*>((\n|\r|.)*?)<\/script>/gim;

참고로 css 태그와 css 소스까지 지우고 싶다면,

  const cssPttrn = /<style[^>]*>((\n|\r|.)*?)<\/style>/gim;

 

플래그를 사용한 정규표현식 고급 사용법

정규 표현식은 여섯 개의 옵션이 있음. 이를 통해 전역 검색 또는 대소문자 구분 없는 검색등을 할 수 있음.

options description
g 전역검색. 종종 g 옵션을 몰라서 replaceAll이라는 함수를 새로 만들어 사용한 코드도 있음.
i 대소문자 구분 없는 검색
m 다중행 (multiline) 검색
s . 에 개항 문자 매칭 (ES2018)
u 패턴을 유니코드 코드 포인트의 나열로 취급합.
y 'sticky' 검색 수횅. 문자열의 현재 위치부터 검색을 수행함.
728x90
반응형

url을 a 태그로 변환하기

딱히 좋은 방법은 아닌거 같긴 한데 급할때는 최선인듯 하다.

    function parseUrl(orgnTxt) {
      var rplcdTxt, rplcdPttrn1, rplcdPttrn2, rplcdPttrn3;

      //  http://, https://로 url이 시작한다면.
      rplcdPttrn1 = /(\b(https?):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
      rplcdTxt = orgnTxt.replace(rplcdPttrn1, '<a href="$1" target="_blank">$1</a>');
      console.info('rplcdTxt : ', rplcdTxt);

      //  http?없이 www로 시작한다면.
      rplcdPttrn2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
      rplcdTxt = rplcdTxt.replace(rplcdPttrn2, '$1<a href="http://$2" target="_blank">$2</a>');
      console.info('rplcdTxt : ', rplcdTxt);

      //  메일 주소일 경우
      rplcdPttrn3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
      rplcdTxt = rplcdTxt.replace(rplcdPttrn3, '<a href="mailto:$1">$1</a>');
      console.info('rplcdTxt : ', rplcdTxt);

      return rplcdTxt;
    }
728x90
반응형

'Language > JavaScript' 카테고리의 다른 글

[javascript] HTML form to JSON object  (0) 2022.08.08
[JS] 페이지 리로드  (0) 2021.06.07
windows 10 NVM 과 nodejs 설치하기  (0) 2020.12.09
[JS] 날짜 비교  (0) 2020.11.11
[Modern JS] 동기 처리를 위한 Async Await  (0) 2020.06.14

Arrow Function

화살표 함수는 function 키워드 대신 => 를 사용하여 보다 간락한 방법으로 함수를 선언할 수 있다.

Arrow Function의 선언

  // 매개변수 지정 방법
  // 매개변수가 없을 경우
      () => { ... }
  // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
      x => { ... }
  // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.
  (x, y) => { ... }

  // 함수 몸체 지정 방법
  // single line block
  // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다.
  x => { return x * x }
  x => x * x

  //  객체를 반환하는 경우. 소괄호를 사용한다.
  () => { return { a: 1 }; }
  () => ({ a: 1 })

  // multi line block.
  () => {
    const x = 10;
    return x * x;
  };

Arrow Function과 callback

화살표 함수가 기존의 function키워드를 완전히 대신할 수는 없지만, callback 함수에서 사용하면 간결하게 사용 가능하다.

02.js

  const nums = [1, 2, 3, 4, 5,];

  const oddNums = nums.filter(n => n % 2);

  console.log(oddNums);

Arrow Function과 this

Arrow Function은 자신을 포함하는 외부 scope에서 this를 계승 받는다.

  function That() {
    this.name = 'ASDF';

    setTimeout(function () {
      console.log(this.name);
    }, 1000);

    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }

  That();
728x90
반응형

OpenLayers를 사용해서 HTML상에 지도를 띄우는 방법.

1. OpenLayers JS 파일과 CSS파일을 Include 한다.

<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">

선택 사항으로, 만약 지도가 IE나 안드로이드 v4 환경에서 보여지길 원한다면, OpenLayers script를 Include 하기전에 다음 파일을 Include해 준다.

<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>

2. 지도가 들어갈 div를 만들어 준다. 

<div id="map" class="map"></div>

3. 화면에 보여질 지도의 크기를 CSS로 지정해 준다.

  <style>
    .map {
      height: 400px;
      width: 100%;
    }
  </style>

4. javascript로 지도를 띄워준다.

  let map = new ol.Map({
    target: 'map',
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM({
          url: 'https://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png'
        })
      })
    ],
    view: new ol.View({
      center: ol.proj.fromLonLat([128.4, 35.7]),
      zoom: 7
    })
  });

5. 결과 화면.

 

 

 

 

 

 

6. JS 코드 분석.

 - OpenLayers Map 객체를 불러 온다.

let map = new ol.Map({ ... });

 - 지도 객체를 <div>에 연결 하기 위한 설정이다. target의 인자로 <div>의 id값을 지정해 준다.

    target: 'map'

 - layers : [ ... ] 배열은 지도에 사용하는 레이어의 목록을 정의하는 리스트다. 
기본적으로 Tile 레이어를 사용한다.

    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      })
    ]

OpenLayers에서 레이어는 소스를 포함하는 유형(벡터, 이미지, 타일)으로 정의된다.

 - View는 지도가 보여줄 중심좌표, 축척, 회전을 지정할 수 있다. 
(기본적인 지도는 축척과 중심좌표만 설정한다)

    view: new ol.View({
      center: ol.proj.fromLonLat([128.4, 35.7]),
      zoom: 7
    })

 

전체 코드 보기 :

https://github.com/JeahaOh/OpenLayersStudy/tree/master/05%20Revision%20OL/01%20Map

 

JeahaOh/OpenLayersStudy

Open Layers JS 5.3 버전을 학습해 보자. Contribute to JeahaOh/OpenLayersStudy development by creating an account on GitHub.

github.com

원본 :

https://openlayers.org/en/latest/doc/quickstart.html

728x90
반응형

'ETC > GIS' 카테고리의 다른 글

좌표계 간략 정리  (0) 2019.11.22
[OpenLayers] 마우스 커서 위치에 대한 지도 좌표 보기  (0) 2019.11.15

+ Recent posts