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

Java 에서 Map 안의 요소 반복문으로 꺼내기.

package dev.jeaha.practice;

import java.util.HashMap;
import java.util.Iterator;
import java.util.Map;

public class MapIterationPractice {

  public static void main(String[] args) {
    Map<String, String> map = new HashMap<>();

    map.put("k00", "v00");
    map.put("k01", "v01");
    map.put("k02", "v02");
    map.put("k03", "v03");
    map.put("k04", "v04");
    map.put("k05", "v05");
    map.put("k06", "v06");
    map.put("k07", "v07");
    map.put("k08", "v08");
    map.put("k09", "v09");
    map.put("k10", "v10");

    System.out.println(">>>> SOLUTION 01-1 <<<<");
    /**
     * Generic 미사용.
     * Java 버젼이 낮을 경우 사용할 수 있는 방법.
     */
    Iterator entries = map.entrySet().iterator();
    while( entries.hasNext() ) {
      Map.Entry entry = (Map.Entry) entries.next();
      String key = (String) entry.getKey();
      String val = (String) entry.getValue();
      System.out.println( String.format("key : %s, value : %s", key, val ) );
    }


    System.out.println("\n\n>>>> SOLUTION 01-2 <<<<");
    /**
     * Generic, Entry 사용
     */
    Iterator<Map.Entry<String, String>> entriex = map.entrySet().iterator();
    while( entriex.hasNext() ) {
      Map.Entry<String, String> entry = entriex.next();
      System.out.println( String.format("key : %s, value : %s", entry.getKey(), entry.getValue() ) );
    }

    System.out.println("\n\n>>>> SOLUTION 01-3 <<<<");
    /**
     * Generic 사용, Entry 미사용
     */
    Iterator<String> keys = map.keySet().iterator();
    while( keys.hasNext() ) {
      String key = keys.next();
      System.out.println( String.format("key : %s, value : %s", key, map.get(key)) );
    }

    System.out.println("\n\n>>>> SOLUTION 02 <<<<");
    /**
     * Entry에 for-each loop 사용.
     * 가장 일반적이고 많은 경우에 사용됨.
     * 반복문 안에서 key 값과 value 값이 전부 필요할 때 사용.
     * Java 1.5 이상부터 사용 가능. NullPointerException 발생 가능.
     */
    for( Map.Entry<String, String> entry : map.entrySet() ) {
      System.out.println( String.format("key : %s, value : %s", entry.getKey(), entry.getValue() ) );
    }

    System.out.println("\n\n>>>> SOLUTION 03 <<<<");
    /**
     * entry 대신에 key 값이나 value 값만 필요할 때 사용.
     * entrySet을 사용할 때보다 약 10% 빠르다고 함.
     */
    for( String key : map.keySet() ) {
      System.out.println( String.format("key : %s", key ) );
    }
    for( String value : map.values() ) {
      System.out.println( String.format("value : %s", value ) );
    }

    System.out.println("\n\n>>>> SOLUTION 04 <<<<");
    /**
     * 코드상으로는 깔끔해 보이지만 비효율 적이고 성능면에서 좋지 않은 방법.
     * key 값을 이용해서 value 를 찾는 과정에서 시간 소모가 많음.
     * SOLUTION 02에 비해 20~200% 성능 저하 유발.
     */
    for( String key : map.keySet() ) {
      System.out.println( String.format("key : %s, value : %s", key, map.get(key) ) );
    }

    System.out.println("\n\n>>>> SOLUTION 05 <<<<");
    /**
     * stream을 사용한 forEach.
     */
    map.entrySet()
    .stream()
    .forEach(System.out::println);

    System.out.println("\n\n>>>> SOLUTION 06 <<<<");
    /**
     * forEach 및 Lambda를 사용한 반복.
     * forEach() 내에서 람다 표현식 사용.
     */
    map.forEach( (key, val) -> {
      System.out.println( String.format("key : %s, value : %s", key, val ) );
    });
  }
}
728x90
반응형

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

[Java] 문자열이 날짜 형식인지 확인하기  (0) 2021.10.18
[Java] 성능을 고려한 try-catch 문  (0) 2020.12.16
[JAVA] 구 버젼 설치  (0) 2020.11.02
[Java] ArrayList Sort  (0) 2020.05.22

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

다음에 다시 정리 하도록.

//  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

종종 특수한 이유로 Java 구 버젼을 설치해야 할 일이 있음.

오라클 공식 사이트에서는 1.7이하 버젼은 더 이상 다운로드를 지원하지 않지만.
잘 찾아보면 각 버젼별로 다운 받을 수 있음.

한참 헤매다 따로 링크를 저장해 두기로 하고 포스트를 작성함.

JDK 1.5
JDK 1.6
JDK 1.7
JDK 1.8

728x90
반응형

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

[Java] 문자열이 날짜 형식인지 확인하기  (0) 2021.10.18
[Java] 성능을 고려한 try-catch 문  (0) 2020.12.16
[Java] Map 반복문  (0) 2020.12.08
[Java] ArrayList Sort  (0) 2020.05.22

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

Template Literal

Template Literal, Template String이라고 불림.
백틱 `을 사용하고 내장된 표현식 ${} 을 허용하는 문자열임.
여러 줄로 이루어진 문자열과 보간기능을 사용할 수 있음.
01.js

  const t = function (str) {
    // `을 사용해야 함.
    return `Hi ${str}!,
  Welcome to test world.
  Let's do the HellJS
  `;
  }

  const result = t('ASDF');
  console.log(result);
728x90
반응형

+ Recent posts