본문 바로가기

2020/053

닫기 이벤트 버튼에 대하여.. button vs a × 위와 같이 a 버튼으로 이벤트를 주는 것에 대해서 어떻게 생각하시나요? 왜 나쁜가요? 위 a 태그는 href가 없으므로 실제로는 링크가 아닙니다 (닫기 버튼은 링크가 아님). 말할 것도 없이, 누락 된 href에 대한 태그에 대해서 포커스를 맞출 수도 없습니다. 게다가, 위의 x 기호는“곱하기”또는“시간”으로 읽힐거에요... 전혀 SEO 설명에도 도움이되지 않습니다. 대신에 무엇을 사용할 것인가요? × 위와 같이 좋은 패턴으로 사용합시다. 아이콘을 넣고 싶을 때는? Close × 스크린 리더는 단지 Close, Button이라고만 읽힐 것입니다. (aria-hidden 속성이 있기 때문에) bootstrap 등을 사용할 경우에는 font-awesome을 사용할 수도 있겠지요. 부가적으로, 버튼에 대한.. 2020. 5. 31.
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.