const sumNumberValues = (obj) => {
    return Object.values(obj)
        .filter(value => typeof value === 'number' && value >= 0)
        .reduce((sum, value) => sum + value, 0);
};

// 예제 객체
const exampleObj = {
    a: 10,
    b: '20',
    c: 30,
    d: -5,
    e: 50,
    f: 'hello',
    g: 0
};

// 함수 호출 및 결과 출력
const totalScore = sumNumberValues(exampleObj);
console.log(totalScore); // 출력: 90

관련 링크

• Object.values() – MDN: Object.values() 메서드는 주어진 객체 자신의 열거 가능한 속성 값들을 배열로 반환합니다.
• Array.prototype.filter() – MDN: filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.
• Array.prototype.reduce() – MDN: reduce() 메서드는 배열의 각 요소에 대해 제공된 리듀서(reducer) 함수를 실행하여 단일 출력 값을 만듭니다.

The post [javascript]객체의 키 중에서 숫자 타입의 값을 필터링하고 합산 appeared first on Market Traders.

검증 함수 사용

공통된 검증 로직을 별도의 함수로 분리하여, 필요할 때마다 이 함수를 호출하는 방법입니다. 이 함수는 필수 키 목록과 함께 API 응답 객체를 인자로 받아, 모든 필수 키가 응답 객체에 존재하는지 검사할 수 있습니다.

function validateApiResponseKeys(responseObject, requiredKeys) {
  return requiredKeys.every(key => key in responseObject);
}

const apiResponse = { key1: 'value1', key2: 'value2' };
const requiredKeys = ['key1', 'key2', 'key3'];

const isValid = validateApiResponseKeys(apiResponse, requiredKeys);
if (!isValid) {
  console.log('응답에서 필수 키가 누락되었습니다.');
}

고차 함수 사용

검증 로직을 추상화하여 고차 함수(Higher-order function)를 만드는 방법입니다. 이 함수는 필수 키 목록을 인자로 받고, 검증 함수를 반환합니다. 반환된 검증 함수는 API 응답 객체를 받아 검증을 수행합니다.

const createResponseValidator = (requiredKeys) => (responseObject) => 
  requiredKeys.every(key => key in responseObject);

const validateApiResponse = createResponseValidator(['key1', 'key2', 'key3']);
const apiResponse = { key1: 'value1', key2: 'value2' };

if (!validateApiResponse(apiResponse)) {
  console.log('응답에서 필수 키가 누락되었습니다.');
}

Lodash _.has 함수 사용

Lodash와 같은 유틸리티 라이브러리를 사용하여 객체의 키를 검증하는 방법입니다. Lodash의 _.has 함수 등을 사용하면 간결하게 필수 키의 존재 여부를 검사할 수 있습니다.

const apiResponse = { key1: 'value1', key2: 'value2' };
const requiredKeys = ['key1', 'key2', 'key3'];

const isValid = requiredKeys.every(key => _.has(apiResponse, key));
if (!isValid) {
  console.log('응답에서 필수 키가 누락되었습니다.');
}

참고문서

• MDN Web Docs: Array.prototype.every()
• Lodash Documentation: _.has

The post [javscript]API 응답에서 키 값들을 검증하는 방법 appeared first on Market Traders.

Lodash를 사용한 특정 키 제외 방법

Lodash 라이브러리의 _.omit 함수를 사용하여 객체에서 하나 이상의 키를 제외한 새로운 객체를 생성하고, 그 후 _.isEqual 함수를 사용하여 두 객체의 동등성을 비교합니다.

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { a: 1, b: 2, c: 4 };

// 'c' 키를 제외하고 객체 비교
const keysToOmit = ['c'];
const obj1Omitted = _.omit(obj1, keysToOmit);
const obj2Omitted = _.omit(obj2, keysToOmit);

const isEqual = _.isEqual(obj1Omitted, obj2Omitted);
console.log(isEqual); // true

참고문서

• Lodash Documentation: _.omit
• Lodash Documentation: _.isEqual

The post [javscript]특정 키를 제외하고 두 객체를 비교하는 방법 appeared first on Market Traders.

Lodash _.orderBy

_.orderBy는 매우 유연해서 여러 기준으로 정렬이 필요한 경우에도 사용할 수 있으며, 각 기준에 대해 별도의 정렬 순서를 지정할 수 있습니다.

먼저 user로 오름차순 정렬하고, age 기준으로 내림차순 정렬하여 사용자 목록을 정렬합니다.

const users = [
  { 'user': 'kim',   'age': 20 },
  { 'user': 'lee', 'age': 36 },
  { 'user': 'jang',   'age': 40 },
  { 'user': 'go', 'age': 34 }
];

// 'user' 키를 기준으로 오름차순 정렬하고, 동일한 'user' 값이면 'age' 키를 기준으로 내림차순 정렬
const orderedUsers = _.orderBy(users, ['user', 'age'], ['asc', 'desc']);

참고문서

• Lodash Documentation: _.orderBy

The post [javscript]배열을 특정 키의 값에 따라 정렬하는 방법, _.orderBy appeared first on Market Traders.

경고 메시지인 “autoprefixer: end value has mixed support, consider using flex-end instead”는 justify-content: end; 속성값이 일부 브라우저에서는 지원되지 않거나 지원이 일관되지 않아, 대신 justify-content: flex-end;를 사용할 것을 권장한다는 내용입니다.

justify-content: end;와 justify-content: flex-end;는 모두 flex 컨테이너 내의 아이템들을 컨테이너의 끝부분으로 정렬시키는 역할을 하지만, end 값은 CSS Logical Properties에 따라 방향성이 있는 언어(예: 오른쪽에서 왼쪽으로 쓰는 언어)에 대해 다르게 작동할 수 있는 반면, flex-end는 항상 flex 방향의 끝부분을 의미합니다.따라서, 더 넓은 브라우저 호환성을 위해, Autoprefixer는 end 대신 flex-end 사용을 권장하는 것입니다. 이렇게 하면 모든 지원되는 브라우저에서 일관된 동작을 기대할 수 있습니다.

Autoprefixer에서 발생할 수 있는 몇 가지 일반적인 경고 메시지와 그 의미는 다음과 같습니다.

경고 메시지를 영어로 제공하고 그 의미를 설명하겠습니다. Autoprefixer에서 발생할 수 있는 몇 가지 일반적인 경고 메시지와 그 의미는 다음과 같습니다:

1. Gradient has outdated direction syntax: 이 경고는 CSS 그레디언트의 방향 구문이 구식임을 나타냅니다. 최신 표준에 따라 그레디언트 방향을 지정해야 합니다.
2. Autoprefixer doesn’t need vendor prefixes these days: 이 메시지는 특정 CSS 속성이나 값에 대해 더 이상 벤더 접두사가 필요하지 않다는 것을 알립니다. 최신 브라우저들은 많은 CSS 속성을 접두사 없이 지원합니다.
3. Adding prefixes only for final and IE versions of specification: 이 경고는 Autoprefixer가 최종 버전과 Internet Explorer를 위한 사양에만 접두사를 추가하고 있음을 알립니다. CSS 속성이 아직 실험적이거나 표준화 과정 중일 때 발생할 수 있습니다.
4. Try to avoid using display: flex on elements: 이 경고는 display: flex 속성을 사용할 때 주의를 기울일 필요가 있음을 알립니다. 특히 구형 브라우저에서는 flexbox의 구형 구문을 사용해야 할 수도 있습니다.
5. Browsers do not support aspect-ratio property yet: 이 경고는 aspect-ratio 속성이 일부 브라우저에서 아직 지원되지 않음을 나타냅니다. 이 속성은 요소의 가로 세로 비율을 설정하는 데 사용됩니다.
6. @keyframes missing vendor prefix: 이 메시지는 @keyframes 애니메이션 규칙에 벤더 접두사가 누락되었음을 알립니다. 일부 브라우저에서는 이에 대한 접두사가 필요할 수 있습니다.
7. Selector uses pseudo-element that is not fully supported: 이 경고는 사용된 가상 요소(pseudo-element)가 모든 브라우저에서 완전히 지원되지 않음을 나타냅니다. 예를 들어, ::placeholder는 일부 브라우저에서 특정 접두사가 필요할 수 있습니다.
8. flexbox doesn’t work with display: inline-flex in some browsers: 일부 브라우저에서 display: inline-flex와 함께 flexbox가 제대로 작동하지 않을 수 있음을 나타냅니다.
9. Writing mode values are not fully supported in all browsers: writing-mode 속성의 값이 모든 브라우저에서 완전히 지원되지 않음을 경고합니다.
10. grid-template-columns is not supported by IE without a prefix: Internet Explorer에서 접두사 없이 grid-template-columns 속성이 지원되지 않음을 알립니다.
11. clip-path property with this value is not supported by some browsers: 일부 브라우저에서 특정 값과 함께 사용된 clip-path 속성이 지원되지 않음을 경고합니다.
12. appearance property is not fully supported in all browsers: appearance 속성이 모든 브라우저에서 완전히 지원되지 않음을 나타냅니다.
13. Value sticky for position is not supported by some browsers: position: sticky 값이 일부 브라우저에서 지원되지 않음을 경고합니다.
14. text-decoration-skip-ink property is not supported by some browsers: 일부 브라우저에서 text-decoration-skip-ink 속성이 지원되지 않음을 알립니다.
15. column-gap property with grid layout is not supported by some browsers: grid 레이아웃과 함께 사용된 column-gap 속성이 일부 브라우저에서 지원되지 않음을 경고합니다.
16. Custom properties (CSS variables) are not supported by some browsers: 일부 브라우저에서 CSS 변수(사용자 정의 속성)가 지원되지 않음을 나타냅니다.
17. will-change property is not recognized by some browsers: 일부 브라우저에서 will-change 속성이 인식되지 않음을 경고합니다.

The post [css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미 appeared first on Market Traders.

Math.min

Math.min 메서드는 전달받은 숫자들 중 가장 작은 값을 반환합니다. 인자로 숫자들을 전달할 수 있으며, 최소값을 찾을 수 없는 경우(예: 인자가 없을 경우) Infinity를 반환합니다.

만약 배열에 있는 숫자들 중 최소값을 찾고자 한다면, 스프레드 연산자(…)를 사용하여 배열을 인자로 전달할 수 있습니다.

Math.min(…numbers, 5) 구문은 JavaScript의 스프레드 연산자(…)와 Math.min 메서드를 함께 사용하는 예시입니다. 이 방식은 주어진 숫자 배열(numbers) 내의 모든 숫자와 추가적으로 명시된 숫자(여기서는 5) 중에서 최소값을 찾는 데 사용됩니다. 스프레드 연산자는 배열을 개별 요소로 펼치는 역할을 하기 때문에, Math.min 메서드에 배열의 각 요소를 개별 인자로 전달할 수 있게 해줍니다.

const minVal = Math.min(5, 1, 4, 2, 3);
console.log(minVal); // 1

const numbers = [5, 1, 4, 2, 3];
const minVal = Math.min(...numbers);
console.log(minVal); // 1

const numbers = [10, 20, 30, 40];
const minVal = Math.min(...numbers, 5);
console.log(minVal); // 5

Math.max

Math.max 메서드는 전달받은 숫자들 중 가장 큰 값을 반환합니다. Math.min과 비슷하게 숫자들을 인자로 전달받으며, 최대값을 찾을 수 없는 경우 -Infinity를 반환합니다.

const maxVal = Math.max(5, 1, 4, 2, 3);
console.log(maxVal); // 5

const numbers = [5, 1, 4, 2, 3];
const maxVal = Math.max(...numbers);
console.log(maxVal); // 5

Math.min과 Math.max 메서드는 JavaScript에서 매우 유용한 수학 관련 함수로, 간단한 코드로 숫자 데이터 집합의 최소값과 최대값을 찾는 작업을 손쉽게 할 수 있게 해줍니다. 스프레드 연산자와 함께 사용하면 배열 내의 데이터를 처리할 때도 매우 효과적입니다. 이러한 메서드들을 활용하여 데이터 분석, 수학 계산, 조건 로직 처리 등 다양한 상황에서 코드를 간결하고 효율적으로 만들 수 있습니다.

관련문서

• MDN web docs Math.min() : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/min
• MDN web docs Math.max() : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/max

The post [javascript]Math.min, Math.max 사용방법 appeared first on Market Traders.

사용방법

• expression: 검사할 값입니다. 이 값이 null 또는 undefined가 아니면 result는 이 값이 됩니다.
• defaultValue: expression이 null 또는 undefined일 경우 반환될 값입니다.

const result = expression ?? defaultValue;

기본값 설정

변수에 값이 할당되지 않았을 때 기본값을 제공하고자 할 때 유용합니다. 예를 들어, 함수 매개변수에 기본값을 설정하거나, API 호출 결과와 같이 예측 불가능한 데이터에 대한 기본값을 설정할 때 사용할 수 있습니다.

function greet(name) {
  const userName = name ?? "Guest";
  console.log(`Hello, ${userName}!`);
}

설정 값이 falsy 값일 경우에도 유지해야 할 때

0, “” (빈 문자열), 또는 false와 같은 falsy 값들이 유효한 입력 값이거나 설정 값으로 사용되어야 할 경우, ?? 연산자는 이러한 값들이 null 또는 undefined로 잘못 대체되지 않도록 보장합니다.

const volume = 0;
console.log(volume ?? 10); // 0

구성 객체의 선택적 속성

구성 객체에서 선택적 속성을 다룰 때, 해당 속성이 설정되지 않았을 때만 기본값을 적용하고 싶을 때 유용합니다. 이는 애플리케이션의 설정이나 사용자 설정 등 다양한 옵션을 다룰 때 특히 유용합니다.

const config = { timeout: 0 };
const timeoutDuration = config.timeout ?? 3000;
console.log(timeoutDuration); // 0

체이닝 연산과 함께 사용

null 또는 undefined 값을 안전하게 처리하면서 객체의 속성에 접근할 때, Optional Chaining (?.) 연산자와 결합하여 사용될 수 있습니다. 이는 객체의 깊은 속성 값을 안전하게 접근하고, 필요한 경우 기본값을 제공할 때 유용합니다.

const user = {
  profile: {
    name: null,
  },
};

const userName = user.profile.name ?? "Anonymous";
console.log(userName); // "Anonymous"

예시

위의 예시에서 첫 번째 console.log는 name이 null이기 때문에 defaultName인 “John Doe”를 출력합니다. 두 번째 console.log는 age가 0이지만, 0은 null이나 undefined가 아니기 때문에 ?? 연산자의 좌변 값인 0을 그대로 사용합니다.

const name = null;
const defaultName = "John Doe";
console.log(name ?? defaultName); // "John Doe"

const age = 0;
console.log(age ?? 25); // 0

?? vs ||

Nullish coalescing operator (??)와 논리 OR 연산자 (||)의 주요 차이점은 falsy 값(0, “”, NaN, false, null, undefined)을 처리하는 방식에 있습니다.

const height = 0;

console.log(height || 100); // 100
console.log(height ?? 100); // 0

위 예시에서 || 연산자는 height가 0 (falsy 값)이기 때문에 우변의 100을 반환합니다. 반면, ?? 연산자는 height의 값이 null 또는 undefined가 아니기 때문에 0을 그대로 반환합니다. 따라서, ?? 연산자는 null 또는 undefined의 경우에만 우변의 값을 반환하며, 다른 falsy 값들은 유효한 값으로 간주합니다.

Nullish coalescing operator는 코드에서 null 또는 undefined 값을 다룰 때 보다 명확한 의도를 전달할 수 있도록 도와주며, 특히 설정 값이나 옵셔널한 값들을 다룰 때 유용하게 사용될 수 있습니다.

관련문서

Nullish coalescing operator : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing

The post 널 병합 연산자 Nullish coalescing operator (??) 에 대해서 알아보자. appeared first on Market Traders.

부모 요소의 border-radius를 자식 요소의 background-color로 가려지지 않도록 설정해야 합니다. 이를 위해 부모 요소에 overflow: hidden; 속성을 추가하여 자식 요소의 배경이 부모 요소의 경계를 벗어나지 못하도록 만들 수 있습니다.

.parent-div {
  border: 1px solid #A8C6DF;
  border-radius: 10px;
  overflow: hidden; /* 자식 요소의 배경을 가립니다 */
}

.child-div {
  background-color: #E0E0E0; /* 자식 요소의 배경색을 설정합니다 */
}

자식 요소에도 border-radius 적용

부모 요소의 border-radius 값을 자식 요소에도 동일하게 적용하여, 자식 요소의 모서리가 부모 요소의 모서리와 일치하도록 만들 수 있습니다. 자식 요소가 부모 요소의 전체 크기를 차지하는 경우 유용합니다.

CSS clip-path 사용

더 복잡한 모양이나 특정 영역에서만 자식 요소의 background-color를 가리고 싶은 경우 clip-path 속성을 사용할 수 있습니다. 이 방법은 자식 요소의 배경을 부모 요소의 특정 형태에 맞춰 자를 때 유용합니다.

.child {
  clip-path: inset(0); /* 부모 요소의 border-radius에 맞춰 조정 가능 */
}

자식 요소에 background-clip 속성 사용

또 다른 접근 방법으로, 부모 요소에 border가 있고 자식 요소의 배경색이 이를 넘지 않게 하고 싶은 경우, 자식 요소에 background-clip: padding-box; 속성을 사용할 수 있습니다. 이 속성은 배경색이나 이미지가 border 영역을 넘어서지 않도록 합니다.

.child {
  background-clip: padding-box;
}

참고문서

• MDN Web Docs CSS backgrounds and borders, border-radius
• CSS-Tricks: overflow
• OneNaught: CSS: inner elements breaking border-radius

The post [css]부모 요소의 border-radius가 자식 요소의 background-color로 가려지지 않도록 설정할 수 있는 방법 appeared first on Market Traders.

encodeURI

• 이 함수는 전체 URL을 인코딩합니다.
• 문자열 내의 특정 문자(예: :, /, ?, #, [, ], @, !, $, &, ', (, ), *, +, ,, ;, =)를 제외한 대부분의 문자는 인코딩되지 않습니다.
• 즉, 예약 문자를 제외한 문자열 내의 대부분의 문자를 인코딩하지 않습니다.
• encodeURI는 완전한 URL을 인코딩할 때 사용됩니다.

사용예시

encodeURI("https://example.com/?query=hello world")

encodeURIComponent

• 이 함수는 URL의 쿼리 문자열 파라미터 값을 인코딩합니다.
• encodeURI와 달리, 예약 문자를 포함한 모든 문자를 인코딩합니다.
• 예약 문자는 URL에 특별한 의미를 가지고 있어서 데이터로 사용될 때 인코딩되어야 합니다. 예를 들어, 공백이 %20으로 인코딩되고, &는 %26으로 인코딩됩니다.
• encodeURIComponent는 URL의 쿼리 문자열 파라미터 값을 인코딩할 때 사용됩니다.
• 한글 파일을 인코딩할 때는 주로 encodeURIComponent를 사용합니다. 왜냐하면 encodeURIComponent는 URL의 쿼리 문자열 파라미터 값을 인코딩하는데 적합하기 때문입니다. 한글은 URL에 사용될 수 있는 문자가 아니며, 따라서 URL에 포함될 때 인코딩되어야 합니다. encodeURIComponent를 사용하면 한글을 포함한 모든 문자를 올바르게 인코딩할 수 있습니다.

사용예시

const koreanFileName = "한글파일.txt";
const encodedFileName = encodeURIComponent(koreanFileName);
const url = `https://example.com/download?file=${encodedFileName}`;

간단히 말해, encodeURI는 URL 전체를 인코딩할 때 사용되고, encodeURIComponent는 URL의 특정 부분(주로 쿼리 문자열 파라미터 값)을 인코딩할 때 사용됩니다.

The post [javascript]encodeURI, encodeURIComponent 차이점 appeared first on Market Traders.

기본 사용법

let result = string.match(regexp);

• string: 검사할 문자열입니다.
• regexp: 문자열에서 찾고자 하는 패턴을 나타내는 정규 표현식입니다.

예시

let str = "Hello, world!";
let regexp = /Hello/;
let result = str.match(regexp);
console.log(result); // 출력: ["Hello"]

이 예시에서 str 문자열에서 “Hello”라는 단어를 찾고 있습니다.

글로벌 검색

정규 표현식에 g 플래그를 사용하면 문자열 전체에서 모든 일치하는 항목을 찾습니다.

let str = "Cats are great, cats are fun.";
let regexp = /cats/gi; // 'g'는 전역 검색, 'i'는 대소문자 구분 안 함
let result = str.match(regexp);
console.log(result); // 출력: ["Cats", "cats"]

일치 항목 없을 경우

일치하는 항목이 없으면 null을 반환합니다.

let str = "Hello, world!";
let regexp = /dog/;
let result = str.match(regexp);
console.log(result); // 출력: null

그룹화 및 캡처

정규 표현식에서 괄호를 사용하여 일치하는 부분을 그룹화하고 캡처할 수 있습니다.

let str = "I love JavaScript";
let regexp = /love (\w+)/;
let result = str.match(regexp);
console.log(result); // 출력: ["love JavaScript", "JavaScript"]
console.log(result[1]); // 출력: "JavaScript"

여러 단어 찾기

여러 단어를 찾으려면 | 연산자를 사용할 수 있습니다.

let str = "Cats, dogs, and birds.";
let regexp = /cats|dogs|birds/gi;
let result = str.match(regexp);
console.log(result); // 출력: ["Cats", "dogs", "birds"]

숫자 찾기

숫자를 찾으려면 \d를 사용합니다.

let str = "There are 3 apples and 5 oranges.";
let regexp = /\d+/g;
let result = str.match(regexp);
console.log(result); // 출력: ["3", "5"]

이메일 주소 찾기

복잡한 패턴, 예를 들어 이메일 주소를 찾으려면, 보다 정교한 정규 표현식이 필요합니다.

let str = "My email is example@test.com";
let regexp = /\S+@\S+\.\S+/;
let result = str.match(regexp);
console.log(result); // 출력: ["example@test.com"]

특정 문자로 시작하거나 끝나는 단어 찾기

let str = "This is a test";
let startRegexp = /^This/;
let endRegexp = /test$/;
console.log(str.match(startRegexp)); // 출력: ["This"]
console.log(str.match(endRegexp)); // 출력: ["test"]

특정 문자 집합 찾기

대괄호 []를 사용하여 특정 문자 집합 중 하나에 해당하는 문자를 찾습니다.

let str = "Hello, how are you?";
let regexp = /[aeiou]/g;
let result = str.match(regexp);
console.log(result); // 출력: ["e", "o", "o", "a", "e", "o", "u"]

특정 형식의 문자열 찾기

특정 형식, 예를 들어 날짜 형식을 찾으려면 보다 복잡한 정규 표현식이 필요합니다.

let str = "Today's date is 11/11/2023.";
let regexp = /\d{2}\/\d{2}\/\d{4}/;
let result = str.match(regexp);
console.log(result); // 출력: ["11/11/2023"]

이러한 예시들은 match() 메소드가 얼마나 유연하고 강력한지 보여줍니다. 정규 표현식을 통해 문자열에서 다양한 패턴을 찾을 수 있으며, match() 메소드는 이러한 패턴을 추출하는 데 매우 유용합니다.

관련문서

MDN web docs : String.prototype.match()

The post [javascript]문자열에서 정규 표현식과 일치하는 부분을 찾는 데 사용되는 match() appeared first on Market Traders.