본문 바로가기

JavaScript

 (22)
[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 결과
highcharts.js.map 404 오류 해결하기 안녕하세요. 오늘은 highcharts.js를 사용하면서 만난 오류 해결 과정에서 찾은 자료들을 정리해보려고 합니다. 저는 public/js/ 디렉터리 하위에 highcharts.js 파일을 두고 사용 중입니다. 그런데 개발자 도구 콘솔 로그에 계속 아래와 같은 오류가 찍히는 문제가 있었습니다. DevTools failed to load source map: Could not load content for http://xxx.xxxx.com:xxxx/public/js/highcharts.js.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE highcharts.js.map 파일이 없어서 404 에러가 발생하고 있었습니다. .map..
[Electron] Vue 기반 보일러 플레이트로 일렉트론 앱 빌드하기(Electron-Vue) 안녕하세요😊 지난 포스팅에서 VCP Electron Builder 보일러 플레이트를 이용하여 Vue Cli 기반의 Electron 앱을 구성하고 빌드하는 과정을 소개했었습니다. 프로젝트를 시작하기에 앞서 다른 보일러 플레이트도 비교를 해봐야 할 것 같아, 그전부터 봐왔던 Electron-Vue 보일러 플레이트를 이용하여 프로젝트를 구축해보았습니다. Electron-Vue도 아주 간단하게 프로젝트를 스케폴딩할 수 있었는데, 그 과정을 소개해보겠습니다. Vue Cli 설치 아래 명령어로 vue-cli를 전역에 설치해줍니다. npm install -g vue-cli 그리고 vue init 명령어를 이용하기 위해서는 아래 명령어로 추가 모듈을 설치해줍니다. npm i -g @vue/cli-init electro..

티스토리툴바