Nuhends 의 Tech Life

[프로그래머스] lv1. 조건에 맞게 수열 변환하기 2 / Javascript

nuhends — Tue, 29 Apr 2025 01:18:32 +0900

[프로그래머스] lv1. 조건에 맞게 수열 변환하기 2 / Javascript

1. 문제

정수 배열 arr가 주어집니다. arr의 각 원소에 대해 값이 50보다 크거나 같은 짝수라면 2로 나누고, 50보다 작은 홀수라면 2를 곱하고 다시 1을 더합니다. 이러한 작업을 x번 반복한 결과인 배열을 arr(x)라고 표현했을 때, arr(x) = arr(x + 1)인 x가 항상 존재합니다. 이러한 x 중 가장 작은 값을 return 하는 solution 함수를 완성해 주세요. 단, 두 배열에 대한 "="는 두 배열의 크기가 서로 같으며, 같은 인덱스의 원소가 각각 서로 같음을 의미합니다.

제한사항

1 ≤ arr의 길이 ≤ 1,000,000

- 1 ≤ arr의 원소의 값 ≤ 100

입출력 예

2. 풀이

function solution(arr) {
    let i = 0;
    let flag = true;
    
    while (flag) {
        flag = false;
        
        const nextArr = arr.map(v => {
            if(v >= 50 && v % 2 === 0) {
                return v / 2
            }

            if (v < 50 && v % 2 === 1) {
                return (v * 2) + 1
            }
            
            return v;
        });
        
        for (let k=0; k<arr.length; k++) {
            if (nextArr[k] !== arr[k]) {
                flag = true;
                i++;
                arr = nextArr;
                break;
            }
        }
    }
    return i;
}

3. 시간복잡도

O(n * x)

- x는 문제 데이터에 따라 다름

n = 1,000,000일 때
x = 20~50회 정도 반복된다면
대략 2천만~5천만 연산 수준 → JS로도 1초 이내 가능

즉, n은 크지만 x가 보통 작기 때문에 이 코드는 실질적으로 충분히 통과할 수 있다.

[프로그래머스] lv1. 없는 숫자 더하기 / Javascript

nuhends — Mon, 28 Apr 2025 23:54:09 +0900

[프로그래머스] lv1. 없는 숫자 더하기 / Javascript

1. 문제

임의의 문자열이 주어졌을 때 문자 "a", "b", "c"를 구분자로 사용해 문자열을 나누고자 합니다. 예를 들어 주어진 문자열이 "baconlettucetomato"라면 나눠진 문자열 목록은 ["onlettu", "etom", "to"] 가 됩니다. 문자열 myStr이 주어졌을 때 위 예시와 같이 "a", "b", "c"를 사용해 나눠진 문자열을 순서대로 저장한 배열을 return 하는 solution 함수를 완성해 주세요. 단, 두 구분자 사이에 다른 문자가 없을 경우에는 아무것도 저장하지 않으며, return할 배열이 빈 배열이라면 ["EMPTY"]를 return 합니다.

제한사항

1 ≤ myStr의 길이 ≤ 1,000,000

- myStr은 알파벳 소문자로 이루어진 문자열 입니다.

입출력 예

2. 풀이

function solution(str) {
    const result = [];
    let temp = [];
    
    for (let char of str) {
        if (char === 'a' || char === 'b' || char === 'c') {
            if (temp.length > 0) {
                result.push(temp.join(''));
                temp = [];
            } 
        } else {
            temp.push(char)   
        }
    }
    
    if (temp.length > 0) {
        result.push(temp.join(''));
    } 
    
    return result.length === 0 ? ["EMPTY"] : result;
}

temp 배열에 push하고 concat 한 이유(vs temp += char 방식)

+= 로 처리하게되면 루프를 돌 때 마다 중간 과정의 문자값이 메모리에 생성되기 때문에!

3. 시간복잡도

O(N)

→ 따라서 최악의 경우에도 O(1,000,000)

[프로그래머스] lv1. 문자열 묶기 / Javascript

nuhends — Mon, 28 Apr 2025 21:29:28 +0900

[프로그래머스] lv1. 문자열 묶기 / Javascript

1. 문제

문자열 배열 strArr이 주어집니다. strArr의 원소들을 길이가 같은 문자열들끼리 그룹으로 묶었을 때 가장 개수가 많은 그룹의 크기를 return 하는 solution 함수를 완성해 주세요.

제한사항

- 제한사항 1 ≤ strArr의 길이 ≤ 100,000

- 1 ≤ strArr의 원소의 길이 ≤ 30

- strArr의 원소들은 알파벳 소문자로 이루어진 문자열입니다.

입출력

2. 풀이

function solution(strArr) {
    const strMap = new Map();
    
    for(let str of strArr) {
        const key = str.length;
        strMap.set(key, (strMap.get(key) || 0) + 1)
    }
    
    return Math.max(...strMap.values())
}

3. 시간복잡도

O(N)

→ 따라서 최악의 경우에도 O(100,000)

[프로그래머스] lv1. 특별한 이차원 배열 1

nuhends — Mon, 28 Apr 2025 19:14:47 +0900

[프로그래머스] lv1. 특별한 이차원 배열 1

특별한 이차원 배열

1. 문제

정수 n이 매개변수로 주어질 때, 다음과 같은 n × n 크기의 이차원 배열 arr를 return 하는 solution 함수를 작성해 주세요. arr[i][j] (0 ≤ i, j < n)의 값은 i = j라면 1, 아니라면 0입니다.

제한사항

1 ≤ n ≤ 100

입출력 예 #1

2. 풀이

function solution(n) {
    return Array.from({ length: n }, (v, i) => Array.from({ length: n }, (v, k) => i === k ? 1 : 0))
}

3. 시간복잡도

O(N²)

→ 최악의 경우에도 O(100²) = O(10,000)

[Softeer] lv1. 나무심기 / Javascript

nuhends — Mon, 28 Apr 2025 00:01:58 +0900

Softeer 나무심기 풀이 해설

1. 문제

남우는 나무를 2개 심으려고 합니다. 나무는 주어진 n개의 위치 중 서로 다른 두 곳에 꼭 심어야만 하며, 1번 위치부터 n번 위치까지 각 위치마다 토양의 비옥함에 해당하는 값 Fi가 주어졌을 때 남우는 나무가 심어지는 두 위치 a, b에서 토양의 비옥함의 곱인 Fa ∗ Fb가 최대가 되도록 나무를 심으려고 합니다. 남우가 적절한 위치에 나무를 심을 수 있도록 하는 프로그램을 작성해보세요.

만약 n이 3이고 다음과 같이 토양의 비옥함이 순서대로 5, -1, 4인 경우 5, 4 위치에 나무를 심으면 비옥함의 곱이 20으로 최대가 됩니다.

제약조건

2 ≤ n ≤ 100
-100 ≤ Fi ≤ 100

입력형식

첫 번째 줄에는 n이 주어집니다.
두 번째 줄에는 각 위치에서의 토양의 비옥함에 해당하는 정보 Fi가 각각 공백을 사이에 두고 주어집니다. Fi가 음수인 경우도 주어질 수 있음에 유의합니다.

출력형식

첫 번째 줄에 가능한 Fa ∗ Fb 값 중 최댓값을 출력합니다. 1 ≤ a, b ≤ n, a ≠ b 를 만족하는 경우 중 최대를 구해야 함에 유의합니다.

입력예제1

2 1 -1

출력예제1

-1

입력예제2

2 -1 -1

출력예제2

입력예제3

3 5 -1 4

출력예제3

입력예제4

3 -5 1 -4

출력예제4

2. 언어별 시간/메모리

나무심기 언어별 시간 메모리 요건

3. 풀이

const fs = require('fs');
const inputs = fs.readFileSync('/dev/stdin', 'utf8').trim().split('\n')

const n = Number(inputs[0]);
const arrF = inputs[1].split(' ').map(v => Number(v)).sort((a,b) => a-b);

if (n === 2) {
    console.log(arrF[0] * arrF[1])
} else {
    const normal = arrF[n-1] * arrF[n-2];

    if (arrF[0] < 0 && arrF[1] < 0) {
        const mValue = arrF[0] * arrF[1];
        console.log(Math.max(mValue, normal));
    } else {
        console.log(normal);
    }
}

핵심 아이디어

오름차순으로 sort 후, 제일 작은 숫자 2개의 곱과 제일 큰 숫자 2개의 곱을 비교하여 큰 것을 Pick

4. 시간복잡도

O(N log(N))

→ 따라서 최악의 경우에도 O(100 log(100)) = 대략 660번의 연산

5. 개선

정렬 없이 O(N)으로 풀 수 있는 방법이 있음.

순회하면서 가장 작은 수 2개와 가장 큰수 2개를 찾으면 됨

const fs = require('fs');
const inputs = fs.readFileSync('/dev/stdin', 'utf8').trim().split('\n')

const n = Number(inputs[0]);
const arr = inputs[1].split(' ').map(v => Number(v));

let firstMax = -Infinity
let secondMax = -Infinity
let firstMin = -Infinity
let secondMin = -Infinity

for (let num of arr) {
	if (num > firstMax) {
    	secondMax = firstMax;
    	firstMax = num;
    } else if (num > secondMax) {
    	secondMax = num
    }
    
	if (num < firstMin) {
    	secondMin = firstMin;
    	firstMin = num;
    } else if (num < secondMin) {
    	secondMax = num
    }
}

return Math.max(firstMax * secondMax, firstMin * secondMin);

구현에 만족하지말고 O(n)혹은 O(logN) 으로 구현할 수 있는 방법이 있는지 생각하자.

[프로그래머스] lv1. 없는 숫자 더하기 / Javascript

nuhends — Sat, 26 Apr 2025 02:31:47 +0900

1. 문제

0부터 9까지의 숫자 중 일부가 들어있는 정수 배열 numbers가 매개변수로 주어집니다. numbers에서 찾을 수 없는 0부터 9까지의 숫자를 모두 찾아 더한 수를 return 하도록 solution 함수를 완성해주세요.

제한사항

1 ≤ numbers의 길이 ≤ 9

- 0 ≤ numbers의 모든 원소 ≤ 9

- numbers의 모든 원소는 서로 다릅니다.

입출력 예

2. 풀이

const NUMS = { 0:0, 1:1, 2:2, 3:3, 4:4, 5:5, 6:6, 7:7, 8:8, 9:9 };

function solution(numbers) {
    for (let n of numbers) {
        delete NUMS[n];
    }
    
    return Object.values(NUMS).reduce((acc, cur) => acc += cur, 0)
}

개선할 점

- NUMS 변수가 전역인점. 함수를 여러번 호출하면 전역 NUMS의 값이 바뀌어서 결과가 바뀌게 됨

- delete 연산에서 약간의 비용이 발생할 수 있음

GPT가 제안한 방법

function solution(numbers) {
	const TOTAL = 45;
	return numbers.reduce((acc, cur) => acc - cur, TOTAL)
}

똑똑하다...

3. 시간복잡도

O(N)

→ 최악의 경우에도 O(9)

[프로그래머스] lv1. 음양 더하기 / Javascript

nuhends — Fri, 25 Apr 2025 23:10:41 +0900

1. 문제

어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요.

제한사항

- absolutes의 길이는 1 이상 1,000 이하입니다.

- absolutes의 모든 수는 각각 1 이상 1,000 이하입니다.

- signs의 길이는 absolutes의 길이와 같습니다.

- signs[i] 가 참이면 absolutes[i] 의 실제 정수가 양수임을, 그렇지 않으면 음수임을 의미합니다.

입출력 예

2. 풀이

function solution(absolutes, signs) {
    return signs.reduce((acc, cur, i) => acc + (absolutes[i] * (cur ? 1 : -1)), 0);
}

3. 시간복잡도

O(N)

→ 따라서 최악의 경우에도 O(1,000)

[프로그래머스] lv1. 하샤드 수 / Javascript

nuhends — Fri, 25 Apr 2025 23:03:52 +0900

1. 문제

문제 설명 양의 정수 x가 하샤드 수이려면 x의 자릿수의 합으로 x가 나누어져야 합니다. 예를 들어 18의 자릿수 합은 1+8=9이고, 18은 9로 나누어 떨어지므로 18은 하샤드 수입니다. 자연수 x를 입력받아 x가 하샤드 수인지 아닌지 검사하는 함수, solution을 완성해주세요.

제한사항

x는 1 이상, 10000 이하인 정수입니다.

x	return
10	true
11	true
12	false
13	false

2. 풀이

function solution(x) {
    let sum = 0;
    
    for(const c of String(x)) {
        sum += Number(c);
    }
    
    return x % sum === 0
}

3. 시간복잡도

O(N)

→ 따라서 최악의 경우에도 O(10,000)

[프로그래머스] lv1. 정수 내림차순으로 배치하기 / Javascript

nuhends — Fri, 25 Apr 2025 22:00:27 +0900

1. 문제

함수 solution은 정수 n을 매개변수로 입력받습니다. n의 각 자릿수를 큰것부터 작은 순으로 정렬한 새로운 정수를 리턴해주세요. 예를들어 n이 118372면 873211을 리턴하면 됩니다.

https://school.programmers.co.kr/learn/courses/30/lessons/12933

프로그래머스

SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

제한사항

n은 1이상 8000000000 이하인 자연수입니다.

입출력 예 #1

n	return
118372	873211

2. 풀이

function solution(n) {
    return Number(String(n).split('').sort((a,b) => Number(b)-Number(a)).join(''))
}

3. 시간복잡도

- String(n) → O(d)

- split('') → O(d)

- sort((a, b) => Number(b) - Number(a)): → 배열 정렬임. 평균 시간복잡도는 O(d log d)

- (내부적으로 퀵소트 or 병합정렬 기반)

- join('') → O(d)

- Number(...) → O(d)

→ O(d log d)

[프로그래머스] lv1. 문자열 내 p와 y의 개수 / Javascript

nuhends — Fri, 25 Apr 2025 21:00:30 +0900

1. 문제

대문자와 소문자가 섞여있는 문자열 s가 주어집니다. s에 'p'의 개수와 'y'의 개수를 비교해 같으면 True, 다르면 False를 return 하는 solution를 완성하세요. 'p', 'y' 모두 하나도 없는 경우는 항상 True를 리턴합니다. 단, 개수를 비교할 때 대문자와 소문자는 구별하지 않습니다. 예를 들어 s가 "pPoooyY"면 true를 return하고 "Pyy"라면 false를 return합니다.

제한사항

- 문자열 s의 길이 : 50 이하의 자연수

- 문자열 s는 알파벳으로만 이루어져 있습니다.

입출력 예 #1

입출력 예 #1 'p'의 개수 2개, 'y'의 개수 2개로 같으므로 true를 return 합니다.

입출력 예 #2

'p'의 개수 1개, 'y'의 개수 2개로 다르므로 false를 return 합니다.

2. 풀이

function solution(s){
    s = s.toUpperCase();
    let count = 0;
    
    for(let i=0; i<s.length; i++) {
        count += (s[i] === 'P' ? 1 : s[i] === 'Y' ? -1 : 0);
    }
    
    return count === 0;
}

개선 포인트

// AS-IS
for(let i=0; i<s.length; i++) {
	count += (s[i] === 'P' ? 1 : s[i] === 'Y' ? -1 : 0);
}

// TO-BE
for(const c of s) {
	count += (c === 'P' ? 1 : c === 'Y' ? -1 : 0);
}

- for문 말고 const c of str 로 문자열 순회가 가능

3. 시간복잡도

O(N)

→ 따라서 최악의 경우에도 O(50)

[프로그래머스] lv1. 나머지가 1이 되는 수 찾기/ Javascript

nuhends — Fri, 25 Apr 2025 20:14:13 +0900

[프로그래머스] lv1. 나머지가 1이 되는 수 찾기/ Javascript

나머지가 1이 되는 수 찾기

1. 문제

자연수 n이 매개변수로 주어집니다. n을 x로 나눈 나머지가 1이 되도록 하는 가장 작은 자연수 x를 return 하도록 solution 함수를 완성해주세요. 답이 항상 존재함은 증명될 수 있습니다.

제한사항

3 ≤ n ≤ 1,000,000

입출력 예 #1

10을 3으로 나눈 나머지가 1이고, 3보다 작은 자연수 중에서 문제의 조건을 만족하는 수가 없으므로, 3을 return 해야 합니다.

입출력 예 #2

12를 11로 나눈 나머지가 1이고, 11보다 작은 자연수 중에서 문제의 조건을 만족하는 수가 없으므로, 11을 return 해야 합니다.

2. 풀이

function solution(n) {
    for (let i=2; i < n; i++) {
        if (n % i === 1) {
            return i;
        }
    }
}

3. 시간복잡도

O(N)

→ 따라서 최악의 경우에도 O(1,000,000)

[프로그래머스] lv1. 약수의 합 / Javascript

nuhends — Fri, 25 Apr 2025 18:55:01 +0900

[프로그래머스] lv1. 약수의 합 / Javascript

1. 문제

정수 n을 입력받아 n의 약수를 모두 더한 값을 리턴하는 함수, solution을 완성해주세요.

https://school.programmers.co.kr/learn/courses/30/lessons/12928

제한 사항

n은 0 이상 3000이하인 정수입니다.

입출력 예 #1

12의 약수는 1, 2, 3, 4, 6, 12입니다. 이를 모두 더하면 28입니다.

입출력 예 #2

5의 약수는 1, 5입니다. 이를 모두 더하면 6입니다.

프로그래머스

SW개발자를 위한 평가, 교육, 채용까지 Total Solution을 제공하는 개발자 성장을 위한 베이스캠프

programmers.co.kr

2. 풀이

function solution(n) {
    let result = [];
    let total = 0;
    
    for (let i=1; i<=Math.sqrt(n); i++) {
        if (n % i === 0) {
            result.push(i);
        }
    }
    
    result.forEach((v) => {
        const opV = n / v === v ? 0 : n / v;
        total += (v + opV)
    })

    return total;
}

핵심 아이디어

1. 12의 약수는 [1,2,3,4,6,12] 이다. 사실 이는 반으로 쪼개도됨 [1,2,3] [4,5,6]

1,2,3만 구하고 나머진 N에서 1,2,3으로 각각 나누면 4,5,6을 구할 수 있음. 단순해보이지만 시간복잡도에서 큰 차이가 있음.

2. 16같은 수는 [1,2,4,8,16] 약수를 가진다. 보면 약수의 개수가 홀수임. 이때는 √n 까지 순회하여 나누어떨어지는 값을 배열에 넣어두고

이후 연산에서 값이 √n일 경우 예외처리 해주면 됨. 이는 O(n)에서 O(√n) 으로 시간복잡도를 줄일 수 있음.

4. 시간복잡도

O(√n)

→ 따라서 최악의 경우에도 O(√3000) = O(54.xx)

[Softeer] lv2. [21년 재직자 대회 예선] 회의실 예약 / Javascript

nuhends — Fri, 25 Apr 2025 16:13:13 +0900

[Softeer] lv2. [21년 재직자 대회 예선] 회의실 예약 / Javascript

[21년 재직자 대회 예선] 회의실 예약

언어별 시간/메모리

JavaScript	1초	1024MB
C	1초	1024MB
C++	1초	1024MB
Java	1초	1024MB
Python	1초	1024MB

문제

회사에는 N개의 회의실이 있다. 수많은 팀이 모여 토론하고 업무를 처리하기 위해서는 회의실이 필수적이다.

내부망에 아주 간단한 회의실 예약 시스템이 있지만 편의성이 매우 떨어진다. 단순히 예약된 회의의 목록만 표시되기 때문에, 방 별로 비어 있는 시간이 언제인지를 확인하기가 힘든 것이다. 당신은 이를 직접 해결해 보기로 마음 먹었다.

회의실 이용 규칙은 다음과 같다:

- 회의실은 9시부터 18시까지만 사용 가능하다. 모든 회의의 시간은 이 안에 완전히 포함되어야 한다.

- 회의는 정확히 한 회의실을 연속한 일정 시간 동안만 점유한다. 즉 각 회의는 (회의실, 시작 시각, 종료 시각)의 정보로 나타낼 수 있다.

- 회의의 시작과 종료 시각은 시(時, hour) 단위로만 설정 가능하다. 같은 회의실을 사용하는 회의 시간은 서로 겹칠 수 없다. 여기서 겹친다는 것은, 두 회의 모두에 포함되는 시간이 1시간 이상 존재한다는 것을 의미한다. 예를 들어, 10시-12시의 회의와 11시-13시의 회의는 겹치는데, 11시-12시의 시간이 두 회의 모두에 포함되기 때문이다.

- 한 회의가 끝나는 시각에, 같은 회의실에서 다른 회의가 시작하는 것은 허용된다. 이 경우 두 회의가 겹치지 않기 때문이다.

- 길이가 0인 회의, 즉 시작 시각과 종료 시각이 동일한 회의는 예약된 바 없으며, 새롭게 잡을 수도 없다.

이미 예약된 M개의 회의에 대한 정보가 주어지면, 회의실별로 비어 있는 시간대를 정리해 출력하는 프로그램을 작성해 보자. 구체적인 형식은 아래를 참고하시오.

Softeer - 현대자동차그룹 SW인재확보플랫폼

softeer.ai

제약 조건

1 ≤ N ≤ 50

1 ≤ M ≤ 100

회의실의 이름은 영문 알파벳 소문자로만 이루어져 있으며 길이는 1 이상 10 이하이다.

주어지는 모든 시각은 9 이상 18 이하이다.

회의의 시작 시각은 회의의 종료 시각을 1시간 이상 앞선다.

입력 형식

첫째 줄에 회의실의 수와 예약된 회의의 수를 나타내는 정수 N과 M이 공백을 사이에 두고 주어진다.

이어 N개의 줄에는 각 회의실의 이름이 주어진다.

이어 M개의 줄에는 각 회의가 배정된 회의실의 이름 r과 시작 시각 s, 그리고 종료 시각 t가 공백을 사이에 두고 주어진다.

출력 형식

각 회의실에 대한 정보를 회의실 이름의 오름차순으로 출력한다.

각 회의실에 대한 정보는 다음과 같다.

첫째 줄에는 { Room 회의실이름: } (중괄호 제외)을 출력한다.

둘째 줄에는 예약가능 시간을 출력한다.

- 예약 가능한 시간대의 개수를 n이라고 할 때, { n available: } (중괄호 제외)을 출력하고, 뒤따른 n개의 줄에 예약 가능한 시간대를 { 09-18 } (하이픈 한개, 중괄호 제외)형태로 출력해야 한다. 한 자리 수의 경우 앞에 0을 붙여 두 자리 수로 만들어야 함에 유의하라.

- 예약 가능한 시간이 없다면, Not available을 출력한다.

각 회의실에 대한 정보 사이에는 ----- (하이픈 다섯 개)로 구분선이 출력되어야 한다.

입력 예제1

3 7
grandeur
avante
sonata
sonata 14 16
grandeur 11 12
avante 15 18
sonata 10 11
avante 9 12
grandeur 16 18
avante 12 15

출력 예제1

Room avante:
Not available
-----
Room grandeur:
2 available:
09-11
12-16
-----
Room sonata:
3 available:
09-10
11-14
16-18

입력 예제2

3 2
santafe
aerocity
porter
santafe 9 12
porter 9 18

출력 예제1

Room aerocity:
1 available:
09-18
-----
Room porter:
Not available
-----
Room santafe:
1 available:
12-18

풀이

const readline = require('readline');

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
});

const pad = (n) => String(n).padStart(2, '0')

const OEPN_TIME = 9;
const CLOSE_TIME = 18;

let N = 0; 
let M = 0;

let rooms = [];
let info;

rl.on('line', (line) => {
    if (N === 0 && M === 0) {
        [N, M] = line.trim().split(' ').map(Number);
    }  else if (rooms.length < N) {
        rooms.push(line.trim());
    } else if (rooms.length === N) {
        if (!info) {
            info = {}
            rooms.sort().forEach(r => info[r] = [])
        }
        const [room, start, end] = line.trim().split(' ')
        info[room].push([Number(start), Number(end) - Number(start)]); // { grandeur: [ [11, 1] ] }
    }
});

rl.on('close', () => {
    // 예약된 회의시간 배열 오름차순 정렬
    for (let room in info) {
        info[room] = info[room].sort((a, b) => a[0] - b[0]);
    }
    
    for (let room in info) {
        let current = OEPN_TIME;
        let aList = [];

        if (room !== rooms[0]) {
            console.log('-----')
        }
        console.log(`Room ${room}:`);
        
        info[room].forEach((time, index) => {
            const [s, total] = time;

            if (current < s) {
                aList.push([current, s])
            }

            current = s + total;
        })
        if (current < CLOSE_TIME) {
            aList.push([current, CLOSE_TIME])
        }
    
        if (aList.length) {
            console.log(`${aList.length} available:`);
            aList.forEach((v) => {
                const [s, e] = v;
                console.log(`${pad(s)}-${e}`)
            });
        } else {
            console.log('Not available')   
        }
    }
});

후기

1. 가끔 백엔드에서 통데이터를 내려줄 때 프론트에서 처리하는 케이스와 유사한 실무에 가까운 문제여서 재밌었다.

2. 규칙을 찾는데 오래 걸리진 않았지만, 이걸 코드로 표현하는데 오래 걸렸다. 예를들어 [ [11, 12], [16, 18] ] 이라는 2차원 배열을 순회하면서 [ [9, 11], [12, 16] ] 로 바꾸는 부분이 어려웠음. 포인트는 반복문 외부 변수 current를 만들어두고 OPEN_TIME으로 초기 할당한 후, current를 체크하여 결과 배열에 추가 여부를 결정하고 current를 다시 start 값으로 변경해주는 부분임.

3. 또한 반복문을 다 돌고 나서도 current 값과 CLOSE_TIME를 비교하여 `${current}~${CLOSE_TIME}` 처리를 추가하는 부분 추가함

4. info[room].push([Number(start), Number(end) - Number(start)]); 부분을 사실 info[room].push([Number(start), Number(end)]); 이렇게 처리하는게 더 효율적임. 하지만 헷갈려서 예약시간(ex: 2시간)으로 읽고 싶어서 이렇게 처리했음.

[Softeer] lv2. 8단 변속기 / Javascript

nuhends — Thu, 24 Apr 2025 16:00:38 +0900

[Softeer] lv2. 8단 변속기 / Javascript

softeer 코테 8단 변속기

1. 문제

아래 url 참고

https://softeer.ai/practice/6283

Softeer - 현대자동차그룹 SW인재확보플랫폼

softeer.ai

2. 언어별 시간/메모리

3. 풀이

const fs = require('fs');
const input = fs.readFileSync('/dev/stdin', 'utf8').trim();

if (input === '1 2 3 4 5 6 7 8') {
    console.log('ascending')
} else if (input === '8 7 6 5 4 3 2 1') {
    console.log('descending')
} else {
    console.log('mixed')
}

핵심 아이디어

오염된 input 일 수 있으므로 trim 처리까지 해줌. 문제에서 "연속된" 키워드가 포인트라고 생각했음. 해당 문자열 Input이 연속적이지 않으면 mixed이므로 every로 비교하려다 그냥 완성된 문자열과 비교함

[Softeer] lv2. [21년 재직자 대회 예선] 전광판 / Javascript

nuhends — Thu, 24 Apr 2025 12:01:07 +0900

[21년 재직자 대회 예선] 전광판

1. 문제

문제가 길어서 패스 아래 url 참고

https://softeer.ai/practice/6268

Softeer - 현대자동차그룹 SW인재확보플랫폼

softeer.ai

2. 언어별 시간/메모리

3. 풀이

const readline = require('readline');

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

function symmetricDifference(setA, setB) {
    const result = new Set(setA);

    setB.forEach(elem => {
        if (result.has(elem)) {
            result.delete(elem)
        } else {
            result.add(elem)
        }
    })

    return result;
}

const METRIC = {
    '0': new Set([0,1,2,4,5,6]),
    '1': new Set([2,5]),
    '2': new Set([0,2,3,4,6]),
    '3': new Set([0,2,3,5,6]),
    '4': new Set([1,2,3,5]),
    '5': new Set([0,1,3,5,6]),
    '6': new Set([0,1,3,4,5,6]),
    '7': new Set([0,1,2,5]),
    '8': new Set([0,1,2,3,4,5,6]),
    '9': new Set([0,1,2,3,5,6]),
};

const emptySet = new Set([]);
let T = 0;
let caseList = [];

rl.on('line', (line) => {
    // 첫번째줄 처리
    if (T === 0) {
        T = Number(line)
    } else {
        // '1 2' 받아서 처리
        caseList.push(line.split(' ')); // ['1', '2'];

        if (T === caseList.length) {
            rl.close();
        }
    }
});

rl.on('close', () => {
    caseList.forEach(testCase => {
        let result = 0;
        const [a, b] = testCase; // a = '9881' b = '10724'
        // // 비교해야되는 최대 count
        const n = Math.max(a.length, b.length)

        // reverse 처리 (1의 자리부터 비교해야 됨)
        const reversedA = [...a].reverse(); // [1,8,8,9]
        const reversedB = [...b].reverse(); // [4,2,7,0,1]

        for(let i=0; i<n; i++) {
            // 예외 한쪽 자리수가 없을 때
            const A = reversedA[i] === undefined ? emptySet : METRIC[reversedA[i]]
            const B = reversedB[i] === undefined ? emptySet : METRIC[reversedB[i]]

            result += symmetricDifference(A, B).size;
        }
        
        console.log(result);
    });
});

핵심 아이디어

1. 0~9의 숫자는 각각의 매트릭을 가지고 있음. 이를 배열 형태의 상수로 미리 정의함

2. A -> B로 변경시 필요한 처리: A와 B의 공통된 부분을 빼면 됨

3. Set 자료 구조를 사용해서 symmetricDifference 메서드를 사용하려고 했음. 하지만 동작하지 않음 mdn 찾아보니 Node 22부터 지원됨. Softeer은 12.22.12 버전 사용중(25.4.24 기준) -> symmetricDifference를 직접 구현함 (set 자료구조의 has, add, delete 메소드가 있어서 쉽게 구현할 수 있었음)

symmetricDifference

symmetricDifference 브라우저 호환성

4. 시간복잡도

O(T*D)

- T: 테스트 케이스 개수 (최대 1,000개)

- D: 각 숫자의 최대 자리수(최대 5)

→ 따라서 최악의 경우에도 O(1000 * 5) = O(5000)

Set을 쓰는게 최선인가?

지금처럼 Set을 쓰는 이유는:

symmetricDifference 같은 집합 연산이 필요하고
비교 대상의 크기(세그먼트 수)가 7개로 고정되어 있음

즉, 메모리 효율보다는 코드의 단순성과 논리적 명확함이 더 중요하기 때문에, Set 선택은 합리적이라고 생각. 메모리 차이도 사실상 무시할 수 있을 만큼 미미할 정도의 트레이트 오프라고 생각됨

[Softeer] lv2. 금고털이 풀이 / Javascript

nuhends — Wed, 23 Apr 2025 20:18:28 +0900

Softeer 금고털이

1. 문제

루팡은 배낭을 하나 메고 은행금고에 들어왔다. 금고 안에는 값비싼 금, 은, 백금 등의 귀금속 덩어리가 잔뜩 들어있다. 배낭은 W ㎏까지 담을 수 있다.

각 금속의 무게와 무게당 가격이 주어졌을 때 배낭을 채울 수 있는 가장 값비싼 가격은 얼마인가?

루팡은 전동톱을 가지고 있으며 귀금속은 톱으로 자르면 잘려진 부분의 무게만큼 가치를 가진다.

제약조건

1 ≤ N ≤ 106인 정수

1 ≤ W ≤ 104인 정수

1 ≤ Mi, Pi ≤ 104인 정수

입력형식

첫 번째 줄에 배낭의 무게 W와 귀금속의 종류 N이 주어진다. i + 1 (1 ≤ i ≤ N)번째 줄에는 i번째 금속의 무게 Mi와 무게당 가격 Pi가 주어진다.

출력형식

첫 번째 줄에 배낭에 담을 수 있는 가장 비싼 가격을 출력하라.

입력예제1

100 2 90 1 70 2

출력예제1

170

2. 언어별 시간 / 메모리

3. 풀이

고전적인 탐욕(Greedy) 문제 분할 가능 배낭 문제

처음 문제 풀이

const fs = require('fs');
const input = fs.readFileSync('/dev/stdin', 'utf8');
const inputs = input.trim().split('\n');

const [first, ...args] = inputs;
let [w, n] = first.split(' ');
const items = args.map((v) => v.split(' ')).map(arr => [ Number(arr[0]), Number(arr[1]) ]).sort((a, b) => b[1] - a[1]);

let result = 0;
let index = 0;

while(true) {
    if (w <= 0 || index >= n) { 
        break; 
    }
    
    const item = items[index];

    if (w >= item[0]) {
        result += item[0] * item[1]
    } else {
        result += w * item[1]
    }

    w = w - item[0]
    index++;
}

console.log(result);

시간 복잡도: O(N logN)

하지만 메모리 256MB를 조과함.

이유는 최대 100만줄의 문자열 input을 처리하면서 발생. fs.readFileSync 방식 말고 readling 방식으로 처리하자.

관련 이슈 정리: https://nuhends.tistory.com/144

수정 후 풀이

const readline = require('readline');

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
});

let W = 0, N = 0;
const items = [];

rl.on('line', (line) => {
    // 첫번째 줄
    if (!W) {
        [W, N] = line.trim().split(' ').map(Number);
    } else {
        const [m, p] =line.trim().split(' ').map(Number);
        items.push([m, p]);

        if (items.length === N) {
            rl.close();
        }
    }
});

rl.on('close', () => {
    items.sort((a, b) => b[1] - a[1])

    let result = 0;

    for(let i=0; i<N && W > 0; i++) {
        const [m, p] = items[i];

        if (W >= m) {
            result += m * p;
            W -= m;
        } else {
            result += W * p;
            W = 0;
        }
    }

    console.log(result);
});

[Softeer] input값 읽기 Tip

nuhends — Wed, 23 Apr 2025 20:09:01 +0900

Softeer 코딩테스트

1. 배경

sorteer에서는 프로그래머스와 달리 input 값을 읽어와서 console.log()로 출력하는 요건이다.

그래서 node.js 실무 코드 작성할 때 처럼 fs 모듈을 이용해서 읽어왔었음.

const fs = require('fs');
const input = fs.readFileSync('/dev/stdin', 'utf8');
const inputs = input.trim().split('\n');

const [first, ...args] = inputs
let [w, n] = first.split(' ')

이렇게 풀이를 해오다 이슈가 발생함.

그건 바로 메모리 이슈. 256MB 제한에 걸려버림

fs readFileSync 메모리 이슈

2. 해결책

Node.js의 readline을 써서 입력을 스트림으로 처리하면 메모리를 아낄 수 있음

const readline = require('readline');

const rl = readline.createInterface({
	input: process.stdin,
    output: process.stdout,
});

// 사용할 변수 선언 및 초기값 할당
let W = 0, N = 0;
const items = [];


// input 처리
rl.on('line', (line) => {
    // 1번째 라인
  if (!W) {
    [W, N] = line.trim().split(' ').map(Number);
  } else {
    const [m, p] = line.trim().split(' ').map(Number);
    items.push([m, p]);
    if (items.length === N) {
      rl.close(); // 모든 금속 정보를 다 받았으면 종료
    }
  }});

// 로직 처리
rl.on('close', () => {
  // ...
});

3. 이슈 원인

Javascript 시간/메모리

제약조건

1 ≤ N ≤ 106인 정수

1 ≤ W ≤ 104인 정수

1 ≤ Mi, Pi ≤ 104인 정수

입력형식

첫 번째 줄에 배낭의 무게 W와 귀금속의 종류 N이 주어진다. i + 1 (1 ≤ i ≤ N)번째 줄에는 i번째 금속의 무게 Mi와 무게당 가격 Pi가 주어진다.

입력 예제1

100 2

90 1

70 2

입력 형식에 i+1 부터 N까지 총 N줄이 입력될 수 있음.

N의 범위는 최소 1 ~ 최대 1,000,000(백만) -> 즉, 100만줄 * 2 (줄마다 숫자 2개)

- "숫자 숫자\n" × 1,000,000 = 약 15~25MB 텍스트

- 파싱 후 .split() → 배열 크기, 객체 생성, 중복 메모리 → 복합적으로 100MB 이상 쓸 수 있음

메모리 초과 원인은:

입력을 한꺼번에 문자열로 읽고 파싱했기 때문

[연남동] 유튜버들이 방문한 연남동 TOP4 식당

nuhends — Sun, 22 Oct 2023 19:37:03 +0900

유튜버들의 그식당을 찾아서 연남동으로!

[연남동] 유튜버들이 방문한 연남동 TOP4 식당

식당 리스트

서대문 양꼬치

[서대문 양꼬치]

주소: 서울 마포구 연남동 255-20 2층
영업시간: 매일 14:00 - 02:00
주문한 메뉴: 돼지쪽갈비&양고기전골&양고기파볶음
소개: 2004년 오픈하여 지금까지 원조 양꼬치로 이름을 알린 서대문 양꼬치 BAR 입니다. 성시경의 먹을텐데 맛집, 수요미식회 맛집, 테이스티로드 맛집으로 나왔습니다. 홍대, 연남동 양꼬치 맛집의 원조답게 질 좋은 재료를 가장 중요하게 생각하고 있으며 동일한 맛을 지키는데 힘을 쏟고 있습니다. 서비스는 기본이구요! 오셔서 즐겁고 행복한 시간 보내셨으면 합니다^^ 감사합니다!

그식당에서 자세하게 알아보기

경양카츠

[경양카츠 연남]

주소: 서울 마포구 연남동 260-29
영업시간: 매일 11:30 - 21:30 (21:30 라스트오더, 15:00-17:00 브레이크타임)
주문한 메뉴: 돼지쪽갈비&양고기전골&양고기파볶음
소개:1. 전용숙성고에서 7일간 숙성하며 철저하게 관리된 국내산 최상급 돼지고기만 사용합니다. 2. 경양카츠는 주문과 동시에 조리가 시작됩니다. 갓 튀겨진 카츠요리를 드리기 위해 다소 시간이 걸리더라도 양해 부탁드립니다. 3. 경양카츠에서는 세계 3대 식재료 중 하나인 송로버섯으로 만든 이탈리아 트러플소금을 사용합니다. 다른 양념이나 소스도 좋지만 트러플소금과 함께 돈가츠를 드신다면 더욱 더 고기의 풍미를 느끼 실 수 있습니다.

그식당에서 자세하게 알아보기

뉴오더클럽 연남

[뉴오더클럽 연남]

주소: 서울 마포구 연남동 260-29
영업시간: 매일 14:00 - 22:30 (22:00 라스트오더)
주문한 메뉴: 포테이토&루꼴라피자
소개: 풍자의 또간집에서 가장 맛있는 또갈집으로 선정된 미국식 피자와 분위기를 즐길 수 있는 곳

그식당에서 자세하기 알아보기

카쿠시타

[카쿠시타]

주소: 서울 마포구 연남동 390-30
영업시간: 매일 12:00 - 24:00 (15:30-17:00 브레이크타임
주문한 메뉴: 모츠나베&매콤대창덮밥&명란크림우동
소개: 연남동에 숨어들은 특별한 가게 오직 카쿠시타에서만 만날 수 있는 특별한 음식 낮에는 식당, 저녁에는 이자카야로 운영하고 있습니다.(5pm~ 노키즈존)

그식당에서 자세하게 알아보기

[먹보스쭈엽이] 평양면옥 내돈내산 솔직 리뷰

nuhends — Sat, 7 Oct 2023 23:00:12 +0900

먹보스쭈엽이가 추천한 분당 평양냉면&수육 맛집?

가게에 대한 더 자세한 정보는 인플루언서 맛집 소개 플랫폼 "그식당" 에서 확인해보세요

대표이미지 삭제

평양 냉면: 밍밍하다고 소문난 평양냉면이지만 밍밍하지 않고 약간 짭쪼름하게 간이 된 맛이 느껴진다. 면사리는 메밀이 함유되어 있어 쫄깃한 맛은 덜하고 고소한 맛이 난다. 오이가 들어가니 싫다면 빼고 주문하자.

- 제육(보쌈): 돼지고기 수육으로 잡내 없고 껍질의 꼬들거리는 식감이 좋다. 냉면에 곁들이는 조합으로 훌륭했고 고기가 도톰하고 두껍게 썰어져있어 상당히 인상적.

[꿀팁]

성인 남자 기준으로 2명이 냉면x2, 제육 먹으면 배부르게 먹을 수 있었다.

수육, 만두류 음식은 1/2 메뉴로도 주문이 가능하니 참고!

[장점]

▫️깔끔하고 쾌적한 인테리어에 접객도 훌륭해서 어른들과 식사 자리로도 만족하실 듯한 공간

▫️자극적이지 않고 깔끔하면서 깊은 맛

[단점]

▫️차가 없다면 방문하기 힘든 곳에 위치하고 있음

▫️성인남자 2명 기준 62,000원(냉면x2, 제육)으로 부담스러운 가격

[시설]

️주차: 주차장 구비되어 있어 편리함. 발렛 파킹 가능(1,000원 현금 필요)

가게: 깔끔하고 쾌적함. 일요일 점심 기준으로 웨이팀 없음

[가게 정보]

️상호: 평양면옥

️주문 메뉴: 냉면 15,000원 / 제육 32,000원

주소: 경기 성남시 분당구 안골로 27

⏰영업시간: 매일 11:30 - 21:30

소개 매체: 먹보스 쭈엽이, 수요미식회, 생방송오늘저녁

[풍자/또간집] 산사랑 내돈내산 솔직 리뷰

nuhends — Sat, 7 Oct 2023 15:33:32 +0900

또간집 풍자가 추천한 상다리 휘어지는 산나물 한정식!

정말 맛있을까?

가게에 대한 더 자세한 정보는 인플루언서 맛집 소개 플랫폼 "그 식당"에서 확인해보세요
https://www.sigdang.app/shops/458

풍자 또간집 산사랑 한정식

음식이 두 번의 걸쳐 나올 만큼 음식의 종류가 많다.

대표사진 삭제

사진 설명을 입력하세요.

산나물 장아찌, 풀치 볶음, 임연수 조림 등 평상시 먹기 힘든 반찬이 많아 입이 즐겁다.

전반적으로 간이 강하게 되어 있지 않아 담백하고 슴슴해서 자극적이지 않다.

식사 후에 속이 편할 것 같은 느낌이다. 많은 반찬을 즐기고 싶다면 추천하고 싶다.

주요 반찬인 불고기, 두부전골, 임연수 조림의 경우엔 간이 조금 덜된 느낌이라 오히려 조금 더 간을 하면 더 맛있을 것 같았음.

[꿀팁]

마당에 시원한 막걸리를 제공하고 있어 식전/후에 꼭 먹어보자! 산속에는 막걸리는 별미! 평상시 식사량이 많으신 분은 떡갈비, 생선조림을 추가 주문하면 좋을 듯

[장점]

▫️산속 공기 좋은 곳에서 한정식을 즐길 수 있어 어른들과 식사자리로 좋을 듯

▫️평상시 접할 수 없는 다양한 종류의 나물 종류의 반찬들. 그리고 자극적이지 않은 담백한 맛을 느낄 수 있음

[단점]

▫️차가 없다면 방문 매우 어려움. 고기리 산속에 위치

▫️음식 대비 저렴하지 않은 가격

[시설]

️주차: 주차장 O

가게: 토요일 점심 기준 웨이팅 길지 않음

[가게 정보]

️상호: 산사랑 ️주문 메뉴: 산사랑 정식 19,000원 / 떡갈비 10,000원

주소: 경기 용인시 수지구 샘말로 89번길 9

⏰영업시간: 매일 10:40 - 20:30 (19:50 라스트오더)

소개 매체: 풍자 또간집, 식신로드, 찾아라맛있는TV

[Next.js] 번역-Rendering Fundamentals

nuhends — Sun, 9 Apr 2023 09:50:39 +0900

이 포스팅은 Next.js v13의 Docs 중 Rendering Fundamentals 관련 부분을 번역하여 정리한 내용을 담고 있습니다.

[Next.js] Rendering Fundamentals

Next.js Rendering Fundamentals

Rendering은 작성한 코드를 UI(User Interface)로 변환합니다. React 18과 Next.js 13에는 애플리케이션을 렌더링하는 새로운 방법이 도입되었습니다. 이 페이지는 렌더링 환경, 전략, 런타임의 차이점과 이를 선택하는 방법을 이해하는 데 도움이 될 것입니다.

Rendering Environments

application 코드를 렌더링할 수 있는 환경에는 client와 server 두 가지가 있습니다.

client는 application 코드에 대한 요청을 서버에 보내는 사용자 디바이스의 브라우저를 말합니다. 그런 다음 서버의 응답을 사용자가 interact 할 수 있는 interface로 변환합니다.
server는 application 코드를 저장하고, 클라이언트로부터 요청을 받고, 일부 연산을 수행한 후 적절한 응답을 다시 보내는 데이터 센터의 컴퓨터를 말합니다.

Component-level Client and Server Rendering

React 18 이전에는 React를 사용하여 애플리케이션을 렌더링하는 주요 방법은 전적으로 클라이언트에서 이루어졌습니다.

Next.js는 애플리케이션을 페이지로 나누고 HTML을 생성하여 서버에서 미리 렌더링한 후 클라이언트로 전송하여 React가 hydrated 할 수 있도록 하는 더 쉬운 방법을 제공했습니다. 하지만 이로 인해 초기 HTML을 interactive하게 만들기 위해 클라이언트에서 추가적인 자바스크립트가 필요했습니다.

이제 Server and Client Components를 사용하면 React가 클라이언트와 서버에서 렌더링할 수 있으므로 컴포넌트 수준에서 렌더링 환경을 선택할 수 있습니다.

기본적으로 app directory는 서버 컴포넌트를 사용하므로 서버에서 컴포넌트를 쉽게 렌더링할 수 있고 클라이언트로 전송되는 JavaScript의 양을 줄일 수 있습니다.

컴포넌트 트리에서 클라이언트 컴포넌트를 서버 컴포넌트로 가져오거나 서버 컴포넌트를 자식이나 프로퍼티로 클라이언트 컴포넌트에 전달하여 서버와 클라이언트 컴포넌트를 interleave 할 수 있습니다. 백그라운드에서 React는 두 환경의 작업을 병합합니다.

next.js Composition methods

구성 방법을 알아보려면 Server and Client Components page를 참조하세요.

Static and Dynamic Rendering on the Server

React 컴포넌트를 사용한 client-side 및 server-side 렌더링 외에도 Next.js는 Static 및 Dynamic Rendering(동적 렌더링)을 통해 서버에서 렌더링을 최적화할 수 있는 옵션을 제공합니다.

Static Rendering

Static Rendering(정적 렌더링)을 사용하면 빌드 시점에 Server와 Client 컴포넌트를 모두 서버에서 미리 렌더링할 수 있습니다. 작업 결과는 cached 되어 이후 요청 시 재사용됩니다. 캐시된 결과는 재검증(revalidated) 할 수도 있습니다.

Note: 이는 Static Site Generation (SSG) 및 Incremental Static Regeneration (ISR)와 동일합니다.

Server와 Client 컴포넌트는 Static Rendering 중에 다르게 렌더링됩니다:

Client 컴포넌트는 HTML과 JSON을 미리 렌더링하여 서버에 캐시합니다. 그런 다음 캐시된 결과가 클라이언트로 전송되어 hydration 됩니다.
Server 컴포넌트는 React에 의해 서버에서 렌더링되며, payload는 HTML을 생성하는 데 사용됩니다. 렌더링된 동일한 payload가 클라이언트에서 컴포넌트를 hydrate하는 데에도 사용되므로 클라이언트에서 자바스크립트가 필요하지 않습니다.

Dynamic Rendering

Dynamic Rendering을 사용하면 Server와 Client 컴포넌트 모두 요청 시점(**request time)**에 서버에서 렌더링됩니다. 작업 결과는 캐시되지 않습니다.

Note: 이는 Server-Side Rendering getServerSideProps() 과 동일합니다.

static 및 dynamic 동작에 대해 자세히 알아보려면 Static and Dynamic Rendering 페이지를 참조하세요. 캐싱에 대해 자세히 알아보려면 Caching and Revalidating 섹션을 참조하세요.

Edge and Node.js Runtimes

On the server, there are two runtimes where your pages can be rendered:

The Node.js Runtime (default) has access to all Node.js APIs and compatible packages from the ecosystem.
The Edge Runtime is based on Web APIs.

서버에는 페이지가 렌더링될 수 있는 두 가지 런타임이 있습니다:

Node.js Runtime(기본값)은 모든 Node.js API와 ecosystem 호환 패키지에 액세스할 수 있습니다.
Edge Runtime은 Web APIs를 기반으로 합니다.

배포 인프라에 따라 두 런타임 모두 서버에서 streaming을 지원합니다.

런타임 간에 전환하는 방법을 알아보려면 Edge and Node.js Runtimes 페이지를 참조하세요.

Edge Runtime이란?
Next.js는 React 기반의 서버사이드 렌더링 프레임워크로, 브라우저와 서버 모두에서 코드를 실행합니다. Next.js에서 Edge Runtime은 클라이언트 측에서 실행되는 JavaScript 코드를 의미합니다.
일반적으로 브라우저에서 JavaScript 코드를 실행하기 위해서는 브라우저의 JavaScript 엔진(V8 등)이 필요합니다. Edge Runtime은 이와 유사하게 브라우저에서 실행되는 JavaScript 코드를 처리하기 위한 런타임 환경입니다.
Node.js Runtime은 반면 서버 측에서 실행되는 JavaScript 코드를 처리하는 런타임 환경을 의미합니다. Next.js에서 Node.js Runtime은 서버 측에서 코드를 실행하고, HTML을 생성하는 데 사용됩니다.
따라서 Next.js에서 Edge and Node.js Runtimes는 각각 클라이언트 측과 서버 측에서 코드를 실행하는 런타임 환경을 나타내며, 이를 통해 빠르고 효율적인 서버사이드 렌더링을 구현할 수 있습니다.

[html/css] img 태그에 vertical-align RESET 필요한 이유

nuhends — Sun, 9 Apr 2023 03:29:44 +0900

[html/css] img 태그에 vertical-align RESET 필요한 이유

vertical-align 과 typography

Problem

아래 예제 코드를 보면 알겠지만 이미지의 height 628p이다.

하지만 img를 감싸고 있는 div의 height는 633px으로 5px 만큼 더해진 문제가 있었다. 왜 그럴까?

See the Pen vertical-align img by nuhends (@nuhends) on CodePen.

Why?

이를 알기 위해서는 몇가지 배경지식이 필요하다.

배경 지식 1: img의 display 기본값은 inline 이다.
배경 지식 2: inline 요소는 typography 규칙인 vertical-align 속성이 적용된다.

img 태그 display 기본 값

이제 아래 예시를 살펴보자. 자세히 살펴보면 img 요소와 p 요소 사이에 간격이 생긴다.

이는 vertical-align 속성의 기본값이 적용되었기 때문이다. 이를 제대로 알기 위해선 Typography에 대한 지식이 필요하다.

See the Pen vertical-align by nuhends (@nuhends) on CodePen.

img와 다른 요소 사이에 생기는 간격

Typography

타이포그래피(Typography)는 '활자'를 의미하는 'Type'와 '-술'을 의미하는 접미사 'Graphy'의 합성어. 쉽게 문자(활자)를 어떻게 배열할까에 관한 기술, 규칙 등을 의미

typography

이 개념을 web에 적용할 때, baseline, ascender, descender 개념들을 구현한 것이 바로 항상 아리송한 vertical-align 속성이다.

vertical-align의 기본값은 baseline이다.

이미지 또한 인라인 요소이므로 기본 값은 baseline으로 적용된다.

정리해보자면

- 이미지는 inline 요소이다 = text와 같다
- text(inline 요소)는 typography 레이아웃을 따른다.
- 고로 이미지는 typography 레이아웃에 따라 적용된다.
=> 즉, 이미지와 다음 요소 사이에 생기는 공백은 baseline과 subscript baseline사이의 간격 임을 알 수 있다.

How?

그렇다면 어떻게 이 문제를 해결할 수 있을까?

vertical-align을 baseline에서 top 혹은 bottom으로 바꾸자.
요소의 위 또는 아래로 기준을 바꾸면 간격은 사라진다.
display: block으로 바꾸자.
block이 적용되면 텍스트 레이아웃을 따라가지 않고, 박스 모델을 따라가게 된다.

개인적 의견

경험상 보통 img를 사용할 때 div 같은 다른 요소로 감싸서 처리하는 경우가 많았다.

div {
	width: 500px;
	height 500px;
}

div img {
	display: block;
	width: 100%;
	// height: auto; height는 보통 주지 않는다. 비율에 맞게 width에 따라 자동으로 늘어나기 때문
}

그러므로, display: block을 주고 이를 reset에서 선언해두는게 dx에 더 도움이 된다고 생각합니다.

참고로 svg의 display도 inline이므로 함께 처리하는 걸 추천

// reset.css
img, svg {
	display: block;
}

Humata.ai 업무 자동화를 위한 최고의 도구

nuhends — Sun, 9 Apr 2023 03:00:52 +0900

Humata.ai: 업무 자동화를 위한 최고의 도구

HUMATA

서비스 웹 url: https://www.humata.ai/

Humata - GPT for your files

Humata is like GPT for your files. Ask AI anything about your data. Ask questions about your data and get answers powered by AI instantly. Learn, summarize, synthesize, and extract valuable data from your files 100X faster.

www.humata.ai

Humata.ai는 인공지능(AI) 기술을 활용하여 기업의 업무 프로세스를 자동화하고 효율적으로 운영할 수 있도록 지원하는 클라우드 기반의 서비스입니다. (ChatGPT와는 다른 서비스)

Humata.ai는 자연어 처리 기술을 바탕으로 한 인공지능 엔진을 사용하여, 다양한 업무 영역에서 발생하는 작업을 자동화합니다. 예를 들어, 고객문의 처리, 인사관리, 회계처리, 마케팅 등의 업무를 자동화할 수 있습니다.

Humata.ai는 사용자가 직접 복잡한 알고리즘을 작성하지 않아도, 간단한 명령어와 키워드를 입력하면 자동으로 작업을 수행할 수 있습니다. 이를 통해 사용자는 업무 자동화에 필요한 기술적인 지식이나 노하우를 갖추지 않고도, 쉽게 서비스를 활용할 수 있습니다.

또한 Humata.ai는 사용자들이 사용하는 다양한 업무 도구와 연동이 가능합니다. 이를 통해 기존의 업무 시스템과의 호환성을 유지하면서, 더욱 효율적인 업무 처리를 할 수 있습니다.

Humata.ai는 기업의 업무 프로세스를 자동화함으로써, 업무 처리 시간과 비용을 크게 줄일 수 있습니다. 또한, 인공지능 엔진이 수행하는 작업은 정확도가 높기 때문에, 인적 오류를 최소화할 수 있습니다.

최근 인공지능 기술의 발전과 함께, 기업들은 업무 자동화에 큰 관심을 가지고 있습니다. 이에 따라, Humata.ai와 같은 인공지능 기반의 업무 자동화 서비스는 기업들에게 매우 유용한 솔루션으로 자리 잡고 있습니다.

주요 기능

복잡한 기술 논문을 간단하게 설명하는 요약본을 만들어줌.
즉각적인 Q&A. 파일과 관련된 어려운 질문에 대해 이해하기 쉬운 답변을 해줌
파일을 기반으로 새 문서를 자동으로 작성해줌.

사용 방법

계정 생성 및 로그인: 먼저, Humata.ai 웹사이트에 접속하여 계정을 생성하고 로그인합니다.
업무 프로세스 설정: 자동화하고자 하는 업무 프로세스를 설정합니다. 예를 들어, 고객문의 처리나 인사관리와 같은 업무 프로세스를 설정할 수 있습니다.
키워드 및 명령 입력: 업무 프로세스를 설정한 후, 해당 프로세스를 자동화하기 위해 필요한 키워드와 명령어를 입력합니다. 이를 통해 인공지능 엔진이 어떤 작업을 수행해야 하는지를 알려줍니다.
인공지능 엔진 학습: 입력한 키워드와 명령어를 바탕으로 Humata.ai의 인공지능 엔진이 학습을 진행합니다. 이를 통해 인공지능 엔진이 해당 업무 프로세스를 정확하게 수행할 수 있도록 도와줍니다.
자동화된 작업 수행: 인공지능 엔진이 학습을 마친 후, 해당 업무 프로세스를 자동화하여 작업을 수행합니다. 이를 통해 사용자는 일일이 업무를 처리하지 않아도 되므로, 업무 효율성을 크게 향상시킬 수 있습니다.

가격 정책

Humata.ai는 다양한 가격정책을 제공하고 있어, 사용자들은 자신의 업무 환경과 요구사항에 맞는 가격정책을 선택할 수 있습니다.

무료 버전: Humata.ai는 기본적으로 무료 버전을 제공하고 있습니다. 무료 버전을 사용하면, 10건 이하의 업무 프로세스를 생성하고, 매달 최대 100건의 자동화 작업을 수행할 수 있습니다.
유료 버전: 무료 버전을 사용하다가, 더 많은 업무 프로세스를 생성하거나, 자동화 작업 수를 늘리고 싶다면, 유료 버전을 구매할 수 있습니다. 유료 버전은 Basic, Standard, Professional, Enterprise 등 다양한 종류가 있으며, 가격은 사용자 수, 자동화 작업 수, 추가 기능 등에 따라 상이합니다. 또한, 구매한 유료 버전에 따라 우선적인 지원 및 기술 지원을 받을 수 있습니다.
엔터프라이즈 버전: 엔터프라이즈 버전은 사용자의 요구사항에 맞게 커스터마이징이 가능한 버전으로, 보다 전문적인 지원 및 기능을 제공합니다. 가격은 대개 매우 높기 때문에, 대규모 기업이나 정부 기관 등의 대규모 조직에서 사용됩니다.

Simple Icons - 유명 브랜드 로고 SVG 아이콘 모음

nuhends — Sat, 8 Apr 2023 20:59:28 +0900

Simple Icons - 유명 브랜드 로고 SVG 아이콘 모음

https://simpleicons.org/

웹페이지: https://simpleicons.org/
github: https://github.com/simple-icons/simple-icons

주요 기능

약 2444개의 유명 회사 및 제품들 아이콘을 SVG로 제공
SVG, PDF 확장자 선택해서 다운로드 가능
아이콘 클릭시 svg 인라인 코드 텍스트 복사됨

코드에서 사용할 때

JSDelivr or Unpkg 과 같은 CDN으로 사용 가능
npm 패키지로도 제공: simple-icons

<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v8/icons/[ICON SLUG].svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v8/icons/[ICON SLUG].svg" />

[ICON SLUG]는 slug 참고해서 치환하면 됨. 예를 들어

<img height="32" width="32" src="https://cdn.jsdelivr.net/npm/simple-icons@v8/icons/simpleicons.svg" />
<img height="32" width="32" src="https://unpkg.com/simple-icons@v8/icons/simpleicons.svg" />

CDN with colors

CDN 서비스는 colors 기능도 있음.

<img height="32" width="32" src="https://cdn.simpleicons.org/[ICON SLUG]" />
<img height="32" width="32" src="https://cdn.simpleicons.org/[ICON SLUG]/[COLOR]" />

여기서 [COLOR]는 option이며 사용하려는 아이콘의 hex colors 또는 CSS keywords로 대체할 수 있습니다. 색상은 기본적으로 simpleicons.org 웹사이트에 표시된 아이콘의 hex colors 으로 설정됩니다. 예를 들어

<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/gray" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/hotpink" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/0cf" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/0cf9" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/00ccff" />
<img height="32" width="32" src="https://cdn.simpleicons.org/simpleicons/00ccff99" />

TypeScript에서 사용법

import type { SimpleIcon } from 'simple-icons';

참고

- https://news.hada.io/topic?id=8911

- https://github.com/simple-icons/simple-icons

[React Query] v4 버전 달라진 점 (릴리즈 노트 정리)

nuhends — Fri, 31 Mar 2023 14:44:26 +0900

React Query

[React Query] v4 버전 릴리즈 노트 정리

React Query가 v4 버전으로 업데이트되었다. 회사 프로젝트에서도 v4로(v3.39.2 → 4.24.6) 마이그레이션 하게 되었는데, 그 과정에서 달라진 점을 정리해 보았다.

Codemod

마이그레이션을 도와주는 Codemod 가 있음
The codemod is a best efforts attempt to help you migrate the breaking change. Please review the generated code thoroughly! Also, there are edge cases that cannot be found by the code mod, so please keep an eye on the log output.

jsx/js 일 경우

npx jscodeshift ./path/to/src/ \\
  --extensions=js,jsx \\
  --transform=./node_modules/@tanstack/react-query/codemods/v4/replace-import-specifier.js

tsx/ts 인 경우

npx jscodeshift ./path/to/src/ \\
  --extensions=ts,tsx \\
  --parser=tsx \\
  --transform=./node_modules/@tanstack/react-query/codemods/v4/replace-import-specifier.js

주의사항

codemod는 코드를 변경시키므로 실행 후 prettier나 eslint 로 formatting이 필요
codemod 는 import만 변경시켜 준다. 그러므로 devtools package는 수동으로 설치해야 한다.
yarn berry에서 node_modules 폴더가 압축되어 있기 때문에 사용할 수 없었음ㅠ

Query Keys (and Mutation Keys) need to be an Array

Query key (혹은 Mutation Key)가 배열로 변경되어야 한다.

v3에서 key는 String | Array 둘 다 가능했다. 하지만 v4에서는 Array 형태만 가능

- useQuery('todos', fetchTodos)
+ useQuery(['todos'], fetchTodos)

idle state가 제거됨

오프라인 지원을 개선하기 위해 새로운 fetchStatus가 도입되면서, 동일한 상태를 더 잘 캡처하는 fetchStatus: 'idle'로 인해 idle state는 무의미해짐. 자세한 내용은 두 가지 상태가 다른 이유를 참조하세요. 이는 주로 아직 데이터가 없는 비활성화된 쿼리에 영향을 미치며, 이전에는 유휴 상태였기 때문이다.

- status: 'idle'
+ status: 'loading'
+ fetchStatus: 'idle'

disabled queries

이 변경 사항으로 인해 disabled queries쿼리 (일시적으로 비활성화된 쿼리도 포함)는 로딩 상태에서 시작됩니다. 특히 로딩 스피너를 표시할 시기를 알 수 있는 좋은 플래그를 사용하여 마이그레이션을 더 쉽게 하려면 isLoading 대신 isInitialLoading을 확인하면 됩니다.

new API for useQueries

이제 useQueries hook은 queries prop가 있는 객체를 input으로 받습니다. queries prop의 값은 쿼리 배열입니다(이 배열은 v3에서 useQueries에 전달된 것과 동일합니다).

- useQueries([{ queryKey1, queryFn1, options1 }, { queryKey2, queryFn2, options2 }])
+ useQueries({ queries: [{ queryKey1, queryFn1, options1 }, { queryKey2, queryFn2, options2 }] })

Undefined is an illegal cache value for successful queries

undefined을 반환하여 업데이트에서 벗어날 수 있게 하려면 undefined을 잘못된 캐시 값으로 만들어야 했습니다. 이는 초기 Data 함수에서 정의되지 않은 값을 반환해도 데이터가 설정되지 않는 등 다른 리액트 쿼리 개념과도 일치합니다.

또한 queryFn에 로깅을 추가하여 Promise<void>를 생성하는 것은 쉬운 버그입니다:

useQuery(['key'], () => axios.get(url).then(result => console.log(result.data)))

이제 type level에서는 허용되지 않으며, 런타임에 undefined은 failed Promise로 변환되어 오류가 발생하고 개발 모드에서 콘솔에도 기록됩니다.

Queries and mutations, per default, need network connection to run

online/offline 지원에 대한 새로운 기능 공지와 네트워크 모드에 대한 전용 페이지를 읽어보세요.

React Query는 프로미스를 생성하는 모든 것에 사용할 수 있는 비동기 상태 관리자이지만, 데이터 불러오기 라이브러리와 함께 데이터 불러오기에 가장 자주 사용됩니다. 따라서 기본적으로 네트워크에 연결되어 있지 않으면 queries, mutations가 paused 됩니다. 이전 동작을 선택하려면 queries, mutations 모두에 대해 전역적으로 networkMode: offlineFirst를 설정하면 됩니다:

new QueryClient({
  defaultOptions: {
    queries: {
      networkMode: 'offlineFirst',
    },
    mutations: {
      networkMode: 'offlineFirst',
    },
  },
})

notifyOnChangeProps property no longer accepts "tracked" as a value

notifyOnChangeProps 옵션은 더 이상 "**tracked**" 값을 허용하지 않습니다. 대신, useQuery는 기본적으로 속성을 추적합니다. notifyOnChangeProps: "tracked"를 사용하는 모든 쿼리는 이 옵션을 제거하여 업데이트해야 합니다.

쿼리가 변경될 때마다 다시 렌더링하는 v3 기본 동작을 에뮬레이트하기 위해 쿼리에서 이를 우회하려는 경우, 이제 notifyOnChangeProps에서 기본 smart tracking optimization를 opt-out 하기 위해 "all" 값을 허용합니다.

notifyOnChangePropsExclusion has been removed

v4에서 notifyOnChangeProps는 정의되지 않은 대신 v3의 "tracked" 동작으로 기본 설정됩니다. 이제 "tracked"이 v4의 기본 동작이므로 이 구성 옵션을 포함하는 것이 더 이상 의미가 없습니다.

Consistent behavior for cancelRefetch

cancelRefetch 옵션은 query를 필수적으로 fetch 하는 모든 함수에 전달할 수 있습니다:

queryClient.refetchQueries
queryClient.invalidateQueries
queryClient.resetQueries
refetch returned from useQuery
fetchNextPage and fetchPreviousPage returned from useInfiniteQuery

fetchNextPage 및 fetchPreviousPage를 제외하고는, 이 flag가 기본값이 false로 설정되어 일관성이 없고 잠재적으로 문제가 될 수 있었습니다: 이전에 slow fetch가 이미 진행 중이었다면 refetch를 건너뛰었기 때문에 변경 후 refetchQueries 또는 invalidateQueries를 호출해도 최신 결과를 얻지 못할 수 있습니다.

사용자가 작성한 일부 코드에 의해 쿼리가 활발하게 다시 가져오는 경우, 기본적으로 가져오기를 다시 시작해야 한다고 생각합니다.

이것이 바로 위에서 언급한 모든 메서드에서 이 flag의 기본값이 true로 설정된 이유입니다. 또한 대기하지 않고 refetchQueries를 연속으로 두 번 호출하면 이제 첫 번째 가져오기를 취소하고 두 번째 가져오기로 다시 시작한다는 의미이기도 합니다:

queryClient.refetchQueries({ queryKey: ['todos'] })
// this will abort the previous refetch and start a new fetch
queryClient.refetchQueries({ queryKey: ['todos'] })

**cancelRefetch:false**를 명시적으로 설정하여 이 동작을 옵트아웃할 수 있습니다:

queryClient.refetchQueries({ queryKey: ['todos'] })
// this will not abort the previous refetch - it will just be ignored
queryClient.refetchQueries({ queryKey: ['todos'] }, { cancelRefetch: false })

Note: query mounts 또는 window focus refetch 등으로 인해 자동으로 트리거 되는 fetch 동작에는 변화가 없습니다.

Query Filters

**query filter**는 query와 일치하는 특정 조건을 가진 객체입니다. 지금까지 필터 옵션은 대부분 boolean flag 조합이었습니다. 하지만 이러한 flag를 조합하면 불가능한 상태가 발생할 수 있습니다. 구체적으로 설명하자면

active?: boolean
  - When set to true it will match active queries.
  - When set to false it will match inactive queries.
inactive?: boolean
  - When set to true it will match inactive queries.
  - When set to false it will match active queries.

이러한 flag는 상호 배타적이기 때문에 함께 사용하면 잘 작동하지 않습니다. 두 플래그 모두 거짓으로 설정하면 설명에 따라 모든 쿼리가 일치하거나 쿼리가 일치하지 않을 수 있는데, 이는 말이 되지 않습니다.

v4에서는 이러한 필터가 단일 필터로 결합되어 의도를 더 잘 보여줄 수 있게 되었습니다:

필터는 기본적으로 **all**로 설정되며 active 쿼리 또는 inactive 쿼리만 일치하도록 선택할 수 있습니다.

refetchActive / refetchInactive

queryClient.invalidateQueries 유사한 플래그가 두 개 더 있습니다:

refetchActive: Boolean
  - Defaults to true
  - When set to false, queries that match the refetch predicate and are actively being rendered
    via useQuery and friends will NOT be refetched in the background, and only marked as invalid.
refetchInactive: Boolean
  - Defaults to false
  - When set to true, queries that match the refetch predicate and are not being rendered
    via useQuery and friends will be both marked as invalid and also refetched in the background

같은 이유로 이 두 가지 기능도 통합되었습니다:

- active?: boolean
- inactive?: boolean
+ refetchType?: 'active' | 'inactive' | 'all' | 'none'

이 flag의 기본값은 refetchActive가 true로 설정되어 있기 때문에 active으로 설정됩니다. 즉, invalidateQueries에 refetch 하지 않도록 지시하는 방법도 필요하므로 여기에서는 네 번째 옵션(none)도 허용됩니다.

onSuccess is no longer called from setQueryData

이것은 많은 사람들에게 혼란을 주었고, onSuccess 내에서 setQueryData가 호출될 경우 무한 루프를 생성하기도 했습니다. 또한 캐시에서만 데이터를 읽으면 onSuccess가 호출되지 않기 때문에 staleTime과 결합하면 오류가 자주 발생했습니다.

onError 및 **onSettled**와 유사하게, 이제 onSuccess 콜백이 요청이 이루어지고 있는 요청에 연결됩니다. No request -> no callback.

data 필드의 변경 사항을 listen 하고 싶다면, 데이터가 dependency Array의 일부인 **useEffect**를 사용하는 것이 가장 좋습니다. React Query는 구조적 공유를 통해 안정적인 데이터를 보장하기 때문에 백그라운드에서 불러올 때마다 이펙트가 실행되는 것이 아니라 데이터 내 무언가가 변경된 경우에만 이펙트가 실행됩니다.

const { data } = useQuery({ queryKey, queryFn })
React.useEffect(() => mySideEffectHere(data), [data])

persistQueryClient and the corresponding persister plugins are no longer experimenta respectively.

createWebStoragePersistor 및 createAsyncStoragePersistor 플러그인의 이름이 각각 createSyncStoragePersister 및 createAsyncStoragePersister로 변경되었습니다. **persistQueryClient**의 Persistor 인터페이스도 **Persister**로 이름이 변경되었습니다. **this stackexchange**에서 이 변경의 motivation를 확인해 보세요.

이 플러그인은 더 이상 실험적이지 않으므로 가져오기 경로도 업데이트되었습니다:

- import { persistQueryClient } from 'react-query/persistQueryClient-experimental'
- import { createWebStoragePersistor } from 'react-query/createWebStoragePersistor-experimental'
- import { createAsyncStoragePersistor } from 'react-query/createAsyncStoragePersistor-experimental'
+ import { persistQueryClient } from '@tanstack/react-query-persist-client'
+ import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister'
+ import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister'

The cancel method on promises is no longer supported

라이브러리에서 query cancellation를 지원하기 위해 프로미스에 cancel 함수를 정의할 수 있게 해 주던 old cancel method는 제거되었습니다. 쿼리 취소를 위해서는 내부적으로 AbortController API를 사용하고 쿼리 취소를 지원하기 위해 쿼리 함수에 대한 AbortSignal instance를 제공하는 newer API(v3.30.0에 도입됨)를 사용하는 것이 좋습니다.

Typescript

Types now require using TypeScript v4.1 or greater

Supported Browsers

v4부터 React Query는 최신 브라우저에 최적화되었습니다. 보다 현대적이고 성능이 우수하며 더 작은 번들을 생성하기 위해 브라우저 목록을 업데이트했습니다.

Chrome >= 73
Firefox >= 78
Edge >= 79
Safari >= 12.0
iOS >= 12.0
opera >= 53

setLogger is removed

setLogger를 호출하여 logger를 전역적으로 변경할 수 있었습니다. v4에서는 이 함수가 QueryClient를 생성할 때 선택적 필드로 대체됩니다.

- import { QueryClient, setLogger } from 'react-query';
+ import { QueryClient } from '@tanstack/react-query';
- setLogger(customLogger)
- const queryClient = new QueryClient();
+ const queryClient = new QueryClient({ logger: customLogger })

No default manual Garbage Collection server-side

v3에서 React Query는 기본값인 5분 동안 쿼리 결과를 캐시 한 다음 해당 데이터를 수동으로 garbage collect 합니다. 이 기본값은 서버 측 React Query에도 적용되었습니다.

이 수동 garbage collect이 완료될 때까지 기다리는 동안 메모리를 많이 소비하고 프로세스가 중단되었습니다. v4에서는 이제 기본적으로 서버 측 **cacheTime**이 **Infinity**로 설정되어 수동 가비지 수집을 효과적으로 비활성화합니다(요청이 완료되면 NodeJS 프로세스가 모든 것을 지웁니다).

이 변경 사항은 Next.js와 같은 서버 측 React 쿼리 사용자에게만 영향을 줍니다. **cacheTime**을 수동으로 설정하는 경우에는 영향을 받지 않습니다(동작을 미러링하고 싶을 수도 있지만).

ESM Support

이제 React Query는 package.json "exports"를 지원하며 CommonJS 및 ESM 모두에 대해 Node의 기본 해상도와 완벽하게 호환됩니다. 대부분의 사용자에게 큰 변화는 아닐 것으로 예상되지만, 프로젝트에 가져올 수 있는 파일은 공식적으로 지원하는 엔트리 포인트로만 제한됩니다.

Streamlined NotifyEvents

QueryCache를 수동으로 구독하면 항상 QueryCacheNotifyEvent가 발생했지만, MutationCache에서는 그렇지 않았습니다. 동작을 간소화하고 그에 따라 이벤트 이름도 변경했습니다.

QueryCacheNotifyEvent

- type: 'queryAdded'
+ type: 'added'
- type: 'queryRemoved'
+ type: 'removed'
- type: 'queryUpdated'
+ type: 'updated'

MutationCacheNotifyEvent

**MutationCacheNotifyEvent**는 **QueryCacheNotifyEvent**와 동일한 유형을 사용합니다.

Note: 이는 queryCache.subscribe 또는 mutationCache.subscribe을 통해 수동으로 캐시를 구독하는 경우에만 해당됩니다.

Separate hydration exports have been removed

버전 **3.22.0**에서는 hydration utilities가 React 쿼리 코어로 이동했습니다. v3에서는 여전히 **react-query/hydration**의 old exports를 사용할 수 있었지만, v4에서는 이러한 exports가 제거되었습니다.

- import { dehydrate, hydrate, useHydrate, Hydrate } from 'react-query/hydration'
+ import { dehydrate, hydrate, useHydrate, Hydrate } from '@tanstack/react-query'

Removed undocumented methods from the queryClient, query and mutation

**QueryClient**의 **cancelMutatations**와 executeMutation 메서드는 문서화되지 않았고 내부적으로 사용되지 않았기 때문에 제거했습니다. 이 메서드는 **mutationCache**에서 사용할 수 있는 메서드를 래퍼로 만든 것이기 때문에, 여전히 **executeMutation**의 기능을 사용할 수 있습니다.

- executeMutation<
-   TData = unknown,
-   TError = unknown,
-   TVariables = void,
-   TContext = unknown
- >(
-   options: MutationOptions<TData, TError, TVariables, TContext>
- ): Promise<TData> {
-   return this.mutationCache.build(this, options).execute()
- }

또한 **query.setDefaultOptions**도 사용되지 않아 제거되었습니다. **mutation.cancel**은 실제로 발신 요청을 취소하지 않았기 때문에 제거되었습니다.

The src/react directory was renamed to src/reactjs

이전에는 React Query에 react 모듈에서 가져온 react라는 이름의 디렉터리가 있었습니다. 이로 인해 일부 Jest 구성에 문제가 발생하여 다음과 같은 테스트를 실행할 때 오류가 발생할 수 있었습니다:

TypeError: Cannot read property 'createContext' of undefined

디렉토리의 이름이 바뀌었기 때문에 더 이상 문제가 되지 않습니다.

프로젝트에서 'react-query/react'에서 직접 무언가를 import 하는 경우('react-query'가 아닌), imports를 업데이트해야 합니다:

- import { QueryClientProvider } from 'react-query/react';
+ import { QueryClientProvider } from '@tanstack/react-query/reactjs';

참고

- https://tanstack.com/query/v4/docs/react/guides/migrating-to-react-query-4

[html/css] flex와 z-index

nuhends — Fri, 31 Mar 2023 08:14:14 +0900

flex와 z-index

배경

회사 동료 코드 리뷰 중 flex 요소의 자식의 경우 z-index가 동작하는 걸 발견함. 내가 알고 있는 상식과 달라 조사를 해봄.

예시: https://codepen.io/nuhends/pen/eYLOVaO?editors=1100

조사 및 결과

내가 알고 있는 상식은 어떤 요소에 z-index를 줬을 때 쌓임 맥락이 형성되려면 position속성의 값이 static(기본값)이 아니어야 한다. 그런데 flex 요소의 자식은 왜 동작할까? w3의 flex items 스펙을 살펴보자.

Flex items paint exactly the same as inline blocks [CSS21], except that order-modified document order is used in place of raw document order, and z-index values other than auto create a stacking context even if position is static (behaving exactly as if position were relative).

⇒ flex item은 position이 static(기본값) 일지라도 z-index 값은 쌓임 맥락을 생성합니다. (마치 position realtive인 것처럼 행동함)

flex는 많은 인터페이스를 포함하고 있는 것 같다. 결론 flex는 편하다. 하지만 알고 쓰자!

참고

- W3의 flex items 스펙: https://www.w3.org/TR/css-flexbox-1/#painting

[React Query] 전역 상태로 사용하기

nuhends — Fri, 31 Mar 2023 00:49:06 +0900

React Query

[React Query] 전역 상태로 사용하기

React Query를 Redux처럼 전역상태관리 용도로 사용할 수 있다.

HOW?

상위 레벨 컴포넌트에서 queryClient.setQueryData()로 데이터를 set하고, 해당 데이터가 필요한 (자식) 컴포넌트에서 queryClient.getQueryData()로 사용하면 된다.

예시

// QueryKey.ts: 쿼리키 상수화(프로젝트 정책에 따라)
export const headersQueryKey = ["HeadersData"];

// index.tsx
const queryClient = new QueryClient();
const reqHeaders = getRequestHeader(headers);

queryClient.setQueryData(headersQueryKey, () => reqHeaders);

// child.tsx
const queryClient = new QueryClient();

const headers = queryClient.getQueryData<ReqHeaders>(headersQueryKey);

결론

위 예제처럼 React Query를 전역상태 관리 툴로 쓸 수 있다. 컴포넌트의 depth, 위치에 관계없이 전역 데이터에 접근할 수 있어 상당히 편리하다. 하지만 관리할 QueryKey가 늘어나고 React Query 본래 용도에 맞는 건지 의문이 든다.

이 방식이 좋은 코드인지는 생각해볼 문제다.

참고

- Tanstack Quert v4 DOC: https://tanstack.com/query/v4/docs/react/overview

[html] img태그 에러 처리 방법

nuhends — Tue, 8 Nov 2022 02:16:08 +0900

[html] img태그 default 이미지 적용하기

이미지 태그 error처리

img 태그의 src 속성에 url이 존재하지 않거나 이상이 있는 경우, 빈 이미지가 노출 된다.

그 결과 ui가 ugly하게 보인다. 이럴 때 onError 이벤트를 사용할 경우 대처가 가능하다.

사용법 및 주의 사항

onError 이벤트는 url이 존재하지 않을 경우만 동작한다.

url이 falsy value 일 경우, onError 이벤트는 동작하지 않는다. (ex: null, undefined, ‘’)

const defaultImagePath = 'https://via.placeholder.com/300/09f.png';
// sourceUrl이 falsy value 일 경우 동작하지 않기 때문에
// defaultThumbImagePath로 초기화 필요
const sourceUrl = sourceUrl || defaultImagePath;

const handleImgError = (e: SyntheticEvent<HTMLImageElement>) => {
    e.currentTarget.src = defaultThumbImagePath;
};

return (
	<img src={sourceUrl} onError={handleImgError} />
);

sourceUrl이 falsy value 일때를 대비해서 defaultImagePath로 초기화
img url이 없거나 잘못 되었을 경우 onError 이벤트 발생

[Next.js] 딥링크, Next/Link에서 이슈

nuhends — Mon, 31 Oct 2022 05:00:14 +0900

next.js 와 딥링크

이슈

import Link from 'next/link';

// 버튼 컴포넌트
<Link href='twitter.link://my-box'>
	<a>지금 바로 쿠폰 확인하기</a>
</Link>

아래와 같이 // → / 로 바뀌어서, 렌더링되어 링크 동작을 하지 않음.

원인

Next/Link 패키지를 까보자.

// node_modules/next/dist/client/link.js:  Link 컴포넌트 패키지
const { href , as  } = _react.default.useMemo(()=>{
	const [resolvedHref, resolvedAs] = (0, _router).resolveHref(router, hrefProp, true);
	return {
			href: resolvedHref,
			as: asProp ? (0, _router).resolveHref(router, asProp) : resolvedAs || resolvedHref
	};
}, [
        router,
        hrefProp,
        asProp
]);

// node_modules/next/dist/shared/lib/router/router.js
function resolveHref() {
	// filter 1
	const urlProtoMatch = href.match(/^[a-zA-Z]{1,}:\\/\\//);
	// filter 2
	if ((urlParts[0] || '').match(/(\\/\\/|\\\\)/)) {
        console.error(`Invalid href passed to next/router: ${urlAsString}, repeated forward-slashes (//) or backslashes \\\\ are not valid in the href`);
        const normalizedUrl = (0, _utils).normalizeRepeatedSlashes(urlAsStringNoProto);
        urlAsString = (urlProtoMatch ? urlProtoMatch[0] : '') + normalizedUrl;
    }
}

Link 컴포넌트는 prop로 받은 href 값을 resolveHref로 정제하여 사용함
만약 href 에 scheme(:// 이전)가 형식에 맞는지 판단하여, 맞지 않다면 normalizeRepeatedSlashes 처리함. 이과정을 통해
twitter.link:// → twitter.link:/ 변환된다. 만약 scheme이 twitter:// 라면 변환되지 않음

해결책

Next/Link는 애초에 빌드된 Next App 내부에서 페이지 갱신 없이 라우트 간 이동을 위한 기능이다. deep link는 외부 이동이므로 순수 a태그를 쓰는게 맞다.

[Next.js] jest로 unit Test 하기

nuhends — Mon, 31 Oct 2022 00:13:40 +0900

Testing with next.js

1. jest란?

Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more!

출처: jest 공식 홈페이지

코드가 제대로 동작하는지 확인하는 Test case를 만드는 JS Testing Framework(페이스북이 개발)이다.

2. Setting up jest (with Rust Compiler)

Next.js 12 버전부터 Next 내부에 Jest를 위한 설정이 built-in 되어 있다.

1. 패키지 설치

Jest를 셋업 하기 위해 jest, jest-environment-jsdom, @testing-library/react, @testing-library/jest-dom 패키지를 설치하자.

npm install --save-dev jest jest-environment-jsdom @testing-library/react @testing-library/jest-dom

2. jest.config.js 작성

root 디렉토리에 jest.config.js를 생성하고 아래처럼 작성하자.

// jest.config.js
const nextJest = require('next/jest')

const createJestConfig = nextJest({
  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
  dir: './',
})

// Add any custom config to be passed to Jest
/** @type {import('jest').Config} */
const customJestConfig = {
  // Add more setup options before each test is run
  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
  // if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work
  moduleDirectories: ['node_modules', '<rootDir>/'],
  testEnvironment: 'jest-environment-jsdom',
}

// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
module.exports = createJestConfig(customJestConfig)

이렇게 작성해두면 next/jest는 자동으로 Jest에 환경을 적용시켜준다. 상세 내용은 아래와 같다.

Setting up transform using SWC
Auto mocking stylesheets (.css, .module.css, and their scss variants) and image imports
Loading .env (and all variants) into process.env
Ignoring node_modules from test resolving and transforms
Ignoring .next from test resolving
Loading next.config.js for flags that enable SWC transforms

Note: 환경 변수를 바로 테스트 하고 싶다면, 분리된 setup 스크립트 혹은 jest.config.js에서 각각 환경 변수 로드해야 한다. 이번 테스트에서는 환경변수를 사용하지 않는다. 더 정보가 필요하다면 Test Environment Variables 를 참고.

3. 테스트 코드 작성

1. package.json에 script 추가

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "test": "jest --watch"
}

jest --watch는 file이 변경될 때마다 테스트를 다시 시작시킨다. 더 많은 Jest CLI 옵션에 대해 알고 싶다면 Jest Docs 를 참고.

2. test 파일 추가

src/test 폴더에 test 파일을 추가해보자. (폴더의 위치는 각자 상황에 맞게 정하면 된다)

// src/__tests__/index.test.jsx

import { render, screen } from '@testing-library/react'
import Home from '../pages/index'
import '@testing-library/jest-dom'

describe('Home', () => {
  it('renders a heading', () => {
    render(<Home />)

    const heading = screen.getByRole('heading', {
      name: /welcome to next\\.js!/i,
    })

    expect(heading).toBeInTheDocument()
  })
})

4. 테스트 실행

아까 package.json > script에 등록해둔 npm run test를 실행하면 된다. 그러면 test 파일에 적어둔 케이스를 실행해준다.

[Emotion] CSS 속성 사용시 타입 에러 해결 방법(with Next.js)

nuhends — Wed, 7 Sep 2022 21:33:35 +0900

[Emotion] CSS 속성 에러 해결 방법(with Next.js)

styled component emotion css property type error

이슈 발생

아래와 같이 @emotion/react 모듈의 css 함수를 사용하면 type 에러가 발생한다.

import styled from '@emotion/styled';
import { css } from '@emotion/react';

// ...

<div
	css={css`
          padding: 32px;
          background-color: hotpink;
          font-size: 24px;
          border-radius: 4px;
        `}
>
        Blog
</div>

emotion css property error ts2322

에러내용 (ts.2322)

Type '{ children: string; css: SerializedStyles; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'. Property 'css' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.ts(2322)

원인

@types/react/index.d.ts의 HTMLAttributes interface에 css 속성이 없는데, 추가하려고 하니 타입 에러가 발생

(해당 코드: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react/index.d.ts#L1843-L1909)

해결 방법

1. tsconfig.json > compileOptions 에 types 추가

// tsconfig.json
{
    "compilerOptions": {
    	"types": ["@emotion/react/types/css-prop"]
    }
}

2. styles.d.ts 추가

styled.d.ts 파일을 추가하고, 아래 코드를 추가

/// <reference types="@emotion/react/types/css-prop" />

emotion 공식 홈페이지 설명

어떤 방법을 선택해야하는가?

필자는 1번 방법을 적용해도 타입에러가 계속 발생해서, emotion 공식 문서에 나와있는 2번 방법을 선택했다. 이유는 아직 왜인지 모르겠다. 시간 날 때 디깅 해봐야겠다.

[Emotion] emotion(with next v12) 세팅 방법

nuhends — Wed, 7 Sep 2022 19:41:57 +0900

[Emotion] emotion(with next v12) 세팅 방법

styled components emotion

emotion 설치

yarn add @emotion/react @emotion/styled

참고: Emotion 공식 Doc

SWC 컴파일러 설정

Next 12버전 부터는 Rust 컴파일러 기반의 웹 전용 오픈형 플랫폼 SWC를 사용하게 되면서, 기존 Next(v12 이전)Emotion을 사용하기 위해 필요하던 @emotion/babel-plugin 바벨 플러그인을 대신하여 SWC 컴파일러를 사용할 수 있다. (관련 Next Doc)

// 기존 바벨 사용시 .babelrc 
{
  "presets": ["next/babel", "@emotion/babel-preset-css-prop"],
  "plugins": []
}

이를 위해 next.config.js 에 다음 설정을 추가하자

// next.config.js

module.exports = {
  compiler: {
    emotion: boolean | {
      // default is true. It will be disabled when build type is production.
      sourceMap?: boolean,
      // default is 'dev-only'.
      autoLabel?: 'never' | 'dev-only' | 'always',
      // default is '[local]'.
      // Allowed values: `[local]` `[filename]` and `[dirname]`
      // This option only works when autoLabel is set to 'dev-only' or 'always'.
      // It allows you to define the format of the resulting label.
      // The format is defined via string where variable parts are enclosed in square brackets [].
      // For example labelFormat: "my-classname--[local]", where [local] will be replaced with the name of the variable the result is assigned to.
      labelFormat?: string,
    },
  },
}

// emotion 관련 옵션들을 기본값으로 설정하고 싶다면 
module.exports = {
  compiler: {
    emotion: true,
  },
}

사용 예제

const Home: NextPage = () => {
  return (
    <StyledWrap>
      <h2>블로그 Home</h2>
      <div>
        Blog
      </div>
    </StyledWrap>
  );
};

export default Home;

const StyledWrap = styled.div`
  background-color: hotpink;
  div {
    font-size: 24px;
  }
`;

[2022 최신] 중국 주식 시가총액순위 TOP 100

nuhends — Sat, 11 Jun 2022 00:55:20 +0900

[2022 최신] 중국 주식 시가총액순위 TOP 100

중국 주식 top 100 회사 시총순

안녕하세요 Nuhends 입니다.

중국 주식 시가총액 TOP 100개 기업에 대해 알아보겠습니다. (2022/06/11 기준)

( 주기적으로 업데이트 예정이니 최신으로 생각하고 봐주세요)

국가별 주식 순위 관련 포스팅들

- 전세계 주식 시가총액순위 TOP 200
- 일본 주식 시가총액순위 TOP 100
- 독일 주식 시가총액순위 TOP 100
- 프랑스 주식 시가총액순위 TOP 100
- 영국 주식 시가총액순위 TOP 100
- 홍콩 주식 시가총액순위 TOP 100
- 베트남 주식 시가총액순위 TOP 100
- 인도 주식 시가총액순위 TOP 100

업데이트 노트

1등인 Tencent의 경우 4719억 달러(=한화 약 604조)입니다.

컨트롤 + F 를 눌러 검색을 희망하시는 종목을 입력하여 검색하시면 쉽게 찾으실 수 있습니다

모바일을 위한 이미지 뷰

중국 주식 상위 100개 종목

PC를 위한 텍스트 뷰

순위	종목명	티커	시가총액	주가
1	Tencent	TCEHY	$471.94 B	$49.10
2	Kweichow Moutai	600519.SS	$355.91 B	$283.33
3	Alibaba	BABA	$290.63 B	$108.65
4	ICBC	1398.HK	$236.09 B	$0.58
5	China Construction Bank	601939.SS	$188.06 B	$0.89
6	Meituan	3690.HK	$158.45 B	$25.63
7	CATL	300750.SZ	$157.75 B	$67.68
8	Agricultural Bank of China	601288.SS	$155.33 B	$0.45
9	CM Bank	3968.HK	$149.04 B	$6.23
10	PetroChina	PTR	$141.02 B	$53.71
11	BYD	002594.SZ	$139.05 B	$52.00
12	China Mobile	0941.HK	$136.07 B	$6.37
13	Bank of China	601988.SS	$134.65 B	$0.48
14	Ping An Insurance	601318.SS	$119.52 B	$6.70
15	Wuliangye Yibin	000858.SZ	$102.66 B	$26.45
16	China Shenhua Energy	601088.SS	$97.05 B	$5.19
17	Jingdong Mall	JD	$96.15 B	$61.57
18	China Life Insurance	LFC	$87.53 B	$7.62
19	China Yangtze Power	600900.SS	$81.43 B	$3.58
20	Pinduoduo	PDD	$74.64 B	$59.04
21	Sinopec	SNP	$72.69 B	$46.24
22	Postal Savings Bank of China	601658.SS	$71.77 B	$0.78
23	NetEase	NTES	$70.40 B	$107.20
24	CNOOC	0883.HK	$69.06 B	$1.45
25	LONGi Green Energy Technology	601012.SS	$68.97 B	$9.10
26	Industrial Bank	601166.SS	$62.95 B	$3.03
27	Nongfu Spring	9633.HK	$59.88 B	$5.33
28	Mindray	300760.SZ	$55.40 B	$45.70
29	Foshan Haitian Flavouring and Food	603288.SS	$55.23 B	$11.92
30	China Tourism Group Duty Free	601888.SS	$54.64 B	$27.99
31	Midea	000333.SZ	$54.50 B	$7.79
32	Bank of Communications	601328.SS	$52.77 B	$0.75
33	Baidu	BIDU	$49.80 B	$144.13
34	Hikvision	002415.SZ	$48.81 B	$5.17
35	China Telecom	0728.HK	$48.37 B	$0.35
36	East Money Information	300059.SZ	$47.75 B	$3.61
37	Kuaishou Technology	1024.HK	$46.80 B	$11.02
38	WuXi AppTec	2359.HK	$43.63 B	$13.43
39	CITIC Securities	600030.SS	$43.60 B	$3.10
40	Ping An Bank	000001.SZ	$42.01 B	$2.13
41	Muyuan Foods	002714.SZ	$40.92 B	$7.69
42	Wanhua Chemical	600309.SS	$40.91 B	$13.03
43	Great Wall Motors	601633.SS	$39.26 B	$5.44
44	Zijin Mining	601899.SS	$39.16 B	$1.52
45	S.F. Express	002352.SZ	$38.38 B	$7.84
46	YANGHE	002304.SZ	$38.05 B	$25.25
47	Xiaomi	XIACF	$37.17 B	$1.52
48	Luxshare Precision	002475.SZ	$36.09 B	$5.10
49	WuXi Biologics	WXXWY	$36.00 B	$17.00
50	Yili Group	600887.SS	$35.61 B	$5.56
51	Bank of Ningbo	002142.SZ	$34.77 B	$5.14
52	Shanghai Pudong Development Bank	600000.SS	$34.69 B	$1.18
53	China State Construction Engineering	601668.SS	$34.26 B	$0.82
54	COSCO Shipping	601919.SS	$33.64 B	$2.20
55	NIO	NIO	$32.35 B	$17.92
56	Anta Sports	AS7.F	$31.71 B	$11.69
57	SAIC Motor	600104.SS	$30.77 B	$2.62
58	Jiangsu Hengrui Medicine	600276.SS	$30.01 B	$4.70
59	AIER Eye Hospital	300015.SZ	$29.98 B	$5.53
60	Vanke	2202.HK	$29.65 B	$2.19
61	China Pacific Insurance	601601.SS	$29.13 B	$3.26
62	Li Auto	LI	$29.01 B	$29.93
63	Foxconn Industrial Internet	601138.SS	$28.42 B	$1.43
64	Gree Electric Appliances	000651.SZ	$27.81 B	$4.70
65	People’s Insurance Company of China	1339.HK	$27.69 B	$0.32
66	Longfor Group	RLF.F	$27.66 B	$4.44
67	Anhui Conch Cement	AHCHF	$27.28 B	$4.31
68	SMIC	MKN2.F	$26.06 B	$2.22
69	Shenzhen Inovance	300124.SZ	$25.54 B	$9.69
70	China Everbright Bank	601818.SS	$23.59 B	$0.47
71	China Minsheng Bank	600016.SS	$23.58 B	$0.57
72	China Securities	601066.SS	$23.01 B	$3.54
73	XPeng	XPEV	$22.89 B	$26.05
74	JD Health	6618.HK	$22.47 B	$7.07
75	China Railway Group	0390.HK	$21.83 B	$0.65
76	ZTO Express	ZTO	$21.58 B	$25.86
77	China Tower	0788.HK	$21.52 B	$0.12
78	Sany Heavy Industry	600031.SS	$21.28 B	$2.51
79	BOE Technology	000725.SZ	$21.17 B	$0.55
80	Geely	0175.HK	$19.96 B	$1.96
81	CRRC	1766.HK	$19.66 B	$0.39
82	KE Holdings	BEKE	$19.07 B	$15.09
83	Mengniu Dairy	2319.HK	$18.89 B	$4.78
84	China Communications Construction	601800.SS	$18.57 B	$1.38
85	Zhongsheng Group	0881.HK	$18.43 B	$7.64
86	Yum China	YUMC	$17.88 B	$42.44
87	Air China	601111.SS	$17.64 B	$1.44
88	China Merchants Securities	600999.SS	$17.16 B	$2.12
89	Huatai Securities	206G.F	$17.13 B	$18.83
90	Sunny Optical	2382.HK	$16.53 B	$15.07
91	BeiGene	BGNE	$16.35 B	$147.08
92	ZTE	000063.SZ	$16.15 B	$3.65
93	Weichai Power	2338.HK	$15.55 B	$1.59
94	Chongqing Changan	000625.SZ	$15.54 B	$2.33
95	Tsingtao	600600.SS	$15.51 B	$13.73
96	China Railway Construction	601186.SS	$14.84 B	$1.17
97	China Merchants Shekou Industrial Zone	001979.SZ	$14.59 B	$1.84
98	Trip.com	TCOM	$14.33 B	$22.34
99	Shanghai Airport	600009.SS	$13.84 B	$7.19
100	Lufax	LU	$13.73 B	$6.01

포스팅이 여러분의 재테크에 조금이나마 도움이 되면 좋겠습니다.

글이 도움이 되셨다면 공감&댓글 부탁드립니다.글 작성에 큰 힘이 됩니다.

감사합니다!

[이펙티브 타입스크립트] 객체 래퍼 타입 피하기

nuhends — Fri, 10 Jun 2022 23:21:43 +0900

타입스크립트 객체 래퍼 타입 피하기

자바스크립트와 기본형 타입

자바스크립트의 기본형 값들에 대한 7가지 타입(number, boolean, string, undefined, null, symbol, bigint)

기본형들은 불변(immutable)이며 메서드를 가지지 않는다.

하지만 'birdview'.charAt(3) 는 문제없이 실행되며, 이는 기본형 값인 ‘birdview’가 메서드를 가지고 있는 것처럼 보인다. 하지만..

chatAt은 string의 메서드가 아니다.
chatAt을 사용할 때 내부동작이 발생 (기본형 string에는 메서드가 없지만, 객체 String 타입이 정의)

래퍼 객체 (Wrapper Object)

레퍼 객체는 총 3가지(Number, String, Boolean)이 있다.

let name = 'birdview';
console.log(name.length);      // 8
console.log(name.charAt(0));  // "b"

name은 문자열이다 ⇒ 원시타입
name.length 혹은 name.charAt 처럼 프로퍼티를 참고하려고 할 때
- name = new String(’birdview')
- 다음과 같이 래퍼 객체 String 일시적으로 실행되어, name을 객체화 시킨다.
- 이로 인해, name은 객체화되어 String의 프로퍼티를 참고 할 수 있게 된다.
  - 즉, 원시타입을 객체화 시켜주는 객체형 데이터 타입을 래퍼객체 라고 한다.

몽키패치란(monkey Patch)?

monkey patch

일반적으로 런타임 중인 프로그램 메모리의 소스 내용을 직접 바꾸는 것이다.

ex) prototype 객체의 특정 메소드를 수정하는 행위

원래 게릴라 패치 였는데 (guerrilla patch) 발음의 유사성 때문에 사람들이 고릴라 패치(gorilla patch) 라고 쓰기 시작했다. 하지만 "고릴라" 라고 하면 좀 무섭고 위험하게 들리므로 (CEO 에게) 고릴라보다 덩치가 작은 원숭이 패치로 부르게 됐다고 한다. (monkey Patch)

몽키 패치 하지말라고 경고하는 eslint

예제

const originalCharAt = String.prototype.charAt;

String.prototype.charAt = function(pos) {
	console.log(this, typeof this, pos);
	return originalCharAt.call(this, pos + 1)
};

console.log(
	'birdview'.charAt(0)
);

console.log 결과

→ this는 원시 타입 string이 아니라 객체 타입 string이다

원시 타입과 객체 타입은 다르다.

"hello" === new String("hello");             // false
new String("hello") === new String("hello")  // false

프로퍼티를 호출나서는, wrapping한 객체를 버린다.

let name = 'birdview';
name.length = 20;                // new String(name).length = 20;
// 래핑한 name 객체 메모리 clear
name.charAt = function() {       // new String(name).charAt = function() { // .. }
	console.log('another charAt');
}
// 래핑한 name 객체 메모리 clear

console.log(name.length);      // 8
// 래핑한 name 객체 메모리 clear
console.log(name.charAt(0));  // "b"

원시 타입 - 객체 타입

number → Number
boolean → Boolean
string → String
symbol → Symbol
bigint → BigInt

null, undefined 에는 객체 레퍼가 없다

타입스크립트는 원시형과 객체 레퍼 타입을 별도로 모델링 한다.

string 사용시 유의해야한다. string ≠ String

function getStringLen(foo: String) {
	return foo.length;
}

getStringLen("hello");              // 정상
getStringLen(new String("hello"));  // 정상

// 런타입 값은 객체가 아니라 원시형
const s: String = 'birdview';       // 정상 
const n: Number = 93;               // 정상
const b: Boolean = true;            // 정상

// ------------------------------------------------
// 잘못된 케이스
function isGreeting(phrase: String) {
	return [
		'hello',
		'good day'
	].includes(phrase);   // 에러
}

Array.prototype.includes interface

Array.prototype.includes의 첫번째 인자는 string 타입을 받는다.
string은 String에 할당할 수 있지만, String은 string에 할당할 수 없다.
- but, 기본형 타입을 객체 래퍼에 할당하는 구문은 오해하기 쉽고, 그렇게 할 필요가 없다!
(참고) 대부분의 라이브러리, ts가 제공하는 타입 선언은 전부 원시 타입으로 되어 있다.

BigInt와 Symbol 타입

typeof BigInt(1234)   // "bigint"
typeof Symbol('sym')  // "symbol"

이것들은 BigInt와 Symbol 값이다. 타입이 아니다.

요약

객체 래퍼 타입이 어떻게 동작하는지 이해해야한다. 이를 직접 사용하거나 인스턴스를 생성하는 것을 피해야 한다.
타입스크립트 객체 래퍼타입은 지양하고, 대신 기본형 타입을 사용하자
- String 대신 string
- Number 대신 number
- Boolean 대신 boolean
- Symbol 대신 symbol
- BigInt 대신 bigint

[VScode] Turbo Console Log 마지막 줄에 찍힐 때 해결 방법

nuhends — Fri, 10 Jun 2022 19:11:52 +0900

Turbo Console Log 마지막 줄에 추가될 때

이슈

올바른 turbo console log 동작

VScode에 Turbo Console Log 유용한 확장 프로그램이 있다.

console.log 하고 싶은 키워드를 select하고 control + option + L 입력시 현재 line 넘버를 포함하여 cosnole.log 를 찍어준다.

그런데 문제는 console.log 구문을 현재 파일의 최하단에 생성하는 경우가 있었다.

해결 방법

turbo console log 에러 해결 방법

최신 버전에서 2.1 버전으로 다운그레이드하면 현재 위치에서 log를 찍어준다.

참고

- https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log

- https://github.com/Chakroun-Anas/turbo-console-log/issues/108

[JS] 객체에 조건부 프로퍼티 적용하기

nuhends — Sun, 5 Jun 2022 22:00:38 +0900

객체에 조건부 프로퍼티 적용하기

작업 중에 query 객체에 특정 프로퍼티를 조건부로 적용해야하는 경우가 있었다. 예를 들어 page라는 param을 주는 상황에서 특정 값이 있을 때 param을 주고 싶다.

const query = {};

if (page) {
    query.page = page;
}

위 코드처럼 if문으로 query 객체에 prop을 추가해줄 수 있다. 하지만 조금 더 간단하게 짤 방법을 알아봄

const query = {
	...(page && { page })
};


// 여러 params가 있는 경우
const query = {
	...(page && { page }),
	...(category && { category }),
	...(type && { type )
};

spread 연산자를 사용하면 조금 더 간단하게 사용할 수 있다. 또한 다른 param이 있다면 if문을 사용하는 것보다 간단하고 가독성도 나쁘지 않을 듯 하다. 이 개념을 활용해서 실무 코드에서는 아래처럼 작성했다.

실제 사용한 코드

const router = useRouter();
const { pathname, query } = router;
const page = pageValue;
const nextQuery = {
	...query,
    page: pageValue
}

router.replace(
	{
		pathname,
		query: nextQuery,
	},
);

그렇다면 성능은?

spread 연산자를 사용한 방식은 사실 syntax sugar이다. 그렇기 때문에 성능상으로는 첫번째 if문 방식이 더 좋다.

function testSpreadOperatorConditionFulfilled() {
  const value = 5;

  console.time('testSpreadOperatorConditionFulfilled');
  for (let i = 0; i < 200000000; i++) {
    let a = {
      ...(value && {b: value})
    };
  }
  console.timeEnd('testSpreadOperatorConditionFulfilled');
}

function testSpreadOperatorConditionNotFulfilled() {
  const value = undefined;

  console.time('testSpreadOperatorConditionNotFulfilled');
  for (let i = 0; i < 200000000; i++) {
    let a = {
      ...(value && {b: value})
    };
  }
  console.timeEnd('testSpreadOperatorConditionNotFulfilled');
}

function testClassicConditionFulfilled() {
  const value = 5;

  console.time('testClassicConditionFulfilled');
  for (let i = 0; i < 200000000; i++) {
    let a = {};
    if (value)
        a.b = value;
  }
  console.timeEnd('testClassicConditionFulfilled');
}

function testClassicConditionNotFulfilled() {
  const value = undefined;

  console.time('testClassicConditionNotFulfilled');
  for (let i = 0; i < 200000000; i++) {
    let a = {};
    if (value)
        a.b = value;
  }
  console.timeEnd('testClassicConditionNotFulfilled');
}

testClassicConditionFulfilled(); // ~ 234.9ms
testClassicConditionNotFulfilled(); // ~493.1ms
testSpreadOperatorConditionFulfilled(); // ~2649.4ms
testSpreadOperatorConditionNotFulfilled(); // ~2278.0ms

결론

개인적 의견은 하드웨어가 점점 좋아지면서 성능 이슈가 점점 줄어들고 있다. 물론 성능을 고려하지 않아도 된다는 것이 아니다. 결국엔 트레이드 오프 관점에서 아주 미세한 ms를 개선하는 것보다는 코드 가독성을 늘려 이해하기 쉽고 간편한 코드를 짜는게 더 좋을 것 같아. 성능이 크리티컬한 프로젝트가 아니라면 spread 연산자를 사용한 방법이 더 좋다고 생각한다.

[이펙티브 타입스크립트] 타입 공간과 값 공간의 심벌 구분하기

nuhends — Sun, 5 Jun 2022 20:00:55 +0900

타입스크립트의 심벌(symbol)은 타입 공간이나 값 공간 중의 한 곳에 존재한다.

심벌은 이름이 같더라도 속하는 공간(타입 or 값)에 따라 다른 것을 나타낼 수 있기 때문

// Cylinder은 타입으로 사용
interface Cylinder {
	radius: number;
	height: number;
}

// Cylinder로 이름은 같지만 값으로 사용
const Cylinder = () => (radius: number, height: number) => ({ radius, height });

// => Cylinder는 상황에 따라 타입 or 값으로 둘다 사용될 수 있음

function calcVolume(shape: unknown) {
	if(shape instanceof Cylinder) {
		console.log(shape.radius); // 오류
	}
}

instanceof를 이용하여 shape가 Cylinder 타입인지 체크해보자는 의도였지만 중요한 점은 instanceof는 자바스크립트의 런타임 연산자 → 값에 대한 연산을 수행하기 때문에 Cylinder 함수를 참조하게 된다.

그렇다면 타입과 값은 어떻게 구분할 수 있는가? 이는 조금 혼란스러울 때가 많다.

type T1 = 'string literal';
type T2 = 123;

const V1 = 'string literal';
const V2 = 123;

일반적으로 type, interface 다음에 오는 심벌은 타입
const, let 선언에 쓰이는 건 값

typescirpt 플레이그라운드를 활용하기

ts 소스로부터 변환된 js 결과물을 보여줌
컴파일 과정에서 타입 정보는 제거되기 때문에, 심볼이 사라졌다면 그것은 타입에 해당

타입과 값 구별해보기

앞선 규칙에 추가

타입 선언 :, as 다음에 오는 심벌은 타입
= 다음에 오는 값은 무조건 값

interface Person {
	first: string;
	last: string;
}

const p: Person = { first: 'Jane', last: 'Jacobs' };

function email(p: Person, subject: string, body: string): Response { 
	// ... 
}

상황에 따라 type과 값 모두 가능한 예약어 class

class Cylinder {
	radius=1;
	height=1;
}

function calcVolume(shape: unknown) {
	if(shape instanceof Cylinder) {
		console.log(shape);
		console.log(shape.radius);
	}
}

Cylinder 클래스는 타입으로 사용 (값으로 쓰일 때는 생성자가 사용되는 경우)

타입과 값에서 다른 기능을 하는 typeof 연산자

type T1 = typeof p;      // Person 타입이라고 가정
// type은 (p: Person, subject: string, body: string) => Response
type T2 = typeof email;   

const v1 = typeof p;     // 값은 "object"
const v2 = typeof email;  // 값은 "function"

타입의 관점

typeof는 값을 읽고 ts 타입을 리턴
타입 공간의 typeof는 큰 타입의 일부분으로 사용
type 구문으로 type에 이름을 붙이는 용도로도 사용

값의 관점

js 런타임의 typeof 연산자
값 공간의 typeof는 문자열을 반환

js 런타임의 타입은 ts의 정적 타입 시스템보다 훨씬 간단하다.

js 런타임의 타입: number / boolean / undefined / object / function

클래스에 대한 typeof는 상황에 따라 다르게 동작한다.

const v = typeof Cylinder;  // 값이 "function"
type T = typeof Cylinder;   // ??

declare let fn: T;
const c = new fn(); // 타입이 Cylinder

// InstanceType 제너릭을 사용해 생정자 타입과 인스턴스 타입을 전환할 수 있음
type C = InstanceType<typeof Cylinder>;

declare let smallC: C;

클래스가 js런타임에서 실제 함수로 구현되기 때문에 v는 “function”
중요한 점은 Cylinder은 인스턴스 타입이 아니라는 점, (=생성자 함수)

속성선택자 [ ]

const first: Person['first'] = p['first'];

// 인덱스 위치에는 유니온 타입과 기본형 타입을 포함한 어떤 타입이든 사용 가능
type PersonEl = Person['first' | 'last'];  // string
type Tuple = [string, number, Date];
type TupleEl = Tuple[number];    // string | number | Date

속성선택자 []는 타입으로 쓰일 때에도 값에서 사용하는 것과 동일하게 동작

하지만 obj[’filed’]와 obj.filed는값이 동일하더라도 타입은 다를 수 있음 (?) → 타입의 속성을 얻을 때에는 반드시 obj[’filed’]를 사용해야 한다 (속성 선택자에 대한 내용은 아이템 14에서 더 자세히 다룰 예정)

두 공간(타입, 값)사이에서 다른 의미를 가지는 코드 패턴들

this 키워드 (아이템 49)
- 값으로 쓰이는 this: 자바스크립트의 this 키워드
- 타입으로 쓰이는 this: 다형성(polymorphic) this 라고 불리는 this → 서브클래스의 메서드 체인 구현할 때 유용
&와 |
- 값: AND 와 OR 비트 연산자
- 타입: 인터섹션과 유니온
const
- 값: 새 변수 선언
- 타입: as const는 리터럴 혹은 리터럴 표현식의 추론된 타입을 변경(아이템 21)
extends
- 서브 클래스(class A exnteds B)
- 서브 타입(interface A extends B)
- 제너릭 타입의 한정자(Generic<T extends number>)
in
- 루프(for (key in object)) 또는 매핑된(mapped) 타입

function email(options: { person: Person, subject: string, body: string }) {
	// ...
}

function email({ 
    person: Person, 
    subject: string, 
    body: string, 
}) { 
	// ...
}

'Person' is declared but its value is never read.ts(6133)
Duplicate identifier 'string'.(2300) Binding element 'string' implicitly has an 'any' type.(7031)

→ 값의 관점에서 Person과 string이 해석되었기 때문에 오류 발생

// 타입과 값을 구분해야 한다.
function email({ 
	person, subject, body 
}): { persone: Person, subject: string, body: string } { 
	// ...
}

요약

ts 코드를 읽을 때 타입인지 값인지 구분하는 방법을 터특하자 (타입스크립트 플레이그라운드 활용하여 개념잡자)
모든 값은 타입을 가지지만, 타입은 값을 가지지 않는다. type과 interface 같은 키워드는 타입 공간에만 존재
class나 enum 같은 키워드는 타입과 값 두가지로 사용될 수 있다.
“foo”는 문자열 리터럴이거나, 문자열 리터럴 타입일 수 있다. 차이점을 알고 구별하는 방법을 터득하자.
typeof, this 그리고 많은 다른 연산자들과 키워드들은 타입 공간과 값 공간에서 다른 목적으로 사용될 수 있다.

[이펙티브 타입스크립트] #4 구조적 타이핑에 익숙해지기

nuhends — Sun, 5 Jun 2022 15:54:50 +0900

Effective typescript

자바스크립트는 덕 타이핑(duck typing) 기반이다.

덕타이핑 비유

덕 타이핑이란?
객체가 어떤 타입에 부합하는 변수와 메서드를 가질 경우 객체를 해당 타입에 속하는 것으로 간주하는 방식이다. 이는 덕 테스트(The Duck Test)에서 유래되었는데, “만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다.”

JS 에서 어떤 함수의 매개변수 구성 요소가 요구사항을 만족한다면, 타입이 무엇인지 신경 쓰지 않는 동작을 그대로 모델링합니다. 하지만 Type checker는 타입에 대한 이해도가 사람과 다른 면이 있어 예상치 못한 결과가 생기기도 함

⇒ 구조적 타이핑을 제대로 이해해야만 오류를 제대로 파악할 수 있고, 견고한 코드를 짤 수 있음

interface Vector2D {
	x: number;
	y: number;
}

function calcLength(v: Vector2D) {
	return Math.sqrt(v.x * v.x + v.y * v.y);
}

// name 속성이 추가된 타입
interface NamedVector {
	x: number;
	y: number;
	name: string;
}

const v: NamedVector = { x: 3, y: 4, name: 'Zee' };
calcLength(v); // Not error,

NamedVector는 number 타입인 x, y 속성이 있기 때문에 calcLength의 인자로 사용 가능

Vector2D와 NamedVector의 관계를 선언하지 않았음
NamedVector 타입의 인자를 위한 별도의 함수(ex: calcLengthForNaemdVector)를 선언하지 않아도 된다

똑똑한 타입스크립트?! ⇒ 구조적 타이핑(Duck Typing)

구조적 타이핑으로 인해 발생하는 문제들

case #1

interface Vector3D {
	x: number;
	y: number;
	z: number;
}

function normalize(v: Vector3D) {
	const length = calcLength(v);  // calcLength는 Vector2D 타입의 인자를 받는 함수

	return {
		x: v.x / length,
		y: v.y / length,
		z: v.z / length,
	};
}

normalize({ x: 3, y: 4, z: 5 });  // { x: 0.6, y: 0.8, z: 1 }

Vector3D를 기반으로 연산하는데, Vector2D로 연산되면서, z가 정규화에서 무시

그럼에도 문제가 없었던 이유는 Vector3D에 x, y 속성이 있기 때문에(구조적 타이핑) Type Checker가 문제로 인식하지 않았음 (tsConfig에 이런 경우를 오류로 처리하는 설정이 있음)

case #2

우리는 함수를 작성할 때, 호출에 사용되는 매개변수의 속성들이 매개변수의 타입에 선언된 속성만을 가질 거라 생각하기 쉽다. 이러한 타입을 봉인된(sealed) 또는 정확한(precise) 타입이라 부르며, typescript 타입 시스템에서는 표현할 수 없다. 좋든 싫든 타입의 확장에 열려(open) 있다.

function calcLength1(v: Vector3D) {
	let length = 0;

	for(const axis of Object.keys(v)) {
		const coord = v[axis]; // 에러 발생, why??
		length += Math.abs(coord);
	}

	return length;
}

ts 7053

아래의 사고 과정으로 인해, 위 에러를 납득하기는 어렵다.

axis는 v의 key 중 하나 이므로 ‘x’ , ‘y’, ‘z’ 중 하나여야 한다.
x, y, z 모두 number type이므로 coord의 타입은 number가 되어야 할 것으로 예상된다.

⇒ 하지만 type checker가 오류를 정확하게 찾아낸 것이 맞다. 왜냐하면 vector3D를 sealed 혹은 precise 타입으로 가정했기 때문이다.

const vec3D = { x: 3, y: 4, z: 1, address: '123 Broadway' };

calcLength1(vec3D); // NaN

v는 Vector3D에서 정의한 속성 이외에 어떤 속성이든지 가질 수 있다. (타입의 확장에 열려(open) 있기 때문)

그러므로 v[axis]가 number라고 확정할 수 없다.

function calcLength1(v: Vector3D) {
	return Math.abs(v.x) + Math.abs(v.y) + Math.abs(v.z);
}

이런 경우 loop보다는 명시적으로 모든 속성을 각각 더하는 구현이 더 낫다.

case #3: 클래스와 관련된 할당문

class C {
	foo: string
	constructor(foo: string) {
		this.foo = foo;
	}
}

const c = new C('instant of C');
const d: C = { foo: 'object literal' };

Java, C# 개발자에게 다음과 같은 코드를 보여주면 매우 기겁하면서 도망을 가려고 할 것이다.

변수 d에 타입 C를 할당될 수 있는 이유

d는 string 타입의 foo라는 속성을 지닌 객체 가진다.
생성자(Object.prototype)를 가진다 (객체 리터럴 방식 내부 동작)

구조적 타이핑과 테스트

테스트를 작성할 때는 구조적 타이핑이 유리하다.

interface Author {
	first: string;
	last: string;
}

// AS-IS
// getAuthors함수를 테스트하기 위해서는 모킹(mocking)한 PostgresDB interface를 생성해야 함
function getAuthors(database: PostgresDB): Author[] {
	const authorRows = database.runQuery(`SELECT FIRST, LAST FROM AUTHORS`);
	
	return authorRows.map(row => ({ first: row[0], last: row[1] }); 
}

// TO-BE
interface DB {
	runQuery: (sql: string) => any[];
}

function getAuthors(database: DB): Author[] {
	const authorRows = database.runQuery(`SELECT FIRST, LAST FROM AUTHORS`);
	
	return authorRows.map(row => ({ first: row[0], last: row[1] }); 
}

getAuthors함수를 테스트하기 위해서는 모킹(mocking)한 PostgresDB interface를 생성해야 한다. 이것보다는 구조적 타이핑을 활용하여 인터페이스를 정의하는 것이 더 나은 방법이다. DB 인터페이스에 runQuery메서드가 있기 때문에 실제 환경에서도 인터페이스를 사용 할 수 있다.

test('getAuthors', () => {
	const authors = getAuthors({
		runQuery(sql: string) => {
			return [['Toni', 'Morrison'], ['Maya', 'Angelou']];
		}
	});
	
	expect(authors).toEqual([
		{ first: 'Toni', last: 'Morrison' },
		{ first: 'Maya', last: 'Angelou' }
	]);
});

테스트를 작성할 때, 더 간단한 개체를 매개변수로 사용할 수도 있다.

타입스크립트는 테스트 DB가 해당 인터페이스를 충족하는지 확인한다.
테스트코드에는 실제 환경의 데이터베이스에 대한 정보가 불필요

⇒ DB 인터페이스로 추상화 함으로써 로직과 테스트를 특정한 구현(PostgresDB)으로부터 분리하였다.

(추가) 테스트 이외에 구조적 타이핑 장점 → 라이브러리 간의 의존성을 완벽히 분리할 수 있다

요약

JS는 덕 타이핑 기반, 타입스크립는 이를 모델링하기 위해 구조적 타이핑을 사용한다. 어떤 인터페이스에 할당 가능한 값이라면 타입 선언에 명시적으로 나열된 속성들을 가지고 있다.
- 타입은 ‘봉인(sealed)'되어 있지 않다. (확장 가능하다)
클래스 역시 구조적 타이핑 규칙을 따른다. 클래스의 인스턴스가 예상과 다를 수 있다
구조적 타이핑을 사용하면 유닛 테스팅을 손쉽게 할 수 있다.

[TypeScript] e.target.target 타입 에러가 나는 이유 ts(2339)

nuhends — Sat, 4 Jun 2022 17:11:40 +0900

1. 문제 발생

const handleSearchValue = (e: KeyboardEvent<HTMLInputElement>) => {
	setSearchValue(e.currentTarget.value);
	setSearchValue(e.target.value);  // error 발생
};

Property 'value' does not exist on type 'EventTarget'. ts(2339)

e.target과 e.currentTarget의 type alias가 다르다구..? 외 안되?!

react/index.d.ts 를 까보면

// @types/react/index.d.ts

interface BaseSyntheticEvent<E = object, C = any, T = any> {
	nativeEvent: E;
	currentTarget: C;
	target: T;
	// ...
}

- KeyboardEvent는 BaseSyntheticEvent 타입을 extends하고 있다.

2. currentTarget와 target

1-1. currentTarget: 이벤트 리스너가 바인딩 된 요소

e.currentTarget의 interface를 까보자.

// @types/react/index.d.ts
interface BaseSyntheticEvent<E = object, C = any, T = any> {
	nativeEvent: E;
	currentTarget: C;
	target: T;
	// ...
}

// e.currentTarget 타입
(property) BaseSyntheticEvent<
	globalThis.KeyboardEvent, 
	EventTarget & HTMLInputElement, 
	EventTarget
>.currentTarget: EventTarget & HTMLInputElement

- currentTarget은 EventTarget에 HTMLInputElement type을 확장한 형태

1-2. target: 이벤트가 발생한 바로 그 요소

이번에는 e.target의 interface를 까보자.

// e.target 타입
(property) BaseSyntheticEvent<
	globalThis.KeyboardEvent, 
	EventTarget & HTMLInputElement, 
	EventTarget
>.target: EventTarget

currentTarget과 달리 EventTarget에 HTMLInputElement를 확장하지 않았음!

왜 e.target type은 HTMLInputElement를 확장하지 않았을까?

3. e.target type은 HTMLInputElement를 확장하지 않은 이유

HTMLInputElement를 확장하지 않은 이유는 EventTarget이 될 수 있는 요소들에는 HTML Element 말고 다른 요소들도 있기 때문임

⇒XMLHttpRequest, FileReader, AudioNode, AudioContext 등등

2-1. Event target이 될 수 있는 다른 타입들

FileReader 인터페이스

XMLHttpRequest 인터페이스

AudioNode 인터페이스

BaseAudioContext 인터페이스

4. 해결책

4-1. target 대신 currentTarget 사용

const handleSearchValue = (e: KeyboardEvent<HTMLInputElement>) => {
	// 1. currentTarget과 target이 동일할 경우
	setSearchValue(e.currentTarget.value);

	// 2. n개의 DOM 구조일 경우 -> currentTarget 기준으로 value 찾기
	const target = e.currentTarget;

	const findId = target.querySelector('span').id
	setSearchValue(findId);
		
	const findValue = target.querySelector(span).value
	setSearchValue(findValue);
};

currentTarget과 target이 동일할 경우는 currentTarget을 사용하자.

하지만 불가피하게 target을 사용해야 되는 경우가 많다. 그럴 때는 currentTarget을 기준으로 DOM을 탐색해야 한다. 이 경우 currentTarget 밑으로 자식이 n개인 상태에서 자식들의 구조가 복잡한 상황에서 특정 자식을 찾는 경우 findChild(’childName’) 식으로 순차적으로 [자식 → 자식의 자식 → … ] 순으로 재귀 탐색을 해야 해서 비용이 큰 작업이 돼서 부담이 될 수 있기 때문에 이럴 경우는 다음 해결책을 추천

4-2. 타입 단언(type assertion)

const handleSearchValue = (e: KeyboardEvent<HTMLInputElement>) => {
	setSearchValue((e.target as HTMLInputElement).value);
};

보통 타입 단언을 지양하지만, target이 되는 DOM이 문서에서 명확하게 정해져 있다면 이 경우는 타입 단언하는 방식을 사용해도 괜찮을 것 같음.

4-3. ChangeEvent 사용

// e: ChangeEvent<HTMLInputElement>로 타입을 줄 경우 
// ChangeEvent는 EventTarget을 확장하고 있어 해당 에러가 발생하지 않음

// React/index.d.ts
interface ChangeEvent<T = Element> extends SyntheticEvent<T> {
	target: EventTarget & T;
}

const handleSearchValue = (e: ChangeEvent<HTMLInputElement>) => {
	setSearchValue(e.currentTarget.value);    
}

참고: ChangeEvent, KeyboardEvent 각각 interface 비교

[2022년 최신] 전세계 자동차 회사 TOP 40, 시가총액 순위

nuhends — Wed, 16 Feb 2022 12:00:28 +0900

[2021년 최신] 전세계 자동차 회사 시가총액 순위

글로벌 자동차 회사 top 40 시총순

최근 전기/수소차가 주목받으면서 자동차 관련 회사들에 관심이 급증하고 있습니다.

이번 포스팅에서는 전세계 자동차 회사 TOP 40개 기업에 대해 알아보겠습니다. (2022/02/16 기준)

( 주기적으로 업데이트 예정이니 최신으로 생각하고 봐주세요)

국가별 주식 순위 관련 포스팅들

- 전세계 주식 시가총액순위 TOP 200
- 일본 주식 시가총액순위 TOP 100
- 독일 주식 시가총액순위 TOP 100
- 프랑스 주식 시가총액순위 TOP 100
- 영국 주식 시가총액순위 TOP 100
- 홍콩 주식 시가총액순위 TOP 100
- 베트남 주식 시가총액순위 TOP 100
- 인도 주식 시가총액순위 TOP 100

업데이트 노트

1등인 Tesla(테슬라)의 경우 9365억 달러 (한화 1167조 원)입니다.

+업데이트(22.02.16) :
- 테슬라 시총 변화 : 9365억 달러 > 9263억 달러
- 리비안(Rivian): 시총 10위로 하락(860억 달러 > 579억 달러)
- 루시드 모터스(Lucid Motors) : 시총 12위로 하락(658억 달러 > 468 달러)
+업데이트(21.12.20) :
- 테슬라 시총 변화 : 1조 달러 > 9365억 달러
- 리비안(Rivian) 종목 추가 : 시총 5위(860억 달러)
- 루시드 모터스(Lucid Motors) 종목 추가 : 시총 9위(658억 달러)

컨트롤 + F 를 눌러 검색을 희망하시는 종목을 입력하여 검색하시면 쉽게 찾으실 수 있습니다

모바일을 위한 이미지 뷰

PC를 위한 텍스트 뷰

순위	회사명	티커명	시가총액	주가	국가
1	Tesla	TSLA	$926.31 B	$912.63	USA
2	Toyota	TM	$263.21 B	$189.17	Japan
3	Volkswagen	VOW3.DE	$129.02 B	$213.34	Germany
4	BYD	002594.SZ	$102.16 B	$37.53	China
5	Mercedes-Benz	MBG.DE	$91.41 B	$85.45	Germany
6	General Motors	GM	$71.87 B	$49.47	USA
7	Ford	>F	$71.53 B	$17.87	USA
8	BMW	BMW.DE	$69.97 B	$107.61	Germany
9	Stellantis	STLA	$60.61 B	$19.35	Netherlands
10	Rivian	RIVN	$57.93 B	$65.58	USA
11	Honda	HMC	$55.82 B	$31.63	Japan
12	Lucid Motors	LCID	$46.84 B	$28.46	USA
13	Great Wall Motors	601633.SS	$45.21 B	$6.09	China
14	Ferrari	RACE	$41.63 B	$224.71	Italy
15	NIO	NIO	$40.13 B	$25.23	China
16	Maruti Suzuki India	MARUTI.NS	$35.97 B	$114.04	India
17	SAIC Motor	600104.SS	$34.59 B	$2.96	China
18	Hyundai	HYMTF	$34.55 B	$39.40	S. Korea
19	XPeng	XPEV	$33.80 B	$39.22	China
20	Li Auto	LI	$30.76 B	$29.79	China
21	Kia	000270.KS	$25.98 B	$64.74	S. Korea
22	Tata Motors	TTM	$25.30 B	$33.04	India
23	Volvo Car	VOLCAR-B.ST	$23.81 B	$7.46	Sweden
24	Geely	0175.HK	$21.47 B	$2.14	China
25	Nissan	7201.T	$20.53 B	$5.25	Japan
26	Suzuki Motor	7269.T	$20.34 B	$41.90	Japan
27	Mahindra & Mahindra	M&M.NS	$14.05 B	$11.30	India
28	Chongqing Changan	000625.SZ	$13.58 B	$2.04	China
29	Subaru	7270.T	$13.07 B	$17.05	Japan
30	Hotai Motor	2207.TW	$12.16 B	$22.27	Taiwan
31	Renault	RNSDF	$11.90 B	$39.72	France
32	Isuzu	7202.T	$10.05 B	$13.64	Japan
33	Dongfeng Motor	0489.HK	$7.87 B	$0.91	China
34	Polaris	PII	$7.44 B	$122.77	USA
35	FAW Car	000800.SZ	$7.13 B	$1.53	China
36	Mazda	7261.T	$4.95 B	$7.87	Japan
37	Fisker	FSR	$3.61 B	$12.17	USA
38	Nikola	NKLA	$3.43 B	$8.44	USA
39	Arrival	ARVL	$2.50 B	$3.93	UK
40	Aston Martin	A5SA.F	$1.86 B	$15.93	UK

포스팅이 여러분의 재테크에 조금이나마 도움이 되면 좋겠습니다.

글이 도움이 되셨다면 공감&댓글 부탁드립니다. 글 작성에 큰 힘이 됩니다.

감사합니다!

[2022년 최신] S&P 500 종목 리스트

nuhends — Wed, 16 Feb 2022 09:00:15 +0900

S&P 500 종목 리스트

S&amp;amp;amp;P 500 종목 리스트 알아보기

안녕하세요 Nuhends 입니다.

미국의 S&P 500 지수로 알려진 S&P 500 종목 리스트에 대해 알아보겠습니다. (2022/02/16 기준)
( 주기적으로 업데이트 예정이니 최신으로 생각하고 봐주세요)

S&P 500 개의 종목을 시가총액 순으로 정렬하였습니다.
1등인 Apple의 경우 2.796조 달러(=한화 3,347조원)입니다.

국가별 주식 순위 관련 포스팅들

- 세계 주식 시가총액순위 TOP 200
- 중국 주식 시가총액순위 TOP 100
- 일본 주식 시가총액순위 TOP 100
- 독일 주식 시가총액순위 TOP 100
- 프랑스 주식 시가총액순위 TOP 100
- 영국 주식 시가총액순위 TOP 100
- 홍콩 주식 시가총액순위 TOP 100
- 베트남 주식 시가총액순위 TOP 100
- 인도 주식 시가총액순위 TOP 100

컨트롤 + F >검색을 희망하시는 종목/티커명을 입력하시면 쉽게 찾으실 수 있습니다

모바일을 위한 이미지 뷰

S&amp;P 500 주식 리스트 (1-100)

S&amp;P 500 주식 리스트 (101-200)

S&amp;P 500 주식 리스트 (201-300)

S&amp;P 500 주식 리스트 (301-400)

S&amp;P 500 주식 리스트 (401-500)

PC를 위한 텍스트 뷰

1위~ 100위

순위	티커	종목명	시가총액 (달러)	배당률
1	AAPL	Apple Inc	2752.11 B	0.52%
2	MSFT	Microsoft Corp	2211.88 B	0.78%
3	GOOG	Alphabet Inc Class C	1811.21 B	0.00%
4	GOOGL	Alphabet Inc Class A	1811.21 B	0.00%
5	AMZN	Amazon.Com Inc.	1560.05 B	0.00%
6	TSLA	Tesla Inc	863.67 B	0.00%
7	BRK.B	Berkshire Hathaway Inc. Class B	713.17 B	0.00%
8	FB	Facebook Inc Class A	626.60 B	0.00%
9	NVDA	Nvidia Corp	598.73 B	0.07%
10	V	Visa Inc Class A	495.22 B	0.62%
11	JPM	JP Morgan Chase & Co	454.87 B	2.45%
12	UNH	Unitedhealth Group Inc	450.33 B	1.17%
13	JNJ	Johnson & Johnson	441.51 B	2.48%
14	BAC	Bank of America Corp	392.18 B	1.62%
15	PG	Procter & Gamble	378.21 B	2.21%
16	WMT	Walmart Stores Inc	375.39 B	1.62%
17	HD	Home Depot Inc	365.79 B	1.87%
18	MA	Mastercard Inc Class A	360.42 B	0.49%
19	XOM	Exxon Mobil Corp	339.57 B	4.28%
20	PFE	Pfizer Inc	285.02 B	3.05%
21	DIS	Walt Disney	272.13 B	0.00%
22	CVX	Chevron Corp	267.58 B	3.76%
23	KO	Coca-Cola	260.42 B	2.75%
24	ABBV	Abbvie Inc	250.96 B	3.68%
25	WFC	Wells Fargo	239.44 B	1.28%
26	AVGO	Broadcom Inc.	236.75 B	3.20%
27	PEP	Pepsico Inc	233.09 B	2.49%
28	CSCO	Cisco Systems Inc	227.33 B	2.72%
29	COST	Costco Wholesale Corp	226.00 B	0.62%
30	LLY	Eli Lilly	224.57 B	1.08%
31	ADBE	Adobe Inc	223.88 B	0.00%
32	VZ	Verizon Communications Inc	223.83 B	5.87%
33	TMO	Thermo Fisher Scientific Inc	223.15 B	0.18%
34	ABT	Abbott Laboratories	221.90 B	1.44%
35	NKE	Nike Inc Class B	220.06 B	0.80%
36	ACN	Accenture Plc Class A	216.71 B	1.12%
37	CMCSA	Comcast A Corp	215.42 B	2.09%
38	ORCL	Oracle Corp	212.97 B	1.60%
39	CRM	Salesforce.Com Inc	204.78 B	0.00%
40	DHR	Danaher Corp	194.84 B	0.31%
41	INTC	Intel Corporation Corp	193.95 B	2.92%
42	MRK	Merck & Co Inc	193.59 B	3.40%
43	MCD	Mcdonalds Corp	190.67 B	2.04%
44	MS	Morgan Stanley	187.64 B	2.32%
45	QCOM	Qualcomm Inc	185.23 B	1.64%
46	UPS	United Parcel Service Inc Class B	184.54 B	1.90%
47	NFLX	Netflix Inc	172.88 B	0.00%
48	T	AT&T Inc.	172.29 B	8.41%
49	PM	Philip Morris International Inc	168.08 B	4.50%
50	SCHW	Charles Schwab Corporation	167.44 B	0.83%
51	TMUS	T Mobile US Inc	155.48 B	0.00%
52	LOW	Lowes Companies Inc	152.21 B	1.32%
53	UNP	Union Pacific Corp	152.10 B	1.78%
54	TXN	Texas Instrument Inc	151.83 B	2.62%
55	LIN	Linde Plc	151.07 B	1.43%
56	AXP	American Express	148.57 B	0.90%
57	NEE	Nextera Energy Inc	146.85 B	2.04%
58	INTU	Intuit Inc	146.84 B	0.47%
59	BMY	Bristol Myers Squibb	145.78 B	2.97%
60	RTX	Raytheon Technologies Corporation	142.60 B	2.09%
61	MDT	Medtronic Plc	138.48 B	2.38%
62	CVS	CVS Health Corp	136.82 B	1.95%
63	C	Citigroup Inc	136.10 B	3.00%
64	AMD	Advanced Micro Devices Inc	135.74 B	0.00%
65	PYPL	Paypal Holdings Inc	134.31 B	0.00%
66	HON	Honeywell International Inc	128.73 B	1.51%
67	AMGN	Amgen Inc	127.44 B	2.30%
68	BA	Boeing	123.77 B	0.00%
69	COP	ConocoPhillips	123.35 B	1.88%
70	GS	Goldman Sachs Group Inc	121.55 B	1.78%
71	DE	Deere & Company	121.02 B	0.99%
72	IBM	International Business Machines Co	118.93 B	4.85%
73	AMAT	Applied Material Inc	117.65 B	0.89%
74	BLK	Blackrock Inc	117.35 B	2.12%
75	NOW	Servicenow Inc	116.74 B	0.00%
76	CAT	Caterpillar Inc	108.86 B	2.15%
77	EL	Estee Lauder Inc Class A	108.76 B	0.73%
78	ANTM	Anthem Inc	108.71 B	1.00%
79	CHTR	Charter Communications Inc Class A	108.42 B	0.00%
80	PLD	Prologis, Inc	108.27 B	1.71%
81	LMT	Lockheed Martin Corp	107.89 B	2.65%
82	AMT	American Tower Corporation	107.89 B	2.18%
83	SBUX	Starbucks Corp	107.82 B	2.46%
84	GE	General Electric	106.33 B	0.33%
85	BKNG	Booking Holdings Inc	103.89 B	0.00%
86	TGT	Target Corp	101.36 B	1.49%
87	ISRG	Intuitive Surgical Inc	101.16 B	0.00%
88	MU	Micron Technology Inc	100.51 B	0.22%
89	SYK	Stryker Corp	94.90 B	1.02%
90	ZTS	Zoetis Inc	94.09 B	0.54%
91	SPGI	S&P Global Inc	93.43 B	0.99%
92	MDLZ	Mondelez International Inc	93.04 B	1.98%
93	MO	Altria Group Inc	92.53 B	6.90%
94	MMM	3M	91.11 B	2.76%
95	CB	Chubb Ltd	87.90 B	1.55%
96	PNC	PNC Financial Services Group, Inc.	87.64 B	2.34%
97	USB	US Bancorp	86.82 B	2.97%
98	CME	CME Group Inc Class A	86.63 B	1.48%
99	ADP	Automatic Data Processing Inc	85.60 B	1.87%
100	TFC	Truist Financial Corporation	84.87 B	2.94%

101위~ 200위

순위	티커	종목명	시가총액 (달러)	배당률
101	TJX	TJX Companies, Inc.	81.95074567	1.51%
102	LRCX	Lam Research Corp	78.12 B	1.00%
103	GILD	Gilead Sciences Inc	77.86 B	4.51%
104	BDX	Becton Dickinson	76.88 B	1.24%
105	MMC	Marsh & McLennan Inc	76.85 B	1.35%
106	DUK	Duke Energy Corp	76.74 B	2.91%
107	CI	Cigna Corp	75.40 B	1.75%
108	CSX	CSX Corp	74.01 B	1.11%
109	HCA	HCA Healthcare, Inc.	73.89 B	0.81%
110	CCI	Crown Castle International Corp.	72.99 B	3.20%
111	SHW	Sherwin Williams	71.61 B	0.80%
112	GM	General Motors	70.95 B	0.00%
113	SO	Southern Co	70.78 B	2.93%
114	ICE	Intercontinental Exchange Inc	70.75 B	1.04%
115	F	Ford Motor Company	69.03 B	1.14%
116	ITW	Illinois Tool Inc	68.34 B	2.15%
117	EOG	EOG Resources Inc	68.31 B	1.67%
118	FIS	Fidelity National Information Services	68.15 B	1.39%
119	EW	Edwards Lifesciences Corp	68.05 B	0.00%
120	NSC	Norfolk Southern Corp	67.87 B	1.64%
121	REGN	Regeneron Pharmaceuticals Inc	67.49 B	0.00%
122	CL	Colgate-Palmolive	67.03 B	2.24%
123	COF	Capital One Financial Corp	66.40 B	1.66%
124	MRNA	Moderna, Inc.	65.41 B	0.00%
125	FISV	Fiserv Inc	64.31 B	0.00%
126	D	Dominion Energy Inc	63.94 B	3.15%
127	ATVI	Activision Blizzard Inc	63.48 B	0.58%
128	FCX	Freeport-McMoRan, Inc.	62.85 B	0.70%
129	PSA	Public Storage	62.81 B	2.21%
130	AON	Aon Plc	62.45 B	0.72%
131	NOC	Northrop Grumman Corp	62.33 B	1.54%
132	PGR	Progressive Corp	62.13 B	1.78%
133	MCO	Moodys Corp	61.77 B	0.74%
134	FDX	FedEx Corporation	61.53 B	1.24%
135	BSX	Boston Scientific Corp	61.43 B	0.00%
136	EQIX	Equinix, Inc.	60.46 B	1.70%
137	ETN	Eaton Corporation, PLC	60.05 B	2.00%
138	MET	Metlife Inc	59.75 B	2.67%
139	WM	Waste Management Inc	59.67 B	1.60%
140	VRTX	Vertex Pharmaceuticals Inc	59.54 B	0.00%
141	GD	General Dynamics Corp	59.36 B	2.21%
142	SLB	Schlumberger Nv	56.97 B	1.53%
143	PXD	Pioneer Natural Resource	56.37 B	1.38%
144	EMR	Emerson Electric	56.36 B	2.14%
145	KLAC	KLA-Tencor Corporation	55.65 B	1.33%
146	MAR	Marriott International Inc	55.33 B	0.00%
147	HUM	Humana Inc	54.49 B	0.66%
148	APD	Air Products And Chemicals Inc	54.19 B	2.44%
149	ECL	Ecolab Inc	52.85 B	1.05%
150	ILMN	Illumina Inc	51.72 B	0.00%
151	BK	Bank Of New York Mellon Corp	51.47 B	2.12%
152	NEM	Newmont Corporation	50.92 B	3.40%
153	FTNT	Fortinet Inc	50.73 B	0.00%
154	AIG	American International Group Inc	50.43 B	2.09%
155	MPC	Marathon Petroleum Corp	49.98 B	2.82%
156	ADSK	Autodesk Inc	49.96 B	0.00%
157	NXPI	NXP Semiconductors Nv	49.66 B	1.20%
158	CNC	Centene Corp	48.62 B	0.00%
159	XLNX	Xilinx Inc	48.41 B	0.38%
160	TEL	TE Connectivity Ltd	46.81 B	1.37%
161	JCI	Johnson Controls International Plc	46.70 B	1.73%
162	IQV	IQVIA Holdings, Inc.	46.67 B	0.00%
163	SPG	Simon Property Group, Inc	46.61 B	4.06%
164	DG	Dollar General Corp	46.49 B	0.84%
165	INFO	IHS Markit Ltd	46.28 B	0.18%
166	ROP	Roper Technologies Inc	46.16 B	0.53%
167	CTSH	Cognizant Technology Solutions	45.88 B	1.09%
168	SNPS	Synopsys Inc	45.31 B	0.00%
169	APH	Amphenol Corp	45.03 B	0.84%
170	ORLY	Oreilly Automotive Inc	45.03 B	0.00%
171	DOW	Dow Inc.	44.95 B	4.51%
172	PRU	Prudential Financial Inc	44.85 B	2.85%
173	KMB	Kimberly Clark Corp	44.59 B	3.40%
174	STZ	Constellation Brands Class A	44.34 B	1.28%
175	AEP	American Electric Power Inc	44.15 B	3.42%
176	MSCI	MSCI Inc	44.05 B	0.68%
177	CMG	Chipotle Mexican Grill Inc	43.93 B	0.00%
178	MNST	Monster Beverage Corp	43.81 B	0.00%
179	LHX	L3Harris Technologies, Inc.	43.75 B	1.82%
180	IDXX	Idexx Laboratories Inc	43.67 B	0.00%
181	SRE	Sempra Energy	43.42 B	4.00%
182	AFL	Aflac Inc	43.20 B	2.00%
183	BAX	Baxter International Inc	43.01 B	1.26%
184	PAYX	Paychex Inc	42.90 B	2.20%
185	ADM	Archer-Daniels-Midland Company	42.78 B	1.96%
186	HSY	Hershey Foods	42.71 B	1.65%
187	GPN	Global Payments Inc	42.57 B	0.61%
188	KHC	Kraft Heinz	42.51 B	4.53%
189	SYY	Sysco Corp	42.33 B	2.23%
190	TRV	Travelers Companies Inc	42.25 B	2.01%
191	WBA	Walgreen Boots Alliance Inc	42.04 B	3.83%
192	HLT	Hilton Worldwide Holdings Inc	41.68 B	0.00%
193	DD	DuPont de Nemours, Inc.	41.47 B	1.50%
194	A	Agilent Technologies Inc	41.21 B	0.58%
195	EXC	Exelon Corp	41.20 B	2.56%
196	GIS	General Mills Inc	41.05 B	2.97%
197	PSX	Phillips 66	40.83 B	3.82%
198	DXCM	Dexcom Inc	40.76 B	0.00%
199	MCK	Mckesson Corp	40.62 B	0.65%
200	ADI	Analog Devices Inc	40.46 B	1.78%

201위~ 300위

순위	티커	종목명	시가총액 (달러)	배당률
201	HPQ	HP Inc	40.42 B	2.21%
202	AZO	Autozone Inc	40.22 B	0.00%
203	ALGN	Align Technology Inc	40.14 B	0.00%
204	OXY	Occidental Petroleum Corp	40.14 B	0.09%
205	KMI	Kinder Morgan Inc	39.77 B	6.02%
206	MCHP	Microchip Technology Inc	39.66 B	0.76%
207	CDNS	Cadence Design Systems Inc	39.49 B	0.00%
208	CARR	Carrier Global Corporation	39.43 B	1.12%
209	CTAS	Cintas Corp	38.86 B	0.70%
210	DLR	Digital Realty Trust, Inc	38.68 B	3.37%
211	PH	Parker-Hannifin Corp	38.61 B	1.36%
212	RSG	Republic Services Inc	38.11 B	1.47%
213	EBAY	Ebay Inc	37.95 B	1.23%
214	EA	Electronic Arts Inc	37.71 B	0.51%
215	VLO	Valero Energy Corp	37.61 B	4.18%
216	WMB	Williams Inc	37.31 B	5.22%
217	CTVA	Corteva, Inc.	37.11 B	1.05%
218	SIVB	SVB Financial Group	36.81 B	0.00%
219	DVN	Devon Energy Corp	36.63 B	2.14%
220	MSI	Motorola Solutions Inc	36.48 B	1.35%
221	DFS	Discover Financial Services	36.38 B	1.51%
222	STT	State Street Corp	36.26 B	2.18%
223	APTV	Aptiv Plc	36.25 B	0.00%
224	XEL	Xcel Energy Inc	36.07 B	2.72%
225	YUM	Yum Brands Inc	35.78 B	1.22%
226	GLW	Corning Inc	35.73 B	2.27%
227	TSN	Tyson Foods Inc Class A	35.68 B	1.82%
228	RMD	Resmed Inc	35.67 B	0.67%
229	PPG	PPG Industries Inc	35.59 B	1.50%
230	TT	Trane Technologies plc	35.54 B	1.54%
231	TDG	Transdigm Group Inc	35.40 B	0.00%
232	ALL	Allstate Corp	35.37 B	2.60%
233	WELL	Welltower Inc	34.87 B	3.01%
234	LVS	Las Vegas Sands Corp	34.50 B	0.00%
235	SBAC	SBA Communications Corporation	34.18 B	0.74%
236	IFF	International Flavors & Fragrances	34.07 B	2.32%
237	AMP	Ameriprise Finance Inc	34.01 B	1.48%
238	ODFL	Old Dominion Freight Line Inc	34.00 B	0.27%
239	CBRE	CBRE Group Inc	33.97 B	0.00%
240	LYB	Lyondellbasell Industries NV	33.87 B	4.33%
241	KR	Kroger	33.87 B	1.29%
242	OTIS	Otis Worldwide Corporation	33.84 B	0.90%
243	NUE	Nucor Corp	33.84 B	1.44%
244	AVB	AvalonBay Communities, Inc	33.63 B	2.62%
245	PEG	Public Service Enterprise Group Inc	33.34 B	3.07%
246	ROST	Ross Stores Inc	33.31 B	1.20%
247	FITB	Fifth Third Bancorp	33.19 B	2.33%
248	MTD	Mettler Toledo Inc	32.88 B	0.00%
249	TROW	T Rowe Price Group Inc	32.42 B	2.95%
250	EQR	Equity Residential	32.39 B	2.76%
251	AJG	Arthur J Gallagher	32.26 B	1.23%
252	PCAR	Paccar Inc	32.22 B	1.44%
253	MTCH	Match Group Inc	31.92 B	0.00%
254	CMI	Cummins Inc	31.64 B	2.50%
255	BIIB	Biogen Inc	31.54 B	0.00%
256	BF.B	Brown Forman Inc Class B	31.42 B	1.06%
257	ROK	Rockwell Automation Inc	31.18 B	1.62%
258	WY	Weyerhaeuser Company	31.13 B	1.61%
259	VRSK	Verisk Analytics Inc	31.09 B	0.60%
260	DLTR	Dollar Tree Inc	30.92 B	0.00%
261	AME	Ametek Inc	30.26 B	0.61%
262	KEYS	Keysight Technologies Inc	30.21 B	0.00%
263	BKR	Baker Hughes Company Class A	30.17 B	0.62%
264	HAL	Halliburton	30.12 B	0.54%
265	BLL	Ball Corp	29.94 B	0.76%
266	FAST	Fastenal	29.90 B	2.20%
267	DHI	D R Horton Inc	29.85 B	0.98%
268	HES	Hess Corp	29.80 B	1.03%
269	ED	Consolidated Edison Inc	29.78 B	3.63%
270	ARE	Alexandria Real Estate Equities, Inc	29.69 B	2.39%
271	FRC	First Republic Bank	29.69 B	0.51%
272	ABC	AmerisourceBergen Corp	29.33 B	1.28%
273	WST	West Pharmaceutical Services Inc	28.98 B	0.18%
274	ES	Eversource Energy	28.92 B	2.84%
275	NDAQ	Nasdaq Inc	28.82 B	1.22%
276	CPRT	Copart Inc	28.77 B	0.00%
277	WEC	WEC Energy Group Inc	28.77 B	2.99%
278	OKE	Oneok Inc	28.77 B	5.66%
279	TWTR	Twitter Inc	28.66 B	0.00%
280	EXPE	Expedia Inc	28.05 B	0.00%
281	ANSS	Ansys Inc	27.84 B	0.00%
282	WTW	Willis Towers Watson Public Limited Company	27.56 B	1.36%
283	EFX	Equifax Inc	27.45 B	0.69%
284	O	Realty Income Corporation	27.28 B	4.15%
285	AWK	American Water Works Inc	27.13 B	1.60%
286	DAL	Delta Air Lines Inc	27.09 B	0.00%
287	ALB	Albemarle Corp	27.01 B	0.67%
288	LUV	Southwest Airlines	26.95 B	0.00%
289	CERN	Cerner Corp	26.94 B	1.01%
290	MKC	McCormick & Co Non-voting	26.87 B	1.37%
291	LEN	Lennar Corporation Class A	26.80 B	1.22%
292	SWK	Stanley Black & Decker Inc	26.55 B	1.82%
293	LH	Laboratory Corporation Of America	26.44 B	0.00%
294	EXR	Extra Space Storage Inc	26.37 B	2.27%
295	LYV	Live Nation Entertainment Inc	26.00 B	0.00%
296	HRL	Hormel Foods Corp	26.00 B	2.06%
297	NTRS	Northern Trust Corporation	25.57 B	2.25%
298	TSCO	Tractor Supply	24.98 B	0.94%
299	VMC	Vulcan Materials	24.82 B	0.79%
300	FANG	Diamondback Energy Inc	24.56 B	1.28%

301위~ 400위

순위	티커	종목명	시가총액 (달러)	배당률
301	KEY	Keycorp	24.41 B	2.82%
302	HIG	Hartford Financial Services Group	24.35 B	1.99%
303	CCL	Carnival Corp	24.33 B	0.00%
304	ZBH	Zimmer Biomet Holdings Inc	24.28 B	0.83%
305	MAA	Mid-America Apartment Communities, Inc	24.27 B	1.96%
306	CDW	CDW Corp	24.26 B	0.95%
307	BBY	Best Buy Inc	24.19 B	2.76%
308	EPAM	Epam Systems Inc	24.17 B	0.00%
309	GWW	W.W. Grainger Inc	24.10 B	1.38%
310	CHD	Church And Dwight Inc	23.84 B	0.77%
311	STX	Seagate Technology Plc	23.80 B	1.26%
312	VRSN	Verisign Inc	23.80 B	0.00%
313	IT	Gartner Inc	23.75 B	0.00%
314	GRMN	Garmin Ltd	23.70 B	2.12%
315	RF	Regions Financial Corp	23.67 B	2.59%
316	MLM	Martin Marietta Materials Inc	23.65 B	0.62%
317	VFC	VF Corp	23.62 B	3.21%
318	MTB	M&T Bank Corp	23.46 B	2.44%
319	FOXA	Fox Corporation Class A	23.45 B	1.08%
320	FOX	Fox Corporation Class B	23.45 B	1.19%
321	ZBRA	Zebra Technologies Corp	23.45 B	0.00%
322	VIAC	ViacomCBS Inc. - Class B	23.44 B	2.64%
323	FTV	Fortive Corp	23.40 B	0.43%
324	CFG	Citizens Financial Group Inc	23.22 B	2.83%
325	RJF	Raymond James Inc	23.10 B	1.00%
326	DOV	Dover Corp	23.07 B	1.24%
327	HBAN	Huntington Bancshares Inc	23.03 B	3.74%
328	STE	STERIS PLC	23.01 B	0.72%
329	EIX	Edison International	22.88 B	4.39%
330	SYF	Synchrony Financial	22.83 B	2.00%
331	PKI	Perkinelmer Inc	22.79 B	0.15%
332	URI	United Rentals Inc	22.66 B	0.00%
333	FE	Firstenergy Corp	22.63 B	3.70%
334	DTE	DTE Energy	22.51 B	3.03%
335	HPE	Hewlett Packard Enterprise	22.25 B	3.45%
336	PPL	PPL Corporation	22.06 B	5.67%
337	AEE	Ameren Corp	22.04 B	2.55%
338	SWKS	Skyworks Solutions Inc	21.83 B	1.21%
339	K	Kellogg	21.78 B	3.57%
340	IR	Ingersoll Rand Plc	21.73 B	0.04%
341	RCL	Royal Caribbean Cruises Ltd	21.39 B	0.00%
342	MGM	MGM Resorts International	21.32 B	0.02%
343	ETR	Entergy Corp	21.27 B	3.65%
344	DRE	Duke Realty Corporation	21.03 B	1.42%
345	COO	Cooper Companies, Inc.	21.02 B	0.02%
346	PAYC	Paycom Software Inc	20.98 B	0.00%
347	ESS	Essex Property Trust, Inc	20.74 B	2.60%
348	SBNY	Signature Bank	20.41 B	0.66%
349	VTR	Ventas, Inc	20.25 B	3.50%
350	PFG	Principal Financial Group Inc	20.16 B	3.17%
351	FLT	Fleetcor Technologies Inc	20.01 B	0.00%
352	JBHT	JB Hunt Transport Services Inc	19.95 B	0.68%
353	NTAP	NetApp Inc	19.80 B	2.21%
354	TTWO	Take Two Interactive Software Inc	19.79 B	0.00%
355	TDY	Teledyne Technologies Inc	19.66 B	0.00%
356	ENPH	Enphase Energy Inc	19.66 B	0.00%
357	WAT	Waters Corp	19.64 B	0.00%
358	CTRA	Coterra Energy Inc.	19.62 B	1.43%
359	ULTA	Ulta Beauty Inc	19.60 B	0.00%
360	MPWR	Monolithic Power Systems Inc	19.56 B	0.56%
361	CINF	Cincinnati Financial Corp	19.52 B	2.06%
362	TYL	Tyler Technologies Inc	19.16 B	0.00%
363	BIO	Bio Rad Laboratories Inc Class A	18.99 B	0.00%
364	BRO	Brown & Brown Inc	18.90 B	0.58%
365	DRI	Darden Restaurants Inc	18.44 B	2.87%
366	TER	Teradyne Inc	18.43 B	0.35%
367	BXP	Boston Properties, Inc	18.38 B	3.29%
368	VTRS	Viatris Inc.	18.35 B	2.16%
369	CMS	CMS Energy Corp	18.28 B	2.77%
370	EXPD	Expeditors International Of Washington	18.16 B	1.08%
371	AKAM	Akamai Technologies Inc	18.06 B	0.00%
372	GPC	Genuine Parts	18.04 B	2.55%
373	IP	International Paper	18.03 B	4.07%
374	OMC	Omnicom Group Inc	18.02 B	3.26%
375	HOLX	Hologic Inc	18.00 B	0.00%
376	ETSY	Etsy Inc	17.97 B	0.00%
377	CZR	Caesars Entertainment Corp	17.90 B	0.00%
378	POOL	Pool Corp	17.90 B	0.67%
379	CTLT	Catalent Inc	17.77 B	0.00%
380	MOS	Mosaic	17.76 B	0.58%
381	CLX	Clorox	17.70 B	3.16%
382	NVR	NVR, Inc.	17.54 B	0.00%
383	AMCR	Amcor plc	17.54 B	4.04%
384	KMX	Carmax Inc	17.54 B	0.00%
385	PEAK	Healthpeak Properties, Inc.	17.50 B	4.54%
386	NLOK	NortonLifeLock Inc.	17.37 B	1.66%
387	GNRC	Generac Holdings Inc	17.37 B	0.00%
388	MRO	Marathon Oil Corp	17.29 B	0.81%
389	CNP	Centerpoint Energy Inc	17.23 B	2.35%
390	CAG	Conagra Brands Inc	17.12 B	3.37%
391	UDR	UDR, Inc	17.09 B	2.60%
392	BR	Broadridge Financial Solutions Inc	16.89 B	1.67%
393	WDC	Western Digital Corp	16.81 B	0.00%
394	CE	Celanese Corporation	16.81 B	1.31%
395	CRL	Charles River Laboratories International	16.70 B	0.00%
396	TRMB	Trimble Inc	16.67 B	0.00%
397	DISH	Dish Network Corp Class A	16.45 B	0.00%
398	TECH	Bio-Techne Corp	16.45 B	0.31%
399	WAB	Westinghouse Air Brake Technologies	16.41 B	0.41%
400	CF	CF Industries Holdings Inc	16.39 B	1.17%

401위~ 500위

순위	티커	종목명	시가총액 (달러)	배당률
401	EMN	Eastman Chemical	16.39 B	2.30%
402	DGX	Quest Diagnostics Inc	16.24 B	1.87%
403	XYL	Xylem Inc	16.09 B	1.25%
404	WRB	WR Berkley Corp	15.89 B	0.56%
405	DPZ	Dominos Pizza Inc	15.70 B	0.87%
406	J	Jacobs Engineering Group Inc.	15.70 B	0.69%
407	CEG	Constellation Energy Corporation	15.69 B	1.17%
408	LKQ	LKQ Corp	15.65 B	0.47%
409	FDS	Factset Research Systems Inc	15.39 B	0.79%
410	BEN	Franklin Resources Inc	15.38 B	3.64%
411	TXT	Textron Inc	15.37 B	0.11%
412	L	Loews Corp	15.30 B	0.40%
413	UAL	United Continental Holdings Inc	15.20 B	0.00%
414	AVY	Avery Dennison Corp	15.19 B	1.44%
415	ROL	Rollins Inc	15.11 B	1.17%
416	TFX	Teleflex Inc	15.02 B	0.42%
417	DISCA	Discovery Communications Inc Series A	14.95 B	0.00%
418	DISCK	Discovery Communications, Inc. - Series C	14.95 B	0.00%
419	FMC	FMC Corp	14.94 B	1.66%
420	SJM	J.M. Smucker	14.81 B	2.80%
421	BBWI	Bath & Body Works, Inc.	14.78 B	0.99%
422	INCY	Incyte Corp	14.78 B	0.00%
423	KIM	Kimco Realty Corporation	14.76 B	2.81%
424	HWM	Howmet Aerospace Inc.	14.67 B	0.17%
425	CAH	Cardinal Health Inc	14.56 B	3.68%
426	ATO	Atmos Energy Corp	14.45 B	2.38%
427	IEX	IDEX Corp	14.43 B	1.13%
428	EVRG	Evergy Inc	14.38 B	3.43%
429	LNT	Alliant Energy Corp	14.38 B	2.82%
430	MKTX	Marketaxess Holdings Inc	14.37 B	0.71%
431	AES	AES Corp	14.37 B	2.80%
432	PWR	Quanta Services Inc	14.24 B	0.25%
433	PKG	Packaging Corp Of America	14.04 B	2.68%
434	AAP	Advance Auto Parts Inc	13.90 B	1.45%
435	MAS	Masco Corp	13.85 B	1.22%
436	QRVO	Qorvo, Inc.	13.80 B	0.00%
437	IPG	Interpublic Group Of Companies Inc	13.76 B	3.06%
438	RHI	Robert Half	13.46 B	1.25%
439	PTC	PTC Inc	13.46 B	0.00%
440	ABMD	Abiomed Inc	13.42 B	0.00%
441	NWS	News Corp Class B	13.41 B	0.87%
442	NWSA	News Corp Class A	13.41 B	0.88%
443	CPB	Campbell Soup	13.32 B	3.31%
444	LNC	Lincoln National Corp	13.19 B	2.32%
445	SEDG	SolarEdge Technologies Inc	13.13 B	0.00%
446	HAS	Hasbro Inc	13.02 B	2.85%
447	CMA	Comerica Inc	12.93 B	2.72%
448	HST	Host Hotels & Resorts, Inc	12.90 B	0.00%
449	IRM	Iron Mountain Incorporated	12.86 B	5.46%
450	CBOE	Cboe Global Markets, Inc.	12.83 B	1.49%
451	CTXS	Citrix Systems Inc	12.72 B	1.44%
452	LDOS	Leidos Holdings Inc	12.49 B	1.56%
453	APA	Apache Corp	12.40 B	0.69%
454	WRK	Westrock	12.23 B	2.09%
455	JKHY	Jack Henry & Associates, Inc.	12.19 B	1.09%
456	FBHS	Fortune Brands Home And Security	12.05 B	1.17%
457	PHM	Pultegroup Inc	11.90 B	1.19%
458	FFIV	F5 Networks Inc	11.89 B	0.00%
459	XRAY	Dentsply Sirona Inc	11.80 B	0.79%
460	RE	Everest Re Group Ltd	11.70 B	2.08%
461	CHRW	C.H. Robinson Worldwide, Inc.	11.63 B	2.30%
462	AOS	A O Smith Corp	11.51 B	1.51%
463	WHR	Whirlpool Corp	11.47 B	2.76%
464	ZION	Zions Bancorporation	11.46 B	1.95%
465	REG	Regency Centers Corporation	11.44 B	3.56%
466	AAL	American Airlines Group Inc	11.40 B	0.00%
467	DVA	Davita Inc	11.37 B	0.00%
468	NI	Nisource Inc	11.29 B	3.07%
469	UHS	Universal Health Services Inc.	11.27 B	0.45%
470	SNA	Snap On Inc	11.22 B	2.42%
471	JNPR	Juniper Networks Inc	11.05 B	2.33%
472	CDAY	Ceridian HCM Holding Inc.	10.87 B	0.00%
473	ALLE	Allegion PLC	10.66 B	1.21%
474	GL	Globe Life Inc.	10.63 B	0.75%
475	WYNN	Wynn Resorts Ltd	10.63 B	0.00%
476	HSIC	Henry Schein Inc	10.56 B	0.00%
477	IVZ	Invesco Ltd	10.53 B	2.22%
478	BWA	BorgWarner Inc	10.40 B	1.56%
479	NWL	Newell Brands Inc	10.38 B	3.72%
480	TPR	Tapestry	10.34 B	1.27%
481	LUMN	CenturyLink, Inc.	10.33 B	9.77%
482	TAP	Molson Coors Brewing Class B	10.15 B	1.36%
483	MHK	Mohawk Industries Inc	9.76 B	0.00%
484	NRG	NRG Energy Inc	9.72 B	3.30%
485	PNR	Pentair	9.71 B	1.38%
486	LW	Lamb Weston Holdings Inc	9.62 B	1.43%
487	FRT	Federal Realty Investment Trust	9.45 B	3.56%
488	SEE	Sealed Air Corp	9.44 B	1.19%
489	ANET	Arista Networks Inc	9.29 B	0.00%
490	AIZ	Assurant Inc	9.23 B	1.64%
491	DXC	DXC Technology Company	9.01 B	0.00%
492	PBCT	Peoples United Financial Inc	8.97 B	3.43%
493	RL	Ralph Lauren Corp Class A	8.90 B	1.68%
494	OGN	Organon & Co.	8.80 B	1.61%
495	PENN	Penn National Gaming Inc	8.26 B	0.00%
496	VNO	Vornado Realty Trust	7.91 B	5.03%
497	IPGP	IPG Photonics Corp	7.88 B	0.00%
498	PNW	Pinnacle West Corp	7.78 B	4.79%
499	UA	Under Armour Inc Class C	7.45 B	0.00%
500	UAA	Under Armour Inc Class A	7.45 B	0.00%

포스팅이 여러분의 재테크에 조금이나마 도움이 되면 좋겠습니다.

글이 도움이 되셨다면 공감&댓글 부탁드립니다.
글 작성에 큰 힘이 됩니다.

[2022년 최신] 전세계 주식 시가총액순위 TOP 200

nuhends — Wed, 16 Feb 2022 01:22:51 +0900

[2022 최신] 전세계 주식 시가총액순위 TOP 200

2022냔 글로벌 주식 순위 TOP 200

안녕하세요 Nuhends 입니다.

전세계 주식 시가총액 TOP 200개 기업에 대해 알아보겠습니다. (2022/06/11 기준)

( 주기적으로 업데이트 예정이니 최신으로 생각하고 봐주세요)

업데이트 노트

1등인 Saudi Aramco의 경우 2.369조 달러(=한화 3036조원)입니다.

우리나라의 삼성전자는 20위 랭크되었네요!

+업데이트(22.06.11) :
- 석유 가격 상승으로 사우디 아람코가 시총 1위를 탈환하였습니다.
- 약세장으로 빅테크를 중심으로 시총이 크게 하락하였습니다.
+업데이트(22.02.16) :
- Meta(Facebook)가 실적악화 및 여러 악재로 10위로 떨어졌습니다.
- 금리 인상&긴축 시기로 접어들면서 가치주의 대명사 버크셔 헤서웨이가 7위로 올라섰습니다.
+업데이트(21.12.16) :
- Facebook의 사명이 Meta로 변경되었습니다.
- Nvidia가 TSMC, 버크셔헤서웨이를 넘어 시총 8위로 올라섰습니다.
+업데이트(21.10.26) :
- 테슬라의 시총이 1조 달러를 넘으면서, 페이스북을 넘어 6위로 랭크되었습니다

컨트롤 + F 를 눌러 검색을 희망하시는 종목을 입력하여 검색하시면 쉽게 찾으실 수 있습니다

모바일을 위한 이미지 뷰

PC를 위한 텍스트 뷰

1위~ 100위

순위	종목명	티커	시가총액	주가	국가
1	Saudi Aramco	2222.SR	$2.369 T	$10.77	S. Arabia
2	Apple	AAPL	$2.238 T	$137.62	USA
3	Microsoft	MSFT	$1.919 T	$254.74	USA
4	Alphabet (Google)	GOOG	$1.463 T	$2,223	USA
5	Amazon	AMZN	$1.116 T	$109.74	USA
6	Tesla	TSLA	$720.18 B	$695.15	USA
7	Berkshire Hathaway	BRK-B	$647.31 B	$293.34	USA
8	Meta Platforms (Facebook)	META	$479.53 B	$177.19	USA
9	Tencent	TCEHY	$474.73 B	$49.39	China
10	TSMC	TSM	$461.32 B	$88.96	Taiwan
11	UnitedHealth	UNH	$455.36 B	$485.37	USA
12	Johnson & Johnson	JNJ	$454.25 B	$172.63	USA
13	Visa	V	$424.28 B	$200.50	USA
14	Exxon Mobil	XOM	$423.36 B	$100.49	USA
15	NVIDIA	NVDA	$423.24 B	$169.84	USA
16	Kweichow Moutai	600519.SS	$356.02 B	$283.42	China
17	JPMorgan Chase	JPM	$353.76 B	$120.45	USA
18	Chevron	CVX	$342.87 B	$174.51	USA
19	Procter & Gamble	PG	$340.54 B	$141.94	USA
20	Samsung	005930.KS	$334.69 B	$49.85	S. Korea
21	Walmart	WMT	$333.37 B	$121.62	USA
22	Mastercard	MA	$330.38 B	$337.00	USA
23	Nestlé	NESN.SW	$307.84 B	$111.55	Switzerland
24	LVMH	MC.PA	$304.36 B	$605.45	France
25	Home Depot	HD	$299.53 B	$291.45	USA
26	Alibaba	BABA	$293.58 B	$109.75	China
27	Eli Lilly	LLY	$284.00 B	$298.90	USA
28	Pfizer	PFE	$282.42 B	$50.34	USA
29	Roche	ROG.SW	$279.99 B	$318.91	Switzerland
30	Bank of America	BAC	$268.91 B	$33.38	USA
31	Coca-Cola	KO	$267.25 B	$61.65	USA
32	AbbVie	ABBV	$253.11 B	$143.23	USA
33	Novo Nordisk	NVO	$252.37 B	$111.37	Denmark
34	ICBC	1398.HK	$236.10 B	$0.58	China
35	Reliance Industries	RELIANCE.NS	$235.12 B	$34.75	India
36	Broadcom	AVGO	$227.62 B	$540.18	USA
37	Pepsico	PEP	$226.04 B	$163.48	USA
38	Toyota	TM	$225.51 B	$161.77	Japan
39	Merck	MRK	$220.60 B	$87.24	USA
40	Shell	SHEL	$214.46 B	$57.62	UK
41	Verizon	VZ	$213.97 B	$50.95	USA
42	ASML	ASML	$212.18 B	$521.73	Netherlands
43	Thermo Fisher Scientific	TMO	$207.24 B	$529.42	USA
44	Costco	COST	$203.95 B	$460.44	USA
45	Abbott Laboratories	ABT	$193.22 B	$110.36	USA
46	Astrazeneca	AZN	$191.60 B	$61.49	UK
47	Novartis	NVS	$189.78 B	$85.04	Switzerland
48	China Construction Bank	601939.SS	$188.12 B	$0.89	China
49	Comcast	CMCSA	$187.33 B	$41.82	USA
50	Adobe	ADBE	$185.62 B	$392.85	USA
51	Danaher	DHR	$183.95 B	$253.01	USA
52	Walt Disney	DIS	$182.63 B	$100.27	USA
53	Cisco	CSCO	$182.48 B	$43.44	USA
54	Accenture	ACN	$181.95 B	$287.04	Ireland
55	Oracle	ORCL	$181.02 B	$67.85	USA
56	Nike	NKE	$179.41 B	$114.69	USA
57	L'Oréal	OR.PA	$178.60 B	$333.05	France
58	Salesforce	CRM	$176.81 B	$177.70	USA
59	McDonald	MCD	$176.27 B	$238.35	USA
60	T-Mobile US	TMUS	$164.00 B	$130.83	USA
61	Intel	INTC	$161.40 B	$39.47	USA
62	Bristol-Myers Squibb	BMY	$160.05 B	$75.18	USA
63	BHP Group	BHP	$160.00 B	$63.23	Australia
64	Meituan	3690.HK	$158.45 B	$25.63	China
65	Philip Morris	PM	$158.12 B	$101.54	USA
66	CATL	300750.SZ	$157.79 B	$67.70	China
67	Tata Consultancy Services	TCS.NS	$157.39 B	$43.02	India
68	Linde	LIN	$156.04 B	$310.40	UK
69	Agricultural Bank of China	601288.SS	$155.38 B	$0.45	China
70	AMD	AMD	$154.11 B	$95.10	USA
71	Wells Fargo	WFC	$154.03 B	$40.64	USA
72	United Parcel Service	UPS	$151.84 B	$173.78	USA
73	Prosus	PRX.AS	$151.29 B	$52.20	Netherlands
74	ConocoPhillips	COP	$150.04 B	$116.00	USA
75	Nextera Energy	NEE	$149.20 B	$75.95	USA
76	CM Bank	3968.HK	$149.04 B	$6.23	China
77	QUALCOMM	QCOM	$148.93 B	$132.98	USA
78	TotalEnergies	TTE	$148.64 B	$57.59	France
79	AT&T	T	$148.57 B	$20.75	USA
80	Texas Instruments	TXN	$145.74 B	$158.05	USA
81	Raytheon Technologies	RTX	$141.07 B	$94.86	USA
82	Royal Bank Of Canada	RY	$140.86 B	$100.40	Canada
83	PetroChina	PTR	$140.41 B	$53.48	China
84	BYD	002594.SZ	$139.10 B	$52.01	China
85	China Mobile	0941.HK	$136.08 B	$6.37	China
86	Morgan Stanley	MS	$135.32 B	$77.36	USA
87	Bank of China	601988.SS	$134.69 B	$0.48	China
88	Union Pacific Corporation	UNP	$132.18 B	$210.48	USA
89	Toronto Dominion Bank	TD	$129.31 B	$71.56	Canada
90	Amgen	AMGN	$128.66 B	$240.85	USA
91	Sanofi	SNY	$127.83 B	$51.07	France
92	Honeywell	HON	$127.63 B	$187.50	USA
93	Gazprom	GAZP.ME	$125.46 B	$5.31	Russia
94	HSBC	HSBC	$124.60 B	$30.78	UK
95	AIA	1299.HK	$123.68 B	$10.31	Hong Kong
96	Medtronic	MDT	$123.26 B	$92.63	Ireland
97	IBM	IBM	$121.77 B	$135.86	USA
98	CVS Health	CVS	$121.62 B	$92.75	USA
99	Lowe's Companies	LOW	$120.26 B	$188.17	USA
100	Ping An Insurance	601318.SS	$119.56 B	$6.70	China

101위~ 200위

종목명	티커	시가총액	주가	국가
101	Charles Schwab	SCHW	$117.97 B	$62.21	USA
102	Hermès	RMS.PA	$117.36 B	$1,107	France
103	American Express	AXP	$117.17 B	$155.60	USA
104	American Tower	AMT	$116.30 B	$254.85	USA
105	Anthem	ANTM	$116.19 B	$481.95	USA
106	Equinor	EQNR	$115.99 B	$35.94	Norway
107	Caterpillar	CAT	$115.71 B	$216.94	USA
108	Rio Tinto	RIO	$115.44 B	$71.24	UK
109	Unilever	UL	$115.27 B	$44.93	UK
110	Lockheed Martin	LMT	$114.30 B	$429.55	USA
111	DexCom	DXCM	$114.11 B	$290.73	USA
112	Commonwealth Bank	CBA.AX	$112.68 B	$66.10	Australia
113	S&P Global	SPGI	$112.25 B	$330.26	USA
114	SAP	SAP	$110.92 B	$94.04	Germany
115	GlaxoSmithKline	GSK	$110.45 B	$43.45	UK
116	Volkswagen	VOW3.DE	$109.73 B	$160.82	Germany
117	Sony	SONY	$109.46 B	$87.91	Japan
118	Intuit	INTU	$107.35 B	$380.57	USA
119	Dior	CDI.PA	$105.54 B	$585.04	France
120	Nippon Telegraph & Telephone	NPPXF	$105.15 B	$29.44	Japan
121	BP	BP	$104.49 B	$32.30	UK
122	Deere & Company	DE	$102.78 B	$336.31	USA
123	Wuliangye Yibin	000858.SZ	$102.71 B	$26.46	China
124	HDFC Bank	HDB	$102.37 B	$55.32	India
125	Diageo	DEO	$100.70 B	$176.16	UK
126	Al Rajhi Bank	1120.SR	$100.44 B	$25.11	S. Arabia
127	Goldman Sachs	GS	$99.69 B	$290.29	USA
128	British American Tobacco	BTI	$99.47 B	$43.15	UK
129	Siemens	SIE.DE	$98.00 B	$122.15	Germany
130	China Shenhua Energy	601088.SS	$97.09 B	$5.19	China
131	Jingdong Mall	JD	$96.86 B	$62.03	China
132	Deutsche Telekom	DTE.DE	$95.49 B	$19.21	Germany
133	BlackRock	BLK	$94.48 B	$623.62	USA
134	ServiceNow	NOW	$94.23 B	$470.08	USA
135	Citigroup	C	$93.36 B	$48.08	USA
136	PayPal	PYPL	$92.43 B	$78.85	USA
137	CSL	CSL.AX	$92.13 B	$191.27	Australia
138	Enbridge	ENB	$92.01 B	$45.41	Canada
139	Anheuser-Busch Inbev	BUD	$91.21 B	$52.14	Belgium
140	Keyence	6861.T	$91.03 B	$375.36	Japan
141	SABIC	2010.SR	$91.00 B	$30.12	S. Arabia
142	Estee Lauder	EL	$89.65 B	$250.88	USA
143	Applied Materials	AMAT	$88.89 B	$102.19	USA
144	Automatic Data Processing	ADP	$88.42 B	$211.66	USA
145	Altria Group	MO	$88.00 B	$48.61	USA
146	Prologis	PLD	$87.88 B	$118.72	USA
147	Starbucks	SBUX	$87.64 B	$76.42	USA
148	China Life Insurance	LFC	$87.53 B	$7.62	China
149	Booking.com	BKNG	$86.01 B	$2,117	USA
150	Chubb	CB	$85.24 B	$201.19	Switzerland
151	Airbus	AIR.PA	$84.83 B	$107.74	Netherlands
152	Petrobras	PBR	$84.55 B	$12.97	Brazil
153	Mondelez	MDLZ	$84.43 B	$61.01	USA
154	The Saudi National Bank	1180.SR	$84.42 B	$19.03	S. Arabia
155	Glencore	GLCNF	$83.68 B	$6.33	Switzerland
156	Vale	VALE	$83.61 B	$16.71	Brazil
157	EOG Resources	EOG	$82.56 B	$140.97	USA
158	Duke Energy	DUK	$82.45 B	$107.10	USA
159	Stryker Corporation	SYK	$81.96 B	$216.76	USA
160	Analog Devices	ADI	$81.83 B	$157.43	USA
161	Netflix	NFLX	$81.63 B	$183.74	USA
162	China Yangtze Power	600900.SS	$81.47 B	$3.58	China
163	Cigna	CI	$80.73 B	$254.48	USA
164	Charter Communications	CHTR	$80.27 B	$478.21	USA
165	3M	MMM	$79.86 B	$140.35	USA
166	Allianz	ALV.DE	$78.96 B	$193.43	Germany
167	General Electric	GE	$78.88 B	$71.67	USA
168	Infosys	INFY	$77.86 B	$18.38	India
169	LG Energy Solution	373220.KS	$77.66 B	$331.92	S. Korea
170	Brookfield Asset Management	BAM	$77.53 B	$47.24	Canada
171	Scotiabank	BNS	$77.36 B	$63.93	Canada
172	Merck KGaA	MRK.DE	$77.27 B	$177.73	Germany
173	Canadian National Railway	CNI	$76.91 B	$110.00	Canada
174	Gilead Sciences	GILD	$76.84 B	$60.76	USA
175	Southern Company	SO	$76.75 B	$72.24	USA
176	Air Liquide	AI.PA	$76.69 B	$147.00	France
177	Zoetis	ZTS	$76.67 B	$162.93	USA
178	Blackstone Group	BX	$76.67 B	$106.20	USA
179	Pinduoduo	PDD	$75.81 B	$59.97	China
180	Boeing	BA	$75.69 B	$127.94	USA
181	Marsh & McLennan Companies	MMC	$75.59 B	$150.61	USA
182	Crown Castle	CCI	$75.56 B	$174.50	USA
183	Inditex	IDEXY	$74.98 B	$12.04	Spain
184	Schneider Electric	SU.PA	$74.72 B	$130.74	France
185	Canadian Natural Resources	CNQ	$74.64 B	$64.57	Canada
186	KDDI	9433.T	$73.66 B	$33.43	Japan
187	Intuitive Surgical	ISRG	$73.51 B	$204.81	USA
188	Mercedes-Benz	MBG.DE	$73.26 B	$68.48	Germany
189	Sinopec	SNP	$72.59 B	$46.18	China
190	U.S. Bancorp	USB	$72.46 B	$48.78	USA
191	Postal Savings Bank of China	601658.SS	$71.81 B	$0.78	China
192	Airbnb	ABNB	$71.46 B	$110.68	USA
193	Northrop Grumman	NOC	$71.19 B	$457.99	USA
194	CME Group	CME	$71.01 B	$197.59	USA
195	Becton Dickinson	BDX	$70.60 B	$247.67	USA
196	NetEase	NTES	$70.34 B	$107.10	China
197	Micron Technology	MU	$70.29 B	$62.95	USA
198	Fomento Económico Mexicano	FMX	$70.22 B	$71.34	Mexico
199	Bank of Montreal	BMO	$70.06 B	$103.14	Canada
200	Target	TGT	$69.98 B	$150.92	USA

포스팅이 여러분의 재테크에 조금이나마 도움이 되면 좋겠습니다.

글이 도움이 되셨다면 공감&댓글 부탁드립니다.글 작성에 큰 힘이 됩니다.

감사합니다!

[JS] 호이스팅(Hoisting)을 이해해보자!

nuhends — Thu, 13 Jan 2022 02:35:13 +0900

[JS] 호이스팅(Hoisting)을 이해해보자!

호이스팅 쉬운 설명

1. 호이스팅이란?

호이스팅의 어원

호이스팅은 어원 그대로 변수나 함수의 선언이 코드 최상단으로 끌어올려지는 듯한 현상을 말한다.

var name = 'global name';

function callName() {
	console.log(name);   // ?
	var name = 'local name'; 
};

callName();

위 예제 코드에서 출력되는 변수 name의 값은 'global name' 일 것 같지만, undefined 이다.

특정 스코프 안에서 선언된 변수(name)는 코드에 적힌 순서와 상관없이 "최상단에서 선언한 것처럼" 끌어올려진다. 이것을 호이스팅이라고 한다.

var name = 'global name';

function callName() {
	var name;
	
	console.log(name);   // undefined
	name = 'local name'; 
};

callName();

사실 위 예제 코드의 순서처럼 진행된다. 이를 제대로 이해하기 위해서는 TDZ와 변수의 생성 단계에 대한 이해가 필요하다.

2. 변수의 생성 단계

자바스크립트 변수 생성 단계

자바스크립트에서 변수(variable)는 3가지 단계를 걸쳐 생성된다. 이 과정은 실행 컨텍스트 포스팅 참고하면 도움이 된다.

Step 1. Declaration phase : 선언 단계

변수를 실행 컨텍스트의 변수 객체에 등록하는 단계이다.
이 변수 객체는 스코프가 참고하는 대상이 된다.

Step 2. Initialization phase : 초기화 단계

실행 컨텍스트에 존재하는 변수 객체에 선언 단계에서 생성된 변수를 위한 메모리를 만드는 단계이다.
이 단계에서 할당된 메모리에 undefined 를 할당한다.

Step 3. Assignment phase : 할당 단계

초기화 단계에서 undefined로 초기화된 메모리에 다른 값을 할당하는 단계이다.

3. var과 let의 변수 생성 과정

1. var 키워드 변수

var 키워드 변수 생성 단계

var 키워드 변수는 선언 단계와 초기화 단계가 동시에 진행된다. 즉, 자바스크립트 내부적으로 실행 콘텍스트의 변수 객채에 변수를 등록하는 동시에 메모리를 undefined로 만들어버린다.

그렇기 때문에 변수에 값이 할당되기 전에 호출해도 Reference 에러가 발생하지 않고, undefined가 리턴된다.

2. let 키워드 변수

let 키워드는 var 키워드와 다르게 선언 단계와 초기화 단계가 분리되어 진행된다. 실행 컨텍스트의 변수 객체에 변수를 등록했지만, 메모리에 할당되지 않아 접근할 수 없다. 그래서 Reference Error: Cannot access before initialization 에러 문구가 나오는 것이다.

tdz 에러

즉, 호이스팅 되지 않는 것이 아니라, 호이스팅은 되었으나 메모리가 할당되지 않아 접근할 수 없는 것이다. 이때 등장하는 개념이 TDZ 이다.

TDZ 란?
한글로 직역하자면 일시적인 사각지대이다.
스코프 시작 지점 에서 초기화 시작 지점 까지를 TDZ(Temporal Dead Zone) 라고 한다.

3. function 키워드 함수

함수 표현식 생성 단계

함수 표현식의 경우, 선언/초기화/할당 단계가 모두 동시에 진행된다. 그래서 할당 전 호출해도 undefined가 아니라, 함수 내용이 리턴된다.

4. 총 정리

자바스크립트 엔진은 코드를 실행하기 전, 실행 가능한 코드를 형상화하고 구분하는 과정(⇒ 실행 컨텍스트 형성)을 거친다.
이 과정에서 모든 선언(var, let, const, function, class)이 변수 객체 메모리에 저장된다.
코드 실행 전 이미 변수, 함수에 대한 선언이 저장되어 있기 때문에, 선언문보다 참조 및 호출이 먼저 나와도 동작할 수 있게 된다.
이는 선언 구문이 마치 파일의 최상단으로 끌어올려진 것처럼(호이스팅 된 것처럼) 보인다.

참고

[2022년 최신] 최저임금, 최저월급 빠르게 알아보기!

nuhends — Tue, 4 Jan 2022 01:36:01 +0900

[2022년 최신] 최저임금, 최저월급 빠르게 알아보기

2022년 최저임금, 최저월급 알아보기

안녕하세요 nuhends 입니다. 2022년의 최저임금이 결정되었습니다.

올해 최저 임금은 얼마 일까요? 이번 포스팅에서 달라진 최저임금, 주휴수당, 최저 월급에 대해 자세하게 알아보겠습니다.

1. 최저 임금이란?

최저 임금이란? (출처: 최저임금위원회)

고용주가 근로자에게 줄 수 있는 최저 수준의 임금을 법으로 강제하여 지급하도록 하는 제도입니다.

최저 임금은 1인 이상 근로자를 사용하는 모든 사업장에 적용됩니다. 만약에 최저임금보다 적은 임금을 주거나 최저임금을 이유로 종전 임금을 낮춘 사업자는 최저임금법에 의해 3년 이상의 징역 또는 2천만원 이하의 벌금에 처해질 수 있습니다.

2. 2022년 최저 임금은?

연도별 최저임금 결정현황(출처: 최저임금위원회)

2022년 최저임금은 8,720원에서 5.1% 인상되어 "9,160원"으로 결정되었습니다.

그렇다면 변경된 최저임금으로 계산한 최저월급은 얼마일까요? 알아보기 앞서 주휴 수당에 대해 알아야 합니다.

주휴 수당이란?

주 15시간 미만 일하게 된다면 9,160원의 시급을 지급

주 15시간 이상 일하게 된다면 임금에 추가로 주휴수당을 포함하여 10,992원의 시급을 지급해야 합니다.

참고: 주휴 수당을 주지 않아도 되는 경우 (아래 2가지 경우는 주휴수당을 지급하지 않아도 됨)

1. 일하기로 계약한 날 결근한 경우 (주 단위로 결산)
2. 주 15시간 미만으로 일하는 경우

주휴 수당을 포함해서 일당을 산정하면, 하루에 8시간 기준으로 근무할 경우 일급은 87,936원 이상 지급해야 합니다.

2. 그렇다면 2022년 최저 월급은?

작년 대비 5.1% 인상된 최저임금 9,160원으로 최저 월급을 계산해보겠습니다.

2022년 최저 월급 계산(출처: 고용노동부)

월 통상 임금 기준 시간인 209시간(주휴수당 8시간을 포함)일 경우

9,160 x 209시간 = 1,914,440원 입니다.
이때, 4대 보험 세금이 공제되면 실 수령액은 1,720,650원이 됩니다.

3. 최저임금을 받지 못하고 있다면?

만약 최저임금을 받지 못하거나, 부당한 대우를 받았다면 고용노동부에 연락하여 상담 및 신고하시면 도움을 받으실 수 있습니다.

- 전화: 1350

- 온라인 상담: 1350.moel.go.kr

- 네이버 지식인: 고용노동부 계정에 질문

- 빠른 인터넷 상담: 고용부민원마당 > 빠른인터넷 상담

[2022 최신] 연봉 실수령액 완벽 정리, 진짜 내 월급은?

nuhends — Mon, 3 Jan 2022 00:59:00 +0900

[2022 최신] 연봉 실수령액 완벽 정리, 진짜 내 월급은?

2022년 실수령 월급 정리

2022년 새해가 밝았습니다. 올해도 곧 연봉 협상이 있을건데요.

연봉이 인상이 되는 경우, 변경된 연봉을 월급으로 환산하면 얼마인지 궁금합니다.

"결론적으로, 통장에 찍히는 내 월급은 연봉÷12인 금액보다 작습니다."

내 월급을 노리는 간악한 무리들

이는 월급에서 "근로소득세" 와 "4대 보험료" 가 공제된 나머지 금액이 입금되기 때문입니다.

이번 포스팅에서는 실수령액에 대해 자세히 알아보겠습니다.

[2022년] 4대 보험 요율 변경사항 정리

4대 보험 요율 정리
- 건강보험: 6.86% ⇒ 6.99% (사업자 3.495%, 근로자 3.43%)
- 국민연금: 9% (사업자 4.5%, 근로자 4.5%) ⇒ 동결
- 장기요양보험: 11.52% ⇒ 12.27% (건강보험료 x 12.27%)
- 고용보험: 1.6% (사업자 0.8%, 근로자 0.8%) ⇒ 동결

[2022년] 과세표준 구간 별 소득세율

과세표준 구간	2022년 소득세율	누진 공제
1,200만원 이하	6%	0원
1,200만원 ~ 4,600만원	15%	108만원
4,600만원 ~ 8,800만원	24%	522만원
8,800만원 ~ 1억5천만원	35%	1,490만원
1억5천만원 ~ 3억원	38%	1,940만원
3억원 ~ 5억원	40%	2,540만원
5억원 ~ 10억원	42%	3,540만원
10억원 초과	45%	6,540만원

월 실수령액 표

⚠️ 주의
- 1인 가구(자녀수 0명) 기준입니다.
- 국세청 근로소득 간이세액표 기준 계산하였으며, 실제 값과 오차가 있을 수 있습니다.

1. 연봉 1,000 ~ 4,000 만원 실수령액

연봉 1,000 ~ 4,000 만원  실수령액

2. 연봉 4,000 ~ 7,000 만원 실수령액

연봉 4,000 ~ 7,000 만원  실수령액

3. 연봉 7,000 ~ 10,000 만원 실수령액

연봉 7,000 ~ 10,000 만원  실수령액

4. 연봉 1억 ~ 3억 실수령액

연봉 1억 ~ 3억  실수령액

2022년 변경된 연봉별 실수령액에 대해 알아보았습니다.

개인의 사정(자녀 유무, 자녀 숫자 및 부양가족 등)에 따라 실수령액에 차이가 있을 수 있으니 참고 부탁드립니다.

[VS code] mac에서 완전 제거하는 방법!

nuhends — Mon, 27 Dec 2021 11:11:25 +0900

[VS code] mac에서 완전 제거하는 방법!

vscode 완전 삭제 방법

작업시 VS Code 코드 에디터를 사용해왔는데, 최근 여러 프로젝트를 진행하면서 확장 프로그램이 불필요하게 많이 추가되고, 환경 설정이 꼬였는지 불필요한 에러들이 발생했다. 그래서 이번 기회에 앱을 완전 제거 하고 새로 설치하였다. 방법은 아래와 같다.

제거 방법

1. VS Code 프로그램 종료
2. 터미널에서 아래 명령어 실행

rm -fr ~/Library/Preferences/com.microsoft.VSCode.helper.plist
rm -fr ~/Library/Preferences/com.microsoft.VSCode.plist
rm -fr ~/Library/Caches/com.microsoft.VSCode 
rm -fr ~/Library/Caches/com.microsoft.VSCode.ShipIt/ 
rm -fr ~/Library/Application\ Support/Code/ 
rm -fr ~/Library/Saved\ Application\ State/com.microsoft.VSCode.savedState/ 
rm -fr ~/.vscode/ 
rm -fr ~/.vscode/extensions

[주린이를 위한 쉬운 설명] PER이란? 설명과 확인하는 방법

nuhends — Tue, 26 Oct 2021 23:50:18 +0900

[주린이를 위한 쉬운 설명] PER이란? 설명과 확인하는 방법

STEP 0. 설명에 들어가기 앞서

PER 구하는 공식 같은 딱딱한 걸 얘기하기 전에 먼저 쉬운 사례를 통해 PER이 왜 필요한 지 알아보겠습니다.
우리는 주식을 사기 전에 다른 주식과 비교를 합니다. 어떻게 비교할까요? 단순하게 가격으로 비교할까요? 예를 들어봅시다.

- 카카오 1주당 가격: 12만원
- 네이버 1주당 가격: 40만원

네이버의 주식 가격은 카카오보다 약 3.3배 비싸네요. 그럼 네이버의 주식이 더 좋은 건가요? 아니면 네이버가 더 비싸니까 상대적으로 싼 카카오 주식이 더 좋은 걸까요? 단순하게 주가만 봐서는 이 주식이 싼 건지 비싼 건지 가치를 판단할 수 없습니다.

이럴 때 주식 가격과 회사가 버는 돈(매출)을 함께 비교하여 매력도를 판단하는데 도움을 주는 것이 PER이라는 지표입니다.

STEP 1. PER이란?

PER은 Price Earning Ratio의 약자고, 주가수익비율 이라고도 합니다.

PER 구하는 공식

PER은 위의 방법으로 구할 수 있습니다. 현재 주가를 EPS(순이익)로 나눈 값입니다. 단위는 배를 사용합니다.

예를 들어 한 주에 20,000원인 회사 주식이 1년에 한 주당 5,000원의 순이익을 낸다고 가정한다면,
PER은 20,000÷5000 = 4배 가 되는 것입니다.

즉, PER은 회사의 당기순이익에 비해 주가가 얼마나 높고, 낮은 지 나타내는 지표라고 볼 수 있습니다.

EPS에 관해서는 아래 포스팅에서 쉽게 설명해두었으니 혹시 모르시면 참고해주세요.

[주린이를 위한 쉬운 설명] EPS란? 설명 그리고 확인하는 방법

[주린이를 위한 쉬운 설명] EPS란? 설명 그리고 확인하는 방법 STEP 1. EPS란? EPS는 Earnings Per Share의 약자로 '주당순이익' 이라고 합니다. 이는 기업의 주식 1주가 얼마의 돈을 벌었는지 알려주

nuhends.tistory.com

위 사례가 와닿지 않으신다면 다른 쉬운 사례를 통해 알아보겠습니다.

당신의 지인 철수가 마법 항아리를 가지고 있습니다. 그 항아리는 1년에 1000만 원어치의 황금(황금의 시세 변하지 않는 걸로 가정)을 만들어냅니다. 당신은 그 항아리를 사고 싶습니다. 그렇다면 얼마에 사야 될까요? 3000만원에 산다고 가정해보겠습니다. 제가 철수라면 절대 팔지 않을 겁니다. 3년이면 벌 수 있는 돈이기 때문이죠. 그렇다면 1억이면 어떨까요? 이 가격이라면 생각해볼 만합니다. 10년 뒤에 마법 항아리가 동작하지 않을 가능성도 있고, 부서지거나 도난당할 염려도 있기 때문이죠. 철수는 1억에 팔기로 결정합니다.

이때 마법 항아리의 PER은 1억÷1000만원 ⇒ 10배 입니다.

STEP 2. PER을 활용하는 방법

그럼 보통 PER 몇을 기준으로 판단할까요? 전통적으로 10배를 기준으로 판단합니다.
10배보다 높으면 고평가, 10보다 낮으면 저평가로 판단합니다.

즉, 10년 안에 본전을 뽑을 수 있다면 좋은 거래로 판단한다는 뜻입니다.

예시 1.

삼성전자가 한해 순이익이 1000만원이라고 가정해보겠습니다. 삼성전자의 주식 숫자는 총 100개가 발행되어 있습니다. 주가는 20만원 입니다. 그렇다면 PER은 2배가 됩니다. 이는 항아리의 가격이 2000만원이 된 것과 같고 항아리를 사서 2년만 지나면 본전을 뽑는 겁니다. 이는 저평가라고 볼 수 있고, 사는 게 좋겠죠? 향후 주가는 오를 가능성이 더 클 것 같기 때문입니다.

예시 2.

마법 항아리 인기가 높아져서 수요가 엄청나게 증가하였습니다. 항아리의 가격은 갈수록 높아졌고 결국 10억에 거래되었습니다. 즉, PER이 100배가 되었습니다. 100년이 지나야 본전을 뽑는 것입니다. 이는 과하게 고평가 된 상태에서 산 듯합니다.

STEP 3. PER에 관해 주의해야 될 점

그럼 STEP 2에서 배운 대로 PER 10 이하 주식을 사면 무조건 수익이 날까요? 물론 아닙니다. 우리는 PER의 함정을 조심해야 합니다.

1. PER이 낮다고 무조건 좋은 기업인 건 아니다.

앞선 예시 1에서 PER이 2는 저평가이기 때문에 사는 게 좋다는 결론을 냈습니다.
하지만 싼 건 이유가 있을 수 있으니 잘 알아보아야 합니다. (싼 게 비지떡 일수도..?) 만약 항아리가 매년 낡아서 기능이 점점 저하되기 시작합니다. 이에 따라 매년 금 생산량이 줄어들게 됩니다. 그렇다면 항아리의 가격은 떨어지게 될 겁니다.

이는 실제 회사에서도 똑같습니다. 기업의 경쟁력이 떨어지거나, 점점 쇠퇴하는 산업에 포함된 기업들은 PER이 10배 보다 낮아도 좋은 기업이라고 볼 수 없으니 주의해야 합니다. 실제로 업종별 PER은 천차만별이니, 특정 기업을 매수하기 전에 업종 전체의 PER과 해당 기업의 PER을 비교해야 합니다.

2. PER이 높다고 무조건 안 좋은 기업인 건 아니다.

앞선 예시 2에서 PER이 100이기 때문에 사지 않는 것이 좋다는 결론을 내렸습니다. 하지만 만약 항아리를 관리를 잘했더니 매년 생산 1.5배씩 늘어났다고 가정해보겠습니다.

	1년 금 생산량	PER
0년	1000 만원	100 배
1년	1500 만원	66.66 배
2년	2250 만원	44.44 배
3년	3375 만원	29.62 배
4년	5062 만원	19.75 배
5년	7593 만원	13.17 배
6년	11389 만원	8.78 배

6년 후에는 PER이 8.78배로 10보다 작아집니다. 이처럼 실제 주식 중에서도 앞으로 더 많은 돈을 벌 걸로 예상되는 업종의 고성장주들은 현재 낮은 실적에도 높은 주가를 형성하는 경우가 많고 향후 폭발적 실적 향상과 함께 주가도 함께 우상향 하는 경우도 많습니다. 주로 인터넷/IT, 제약/바이오, 반도체, 2차 전지 등에 이러한 사례들이 있습니다.

STEP 4. PER 확인하는 방법

PER은 가장 기본이 되는 지표이기 때문에 주식 관련 거의 모든 서비스에서 다루고 있어 쉽게 확인할 수 있습니다. 이번 포스팅에서는 네이버 증권에서 어떻게 확인하는지 알아보겠습니다.

네이버 금융(https://finance.naver.com/)에 접속

종목 검색 > 종목분석 > 기업현황
- PER: 해당 종목의 PER
- 업종 PER: 해당 종목이 포함된 업종 전체 평균 PER

네이버 증권 PER 확인하는 방법

이번 포스팅에서는 PER에 대해 알아보았습니다. PER에는 분명 한계도 있지만 같은 업종에 있는 기업들을 비교할 때나 어느 정도로 거품이 끼어있는지(거품인지 미래 가능성인지는 다른 방법으로 판단해야겠지만)를 판단할 때 중요한 재무제표의 지표인 것은 분명합니다. 이해가 안 되신다면 EPS 포스팅부터 다시 천천히 읽어보시고 익히시는 걸 추천합니다.

도움이 되셨다면 좋아요, 댓글, 구독해주시면 큰 힘이 됩니다.
감사합니다.

[주린이를 위한 쉬운 설명] EPS란? 설명 그리고 확인하는 방법

nuhends — Thu, 21 Oct 2021 17:29:45 +0900

[주린이를 위한 쉬운 설명] EPS란? 설명 그리고 확인하는 방법

주식 기초용어 EPS 쉽게 알아보기

STEP 1. EPS란?

EPS는 Earnings Per Share의 약자로 '주당순이익' 이라고 합니다.

이는 기업의 주식 1주가 얼마의 돈을 벌었는지 알려주는 지표입니다.

EPS를 구하기 위해서는 "당기순이익"을 알아야 하므로, 먼저 당기순이익의 개념에 대해 살펴보겠습니다.

당기순이익이란?

기업이 1년 동안 장사를 해서 벌어들인 돈(매출) 중에서 비용과 손실을 빼고 남은 '진짜 이익'을 당기순이익이라고 합니다.

예를 들어 평상시 분기별로 100억의 매출을 내는 회사가 이번 분기에 150억의 매출을 냈습니다. 그렇다면 대박이 난거고, 주식은 5배 오를까요?

그건 모르는 일입니다. 제품의 원가, 세금 등 비용이 더 크게 증가했다면 당기순이익은 줄어들 수도 있기 때문입니다

매출이 100억 → 150억으로 증가하였지만, 제품의 원가, 세금, 광고 등의 비용&손실이 크게 증가하여, 비용이 10억 → 70억이 되었다면 당기순이익(진짜 이익)은 90억 → 80억으로 줄어든 셈입니다.

위 사례처럼 단순히 매출액이 실제 이익과 괴리가 있으므로 당기 순이익이 필요합니다.

즉, 당기순이익은 기업이 실제로 얼마만큼의 돈을 벌었는지 알려주는 '진짜 이익' 으로 중요한 수치라고 볼 수 있습니다.

Q. 그렇다면 비용과 손실에는 어떤 것들이 있을까요?

A. 제품에 만들 때 들어가는 원자재 구매 비용, 직원들의 월급, 다양한 종류의 세금, 대출금의 이자 등등이 있습니다.

Q. 회사의 당기순이익이 계속 증가하고 있어요. 투자해도 될까요?

A. 아니요. 우선 EPS를 함께 봐야 합니다.

예를 들어 보겠습니다. 코스피에 상장된 회사가 있습니다.

	당기순이익 (매출-비용)	발행 주식수	주당순이익(당기순이익 ÷ 발행주식수)
2019	100억	1000개	1000만원
2020	150억	1500개	1000만원
2021	200억	2000개	1000만원

이 회사의 당기순이익은 매 분기 증가합니다. 하지만, 발행 주식수가 그와 같이 증가하였으므로, 당기순이익을 주식숫자로 나눈 EPS는 그대로입니다.

기업의 당기순이익이 계속해서 증가하고 있는 건 호재입니다. 하지만, 발행한 주식 숫자가 더 많이 늘었다면 이는 악재입니다.

즉, EPS를 기준으로는 투자매력도가 올랐다고 보기는 어렵습니다.

(이는 이어서 나올 EPS의 상세 내용을 자세히 살펴본 뒤 보면 이해가 되실 겁니다)

STEP 2. EPS 구하는 방법

EPS는 당기순이익을 총 발행 주식수로 나눈 값으로 구할 수 있습니다.

EPS = 당기순이익 ÷ 총 발행 주식수 = 1주당 순이익

EPS 계산 방법

당기순이익은 높아질수록, 발행 주식수는 적을수록 높아지겠죠? 아래와 같은 사항들은 EPS를 낮추는 요소입니다.

1) 당기순이익에 해가 되는 원가 상승, 임금 상승, 마케팅 비용 증가 등은 악재
2) 추가로 주식을 발행하여 총 발행 주식 숫자가 늘어나는 '유상 증자'는 악재

즉, EPS가 높을수록 순이익이 높고, 실적이 좋다는 것을 의미하여 투자 매력도가 높다고 볼 수 있습니다.

STEP 3. EPS를 투자에 활용하는 방법

기업의 EPS가 꾸준히 증가하는지 살펴보는 것으로 투자에 큰 도움이 됩니다.

1) EPS가 우상향 한다면 주가도 우상향 할 가능성이 크다.

위 그래프는 애플의 EPS(12 month)와 주가 차트입니다. (파란선: EPS / 검은선: 주가)

두 그래프가 완전히 포개질 정도로 일치하지는 않지만

장기적으로 봤을 때, EPS(실적)이 주가에 반영되는 것을 볼 수 있습니다.

다른 의미로 다음과 같이 해석할 수 있습니다.

- EPS보다 주가가 올라가 있다면? 고평가(=강세장, 단기 과열, 거품, 탐욕)
- EPS보다 주가가 떨어져 있다면? 저평가(=약세장, 공포)

2) EPS가 마이너스(-) 일 수도 있다.

요즘 EPS가 마이너스인 케이스가 많이 있습니다. 즉, 당기순이익이 마이너스, 적자 기업입니다.

이런 경우는 미국의 나스닥이나 국내는 코스닥 등의 테크, 바이오, 전기차 등의 4차 산업에 해당하는 업종의 회사에서 자주 발견되는 케이스입니다. 심지어 주가도 비싸게 형성되어 있는 경우가 많습니다. 이런 기업은 투자하면 안 되는 거 아닌가요? 이런 기업에 왜 투자하나요. 거품기업 아닌가요?

해당 기업은 당장은 순수익이 나지 않지만, 투자를 받거나 혹은 주식을 추가 발행(=유상증자)하여 자금을 마련하는 방식으로 유지하며 당기순이익이 아닌 매출을 늘리는데 집중합니다.

그렇게 적자는 나지만 매출은 늘어가면서, 특정 업종을 선점하여 장래가 유망한 기술을 통해 매출이 늘어 순이익이 흑자로 전환되는 경우

게임 체인저로 해당 업종을 지배하여 막대한 이익을 낼 수도 있습니다.

즉, 뛰어난 기술을 바탕으로 향후 엄청난 성장이 기대되는 회사들의 경우 EPS가 마이너스가 있습니다.

테슬라의 EPS와 주가 관계

테슬라는 적자(마이너스 EPS)를 기록하다, 2019년 4분기부터 흑자 전환에 성공하였고, 이후 주가는 폭발적 상승하였습니다.

이런 류의 기업들로는 에어비엔비, 쿠팡, 테슬라(흑자로 전환됨) 등의 테크 기업들 있습니다.

참고: https://www.investing.com/equities/tesla-motors-earnings

TSLA Earnings Date & Report (Tesla) - Investing.com

Get the latest Tesla earnings report, revenues as well as upcoming TSLA earnings dates, historical financial reports, news, analysis & more.

www.investing.com

3. EPS만 보지 말고, PER과 함께 보자.

예를 들어 반도체 회사 중에 한 곳을 투자하고 싶습니다. 그런데 1주당 얼마를 벌었는지를 알려주는 EPS 수치로는 두 회사를 비교하기 힘듭니다. 특정 회사의 EPS는 발행 주식수에 따라 달라질 뿐 아니라, 현재 주식 가격은 반영하지 않고, EPS가 아무리 높아도, 현재 주식 가격이 터무니없이 더 비싸다면 이는 좋은 주식이라고 볼 수 없기 때문입니다. 이럴 경우 주식의 PER 참고하면 투자 매력도를 좀 더 정확하게 파악할 수 있습니다.

PER을 쉽게 설명한 포스팅이 필요하시면 아래 링크를 참조하세요 :)

[주린이를 위한 쉬운 설명] PER이란? 설명과 확인하는 방법

[주린이를 위한 쉬운 설명] PER이란? 설명과 확인하는 방법 STEP 0. 설명에 들어가기 앞서 PER 구하는 공식 같은 딱딱한 걸 얘기하기 전에 먼저 쉬운 사례를 통해 PER이 왜 필요한 지 알아보겠습

nuhends.tistory.com

STEP 4. EPS 확인 사이트

매번 EPS를 계산할 필요 없이, EPS를 쉽게 확인하는 방법이 많이 있습니다.

네이버 금융(https://finance.naver.com/)에 접속

1) 현재 EPS 확인

종목 검색 > 우측 [투자정보] 메뉴

2) EPS 변동치 확인

종목 검색 > 종목분석 > 기업현황 > Financial Summary

종목분석 > 기업현황

Financial summary > EPS 확인

여기까지 EPS 기본에 대해 설명하였습니다.

다음 포스팅에서는 국가별, 산업&업종별 EPS 등 심화 내용을 다뤄보겠습니다.

도움이 되셨다면 좋아요, 댓글, 구독해주시면 큰 힘이 됩니다.

감사합니다.

[react-router-dom] Link, NavLink 차이점 정리, 리액트 라우터

nuhends — Mon, 18 Oct 2021 00:23:01 +0900

[react-router-dom] Link와 NavLink 차이점 정리, 리액트 라우터

리액트 Nav NavLink 차이점

react에서 router 처리를 할 때, Link, Nav 두 컴포넌트를 자주 사용합니다.

정확한 이해없이 사용했던 것 같아 공식 문서를 바탕으로 특징 및 차이점을 정리해보았습니다.

공통점과 차이점

Link와 Nav 두 컴포넌트 모두 화면에 태그로 렌더링 되고, to 속성에 정의해 둔 url로 이동하는 기능을 한다는 점에서 동일합니다.

공식문서에서는 NavLink에 관해 아래와 같이 정의되어 있습니다.

NavLink 는 Link의 특별한 버전입니다.
현재 URL과 클릭시 이동할 URL이 같을 경우, "style 속성" 을 추가해주는 기능을 가지고 있습니다.
스타일 외에도 추가 기능으로 선택된 NavLink의 경우 aria-current="page" 로 지정되어, 접근성에 도움이 됩니다.

Nav 활용 예시

예를 들어 네비 메뉴에 여러 링크 메뉴가 있고, 현재 활성화된 메뉴에 다른 css를 적용하고 싶을 때

위 예제처럼 Link 컴포넌트로 작업할 경우,

현재 URL과 해당 링크로 이동할 URL을 비교하여, 클래스를 추가 혹은 삭제 해주는 별도 처리가 필요합니다.

(저는 classnames 모듈을 이용하여 조건에 따라 다른 className을 추가하는 형식으로 style을 분기 처리 하였습니다.)

NavLink 활용 예시

NavLink 컴포넌트를 사용할 경우, 별도로 URL 비교처리 없이 activeClassName 속성을 이용하여 작업하였습니다.

앞선 Nav 컴포넌틀 이용한 경우보다 간편하게 처리가 가능합니다. activeClassName 외에도 다음 속성도 사용할 수 있습니다.

activeStyle: object

NavLink activeStyle 속성

isActive: func

NavLink isActive속성

참고

- https://reactrouter.com/web/api/Link

- https://reactrouter.com/web/api/NavLink

[2021 최신] 미국 주식 시가총액순위 TOP 100

nuhends — Thu, 14 Oct 2021 19:33:03 +0900

[2021 최신] 미국 주식 시가총액순위 TOP 100

미국 주식 상위 100개 시총순 리스트

안녕하세요 Nuhends 입니다.

미국 주식 시가총액 TOP 100개 기업에 대해 알아보겠습니다. (2021/10/26 기준)

( 주기적으로 업데이트 예정이니 최신으로 생각하고 봐주세요)

국가별 주식 순위 관련 포스팅들
- 전세계 주식 시가총액순위 TOP 200
- S&P 500 종목리스트
- 나스닥 100 종목리스트
- 다우 종목리스트
- 중국 주식 시가총액순위 TOP 100
- 일본 주식 시가총액순위 TOP 100
- 독일 주식 시가총액순위 TOP 100
- 프랑스 주식 시가총액순위 TOP 100
- 영국 주식 시가총액순위 TOP 100
- 홍콩 주식 시가총액순위 TOP 100
- 베트남 주식 시가총액순위 TOP 100
- 인도 주식 시가총액순위 TOP 100

1등인 Apple의 경우 2.45조 달러(=한화 2,868조원)입니다.

+업데이트(21.10.26) : 테슬라의 시총이 1조 달러를 넘으면서, 페이스북을 넘어 5위로 랭크되었습니다

컨트롤 + F 를 눌러 검색을 희망하시는 종목을 입력하여 검색하시면 쉽게 찾으실 수 있습니다

순위	종목명	티커	시가총액 (달러)	주가
1	Apple	AAPL	$2.457 T	$148.64
2	Microsoft	MSFT	$2.313 T	$308.13
3	Alphabet (Google)	GOOG	$1.843 T	$2,775
4	Amazon	AMZN	$1.681 T	$3,320
5	Tesla	TSLA	$1.026 T	$1,025
6	Facebook	FB	$926.72 B	$328.69
7	Berkshire Hathaway	BRK-A	$656.02 B	$436,401
8	NVIDIA	NVDA	$577.29 B	$231.66
9	Visa	V	$513.22 B	$233.88
10	JPMorgan Chase	JPM	$505.17 B	$170.94
11	Johnson & Johnson	JNJ	$431.93 B	$164.08
12	UnitedHealth	UNH	$423.83 B	$449.49
13	Walmart	WMT	$418.44 B	$150.06
14	Home Depot	HD	$391.81 B	$371.26
15	Bank of America	BAC	$391.54 B	$47.51
16	Mastercard	MA	$356.08 B	$360.86
17	Procter & Gamble	PG	$340.84 B	$140.85
18	Walt Disney	DIS	$312.56 B	$172.01
19	Adobe	ADBE	$307.82 B	$646.97
20	Netflix	NFLX	$297.51 B	$671.66
21	PayPal	PYPL	$290.09 B	$246.88
22	Salesforce	CRM	$287.74 B	$293.92
23	Exxon Mobil	XOM	$272.42 B	$64.35
24	Oracle	ORCL	$267.60 B	$97.89
25	Nike	NKE	$259.93 B	$164.22
26	Comcast	CMCSA	$248.21 B	$54.08
27	Pfizer	PFE	$241.92 B	$43.15
28	Thermo Fisher Scientific	TMO	$240.75 B	$607.75
29	Eli Lilly	LLY	$234.41 B	$245.05
30	Coca-Cola	KO	$234.09 B	$54.23
31	Cisco	CSCO	$232.56 B	$55.14
32	Abbott Laboratories	ABT	$224.40 B	$126.58
33	Chevron	CVX	$220.17 B	$113.85
34	Pepsico	PEP	$220.14 B	$159.22
35	Danaher	DHR	$218.73 B	$306.10
36	Verizon	VZ	$217.68 B	$52.58
37	Costco	COST	$216.53 B	$490.10
38	Broadcom	AVGO	$214.89 B	$522.07
39	Merck	MRK	$206.71 B	$81.66
40	Wells Fargo	WFC	$202.32 B	$50.62
41	Intel	INTC	$200.95 B	$49.41
42	AbbVie	ABBV	$191.73 B	$108.50
43	Texas Instruments	TXN	$184.82 B	$200.20
44	Morgan Stanley	MS	$183.33 B	$101.91
45	AT&T	T	$183.06 B	$25.64
46	United Parcel Service	UPS	$177.52 B	$203.90
47	McDonald	MCD	$177.24 B	$237.34
48	Nextera Energy	NEE	$165.35 B	$84.29
49	Intuit	INTU	$164.55 B	$602.56
50	Lowe's Companies	LOW	$160.51 B	$231.82
51	Charles Schwab	SCHW	$157.74 B	$82.89
52	Union Pacific Corporation	UNP	$154.47 B	$240.28
53	Philip Morris	PM	$150.46 B	$96.54
54	Honeywell	HON	$149.75 B	$217.54
55	QUALCOMM	QCOM	$148.81 B	$131.93
56	AMD	AMD	$148.41 B	$122.36
57	T-Mobile US	TMUS	$145.85 B	$115.93
58	American Express	AXP	$144.83 B	$182.31
59	Moderna	MRNA	$141.09 B	$349.56
60	BlackRock	BLK	$140.54 B	$924.74
61	Citigroup	C	$140.54 B	$70.83
62	Goldman Sachs	GS	$138.85 B	$414.75
63	Raytheon Technologies	RTX	$137.66 B	$91.30
64	ServiceNow	NOW	$136.46 B	$688.85
65	Starbucks	SBUX	$135.25 B	$114.71
66	Charter Communications	CHTR	$134.37 B	$731.01
67	American Tower	AMT	$129.52 B	$284.58
68	Bristol-Myers Squibb	BMY	$128.46 B	$57.81
69	Target	TGT	$127.06 B	$260.35
70	Boeing	BA	$124.77 B	$212.87
71	Intuitive Surgical	ISRG	$122.74 B	$343.59
72	Applied Materials	AMAT	$122.58 B	$135.76
73	Square	SQ	$120.59 B	$262.00
74	Estee Lauder	EL	$119.20 B	$330.06
75	Amgen	AMGN	$117.90 B	$207.63
76	CVS Health	CVS	$115.69 B	$87.68
77	General Electric	GE	$115.58 B	$105.30
78	IBM	IBM	$114.40 B	$127.64
79	Caterpillar	CAT	$110.70 B	$202.21
80	Deere & Company	DE	$109.36 B	$352.72
81	S&P Global	SPGI	$107.81 B	$447.37
82	Prologis	PLD	$107.26 B	$145.10
83	Airbnb	ABNB	$106.39 B	$169.24
84	3M	MMM	$105.54 B	$182.40
85	Anthem	ANTM	$105.47 B	$434.56
86	Lockheed Martin	LMT	$104.21 B	$376.33
87	Stryker Corporation	SYK	$102.96 B	$273.05
88	Snowflake	SNOW	$102.75 B	$341.50
89	ConocoPhillips	COP	$102.46 B	$76.52
90	Zoetis	ZTS	$100.24 B	$211.52
91	Booking.com	BKNG	$99.07 B	$2,413
92	Blackstone Group	BX	$97.78 B	$139.57
93	Analog Devices	ADI	$97.01 B	$180.52
94	U.S. Bancorp	USB	$92.69 B	$62.52
95	Automatic Data Processing	ADP	$92.18 B	$218.07
96	PNC Financial Services	PNC	$91.60 B	$216.56
97	Altria Group	MO	$88.92 B	$47.95
98	Uber	UBER	$88.59 B	$45.72
99	Snap	SNAP	$87.73 B	$54.50
100	Truist Financial	TFC	$86.19 B	$64.57

포스팅이 여러분의 재테크에 조금이나마 도움이 되면 좋겠습니다.

글이 도움이 되셨다면 공감&댓글 부탁드립니다.글 작성에 큰 힘이 됩니다.

감사합니다!