Rlog

Calculas) Limit

dev_roach — Mon, 31 Mar 2025 11:10:06 +0900

Limit

$$\lim_{x \to a} f(x) = L$$

이는 x 가 a 로 접근할때 f(x) 의 극한은 L 이다.
이 뜻은 x 가 정확히 a 라는 뜻은 아니다.

좌극한 우극한

좌극한(left-hand limit): x 가 a 보다 작은 값을 가지면서 a 에 가까워지는 경우
- $$\lim_{x \to a^-} f(x) = L$$
우극한(right-hand limit): x 가 a 보다 큰 값을 가지면서 a 에 가까워지는 경우
- $$\lim_{x \to a^+} f(x) = L$$
어떤 점(a) 에서 극한값이 존재하기 위해서는 좌극한, 우극한 값이 동일해야 함.

극한 풀이

$$\lim_{x \to \infty} \frac{x^2 + 1}{2x^2 + 1} = \lim_{x \to \infty} \frac{1 + \frac{1}{x^2}}{2 + \frac{1}{x^2}} = \frac{1 + 0}{2 + 0} = \frac{1}{2}$$

고등 수학때가 떠오르는데 유리함수의 극한을 풀때는 보통 분모의 최고차항으로 나눠서 푸는걸 확인할 수 있다.

성질

$$\lim_{x \to a} [c f(x)] = c \lim_{x \to a} f(x) (단, c 는 상수)$$
$$\lim_{x \to a} [f(x) \pm g(x)] = \lim_{x \to a} f(x) \pm \lim_{x \to a} g(x)$$
$$\lim_{x \to a} [f(x) g(x)] = \lim_{x \to a} f(x) \cdot \lim_{x \to a} g(x)$$
$$\lim_{x \to a} \frac{f(x)}{g(x)} = \frac{\lim_{x \to a} f(x)}{\lim_{x \to a} g(x)} (단, $\lim_{x \to a} g(x) \neq 0)$$

극한의 연속성(continuos)

극한의 연속성은 아래와 같은 성질을 만족하여야 한다. 연속성은 어떤 성질을 지니기에 이런 정의까지 있을까? 머신러닝을 공부하기 위해 수학을 다시 공부했던 나로서는 연속성은 예측가능성을 어느정도 보여준다고 생각한다. 중간에 값이 끊기지 않고, 일정한 형태로 흐름이 존재하는 것이므로 예측 가능성을 어느정도 보장해준다고 생각한다. 이것이 이해가 안간다면 불연속적인 특정 부분에서 확확 튀는 것을 생각해보면 쉽다.

f(a) 가 존재한다 (함수 값이 존재해야 한다)
lim (x to a) f(x) 일때 극한 값이 존재한다.
lim (x to a) f(x) is equal to f(a)

Calculas 1

dev_roach — Mon, 31 Mar 2025 10:32:32 +0900

Function

y = f(x) 일때 "y 는 x 의 함수이다" 라고 읽음. 여기서 x 는 independent variable 또는 input 이라고 읽는다. 그리고 y 는 종속변수 (dependent variable) 또는 output 이라고 읽는다. 그 이유는 x 의 값에 따라 y 의 값이 변경되기 때문이다.

Domain, Codomain, Range

Domain: 함수에 입력될 수 있는 모든 값의 집합
Codomain: 함수에서 출력될 수 있는 후보 값들의 집합
Range: 함수에서 실제로 출력되는 모든 값 들의 집합. 고로 Codomain 의 subset

1.주어진 함수가 다음과 같을 때, $f(3)$, $t(-1)$, $(f \circ t)(0)$, $(t \circ f)(2)$ 의 값을 각각 구하시오.
◦$f(x) = 2x + 1$
- f(3) = 7
- $(f \circ t)(0)$ = f(t(0)) = f(-3) = f(-5)
- $t(x) = x^2 - 3$
- t(-1) = -2
- $(t \circ f)(2)$ = t(f(2)) = t(5) = 22

2.주어진 두 함수 $h(x) = x - 9$ 와 $t(x) = \cos x$ 에 대해, 다음 합성 함수를 구하시오.
◦$(f \circ t \circ h)(x)$, 여기서 $f(x) = x^2$ 입니다.
- f(t(h(x))) = f(t((x-9))) = f((cos (x - 9))) = (cos (x - 9))^2

3.교재에 주어진 함수 $f(x) = \sqrt{x}$ 와 $t(x) = 3 - x$ 에 대해 합성 함수 $(f \circ t)(x)$ 의 정의역을 구하시오. (힌트: 루트 안의 값은 항상 0보다 크거나 같아야 합니다.)
f(t(x)) 의 정의역을 구하라.
- f(x) 의 정의역 x >= 0 (root 안이 0 보다 작을수 없으므로)
- t(x) 정의역이 별도로 없음
- f(t(x)) 는 sqrt{3 - x} 가 되므로 3 - x >= 0 인게 정의역 즉 3 >= x 인게 정의역이다.

JS) Function

dev_roach — Sun, 30 Mar 2025 18:39:05 +0900

Function

함수란 일반적으로 프로그래밍 언어에서 다양한 의미가 있다. 예를들면, 함수형 언어에서는 함수가 정확한 수학적 의미를 지니고 있으며, 준수해야할 엄격한 규칙의 집합이 된다. 우리는 JS 로 개발할때 우리는 함수보다 좀 더 포괄적인 개념인 “프로시저” 를 프로그램에 녹여내야 한다.

문(Statement) 로 함수 선언

Javascript 에서 함수를 선언하기 위해서는 아래와 같이 문으로 함수를 선언(declaration)할수 있다.

function add(a, b) {
    return a + b;
}

console.log(add(1, 2));

식(Expression) 이 아니라 문(Statement) 이기 때문에 실행단계에서 선언부와 실제 함수 값이 연관되는 것이 아닌, 컴파일 단계에서 맺어진다. JS 는 함수형 프로그래밍을 지원하는 언어이기 때문에 식과 문을 구별하는 것은 꽤나 중요하다.

식(Expression) 으로 함수 선언

그럼 반대로 식으로 함수를 할당당하는 방법을 알아보자. 식으로 함수를 할당할 수 있다는 건 특정 값(value) 로 평가가 가능하다는 것이다. 즉, 함수형 언어에서 함수 자체가 값으로 이용되게 하려면 함수를 값으로 할당이 가능해야 한다는 것이다. JS 에서는 아래와 같은 방법으로 식으로서 함수를 할당할수 있다.

let f;

f = function(name) {
    return `Hello ${name}`;
}

console.log(f("Kyle")); // Hello Kyle

식으로 할당 가능하다는 것은 생각해보면 실행 단계에서 f 와 함수 값의 연관이 이뤄짐을 알 수 있다. 즉, 실행 단계를 진행하다보면 f 가 지닌 함수값이 아래와 같이 다른 함수값일 수도 있다.

let f;

f = function(name) {
    return `Hello ${name}`;
}

console.log(f("Kyle")); // Hello Kyle

f = function(name) {
    return `Bye ${name}`;
}

console.log(f("Kyle")); // Bye Kyle

JS) Function scope / Block scope

dev_roach — Sun, 30 Mar 2025 17:00:53 +0900

Function scope / Block scope

Javascript 에서는 function scope 와 block scope 가 있다. 이점이 살짝 다른 언어만 해오던 나에게는 익숙해지지 않았는데, 바로 아래와 같은 이유 때문이다.

Function scope

var adult = true;

if (adult) {
    var myName = "Kyle";
    let age = 39;
    console.log("Secret!");
}

console.log(myName); // Kyle
console.log(age); // ReferenceError: age is not defined

위의 코드를 보면 if 블럭안에 var myName 을 선언하고 “Kyle” 이라는 값을 할당했음에도 if 블록의 바깥 영역에서 myName 에 접근이 가능하다. 그 이유는 var 이 function scope 를 따르기 때문이다.

function scope 는 쉽게말해 함수 안에서 유효한 값을 가지게 되는데 현재 위 코드에서는 함수가 아닌 if block 안에 들어있으므로 호이스팅에 의해 더 상위인 전역 스코프로 선언부가 올라가게 된다. 할당하는 부분은 그대로 이고 선언부만 올라가게 된다.

<!DOCTYPE html>
<html>
<head>
    <title>Scope Test</title>
</head>
<body>
    <h1>Testing var Scope</h1>
    <script>
        console.log("Script start");
        var adult = true;
        console.log("Before if:", typeof myName, myName);

        if (adult) {
            console.log("Inside if, before var:", typeof myName, myName);
            var myName = "Kyle";
            let age = 39;
            console.log("Inside if, after var:", myName, age);
            console.log("Secret!");
        }

        console.log("After if:", myName);

        console.log("Script end"); // 종료점 확인용
    </script>
</body>
</html>

엔진이 이렇게 실제로 동작하는지 확인해보기 위해서는 브라우저의 디버거를 이용해보면 된다. 위 코드를 브라우저에 입력해보자.

실제로 브라우저에서 디버깅을 해보면 myName 이 이미 undefined 처리되어 있음을 알수 있다. 즉, 선언부가 호이스팅되어 글로벌하게 선언됬음을 알수 있다. 그렇다면 function scope 안에 있을때 밖에서 참조하려 할때 에러가 나는지 확인해보자.

function test() {
    var myName = "Kyle";
}

console.log(myName); // ReferenceError: myName is not defined

위와 같이 function scope 에 있을때는 외부에서 참조하려고 할시 에러가 잘 발생함을 확인할 수 있다. 이제 function scope 의 개념을 알았으니 Block scope 로 넘어가보자.

P.S) var 의 function scope 의 개념이 다른 언어와 혼동을 줄수 있다고 해서 요즘에는 let 과 const 를 이용하라고 권장하는것 같은데 사실 개념만 알고 있다면 크게 문제는 없지 않을까 싶긴하다.

Block scope

let, const 와 같은 선언문들은 block scope 를 가진다. 우리가 첫번째 예시에서도 봤듯이 let 과 const 로 선언된 변수는 동일 block 내에서만 참조 가능하다. 둘의 차이점이 있다면 const 는 불변(immutable) 하다. 아래의 코드를 함께 보자.

const myBirthday = true;
let age = 39;

if (myBirthday) {
    age += 1;
    myBirthday = false; // TypeError: Assignment to constant variable.
}

코드를 실행시키면 위와 같이 myBirthday 를 false 로 할당시키려는 부분에서 에러가 발생한다. 이 이유는 const 로 할당한 값을 바꾸려고 했기 때문이다. const 로 된 값을 이용할때 우리는 일반적으로 처음 할당된 이후로 잘 바뀌지 않을 것이라고 예상한다. 그렇기 때문에 아래와 같이 객체를 할당해서 사용하면 유지보수 관점에서 문제를 일으킬수 있다.

const actors = ["Kyle", "Sarah", "Dr. Evil"];
actors.pop();

assert(actors.includes("Dr. Evil"));

위의 코드를 보면 알수 있듯이 const 로 선언했음에도 객체를 할당했기 때문에 객체의 값을 바꾸는 것이 가능하다. 따라서 사용하는 쪽에서 Dr. Evil 이 배열 객체안에 있을거라고 생각하지만, 실제로는 pop 메소드를 수행했기 때문에 존재하지 않는다.

코드포스 2057A) Mex Table

dev_roach — Sat, 18 Jan 2025 18:19:22 +0900

Mex Table

코드포스에서 쉬운 문제중 하나인 Mex Table 이 문제는 풀기 쉬운편에 속한다. 일단 문제를 풀기 위해 MEX 함수에 대해 이해하는 시간을 가져보자. MEX 함수는 0을 포함한 음이 아닌 정수중 collection 에 나열되지 않은 가장 최솟값을 뜻한다. 예를 들면, 아래식은 반드시 0의 값을 가진다.

$$ MEX({1,2,3,4}) = 0 $$

이 값이 반드시 0을 가지는 이유는 0을 포함한 음이 아닌 정수이므로 0이 가장 작은 값이기때문이다. 이해가 안간다면, 검색을 해봐도 좋고, 문제를 다시 읽어봐도 좋다. 일단 MEX 는 이렇게 설명하고 넘어가겠다.

사실 문제에서 페이크인지 일부러 적어둔지는 모르겠지만, 사용할수 있는 가짓수를 정렬해서 값을 최대화 하는 것이라고 하는데 실상 이리저리 막해보면 결국 어떻게 배열하든 다 같은 값이 나온다. 여튼, 그렇게 값을 1*1, 1*2, 1*3, 2*1, 2*2, 2*3, 3*1, 3*2, 3*3 으로 배열하다보면 하나의 규칙이 보인다.

결국 0은 한번밖에 등장하지 못하므로 0을 포함시키지 못한 행과열은 모두 값이 0으로 수렴되게 되고, 그러면 최대화 시키기 위해서는 0이 있는 행 또는 열에서 가장 크게 나올수 있는 수인 (max(n, m)) 을 등장시킨다고 했을때, 그러면 다른 열 또는 행(만약 앞에서 행을 골랐다면 열)은 1을 가지게 된다.

즉, 그래서 결국 max(n, m) + 1 으로 식이 정리된다.

코드

n = int(input())
sizes = [list(map(int, input().split())) for _ in range(n)]

for size in sizes:
    print(f'{max(size[0], size[1])}\n')

[선형대 수학] 벡터의 내적(inner product)

dev_roach — Wed, 8 Jan 2025 22:55:39 +0900

선형대수학을 하다보면 이런저런 학창시절에 배운 수학 지식이 필요하다. 학창시절에 수학을 하고, 성인 되고나서는 거의 안하다 시피 해서 까먹었는데 요즘 인공지능을 공부하다 보니 다시 선형대수학을 공부하며 나머지 수학 지식들도 정리중이다. 공부하다보니, 시간이 촉박하여 잘 정리하지는 못하는데 수학적인 지식을 오랜만에 정리해보려고 한다.

벡터의 내적

벡터의 내적(inner product) 를 이해하기 위해서는 여러가지 수학적 지식을 필요로 한다. 이 글을 읽는 독자들은 나만큼 수학에 무지하다는 생각으로 글을 작성하겠다. 일단, 벡터의 내적을 이해하기 위해서는 삼각함수의 지식을 필요로 한다. 삼각함수 부터 들어가보자.

삼각함수

삼각함수는 쉽게 말해 각(theta) 를 기준으로 인접한 변사이의 비율을 나타내는 것이다. 예를 들면, 아래 그림에서 삼각비는 어떻게 전개 될까?

$$ \cos \theta = 3/5, \sin \theta = 4/5, \tan \theta = 4/3$$

위와 같이 식이 전개됨을 확인할 수 있다.

정사영(Projection)

정사영은한 벡터를 다른 벡터의 방향으로 그림자를 내리는 과정이다. 수직선을 그어 투영된 부분을 찾고, 그 길이와 방향을 벡터로 나타낸 것이 정사영 벡터이다. 쉽게 말하면 해당 벡터의 방향으로 90도인 선분(직교하도록)을 그은 뒤 같은 방향으로 벡터를 하나 그려줬다고 생각하면 된다. 조금 쉽게 이야기 하면, 위의 그림의 a 선분에서 b 선분을 향해 90도인 선을 하나 그리면 된다. 즉, 아래 그림과 같이 될것이다.

눈치가 빠른 사람은 그림만 봐도 알수 있겠지만 정사영(Projection) 시킨것은 사실 아래식과 같음을 알 수 있다.

$$\text{proj}_\mathbf{b} \mathbf{a} = \|\mathbf{a}\| * \cos \theta $$

위의 그림은 살짝 보기 힘드니 vector b 를 조금 더 앞으로 가도록 스케일업 해보도록 하자.

위와 같이 스케일 업을 해보면 vector a 를 vector b 로 정사영시키면 조금 더 짧은 길이 이지만 같은 방향을 지닌 벡터를 얻었음을 알 수 있다. 벡터는 방향성을 지니기 때문에 이러한 정사영(Projection) 이라는 개념이 조금 중요시 되는데, 쉽게 이야기하면 vector b 로 우리는 물체를 (0, 0) 에서 보내려 했을때 vector a 방향으로 힘을 주게 되면 얼마만큼 효율적일까? 를 계산하기 위해 정사영의 개념을 사용한다.

벡터의 내적

이 개념이 중요한 이유는 내적을 알기 위해 중요한 이유를 내적 식과 함께 알아보도록 하자.

$$ {a} \cdot {b} = \|{a}\| * \|{b}\| * \cos \theta $$

위의 수식을 조금만 알기 쉽게 우리가 이전에 봤던 식이랑 비슷하게 순서만 바꿔보자.

$$ \mathbf{a} \cdot \mathbf{b} = \|\mathbf{a}\| \cos \theta \|\mathbf{b}\| $$

식을 위와 같이 순서를 바꿔보면 아래와 같이 아까의 정사영식이 보인다. 만약 우리가 정사영된 벡터의 길이를 구한다면 어떻게 나올까? 일단 정사영된 벡터를 구하는 공식을 알아보자.

$$ \text {proj}_\mathbf{b} \mathbf{a} = \frac{\mathbf{a} \cdot \mathbf{b}}{\mathbf{b} \cdot \mathbf{b}} \cdot \mathbf{b} $$

정사영된 벡터의 길이를 구하는 건 여기서 정사영의 길이를 구해보자

$$ \|\text {proj}_\mathbf{b} \mathbf{a} \| = |\frac{\mathbf{a} \cdot \mathbf{b}}{\mathbf{b} \cdot \mathbf{b}}| \cdot \|\mathbf{b}\| $$

$$ \|\text {proj}_\mathbf{b} \mathbf{a} \| = |\frac{\mathbf{a} \cdot \mathbf{b}}{\|\mathbf{b}^2\|}| \cdot \|\mathbf{b}\| $$

$$ \|\text {proj}_\mathbf{b} \mathbf{a} \| = \frac{\mathbf{a} \cdot \mathbf{b}}{\|\mathbf{b}\|} $$

즉, 이렇게 놓고 보면 정사영된 길이에 벡터 b 의 크기를 곱하면 결국 해당 벡터의 사이즈를 얻을 수 있음을 역순으로 알 수 있다.

Affine 계층 계산 그래프에서 역전파시 전치행렬이 나오는 이유

dev_roach — Sat, 4 Jan 2025 15:00:12 +0900

Affine 계층을 보면 1번의 네모 박스에서 갑자기 전치행렬이 등장하는 것을 확인할 수 있다. 물론, 수학적으로 사고가 조금 되시는 분들은 왜 전치행렬이 등장하는지 아실수 있을거 같으나, 이전에 스칼라를 이용해 역전파를 구성했을때는 전치행렬이 아닌 그냥 W 가 곱해져야 하는게 아닌가? 라고 사고할수도 있다고 생각한다.

나와같이 이런 궁금중을 가진 사람이 또 존재할까봐 한번 수식으로 증명해보며 확인해보려고 한다.

탐구

이럴때는 사실 작은 예시를 하나 만드는게 가장 편하다. 아래와 같은 작은 식이 하나 있다고 해보자

$$Y = W*X$$

X, W, Y 에 관한 정의는 아래와 같다

X 는 (1,2) 행렬이다.
W 는 (2,3) 행렬이다.
W*X 의 곱의 결과가 Y 이므로 Y 는 (1,3) 의 행렬이 된다.

$$X = \begin{bmatrix} x_{11} & x_{12} \end{bmatrix}$$

$$W = \begin{bmatrix} w_{11} & w_{12} & w_{13} \\ w_{21} & w_{22} & w_{23} \end{bmatrix}$$

둘을 곱하게 되면 Y 는 아래와 같은 형태가 될것 이다.

$$Y(X*W) = \begin{bmatrix} x_{11}*w_{11} + x_{12}*w_{21} \\ x_{11}*w_{12} + x_{12}*w_{22} \\ x_{11}*w_{13} + x_{12}*w_{23} \end{bmatrix}$$

위의 결과를 각각 x11, x12 로 편미분 한다고 해보자.

$$\frac{\partial Y}{\partial X_{11}} = \begin{bmatrix} w_{11} \\ w_{12} \\ w_{13} \end{bmatrix}$$

$$\frac{\partial Y}{\partial X_{12}} = \begin{bmatrix} w_{21} \\ w_{22} \\ w_{23} \end{bmatrix}$$

과 같이 변할 것 이다. 즉, 이 두개를 합쳐보면

$$W^T = \begin{bmatrix} w_{11} & w_{12} \\ w_{13} & w_{21} \\ w_{22} & w_{23} \end{bmatrix}$$

위와 같은 식임을 확인할 수 있다.
$$W = \begin{bmatrix} w_{11} & w_{12} & w_{13} \\ w_{21} & w_{22} & w_{23} \end{bmatrix}$$

W 와 놓고 비교해보면 W 의 전치행렬임을 더 쉽게 확인할 수 있다.

결론

즉, 연쇄법칙이 일어나는 Affine 계층에서 역전파를 일으킬때 전치행렬이 나오는 이유는 위와 같다. 왜냐면 항상 우리는 위 식의 경우 X 에 관한것은 아래와 같이 Loss 함수의 값을 X 로 미분을 하는 것이기 때문이다.

$$\frac{\partial L}{\partial X}$$

머신러닝 공부 1일차) 지도 학습 VS 비지도 학습

dev_roach — Thu, 5 Dec 2024 18:59:49 +0900

시작하며

머신러닝 공부를 시작하는 이유는 요새 LLM 등이 핫한데 이것 저것 만지다보니, 어떻게 이렇게 사고하는 모델을 만들었을까? 되게 궁금증이 많이 들었고 이런 기술을 좀 더 잘 이해하기 위해서는 기초 수학 -> 머신 러닝 -> 딥러닝 -> LLM 순으로 공부해서 조금 이해도를 점진적으로 확장시켜야 겠다는 생각을 했다. 여하튼, 이게 도움이 될지 안될지는 모르겠지만, 지금 당장 AI 를 공부하는것이 흥미 있어서 2025년은 조금 AI 공부에 많은 시간을 쏟지 않을까 싶다.

머신러닝이란?

머신러닝이란 주어진 데이터를 기반으로 일련의 패턴을 찾아 학습된 모형을 만드는 것을 뜻합니다. 학습된 모형을 이용해 제공되는 데이터에 대한 분류가 이뤄지거나, 일련의 예측등을 수행합니다.

지도 학습 vs 비지도 학습

지도학습은 정답을 알고 있는 데이터를 기반으로 학습하는 방법입니다. 이미 데이터에 대한 특성(feature)을 알고 있으며 해당 특성이 어떠한 타겟(Target) 으로 분류되어야 하는지도 알고 있는 상태입니다. 아직은 저도 머신러닝 입문이라 모르겠지만, 주로 초반에 데이터셋을 설정하는게 일련의 이 과정이지 않을까 싶습니다.

비지도 학습은 데이터에 대한 특성(feature) 만 알고 있는 상태이며 어떤 타겟으로 이뤄져야 하는지는 모르는 상태입니다. 즉, "빨간색", "주근깨 있음", "과일" 이라는 특성이 있을때 이 특성이 "딸기" 라는 타겟으로 이어져야 하는지 모르는 상태입니다. 따라서, 비지도 학습의 경우 어떤 타겟 데이터인지 정확하게 알수 없으므로 데이터 분포 형태를 통해 추측만이 가능합니다. 위와 같이 특성 데이터를 통해 데이터를 나누는 것을 군집(clustering) 이라고 부릅니다.

프로그래밍 영어 단어 공부

dev_roach — Wed, 20 Nov 2024 10:58:39 +0900

프로그래머를 위한 영어 표현: tailored와 dedicated의 이해

안녕하세요! 오늘은 프로그래머들이 프로그래밍 서적이나 기술 문서를 읽다가 자주 접하는 표현들인 tailored와 dedicated에 대해 알아볼게요. 특히 프로그래밍에서 이 두 단어는 특정한 용도나 목적에 맞춘다는 뉘앙스를 담고 있어요. 이 글에서는 이 두 표현의 의미와 차이점, 그리고 활용 사례를 소개하겠습니다.

1. Tailored

Tailored는 "특정 요구나 상황에 맞게 조정된" 이라는 뜻이에요. 본래 "재단하다"라는 뜻에서 유래한 단어로, 프로그래밍에서는 특정 도메인(domain)이나 목적에 맞춰 수정되거나 조정된 모델, 시스템, 코드 등을 설명할 때 사용됩니다.

주요 특징:

맞춤형
특정한 요구사항을 반영
유연성과 변화 가능성

예문:

"However, those techniques hit limits when using general models not tailored to specific domains and applications."
하지만, 이러한 기법들은 특정 도메인과 애플리케이션에 맞게 조정되지 않은 일반적인 모델을 사용할 때 한계에 도달한다.

"We need a tailored solution for handling high-frequency trading data."
고빈도 거래 데이터를 처리하기 위한 맞춤형 솔루션이 필요하다.

2. Dedicated

Dedicated는 "특정 목적을 위해 전용된" 또는 "오직 한 가지 용도에만 사용되는"이라는 뜻이에요. 일반적으로 프로그래밍에서 특정 기능, 리소스, 또는 프로세스를 위한 전용 시스템, 팀, 서버 등을 설명할 때 사용됩니다.

주요 특징:

특정 목적에 전적으로 헌신
다른 용도로 사용되지 않음
안정성과 효율성 강조

예문:

"This application uses a dedicated server for database operations."
이 애플리케이션은 데이터베이스 작업을 위해 전용 서버를 사용한다.

"A dedicated framework simplifies the implementation of machine learning models."
전용 프레임워크는 머신러닝 모델 구현을 단순화한다.

3. Tailored vs. Dedicated: 차이점

특징TailoredDedicated

목적	특정 요구에 맞게 조정된 솔루션	특정 용도만을 위해 전적으로 설계된 솔루션
유연성	높음 (다양한 환경에 맞게 조정 가능)	낮음 (한 가지 용도에 최적화)
사용 사례	모델 조정, 데이터 처리 알고리즘, API 변경	서버, 팀, 시스템 등 특정 기능을 전담

비유로 이해하기:

Tailored: 특정 사람의 몸에 맞춘 맞춤 정장처럼 조정 가능한 솔루션
Dedicated: 오직 특정 기능만을 수행하는 전용 기계

4. 프로그래밍에서 실제 활용

Tailored

"Tailored for performance"
성능 향상을 위해 조정된 코드나 알고리즘
"Tailored models for specific industries"
특정 산업에 맞게 최적화된 AI/ML 모델

Dedicated

"Dedicated resources for real-time processing"
실시간 처리를 위한 전용 리소스
"Dedicated environments for testing and debugging"
테스트와 디버깅을 위한 전용 환경

5. 요약 및 응용

Tailored는 프로그래밍에서 맞춤화된 유연성을 의미하고, Dedicated는 특정 기능에 헌신된 안정성을 뜻합니다. 두 표현 모두 전문적인 문맥에서 자주 등장하니, 프로그래밍 서적을 읽거나 기술 문서를 작성할 때 이 표현들을 적절히 사용하면 더 전문적이고 정확한 의사소통이 가능합니다.

다음번 코드 리뷰나 설계 문서에서 이렇게 말해볼까요?

"We need a tailored algorithm to handle this specific dataset, but it should run on a dedicated server for optimal performance."

이제 tailored와 dedicated를 프로처럼 사용할 준비가 되셨나요? 다음에도 더 유용한 표현들로 돌아올게요! Happy coding! ✨

[JavaScript 공부용] Webworker 다뤄보기

dev_roach — Wed, 20 Nov 2024 00:00:10 +0900

WebWorker?

웹 프론트 엔드 프로그래밍이나 모바일 프로그래밍을 하다보면 기존 메인 스레드로 UI 를 렌더링 하기 때문에 백그라운드에서 워커 혹은 다른 스레드를 통해 부가 작업들을 진행한다. MDN 공식문서에도 나와 있듯이 웹에서는 Web Worker 가 그 일을 한다.

알아보기

Worker 는 지정한 javascript 파일을 런타임 환경에서 실행시킬수 있다. MDN 공식문서에 따르면 Worker 를 생성하는 방법은 아래와 같다. `import.meta.url` 은 번들러에 의해 위치가 꼬일수도 있으니 넣으라고 한다.

const myWorker = new Worker(new URL("worker.js", import.meta.url));

Worker 안에서 대부분의 코드가 실행 가능하나 몇가지 목적을 지닌 코드는 실행 불가능한데 해당 코드들은 다음과 같다

직접 DOM 을 조작(manipulation) 하려는 시도를 가진 코드
Window 객체의 기본 메소드나 속성들을 사용하려는 코드

이 두가지 목적을 지닌 코드는 실행 불가능 하니 워커를 자신의 프로젝트에 사용하려고 할때 이 두 가지를 행여나 워커가 실행하려고 하지는 않는지 미리 알아두면 좋을것 같다.

데이터 주고 받는 방법

그렇다면, Worker 와 main thread 간의 통신은 어떻게 이어질까? 예를 들면 worker 에서 데이터를 fetch 해와서 가져왔는데, main thread 에서 이를 받아와 써야 하는 경우에는 어떻게 해야 할까? 이때는 message 시스템의 `postMessage` 와 `onMessage` 메소드를 통해서 데이터를 주고 받을 수 있다. 메소드 명만 보아도 비동기적으로 수행되며 Event 기반임을 대략적으로 예측할 수 있다.

코드 작성

이제 알았으니 코드로 살짝 적어보도록 하자. 예시는 대부분 MDN 에 있는 예시를 가져와서 살짝 입맛에 맞게 변경만 했다.

<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="utf-8" />
    <title>웹 워커 예시</title>
</head>

<body>

<div class="controls" tabindex="0">
    <form>
        <div>
            <label for="number1">Multiply number 1: </label>
            <input type="text" id="number1" value="0" />
        </div>
        <div>
            <label for="number2">Multiply number 2: </label>
            <input type="text" id="number2" value="0" />
        </div>
    </form>

    <p class="result">Result: 0</p>
</div>
<script src="main.js"></script>
</body>
</html>

위 코드를 보면 간단하다. 입력창이 아래와 같이 두개 존재하고, 결과값을 보여주기 위한 result 라는 식별자 클래스를 가진 p 태그 속성 하나가 존재한다. 스크립트 없이 html 만으로는 아무런 동작을 하지 않는다.

일단 단계적으로 조금씩 워커를 이용하는 것으로 마이그레이션 하기 위해서 현재 html 내에서 input(number1, number2) 값에 변화가 있을때 마다 해당 수를 더해서 Result 를 업데이트 시켜주는 자바스크립트 코드를 작성해보자.

const number1 = document.querySelector("#number1");
const number2 = document.querySelector("#number2");
const result = document.querySelector(".result");

[number1, number2].forEach((element) => {
    element.onchange = function () {
        result.textContent = String(Number(number1.value) + Number(number2.value));
    }
})

이렇게 하면 아래와 같이 입력값을 입력했을때 result dom 에 직접 수정을 가해서 입력값을 업데이트 시켜주는 형태이다. Back to the basic ㅋㅋ 정말 오랜만에 JQuery 처럼 코딩하고 있다. 여하튼, 이제 여기서 생각해봐야 할점은 다음과 같다.

만약 저 Plus 연산이 Network 혹은 File I/O 작업이라 엄청나게 오래 걸리는 작업이라면 어떻게 될까?
만약 main.js 를 돌리는 스레드가 블락킹 되서 다른 작업들을 못하게 된다면?

Worker 로의 연산 이전

그래서 우리는 불필요한 작업들을 Worker 스레드에 조금 분배시킬 수 있도록 작업할 것이다. 우리가 여기서 해야할 것은 Plus 관련된 작업을 워커로 가져간다고 해보자.

onmessage = function (event) {
    // main 에서 받는 메세지는 event 의 data 안으로 들어온다
    console.log("Received message", event.data);
    
    if (!event.data) {
        postMessage("You should send data for calculation!");
    }

    const {first, second} = event.data;
    console.log("Received Successfully", first, second);
    const result = Number(first) + Number(second);
    postMessage(result);
}

위 worker.js 스크립트는 워커 노드가 해야할 일을 적은 스크립트로 메인 스레드에서는 해당 워커를 생성(spawn) 할때 파일명을 "worker.js" 로 지정해서 spawn 해주면 된다. 여기서 몇 가지 코드만 짚고 넘어가면 좋은데, 첫번째로는 `onmessage` 속성이다. `onmessage` 는 위에서도 설명했듯이, 이벤트가 들어왔을때 어떠한 작업을 하는 일종의 이벤트 핸들러 리스너이다. 따라서 우리가 이벤트를 기다리고 있다가 받으면 하는 일들은 데이터를 더해서 다시 보내주는 일이다.

추측할 수 있겠지만 `postMessage` 는 반대로 데이터를 보내는 역할을 한다. 즉, mainThread(자신을 spawn 한 쪽으로) 로 데이터를 보내는 것이다. 따라서 우리는 연산을 마친 뒤, 워커를 소환한 mainThread 로 결과값을 보내줄 것이다.

const number1 = document.querySelector('#number1');
const number2 = document.querySelector('#number2');
const result = document.querySelector(".result")

if (window.Worker) {
    const myWorker = new Worker("./worker.js");

    [number1, number2].forEach(input => {
        input.onchange = function() {
            myWorker.postMessage({
                first: number1.value,
                second: number2.value,
            })
        }
    })

    myWorker.onmessage = function(event) {
        result.textContent = event.data;
        console.log("Message from worker node : " + event.data);
    }
}

이제 mainThread 에서 해야할 일은 input 에 변경값이 생겼을때 worker 에게 메세지를 보내고, worker 가 보내준 결과값이 도달하면 onmessage 를 통해 이벤트를 수신하여 Result 를 업데이트 해주면 된다.

위와 같이 잘 동작하는걸 확인할 수 있다~!

예시코드 링크

https://github.com/tmdgusya/web-worker-example

GitHub - tmdgusya/web-worker-example

Contribute to tmdgusya/web-worker-example development by creating an account on GitHub.

github.com