진스

- 정리 1. export 함수or변수 (딱 지정했으니 이대로 사용) - 경우에는 import { 함수명 } from * 으로 사용하는데, 2. export default (default로 임의로 지정) - 경우에는 import 함수명 from * 으로 사용하게 됩니다 이름을 바꾸고 싶으면 '원래이름 as 바꿀이름' 3. import {bus as taxi} from 'bus.js'; ( as로 변수명을 바꿔서 호출) export(내보내기) export에는 named와 default가 있습니다. export 하는 모듈은 “use strict” 입니다. 두 가지 방식으로 모듈을 export할 수 있습니다. export - named // 1. 먼저 선언한 함수 내보내기 myFunction(){ ....} ..

출처 for, foreach, filter, map, reduce 기능 및 성능 비교 Javascript와 jQuery를 주로 쓰면서도 궁금했다. 반복문에는 우리가 일반적으로 알고있는 for문, $.each, forEach, map, filter 등 정말 많은 종류가 있다. daesuni.github.io Javascript와 jQuery를 주로 쓰면서도 궁금했다. 반복문에는 우리가 일반적으로 알고있는 for문, $.each, forEach, map, filter 등 정말 많은 종류가 있다. 주로 하나의 메서드로 대부분 것들을 할 수 있지만, 어떨때는 each를 써야 하고 또 어떤 경우에는 filter가 좋은지를 정확히 알고 쓰지 못했고 왜 이렇게 따로따로 만들어놨을까 라는 생각도 했다. 이번 포스트에서..

출처 [js] 자바스크립트 map 함수, filter 함수 프론트엔드로 근무를 하면서, 자바스크립트의 중요성에 대하여 절실히 느끼게 됩니다. 실무에서 자주 사용하게 되는 배열에 사용되는 함수, map()과 filter() 에 대하여 알아보겠습니다. map() 메서 goddino.tistory.com map() 메서드 map() 메서드는 배열 내의 모든 요소를 돌면서 주어진 함수의 결과를 모아 새로운 배열을 리턴합니다. map 함수 구문 array.map(callbackFunction(current value, index, array), thisArg) · currentValue : 배열 내 현재 값 · index : 배열 내 현재 값의 인덱스 · array : 현재 배열 · thisArg : callba..

출처 [번역]ES6 축약코딩 기법 19가지 자바스크립트를 스마트하게 사용해보자 chanspark.github.io 원작 25+ JavaScript Shorthand Coding Techniques - SitePoint Become a faster developer and check out this guide to shorthand JavaScript coding techniques, with longhand versions for comparison. www.sitepoint.com 1. 삼항조건 연산자 (The Ternary Operator) 2. 간략계산법 (Short-circuit Evaluation) 3. 변수 선언 4. If Presence 5. For 루프 6. 간략 계산법 (Short-cir..

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 const input = document.querySelector('input'); const mask = '######-#######' let unmaskedText = ''; function doMask(char, i) { if (!i) unmaskedText = ''; if (!mask[i]) return ''; switch(mask[i]) { case '#': if (/\d/.test(char)) { unmaskedText += char; return c..

SSR 이란? Server Side Rendering 의 약어로써 단어 그대로 서버에서 렌더링을 작업합니다. 기존에 존재하던 방식으로 사용자가 웹페이지에 접근할 때, 서버에 페이지에 대한 요청을 하며 서버에서는 html, view 와 같은 리소스들을 어떻게 보여질지 해석하고 렌더링하여 사용자에게 반환합니다. 웹에서 제공하는 정보량이 많아지고 데스크탑보다 성능이 다소 떨어지는 스마트폰의 웹에 대한 요구가 커지면서 새로운 기법이 탄생했습니다. CSR 이란? Client Side Rendering의 약어로써 최초에 1번 서버에서 전체 페이지를 로딩하여 보여주고 이후에는 사용자의 요청이 올 때마다, 리소스를 서버에서 제공한 후 클라이언트가 해석하고 렌더링을 하는 방식입니다. 여기에 Angular JS, Back..

css에서도 변수를 선언하고 사용할 수 있다는 사실! 이를 이용해서 다크모드 기능을 만들어보자 (디폴트가 다크모드) 1. toggle 버튼 생성 📃 html 파일 BaeJM 신입 프론트 엔드 / 직장인 연결 21 팔로잉 8 팔로워 5 JavaScript jQuery MySQL Vue Ajax HTML5 Git Css 📃 css 파일 /* 토글버튼 */ .switch { position: absolute; top: 20px; right: 20px; display: inline-block; width: 60px; height: 34px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: point..

async & await 프로미스 체이닝을 계속 하다보면 코드의 가독성이 떨어짐 async 와 await는 Promise를 간결/간편하고 동기적으로 실행되는것 처럼 보이게 만들어주는 API async 와 await는 새로운 것이 추가 된게 아니라, 기존에 존재하는 Promise 위에 조금 더 간편한 API를 제공함 이런 것을 syntactic sugar 라고 한다 (Class도 마찬가지..) 비동기 처리를 반드시 해야하는 이유 JS 엔진은 블록({})안에 코드를 동기적으로 실행(처리) 함 시간이 오래 걸리는 코드를 비동기 처리를 전혀 하지 않으면, 다음 코드에 문제가 발생할 수 있음 예를 들어 서버에서 data를 받아와서 웹페이지에 출력하는 시나리오가 있다 data를 받아 오는데 10초가 걸림, 근데 비..