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
반응형

# HTML에 GitHub Contribution Calendar 삽입하는 방법.

<!-- Prepare a container for your calendar. -->
<script src="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.min.js"></script>

<!-- Optionally, include the theme (if you don't want to struggle to write the CSS) -->
<link rel="stylesheet" href="https://cdn.rawgit.com/IonicaBizau/github-calendar/gh-pages/dist/github-calendar.css"/>

<!-- Prepare a container for your calendar. -->
<div class="calendar">
    <!-- Loading stuff -->
    Loading the data just for you.
</div>

<script>
    new GitHubCalendar(".calendar", "your-username");
</script>

이 소스코드에서 `"your-usernamne"`부분에 github 이름을 넣어준다.

결과는 내 블로그 하단에...

728x90
반응형

+ Recent posts