Front End Develop Front End Develop

급진적으로 계속해서 쏟아져 나오고 있는 ES 버전들을 모두 리뷰 하기에는 많은 시간이 소모됩니다. ES6(ES2015)를 시작으로 7, 8 계속 이어져오다가 정식 명칭을 아예 ES2020으로 연도를 붙이는 것으로 변경이 된 것 같습니다. 아시다시피 2015 년 ES6 이후로 Ecma International의 TC39에서 매년 ECMAScript의 새로운 버전을 출시합니다. ECMAScript 2020은 ECMAScript 언어 사양의 11 번째 버전입니다. 이 새로운 반복에는 고유 한 새로운 기능이 포함되어 있습니다. 1. ‘globalThis’ JavaScript 언어는 현재 매우 인기가 있으며 웹 브라우저에서 물론 다양한 환경에서 사용할 수 있지만 JavaScript는 서버 측, 스마트폰, 로봇 등..

1. 중복 값 삭제 이 문제는 어떻게 유니크한 값을 배열로부터 얻어내느냐에 대한 매우 일반적인 면접 질문입니다. new Set()을 사용할 수 있습니다. let fruits = ['banana', 'apple', 'orange', 'watermelon', 'orange', 'apple']; // 첫번째 방법 let uniqueFruits = Array.from(new Set(fruits)); console.log(uniqueFruits); // returns ['banana', 'apple', 'orange', 'watermelon']; // 두번째 방법 let ..

JavaScript에서는 다른 방식으로 동일한 결과를 얻을 수있는 자유가 있습니다. 생성자와 리터럴 접근법을 사용하여 문자열, 숫자, 객체, 배열 등의 값을 만들 수 있습니다. 이러한 접근 방식 중 하나를 사용하여 동일한 값을 얻을 수 있습니다. 그러나 런타임 버그를 피하는 데 유용한 몇 가지 차이점이 여전히 있습니다. 결론부터 말하면 Literal 방식이 Contructor 방법보다 낫습니다. Literal과 contructor 방식이 무엇이냐면 다음과 같습니다. 일반적으로 리터럴과 primitive를 선호하고 내장 생성자를 피해야합니다. literal과 primitive를 선호하는 이유는?? 1. 리터럴은 더 짧고 읽고 쓰기 쉽습니다. let o = new Object(); let o = {}; //..

요즘 morioh.com 블로그에서 매우 유용한 글들을 많이 찾아볼 수 있어서 좋습니다. 포스팅을 한번 할 때마다 유용한 지식들이 습득되는 것 같아서 더 좋구요. 이번에는 javascript 기술을 향상시키는 12가지 개념에 대해서 알아보도록 합시다. 자바스크립트는 깊이 들어갈 수록 복잡한 언어입니다. 단순히 자바스크립트 개발자가 된다는 것은 자바스크립트 언어를 집요하게 기본 동작 원리를 알아가는 것이 필수 덕목이라고 생각합니다. 하루빨리 레거시한 코드와 기본 동작 원리를 깨우치지 못한 상태의 코드들을 개선하고 싶습니다. 그리고 jquery의 종말과 함께 바닐라 스크립트로 구성할 수 있는 모든 종류의 앱들을 환영하고 받아들일 준비가 되어 있어야 할 것입니다. 다양한 팁들을 지속적으로 업데이트 하고 있는 ..

VueJS가 점점 더 널리 보급됨에 따라 몇 가지 모범 사례가 나타나고 표준이되었습니다. 1. 항상 key를 v-for 의 속성으로 사용하세요. v-for 지시문과 함께 key 속성을 사용하면 데이터를 조작 할 때마다 애플리케이션이 예측 가능하게 됩니다. 키가 없으면 Vue는 DOM을 최대한 효율적으로 만들려고합니다. 이는 v-for의 요소가 순서대로 나타나지 않거나 동작이 예측하기 어려울 수 있음을 의미 할 수 있습니다. 각 요소에 대해 고유 한 키 참조가있는 경우 Vue 애플리케이션이 DOM 조작을 정확히 처리하는 방법을 더 잘 예측할 수 있습니다. 2. 이벤트에 케밥 케이스를 사용하세요. emit 커스텀 이벤트를 사용하는 경우 케밥 케이스를 사용하는 것이 좋습니다. 컴포넌트 전체의 일관성을 유지하고..

위의 그림으로 모든 스트링 메서드가 표현이 되겠지만 하나씩 살펴봅시다. // 1. length - 문자열 자바 스크립트에서 문자 수를 계산하는 데 사용됩니다. var str = "Hello Noel"; var x = str.length; // ** result ** // 10 // 2. toLocalLowerCase() - 문자열을 소문자로 변경하는 데 사용됩니다. var str = "Hello Noel"; var res = str.toLocaleLowerCase(); // ** result ** // hello noel // 3. toLocaleUpperCase() - 문자열을 대문자로 변경하는 데 사용됩니다. var str = "Hello Noel"; var res = str.toLocaleUpper..

async / await를 다룰 때 주의해야 할 점입니다. Non Blocking 형태의 I/O 작업을하는 Node.js는 익숙하지 않을 수 있습니다. let printNum = (number, delaySec) => { setTimeout(() => console.log(number), delaySec); // i/o 작업을 대신한다. }; let logPrintNum = (number, delaySec) => { console.log(`Enter logPrintNum ${number}`); printNum(number, delaySec); console.log(`Exit logPrintNum ${number}`); }; logPrintNum(1, 0); // 결과 Enter logPrintNum 1 ..

CSS 모션 경로를 사용하면 사용자 정의 사용자 정의 경로를 따라 요소에 애니메이션을 적용 할 수 있습니다. 이러한 경로는 SVG 경로와 동일한 구조를 따릅니다. `offset-path`를 사용하여 요소의 경로를 정의합니다. .block { offset-path: path('M20,20 C20,100 200,0 200,100'); } 위 요소는 상대적인 offset-path입니다. 하지만 여기서 문제점은 크기에 따라 반응하지 않는 다는 것입니다. 왜냐하면 해당 숫자들은 `px` 기반이기 때문이지요. 스테이지를 설정하기 위해 offset-distance 속성은 요소가 해당 경로에서 있어야하는 위치를 나타냅니다. https://codepen.io/jh3y/pen/cd95c54d57891b095df99eaa0..