본문 바로가기
유용한 lodash 숫자 관련 코드 예시 20가지 JavaScript에서 숫자를 다루는 작업은 많은 경우에 발생하며, Lodash 라이브러리는 이러한 숫자 연산을 보다 쉽게 처리할 수 있도록 도와줍니다. Lodash는 간결하면서도 효율적인 코드를 작성할 수 있도록 다양한 숫자 관련 함수를 제공합니다. 이를 통해 코드의 가독성과 유지보수성을 향상시킬 수 있습니다. Lodash 숫자 함수로 개발 생산성 향상 숫자 데이터를 다루는 개발 작업은 대부분의 프로젝트에서 빈번하게 발생합니다. 이러한 숫자 관련 작업을 보다 간편하게 처리하고 생산성을 향상시키기 위해 Lodash 라이브러리를 활용하는 것은 매우 유용합니다. Lodash는 다양한 숫자 관련 함수를 제공하여 코드의 가독성을 높이고, 반복적인 작업을 간소화하여 개발 생산성을 향상시킵니다. 1. 코드의 가독성.. 2024. 1. 1.
자주 쓰이는 lodash-es 객체 문법 15가지 여기에는 lodash-es에서 자주 사용되는 객체 관련 함수의 예시 20개가 포함되어 있습니다. 이 함수들은 객체 조작, 변환 및 필터링에 유용합니다. 1. 객체에서 특정 키의 값 가져오기: import _ from 'lodash-es'; const user = { id: 1, name: 'John', age: 25 }; const userName = _.get(user, 'name'); console.log(userName); // 'John' 2. 객체에서 여러 키의 값을 가져오기: import _ from 'lodash-es'; const user = { id: 1, name: 'John', age: 25 }; const userSubset = _.pick(user, ['name', 'age']);.. 2024. 1. 1.
자주쓰이는 lodash-es 배열 문법 17가지 여기에는 lodash-es에서 자주 사용되는 배열 관련 함수의 예시 20개가 포함되어 있습니다. 이 함수들은 배열 조작, 변환 및 필터링에 유용합니다. 1. 배열에서 중복 제거: import _ from 'lodash-es'; const uniqueNumbers = _.uniq([1, 2, 2, 3, 4, 4, 5]); console.log(uniqueNumbers); // [1, 2, 3, 4, 5] 2. 배열을 문자열로 변환: import _ from 'lodash-es'; const arrayToString = _.join(['apple', 'orange', 'banana'], ', '); console.log(arrayToString); // 'apple, orange, banana' 3. 배열에.. 2024. 1. 1.
lodash와 lodash-es 차이점과 번들사이즈, 자주쓰이는 문법 Lodash란? Lodash는 자바스크립트의 유틸리티 라이브러리 중 하나로, 다양한 기능을 제공하여 코드를 간결하고 효율적으로 작성할 수 있도록 도와줍니다. 주로 배열, 객체, 함수와 관련된 다양한 작업을 수행하는데 사용됩니다. Lodash는 2012년에 John-David Dalton에 의해 처음 만들어졌으며, 그 이후 계속해서 업데이트 및 확장되어 왔습니다. lodash 와 lodash-es 차이 Lodash: 기본적인 Lodash 라이브러리는 브라우저 환경이나 Node.js와 같은 환경에서 사용하기 위한 스탠다드 빌드입니다. Lodash-es: Lodash-es는 ECMAScript 모듈(ESM) 형식으로 제공되는 버전으로, 모듈 시스템을 활용하여 필요한 함수만 선택적으로 사용할 수 있게 해줍니다... 2024. 1. 1.
scss 반복문 사용하는 방법과 자주쓰는 유용한 반복문 SCSS 반복문 활용: 코드의 간편성과 효율성 SCSS(Sassy CSS)는 CSS의 확장 버전으로, 변수, 중첩 규칙, 믹스인, 함수 등을 제공하여 스타일 시트 작성을 더욱 간결하고 효율적으로 만들어주는 도구입니다. 이 중에서도 SCSS에서 제공하는 반복문은 코드의 재사용성을 높이고 더욱 간편한 스타일링을 가능케 합니다. SCSS 반복문의 종류 1. @for 문: @for 문은 특정 횟수만큼 스타일을 반복 적용할 때 사용됩니다. 아래는 간단한 예시입니다. @for $i from 1 through 3 { .box-#{$i} { width: 50px * $i; } } 위의 코드는 .box-1, .box-2, .box-3 클래스에 각각 다른 너비를 지정합니다. 2. @each 문: @each 문은 리스트나 .. 2024. 1. 1.
유용한 scss 믹스인 모음과 장점 SCSS Mixin이란? SCSS Mixin은 스타일 시트에서 재사용 가능한 코드 조각을 정의하는 데 사용되는 기능입니다. 이는 함수와 비슷한 개념으로, 스타일 속성의 그룹을 정의하고 필요할 때 이를 임포트하여 사용할 수 있게 해줍니다. SCSS Mixin 구문 @mixin mixin-name($parameter1, $parameter2, ...) { property: value; // 다양한 스타일 속성들... } .element { @include mixin-name(value1, value2, ...); // 다른 스타일 속성들... } SCSS Mixin 사용 예시 @mixin border-radius($radius) { border-radius: $radius; } .button { @inclu.. 2024. 1. 1.

티스토리툴바