본문 바로가기

JavaScript

 (40)
[SonarQube][Bug] Group parts of the regex together to make the intended operator precedence explicit. Alternatives in regular expressions should be grouped when used with anchors앵커와 함께 사용할 경우 정규 표현식의 대안(alternatives)을 그룹화해야 합니다  정규식에서 앵커 ^와 $는 | 연산자보다 높은 우선 순위를 갖습니다. 따라서 ^alt1|alt2|alt3$와 같은 정규식에서 alt1은 맨 앞에 고정되고 alt3은 맨 끝에 고정되지만 alt2는 고정되지 않습니다. 일반적으로 의도된 동작은 모든 대안(alternatives)들이 양쪽 끝에 고정되는 것입니다. 이를 위해서는 대안에 non-capturing group을 사용해야 합니다. 앵커가 각각 하나의 대안에만 적용되도록 의도된 경우 앵커와 적용되는 부분 주위에 non-captur..
[JavaScript] 정규 표현식(Regular expressions) 정규 표현식이란정규 표현식, 또는 정규식은 문자열에서 특정 문자 조합을 찾기 위한 패턴입니다. 참고💡JavaScript에서는 정규 표현식도 객체로서, RegExp 객체의 exec()와 test() 메서드를 사용할 수 있습니다.String의 match(), matchAll(), replace(), replaceAll(), search(), split() 메서드와도 함께 사용할 수 있습니다. 정규 표현식 생성하기정규 표현식은 두 가지 방법으로 만들 수 있습니다.1. 정규 표현식 리터럴const re = /ab+c/;2. RegExp 객체의 생성자 호출const re = new RegExp("ab+c"); 정규 표현식 패턴 작성하기문자 클래스(Character classes)문자와 숫자처럼 다른 유형의 문자..
[Lodash] _.groupBy() 함수 설명 및 사용 예제/예시 구문(Syntax) _.groupBy(collection, [iteratee=_.identity]) 각 수집 요소를 반복 실행한 결과에서 생성된 키로 구성된 개체를 만듭니다. 그룹화된 값의 순서는 수집에서 발생하는 순서에 따라 결정됩니다. 각 키의 해당 값은 키 생성을 담당하는 요소의 배열입니다. 반복자는 다음(value) 하나의 인수로 호출됩니다. Creates an object composed of keys generated from the results of running each element of collection thru iteratee. The order of grouped values is determined by the order they occur in collection. The c..
[Lodash] _.find() 함수 설명 및 사용 예제/예시 구문(Syntax) _.find(collection, [predicate=_.identity], [fromIndex=0]) 컬렉션의 요소를 반복하여 조건자(predicate)가 true를 반환하는 첫 번째 요소를 반환합니다. 조건자는 세 가지 인수(값, 인덱스|키, 컬렉션)를 사용하여 호출됩니다. Iterates over elements of collection, returning the first element predicate returns truthy for. The predicate is invoked with three arguments: (value, index|key, collection). 매개변수(Arguments) - collection (Array|Object): 검사할 컬렉션입니다...
[Storybook] Decorators의 viewMode 파라미터로 현재 창이 canvas인지 docs인지 확인하여 스타일 적용하기 ... export default { title: 'Components/MyComponents', parameters: { docs: { description: { component: 'MyComponents입니다.', }, }, }, decorators: [ (story, { viewMode }) => ({ components: { story }, setup() { return { viewMode }; }, methods: { getStyle() { return `height: ${viewMode === 'story' ? 1500 : 50}px` }, }, template: '', }), ], }; .... Reference https://storybook.js.org/docs/vue/writing-s..
[Electron] Electron이란 Electron이란? Electron은 JavaScript, HTML 및 CSS와 같은 웹 기술을 사용하여 데스크톱 애플리케이션을 만들기 위한 프레임워크입니다. (데스크탑 어플리케이션은 보통 해당 OS에서 제공하는 언어와 환경을 이용해서 제작합니다. Windows의 경우 C#이나 C++ 등을 이용해서 만들고, macOS의 경우 Objective-C나 Swift 등을 이용해서 만들게 됩니다.) 웹사이트를 구축할 수 있다면 데스크톱 앱을 구축할 수 있습니다. Electron을 사용하면 하나의 JavaScript 코드베이스를 유지 관리하고 Windows, macOS 및 Linux에서 작동하는 크로스 플랫폼 앱을 만들 수 있습니다. 어려운 부분(Automatic updates, notifications 등)을 ..
[SonarQube] Add an "alt" attribute to this image Image, area and button with image tags should have an "alt" attribute alt 속성은 이미지에 대한 텍스트 대안을 제공합니다. 실제 이미지를 렌더링할 수 없을 때 사용됩니다. 일반적인 이유는 다음과 같습니다. 이미지를 더 이상 찾을 수 없습니다 스크린 리더 소프트웨어를 사용하는 시각 장애가 있는 사용자 휴대폰에서 데이터 소비를 줄이기 위해 이미지 로드가 비활성화 alt 속성을 정보가 아닌 값으로 설정하지 않는 것도 매우 중요합니다. 예를 들어 는 사용자에게 어떤 정보도 제공하지 않기 때문에 쓸모가 없습니다. 이 경우 다른 장식 이미지와 마찬가지로 태그 대신 CSS 배경 이미지를 사용하는 것이 좋습니다. CSS background-image를 사용할 수..
[SonarQube] Replace this <i> tag by <em> "" and "" tags should be used / 및 / 태그는 대부분의 웹 브라우저에서 정확히 동일한 효과를 갖지만 둘 사이에는 근본적인 차이가 있습니다: 및 은 의미론적 의미를 갖는 반면 및 는 CSS와 같은 스타일 정보만 전달합니다. 는 디스플레이가 제한된 일부 장치나 시각 장애인이 스크린 리더 소프트웨어를 사용하는 경우 아무런 영향을 미치지 않지만 은: 일반 브라우저에서 텍스트를 굵게 표시 Jaws와 같은 화면 판독기를 사용할 때 낮은 톤으로 말하기 따라서, 의미를 전달하기 위해 및 태그를 사용해서는 안 됩니다. 스타일링 정보를 전달하기 위해서는 와 를 피하고 CSS를 사용해야 합니다. 비준수 코드 예 car train 결과

티스토리툴바