package-lock.json은 왜 필요 한가?

npm install을 이용해서 package를 인스톨하면 자동으로 package-lock.json이라는 파일이 생성된다.

용도를 몰라서 그냥 두고 있었는데, 가끔씩 이 파일이 형상관리 과정에서 충돌이 일어나 .gitignore에 추가해버렸었다.

함께 일하시는 분이 package-lock.json은 꼭 필요하다는 이야기를 해주셔서 검색을 해보니 다음과 같은 경우에 사용된다.

  1. npm의 버전의 다른 경우
  2. 의존성을 가진 패키지의 버전이 업데이터 되는 경우
  3. 의존성을 가진 패키지가 의존하는 패키지의 버전이 업데이트되는 경우

node_modules의 폴더의 스냅샷을 저장하여, 다른 곳에서 npm install 명령어를 실행시 package-lock.json에 명시된 의존 패키지들을 통해 node_modules를 만들어 낸다. 다만, package.json의 변경은 package-lock.json 보다 우선 된다.

주요 사항은 package-lock.json은 꼭 형상 관리에 포함 시켜야 한다.

그러하다

참고자료

Posted by lahuman

댓글을 달아 주세요

Broswer의 Cookie 와 localstorage 의 차이점 정리

쿠키는 오랫동안 사용된 클라이언트에 저장하는 정보이다.

로컬 스토리지는 웹 스토리지의 하나로 기본적으로 key와 value 형태이다.

웹 스토리지세션 스토리지로컬 스토리지가 존재한다.
세션 스토리지와 로컬 스토리지의 차이는 세션이 종료되는 경우 스토리지 내용의 삭제 유무이다.

쿠키와 로컬스토리지와의 가장 큰 차이점

  1. 쿠키는 서버에서 읽을수 있음
  2. 로컬 스토리지는 클라이언트에서만 읽고 쓸수 있음
  3. 쿠키는 4Kb 까지만 지원
  4. 로컬 스토리지는 5Mb 까지 지원

참고자료

Posted by lahuman

댓글을 달아 주세요

Loop와 함께 async, await 사용하기

함께 일하는 분이 while 과 함께 async를 사용하면 동작 하지 않는다고 하셔서 확인을 해보았다.

결론은 동작은 잘된다.

다만, array를 이용해서 forEach, map 등을 할경우는 동작 하지 않는다.

그래서 array는 for 문을 이용해서 직렬로 처리 하거나, map으로 모든 오브젝트를 promise로 변환하여 병렬로 처리 하여야 한다.

const sleep = (ms) => {
  return new Promise(resolve => setTimeout(resolve, ms));
}
const wrapSlept = async () => { await sleep(2000) };

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

const testAwait = async () => {
  //동작
  let i = 0;
  while (i < 5) {
    console.log('i: ', i);
    i++;
    await wrapSlept(3000);
  }
  console.log("Done!");

  //동작
  for (var f = 0; f < 5; f++) {
    console.log('f: ', f);
    await wrapSlept(3000);
  }
  console.log("Done!");

  //동작 안함
  [1, 2, 3].forEach(async (n) => {
    console.log('n: ', n);
    await wrapSlept(3000);
  });
  console.log("Done!");

  //직렬 처리
  for (const item of [1,2,3]) {
    await delay(item);
  }
  console.log("Done!");

  //병렬
  const promises = [1, 2, 3].map(item => delay(item));
  await Promise.all(promises);
  console.log("Done!");

}

testAwait();

기억해두자

참고자료

Posted by lahuman

댓글을 달아 주세요