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

mixins와 @extend의 compile 결과 차이 mixins 각 속성 설정을 @include한 선택자 내에 추가한다. 단점 - 같은 설정이 @include 할 때마다 중복되어 결과물의 크기가 커진다. @extend(inheritance) @extend한 선택자들을 모아서 그룹화하고, 속성 설정을 적용한다. 단점 - 관련 없는 선택자들이 그룹화된다. https://medium.com/stories-from-the-keen/when-to-use-extends-vs-mixins-in-sass-b09d55abd53 When to use — extends vs mixins in SASS SASS provides two main ways to reuse styles — @extend and mixins — ..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. 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이나 무한 스크롤, 애니메이션 재생 등에 활용할 수 있습니..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. PostCSS vs Scss ? 결론부터 PostCSS는 CSS 후처리기, Scss는 CSS 전처리기입니다. 실행되는 시점이나 방법이 다르기 때문에 한 프로젝트에 둘 다 적용할 수 있습니다. 즉, 둘 중 하나만 선택할 필요는 없으며, 필요한 경우 각 장단점에 맞게 기능을 취사선택하여 사용하면 됩니다. 동시에 사용하는 경우, Scss로 작성된 파일이 컴파일을 통해 CSS로 변환되고, 변환된 CSS는 다시 PostCSS 플러그인에 의해 최종 변환됩니다. PostCSS란? [공식 사이트] CSS Postprocessor(후처리기). JS 플러그인을 사용하여 CSS를 변환하는 도구입..

이 글은 주니어 개발자가 쓴 글로 오류가 있을 수 있습니다. 문제가 있거나 수정이 필요한 부분은 댓글로 알려주시면 감사하겠습니다. 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 단계이기 때문에 추후에 ..