오늘부터 일기장 오늘부터 일기장

Babel, Polyfilling & Transpiling 📐 웹서비스를 개발할 때 꼭 알아야하는 Babel, Polyfilling & Transpiling에 대해 간단하게 알아봅니다. Github 문서 : https://github.com/dusunax/javascript/blob/main/docs/babel-transpiling%26polyfilling.md Babel Babel이란? 플러그인 & 프리셋 1. Pacel과 Babel 2. Webpack과 Babel Polyfilling vs Transpiling Polyfilling vs Transpiling 개요 바벨은 Polyfilling 도구 인가요? 아니면 Transpiling 도구 인가요? Polyfilling이란? core-js 라이브러리 ..

NPM, dependencies, Parcel 📁 자바스크립트 개발에 사용하는 NPM, dependencies, Parcel에 대해 간단하게 알아봅니다. Github 문서 : javascript/npm&dependency.md at main · dusunax/javascript · GitHub NPM npm (패키지 매니저) 를 사용하는 이유 global로 패키지를 설치하는 이유 dev dependency란? 예시 : leaflet, 외국 map api lodash : javaScript를 더 편하게 쓰기 Parcel parcel vs webpack parcel 실행하기 npx parcel index.html vs "start": "parcel index.html" build 🚫 parcel build ..

빌드 프로세스 & ES6 module 👩‍🏭 자바스크립트의 빌드 프로세스, ES6 module에 대해 간단하게 알아봅니다. module이 import되는 순서를 확인해봅니다. Github 문서 : https://github.com/dusunax/javascript/blob/main/docs/ES6-module_import.md Build Process & JavaScript Bundle Software development의 과정? Module이란? Module의 장점 ES6 Module vs Script ES6 module을 Import하는 과정 예시 Parsing Download linking imports import 순서 정리 Build Process & JavaScript Bundle 빌드 과정..

레퍼런스와 함께 vanilla JS로 Single-Page Application을 구현해봅니다! React, Vue와 같은 SPA를 위한 라이브러리를 사용하는 것은 간단한 웹사이트를 구현할 때는 어쩌면 과한 방법일 수 있습니다. 전역으로 관리할 데이터가 적을 때 Redux를 사용할 필요성이 없는 것과 같은 맥락입니다. 또한 React, Vue는 결국 라이브러리이기 때문에, JS로 앱이 어떻게 작동하는지 조금이지만😅 알아둘 필요도 있습니다. 레퍼런스 a. History API + SPA 튜토리얼 https://www.youtube.com/watch?v=ZleShIpv5zQ a-1. pushState docs https://developer.mozilla.org/en-US/docs/Web/API/Histor..

Call, Bind, Apply 그리고 this 🏓 함수의 this keyword는 함수가 어떻게 불러지냐에 따라 다릅니다. 이번 게시물에서는 function의 메소드인 call, apply, bind를 this와 함께 설명합니다. 0. 함수의 this 1. call, apply, bind의 차이점 2. call() 3. apply() 4. bind() 5. bind와 eventListener (feat. this keyword) 📎 reference This : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this Function Prototype: https://developer.mozilla.org/en-US..

What is Strict Mode?🧐 Strict Mode는 더 secure한 javascript code를 작성할 수 있게 하는 모드입니다. 기존에 무시되던 에러들을 throwing하고, 최적화 작업을 어렵게 만드는 실수를 바로 잡습니다. 0. Strict Mode의 내용 요약 1. 에러를 표시합니다. Converting mistakes into errors. 2. 스코프 관리를 단순화합니다. Simplifying scope management 3. Invorking Strict Mode : 어떻게 쓰나요? 📎 reference Strict Mode 한글 docs : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Strict_mode ..