Still growing

node 기본 fs 모듈 documentation https://nodejs.org/api/fs.html fs-extra https://www.npmjs.com/package/fs-extra 종합 버전. node fs 모듈에 없는 추가적인 file system 함수들을 제공한다. npm 설명의 Why? 부분을 보면 알 수 있겠지만 아래에 소개될 패키지에서 제공하는 기능들을 포함한다. mkdirp / make-dir https://www.npmjs.com/package/mkdirp https://www.npmjs.com/package/make-dir mkdir p옵션을 위한 패키지들(mkdir -p / mkdir --parents) path 내에 존재하지 않는 directory가 있으면 자동 생성한다. n..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. Mozilla 기여자가 작성한 MDN에 대해는 CC-BY-SA 2.5 라이선스에 따라 사용할 수 있습니다. 객체 변경 방지 ESMAScript 5에서는 객체를 쉽게 조작할 수 없도록 바꾸는 몇 가지 메서드를 추가했습니다. 한 번 객체를 쉽게 조작할 수 없는 객체로 바꾸고 나면 취소할 수 없습니다. 금지된 동작(아래 표 참조)을 시도할 경우, non strict mode에서는 오류 없이 해당 동작이 무시되고, strict mode에서는 에러가 발생합니다. 예제는 MDN의 예제에 주석과 코드를 일부 추가했습니다. 메서드 확인용 함수 프로퍼티 추가 프로퍼티 삭제 값 읽기 값 쓰기 ..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. Mozilla 기여자가 작성한 MDN에 대해는 CC-BY-SA 2.5 라이선스에 따라 사용할 수 있습니다. PerformanceObserver란? 성능 측정 이벤트를 관찰하고 브라우저의 성능 시간 표시 막대에 기록되는 새 성능 항목을 알려줍니다. (2021-06-30 기준 Editor's Draft 단계로 추후 기능이 변경될 수 있습니다) 구문 var performanceObserver = new PerformanceObserver(callback) callback: 관찰되고 있는 성능 이벤트가 발생할 때 호출될 함수. entries: PerformanceObserverEnt..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. Mozilla 기여자가 작성한 MDN에 대해는 CC-BY-SA 2.5 라이선스에 따라 사용할 수 있습니다. IntersectionObserver란? 대상 요소와 그 상위 요소 혹은 최상위 도큐먼트인 viewport와의 교차 영역에 대한 변화를 관찰하여 비동기적으로 감지할 수 있도록 도와줍니다. 쉽게 말하면, 사용자가 스크롤을 하거나 화면 크기를 변경하는 등의 동작으로 해당 요소가 화면에 나타나거나 사라지는 것을 비동기적으로 관찰합니다. 이미지가 화면에 보이기 시작하는 시점에 load를 하는 이미지 lazy loading이나 무한 스크롤, 애니메이션 재생 등에 활용할 수 있습니..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. Jest란? Facebook에서 만든 JavaScript Test Framework입니다. Babel, TypeScript, Node, React, Angular, Vue 등과 함께 사용할 수 있고, Test Runner, Test Matcher, Test Mock Framework를 모두 제공합니다. 기본 사용 방법 test("테스트 설명", () => { expect("검증 대상").toXXX("기대 결과"); }); Jest CLI 옵션(CLI Options) 제가 사용할 수도 있을 것 같은 옵션을 정리한 내용입니다. 모든 옵션이 궁금하신 분은 링크에서 확인하실 수 있습..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. Mozilla 기여자가 작성한 MDN에 대해는 CC-BY-SA 2.5 라이선스에 따라 사용할 수 있습니다. ResizeObserver란? element의 content box, border box, SVGElement의 bounding box의 변화를 관찰합니다. 리사이징을 다룰 때 발생할 수 있는 무한 콜백 루프와 순환 종속성을 방지합니다. [Test] 기존의 resize 이벤트로는 window의 크기 변화만 감지할 수 있었으나, ResizeObserver가 추가되면 개별 element의 크기도 관찰할 수 있습니다. 참고) Editor's Draft 단계이기 때문에 추후에 ..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. Mozilla 기여자가 작성한 MDN에 대해는 CC-BY-SA 2.5 라이선스에 따라 사용할 수 있습니다. MutationObserver란? DOM 변경을 관찰합니다. DOM3 이벤트 명세의 Mutation Events를 대체합니다. 구문 var observer = new MutationObserver(callback) callback: DOM 변경 시 호출될 함수. entries: 각 DOM의 변경을 나타내는 MutationRecord 형식의 오브젝트 배열. observer: Observer 자기 자신. 특정 조건이 되면 관찰을 중단하는 등의 용도로 사용 가능. 메서드 di..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. 2021년 1월 15일에 Velog에 작성한 글을 옮겨온 글입니다. JavaScript의 this 키워드는 상황에 따라 다른 값을 참조하기도 하고, Java나 Python과 같은 다른 프로그래밍 언어와 다르게 동작하여 혼란을 야기할 때가 있습니다. JavaScript에서의 this는 무엇이고, 어떻게 동작하는지 알아보겠습니다. this란? this는 해당 키워드가 속한 개체를 참조합니다. JavaScript 엔진은 실행 중인 실행 컨텍스트의 LexicalEnvironment을 사용해 this 바인딩을 결정하는데요. 실행 컨텍스트는 함수를 호출할 때 생성되므로, 다시 말해 th..