Javascript40 Vue.js 12가지 모범사례 VueJS가 점점 더 널리 보급됨에 따라 몇 가지 모범 사례가 나타나고 표준이되었습니다. 1. 항상 key를 v-for 의 속성으로 사용하세요. v-for 지시문과 함께 key 속성을 사용하면 데이터를 조작 할 때마다 애플리케이션이 예측 가능하게 됩니다. 키가 없으면 Vue는 DOM을 최대한 효율적으로 만들려고합니다. 이는 v-for의 요소가 순서대로 나타나지 않거나 동작이 예측하기 어려울 수 있음을 의미 할 수 있습니다. 각 요소에 대해 고유 한 키 참조가있는 경우 Vue 애플리케이션이 DOM 조작을 정확히 처리하는 방법을 더 잘 예측할 수 있습니다. 2. 이벤트에 케밥 케이스를 사용하세요. emit 커스텀 이벤트를 사용하는 경우 케밥 케이스를 사용하는 것이 좋습니다. 컴포넌트 전체의 일관성을 유지하고.. 2020. 5. 3. [JS] Javascript 스트링 메서드 위의 그림으로 모든 스트링 메서드가 표현이 되겠지만 하나씩 살펴봅시다. // 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.. 2020. 5. 2. Async / Await 주의해서 다루기 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 .. 2020. 4. 25. SVG 모션 Path 그리기 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.. 2020. 4. 18. 이전 1 ··· 3 4 5 6 7 8 9 10 다음
