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

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

windows 10 NVM 과 nodejs 설치하기

nvm은 Node Version Manager의 약자로, node.js 버전이 다른 개발환경을 필요로 할경우 해당 버전의 설치를 지원하여 사용할 버전을 선택할 수 있도록 도와줌.

OS 환경

  • Windows 10

NVM 설치

PS C:\Users\jeaha> nvm version
1.1.7

nodejs 설치

  • nvm이 설치 되었다면, 필요로 하는 nodejs 의 버전을 확인한다.
    • nodejs & npm 버전 확인
  • 설치할 버전을 확인 했다면 cmd에서 다음 명령으로 설치하면 된다.
nvm install v{버전}
  • 여기까지 하면 nodejs를 사용할 준비가 되었지만, 어떤 버전을 사용할지 설정하지 않은 상태이다.
  • nvm use {버젼} 명령으로 사용 버전을 지정 해 줘야 한다.
  • 설정한 node/npm 버전 확인
PS C:\Users\jeaha> nvm use 14.15.1
Now using node v14.15.1 (64-bit)

PS C:\Users\jeaha> nvm ls

  * 14.15.1 (Currently using 64-bit executable)

PS C:\Users\jeaha> node -v
v14.15.1

PS C:\Users\jeaha> npm -v
6.14.8
728x90
반응형

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

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

급하게 기록하는 날짜 비교 코드.

다음에 다시 정리 하도록.

//  yyyyMMdd 형식의 8자리 문자열을 date로 변환.
function parseDate(seed) {
    seed = String( seed );
    var y = seed.substr(0, 4);
    var m = seed.substr(4, 2);
    var d = seed.substr(6, 2);
    return new Date(y,m-1,d);
}

//  yyyyMMdd 형식의 8자리 문자열이 14일 전인지 비교
function compareIsTwoWeeksAgo( cmprDate ) {
    var twoWeeksAgo = new Date();
    twoWeeksAgo.setDate(twoWeeksAgo.getDate() - 14 );
    return twoWeeksAgo > cmprDate;
}

window.onload = function(){
    $('.board_item').get().forEach( function(item, idx){
        // console.log( item )
        let ymd = $(item).data('ymd')
        if( ymd == undefined ) return true;
        ymd = parseDate( ymd );

        if( !compareIsTwoWeeksAgo(ymd) ) {
            $(item).addClass('new');
        }
    });
};
728x90
반응형

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

[JavaScript] url을 a 태그로 변환하기  (0) 2021.01.06
windows 10 NVM 과 nodejs 설치하기  (0) 2020.12.09
[Modern JS] 동기 처리를 위한 Async Await  (0) 2020.06.14
[Modern JS] Promise  (0) 2020.06.14
[Modern JS] spread 와 rest  (0) 2020.06.14

Async / Await

async와 await

01.js

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function progress() {
  console.log("HI HI");
  await delay(1000);
  console.log("BYE");
}

progress();

동기 작업이 필요 할 때 함수의 선언 앞부분에 async 키워드를 붙임.
그리고 Promise를 리턴 받는 곳에 await 키워드를 넣어주면 해당 Promise가 끝날 때까지 기다렸다 다음 작업을 수행 할 수 있음.

then

위 코드에서는 delay이라는 함수를 만들어서 파라미터로 넣어준 시간 만큼 기다리는 Promise를 만들고, 이를 progress 함수에서 사용함.
함수에서 async를 사용하면, 해당 함수는 결과 값으로 Promise를 반환하게 됨.
따라서 await을 기다린 후 작업할 것이 있다면, 다음과 같이 then을 써서 코드를 작성할 수 있음.

02.js

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function progress() {
  console.log("HI HI");
  await delay(1000);
  console.log("BYE");
}

progress().then(() => {
  console.log("progress end");
});

async await의 catch

async 함수에서 에러를 발생 시킬 때는 throw를 사용하고,
에러처리는 try / catch 문을 이용하면 됨.
03.js

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function troubleMaker() {
  await delay(1000);
  throw new Error("await make error");
}

async function progress() {
  try {
    await troubleMaker();
  } catch (err) {
    console.error(err.message);
  }
}

progress();

async await의 return

동기 후 결과를 처리해야 한다면 then으로 결과를 받아서 처리할 수 있음.
04.js

const arr = ["a", "b", "c", "d", "e"];

const delay = (idx) => {
  return new Promise((resolve) =>
    setTimeout(() => {
      resolve(arr[idx]);
    }, 500)
  );
};

const basic = async () => {
  const item = await delay(2);
  console.log("await end");
  return item;
};

basic().then((result) => console.log(result));

async await 의 반복문.

반복문에서 await를 사용해야 하는 경우 forEach문은 사용할 수 없음.
일반적인 for문이나, for in, for of문을 사용해야 함.

05.js

const delay = (item) => {
  return new Promise((resolve) =>
    setTimeout(() => {
      console.log(item);
      resolve();
    }, 500)
  );
};

const arr = [0, 1, 2, 3, 4];

const loop = async (array) => {
  array.forEach(async (item) => await delay(item));

  console.log("DONE!");
};

loop(arr);

06.js

const delay = (item) => {
  return new Promise((resolve) =>
    setTimeout(() => {
      console.log(item);
      resolve();
    }, 500)
  );
};

const arr = [0, 1, 2, 3, 4];

const loop = async (array) => {
  //array.forEach(async item => await delay(item));
  for (let i = 0; i < array.length; i++) {
    await delay(arr[i]);
  }
  for (const item of array) {
    await delay(item);
  }
  for (const item in array) {
    await delay(item);
  }

  console.log("DONE!");
};

loop(arr);

await의 병렬 처리

동기적이면서 병렬 처리를 하는 방법도 있음.
07.js

const delay = (item) => {
  return new Promise((resolve) =>
    setTimeout(() => {
      console.log(item);
      resolve();
    }, 500)
  );
};

const arr = [0, 1, 2, 3, 4];

const parallel = async (array) => {
  const promises = array.map((item) => delay(item));
  await Promise.all(promises);

  console.log("DONE!");
};

parallel(arr);
728x90
반응형

Promise

참고 : MDN Promise
참고 : 감성프로그래밍

비동기 처리를 위해서 JS 에서는 주로 콜백을 많이 사용함.
콜백은 비동기 처리를 할 수 있지만, 비동기 작업을 순차적으로 처리해야할 경우 중첩시켜 표현하므로 예외처리가 어렵고, 중첩으로 인한 복잡도가 높음.
이를 위해 Promise 라이브러리가 생겼고 ES6에서 언어적 차원에서 지원하게 됨.
IE에서는 지원 되지 않지만 bluebirdjs 라이브러리를 추가 해준다면 지원 가능함.
Promise의 핵심은 목적만 머리에 넣고, 직접 적용해 보는것임.

Promise는 pending(수행중), fulfilled(완료), rejectd(실패), settled(종료)의 단계를 가지고 있고,
단어 의미 그대로 "약속"임. '지금은 없는데, 이상없으면 이따 주고 없으면 알려줄게~' 의 약속임.

Promise의 선언

//  Promise의 선언부
let myPromise = function (param) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (param) {
        resolve("SUCESS!!");
      } else {
        reject(Error("FAIL!!"));
      }
    }, 1000);
  });
};

//  Promise의 실행부
myPromise(false)
  .then((result) => console.log(result))
  .catch((err) => console.log(err));

//  아래처럼 실행할 수도 있음.
myPromise(false).then(
  (result) => console.log(result),
  (err) => console.log(err)
);

Promise의 심화는 생략 하도록 하겠음.

728x90
반응형

Spread And Rest

Spread

spread라는 단어는 펼치다 퍼뜨리다 라는 의미를 가지고 있는데,
이 문법을 사용하면 객체 혹은 배열을 펼칠 수 있음.
예를 들어 다음과 같은 객체들이 있다고 가정하면,
01.js

const o = {
  name: "object",
};

const ob = {
  name: "object",
  attribute: "hard",
};

const obj = {
  name: "object",
  attribute: "hard",
  color: "grey",
};

console.log(o);
console.log(ob);
console.log(obj);

객체 o를 선언하고, 기존에 선언한 o를 건드리지 않고 o의 속성을 이용해서 ob를 만들고, ob의 속성을 이용해서 obj를 만들었는데,
기존의 객체를 건드리지 않고 새로운 객체를 만들 때 spread를 사용하면 다음과 같이 작성할 수 있음.

02.js

const o = {
  name: "object",
};

const ob = {
  ...o,
  attribute: "hard",
};

const obj = {
  ...ob,
  color: "grey",
};

console.log(o);
console.log(ob);
console.log(obj);

배열에서 Spread

const pet = ["개", "고양이", "토끼"];
const animals = [...pet, "코요테", "코끼리"];

console.log(pet);
console.log(animals);

Rest

Rest는 가변 인자를 받아 배열로 만들어 선언하는것

04.js

const obj = {
  name: "object",
  attribute: "hard",
  color: "grey",
};

const { attribute, ...rest } = obj;

console.log(attribute);
console.log(rest);

배열에서의 rest

05.js

const numbers = [0, 1, 2, 3, 4, 5, 6];
const [first, ...others] = numbers;

console.log(first);
console.log(others);

// const [...othrs, last] = numbers;

함수 파라미터와 인자로서의 rest와 spread

const sum = function (...nums) {
  return nums.reduce((acc, curr) => acc + curr, 0);
};

const numbers = [1, 2, 3, 4, 5];
const result = sum(...numbers);

console.log(result);
728x90
반응형

Destructuring Assignment

구조 분해 할당, 또는 비구조화 할당.
배열이나 객체의 속성을 해체하여 그 값을 개별 변수로 담을수 있게 하는 표현식.

객체 비구조화 할당

01.js

  const batMan = {
    name: '브루스 웨인',
    actor: '크리스챤 베일',
    alias: '배트맨'
  };

  const catWoman = {
    name: '셀리나 카일',
    actor: '앤 헤서웨이',
    alias: '켓 우먼'
  };

  function print(hero) {
    const { alias, name, actor } = hero;
    const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
    console.log(text);
  }

  print(batMan);
  print(catWoman);
  const { alias, name, actor } = hero;

이 코드가 객체에서 값들을 추출해서 새로운 변수로 선언해 주는 것.
여기서 파라미터 단에서 객체 비구조화 할당을 하면 더 심플한 코드를 작성할 수 있음.
02.js

  const batMan = {
    name: '브루스 웨인',
    actor: '크리스챤 베일',
    alias: '배트맨'
  };

  const catWoman = {
    name: '셀리나 카일',
    actor: '앤 헤서웨이',
    alias: '켓 우먼'
  };

  function print({ alias, name, actor }) {
    const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;
    console.log(text);
  }

  print(batMan);
  print(catWoman);

배열 비구조화 할당.

03.js

  const arr = [1, 2];
  const [one, two, three = 3] = arr;

  console.log( one );
  console.log( two );
  console.log( three );

깊은 비구조화 할당.

  const deepObject = {
    state: {
      information: {
        name: 'jeaha',
        languages: ['javascript', 'java', 'sql']
      }
    },
    value: 5
  };

  const { name, languages } = deepObject.state.information;
  const { value } = deepObject;

  const extracted = {
    name,
    languages,
    value
  };

  console.log(extracted);
728x90
반응형

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

[Modern JS] Promise  (0) 2020.06.14
[Modern JS] spread 와 rest  (0) 2020.06.14
[Modern JS] 화살표 함수 (Arrow Function)  (0) 2020.06.05
[Modern JS] Template Literal  (0) 2020.05.29
[Modern JS] keyword ? var : ( let || const )  (0) 2020.05.29

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

+ Recent posts