신경망에서 활성화 함수(activation function)는 매우 중요한 역할을 한다.
신경망은 기본적으로 입력 $$x$$ 에 가중치 $$W$$ 와 편향 $$b$$ 를 곱해 선형 변환을 수행한다.

$$ z = W x + b $$

만약 이 값 그대로를 다음 층으로 넘긴다면, 아무리 층을 쌓아도 결국 하나의 선형 함수와 다르지 않다.
선형 함수는 직선(또는 초평면)으로만 데이터를 나눌 수 있기 때문에 XOR 같은 비선형 패턴을 표현할 수 없다.

따라서 비선형성을 도입하는 장치, 즉 활성화 함수가 반드시 필요하다.

1. 시그모이드(Sigmoid)

시그모이드는 어떤 입력 값이 들어와도 출력을 0과 1 사이로 눌러주는 S자 곡선 함수다.
$$ \sigma(x) = \frac{1}{1+e^{-x}} $$
출력이 확률처럼 해석될 수 있기 때문에 이진 분류 문제의 출력층에서 직관적으로 사용된다. 하지만 입력 값이 너무 크거나 작을 때는 기울기가 거의 0에 가까워져 역전파가 제대로 전달되지 않는다. 이를 기울기 소실(Vanishing Gradient)이라고 부른다. 또한 출력이 0을 중심으로 대칭적이지 않아서 학습이 더딜 수 있다는 한계가 있다.

2. 하이퍼볼릭 탄젠트(Tanh)

Tanh 함수는 시그모이드와 형태가 비슷하지만 출력 범위가 -1에서 1 사이로 확장된다.
$$ \tanh(x) = \frac{e^x - e^{-x}}{e^x + e^{-x}} $$
출력이 0을 중심으로 대칭이기 때문에 시그모이드보다 학습이 좀 더 안정적이다. 그러나 값이 커지거나 작아질수록 기울기가 0으로 수렴하는 문제는 여전히 남아 있다. 따라서 기울기 소실 문제 때문에 심층 신경망에서는 잘 쓰이지 않는다.

3. 렐루(ReLU, Rectified Linear Unit)

ReLU는 지금 가장 널리 사용되는 활성화 함수다.
$$ f(x) = \max(0, x) $$
0보다 크면 입력을 그대로 통과시키고, 0 이하에서는 0을 출력한다. 계산이 단순하고 양수 구간에서 기울기가 항상 1이라 기울기 소실 문제를 크게 완화한다. 하지만 입력이 0 이하인 경우에는 기울기가 아예 0이 되어 뉴런이 학습에서 배제될 수 있다. 이 현상을 dying ReLU 문제라고 부르며, 이 문제는 뒤에 나오는 Leaky ReLU 등으로 완화할 수 있다.

4. 리키 렐루(Leaky ReLU)

Leaky ReLU는 ReLU의 변형으로, 음수 구간에서도 아주 작은 기울기를 남겨둔다.
$$ f(x) = \begin{cases} x & x > 0 \ \alpha x & x \leq 0 \end{cases} $$
이 방식은 dying ReLU 문제를 완화한다. 음수 입력에서도 조금씩 가중치가 업데이트되기 때문에 뉴런이 죽어버리는 상황을 줄여준다. 다만 이때 사용하는 (\alpha) 값은 임의적으로 정해야 하고, 최적의 값을 찾기 위해 실험이 필요하다.

5. 소프트맥스(Softmax)

Softmax는 주로 다중 분류 문제에서 출력층에 사용된다.
$$ \sigma(z_i) = \frac{e^{z_i}}{\sum_j e^{z_j}} $$
여러 개의 입력을 받아 각 클래스에 대해 0과 1 사이의 확률을 출력하며, 전체 합이 1이 된다. 그래서 각 출력 노드는 해당 클래스일 확률을 의미한다. 다만 값이 큰 쪽에 확률이 몰리는 경향이 있어서, log-sum-exp trick 같은 수치적 안정화 기법을 적용하는 경우가 많다.

활성화 함수는 언제 쓸까?

은닉층 (Hidden Layer)

선형 변환만 있으면 아무리 층을 쌓아도 전체는 하나의 선형 함수와 같다.
따라서 은닉층에는 반드시 활성화 함수를 넣어 비선형성을 주어야 한다.
여기서 선택한 함수가 학습 효율, 속도, 성능에 큰 영향을 준다.

출력층 (Output Layer)

출력층에서는 문제의 성격에 맞는 활성화 함수를 선택한다.
모든 문제에서 쓰이는 건 아니고, 목표 값의 의미에 따라 달라진다.

• 확률이 필요하다면 Sigmoid나 Softmax
• 연속적인 수치가 필요하다면 별도 활성화 없이 선형 출력

어떤 활성화 함수를 써야 할까?

1. 은닉층

• ReLU: 가장 기본이자 표준. 단순하고 빠르며 깊은 네트워크 학습에 강하다.
• Leaky ReLU / PReLU: ReLU가 죽는 문제(dying ReLU)를 완화해야 할 때 고려.
• ELU / SELU: 평균을 0 근처로 유지하고 싶을 때 사용.
• GELU / Swish: 최근 트랜스포머 등에서 자주 쓰이는 부드러운 ReLU 대체제.

기본적으로는 ReLU부터 시작하고, 문제가 생기면 변형 함수들을 고려한다.

2. 출력층

• 이진 분류 → Sigmoid
  출력이 0~1로 제한되어 “양성 클래스일 확률”처럼 해석할 수 있다.
  손실 함수로 Binary Cross-Entropy를 함께 사용한다.

• 다중 분류 → Softmax
  각 클래스에 대해 확률 분포를 만들어준다.
  손실 함수는 Cross-Entropy를 사용한다.

• 회귀 문제 → 없음 (Linear)
  예측해야 할 값이 확률이 아니라 실제 수치이기 때문이다.
  출력층은 그대로 실수 값을 출력하며, 보통 $$f(x) = x$$ 형태로 표현된다.

즉

• 은닉층에는 비선형성 확보를 위해 반드시 활성화 함수를 넣어야 한다.
• 은닉층 기본값은 ReLU, 필요시 변형(ReLU 계열, ELU, GELU 등)을 쓴다.
• 출력층은 문제의 성격에 따라 다르다.
  • 이진 분류 → Sigmoid
  • 다중 분류 → Softmax
  • 회귀 → 없음

1. 신경망의 학습

신경망은 기본적으로 입력 → 여러 개의 은닉층 → 출력 구조를 가지고 있다.
여기서 중요한 건 신경망이 스스로 정답을 맞히기 위해 가중치(W)와 편향(b) 을 조금씩 조정한다는 점이다.

즉, 학습이란 결국

• 현재 예측이 정답과 얼마나 다른지 계산하고
• 그 차이를 줄이는 방향으로 W, b를 수정하는 과정

이라고 할 수 있다.

2. 순전파 (Forward Propagation)

먼저 데이터를 넣어 결과(예측값)를 계산한다. 이를 순전파라고 한다.

예를 들어, 입력 데이터 x가 신경망을 통과하면서 다음과 같은 계산이 일어난다.

• z1 = W1*x + b1
• h1 = f(z1)
• z2 = W2*h1 + b2
• h2 = f(z2)
• …
• y_hat = f(WL*h(L-1) + bL)

여기서

• W, b: 우리가 학습시켜야 할 파라미터
• f(): 활성화 함수 (예: ReLU, Sigmoid 등)
• y_hat: 신경망이 예측한 값

즉, 순전파는 입력을 넣었을 때 신경망이 출력값을 계산하는 과정이다.

3. 손실 함수 (Loss Function)

신경망이 출력한 예측값 y_hat이 실제 정답 y와 얼마나 다른지 계산하는 함수를 손실 함수(loss function) 라고 한다.

예를 들어, 평균제곱오차(MSE) 는 다음과 같다.

• L = (1/2) * (y - y_hat)^2

여기서 L은 오차(loss)를 의미한다.
L이 클수록 예측이 많이 틀린 것이고, L이 작을수록 정답에 가깝다는 뜻이다.

4. 역전파 (Backpropagation)

손실 L을 줄이려면 가중치 W와 편향 b를 어떻게 바꿔야 할까?

이를 위해 우리는 L을 W와 b에 대해 미분(gradient) 한다.
즉, ∂L/∂W, ∂L/∂b를 구해야 한다.

하지만 신경망은 여러 층으로 쌓여 있기 때문에 직접 미분하기가 복잡하다.
여기서 등장하는 것이 연쇄 법칙(Chain Rule) 이다.

예를 들어, 출력층의 가중치 W2에 대한 기울기는 다음과 같이 계산할 수 있다.

• ∂L/∂W2 = ∂L/∂y_hat * ∂y_hat/∂z2 * ∂z2/∂W2

즉, 오차가 출력에서부터 역으로 전파되면서 각 층의 W, b에 대해 얼마나 손실에 기여했는지를 알려준다.

이 과정을 거치면 각 층별로 "얼마나 잘못했는지" 알 수 있게 된다.
그리고 그 정보를 바탕으로 파라미터를 수정한다.
이 전체 과정이 바로 역전파(Backpropagation) 이다.

5. 파라미터 업데이트

기울기를 구했다면 이제 파라미터를 업데이트한다.
가장 기본적인 방법은 경사 하강법(Gradient Descent) 이다.

• W := W - α * ∂L/∂W
• b := b - α * ∂L/∂b

여기서 α 는 학습률(learning rate)이라고 하며, 한 번에 얼마나 크게 이동할지를 정한다.
학습률이 너무 크면 발산할 수 있고, 너무 작으면 학습이 느려진다.

6. 전체 학습 과정 요약

1. 입력을 받아 순전파 → 예측값 계산
2. 예측값과 실제 정답을 비교 → 손실 계산
3. 손실을 바탕으로 역전파 → 각 파라미터의 기울기 계산
4. 기울기를 이용해 경사 하강법으로 W, b 업데이트
5. 이 과정을 여러 번(epoch) 반복

결국 신경망은 점점 더 정답에 가까운 출력을 내도록 학습된다.
즉, 역전파는 신경망 학습을 가능하게 해주는 핵심 알고리즘이다.

퍼셉트론은 다수의 입력 신호를 받아 하나의 출력 신호를 내는 구조다.
즉, 입력 → 연산(가중치, 편향, 활성화 함수) → 출력 시스템이라고 할 수 있다. 신호가 흐를 때는 1, 신호가 흐르지 않을 때는 0으로 간주한다.

가중치와 편향

퍼셉트론의 수식은 다음과 같다.

$$ y = f\left(\sum_{i=1}^n w_i x_i + b \right) $$

• $x_i$: 입력 값
• $w_i$: 가중치 (weight)
• $b$: 편향 (bias)
• $f(\cdot)$: 활성화 함수 (activation function)

즉, 입력과 가중치의 가중합(weighted sum) 에 편향을 더하고,
그 결과를 활성화 함수에 통과시켜 출력 $y$를 얻는다.

퍼셉트론의 한계

퍼셉트론이 Unit Step Function을 활성화 함수로 사용할 경우,
선형적으로 구분 가능한 문제만 풀 수 있다.

예: AND, OR 게이트는 가능하지만 XOR 문제는 풀 수 없다.

다층 퍼셉트론 (Multi-Layer Perceptron, MLP)

퍼셉트론을 여러 층으로 쌓으면 다층 퍼셉트론(MLP) 이 된다.
MLP는 행렬 곱 → 편향 더하기 → 활성화 함수 적용의 반복이다.

수식으로 표현하면,

$$ h^{(1)} = f(W^{(1)} x + b^{(1)}) $$

$$ h^{(2)} = f(W^{(2)} h^{(1)} + b^{(2)}) $$

...

$$ \hat{y} = f(W^{(L)} h^{(L-1)} + b^{(L)}) $$

• $W^{(l)}$: $l$번째 층의 가중치 행렬
• $b^{(l)}$: $l$번째 층의 편향 벡터
• $f$: 활성화 함수 (ReLU, Sigmoid, Tanh 등)
• $h^{(l)}$: $l$번째 은닉층(hidden layer)의 출력

왜 비선형 활성화 함수가 필요한가?

만약 모든 층에서 $f(x)$가 선형 함수라면?

$$ h^{(1)} = W^{(1)} x + b^{(1)} $$

$$ h^{(2)} = W^{(2)} h^{(1)} + b^{(2)} = W^{(2)} (W^{(1)} x + b^{(1)}) + b^{(2)} $$

이를 정리하면 결국 하나의 선형 변환이 된다.

$$ h^{(2)} = (W^{(2)} W^{(1)}) x + (W^{(2)} b^{(1)} + b^{(2)}) $$

즉, 선형 활성화 함수만 쓰면 아무리 층을 깊게 쌓아도 결국은 FC Layer 한 층과 동일한 표현력밖에 얻지 못한다.

따라서 비선형 활성화 함수(non-linear activation) 가 꼭 필요하다.

• Sigmoid, Tanh, ReLU 같은 함수들이 이를 가능하게 해준다.
• 선형 → 비선형 → 선형 → 비선형 … 구조를 쌓으면
  훨씬 복잡하고 다양한 함수를 근사할 수 있다.

즉

• 퍼셉트론: $y = f(\sum w_i x_i + b)$
• 퍼셉트론을 여러 층으로 쌓으면 MLP
• 비선형 활성화 함수를 넣어야만 깊은 신경망의 표현력이 살아난다

딥러닝 모델을 학습시킬 때는 데이터를 어떻게 나눠 쓰느냐가 성능에 큰 영향을 준다.
처음부터 끝까지 똑같은 데이터로만 학습과 평가를 하면 모델이 “암기”만 하게 되고, 실제 새로운 데이터를 만나면 제대로 동작하지 않을 수 있다.

그래서 데이터셋은 보통 Training / Validation / Test 세 가지로 나눈다.

Training vs. Validation vs. Test

• Training data (훈련 데이터)
  모델의 파라미터(가중치, 편향 등)를 학습하는 데 사용된다.
  쉽게 말해 “연습 문제”다.

• Validation data (검증 데이터)
  학습 중간중간 모델의 성능을 확인하고, 하이퍼파라미터를 조정하는 데 사용된다. 시험에 대비한 “모의고사 문제” 역할이다. → Gradient 계산과 파라미터 업데이트에는 참여하지 않는다.

• Test data (테스트 데이터)
  학습이 끝난 최종 모델이 새로운 데이터에 대해 얼마나 잘 작동하는지 평가하는 데 사용된다. 즉, 진짜 “수능 문제” 같은 역할이다. → Training에 포함되면 안 된다! (실전 적합성을 확인해야 하기 때문)

왜 Validation이 필요한가?

Training 데이터만 사용하면 언제 학습을 멈춰야 하는지 판단하기 어렵다.
너무 오래 학습하면 Training 성능은 좋아지지만, 새로운 데이터에서는 오히려 성능이 떨어지는 오버피팅(overfitting) 문제가 발생한다.

Validation 데이터는 이럴 때 학습이 과한지(early stopping 필요 여부)를 알려주는 지표가 된다.

K-Fold Cross Validation

데이터가 많다면 Training과 Validation을 넉넉하게 나눌 수 있다.
하지만 데이터가 적다면 Validation에 쓰는 데이터가 아까울 수 있다.

이럴 때 사용하는 방법이 K-Fold 교차 검증(Cross Validation) 이다.

위 그림에서 K = 5.

1. Training 데이터를 K등분으로 나눈다.
2. 그중 1개는 Validation으로, 나머지 K-1개는 Training으로 사용한다.
3. 이 과정을 K번 반복하면서 매번 다른 조합으로 Validation을 만든다.
4. 최종적으로 K개의 Validation 성능을 평균 내어 모델의 일반화 성능을 평가한다.

→ 이렇게 하면 “편향된 Validation” 문제를 줄일 수 있다.
→ 하이퍼파라미터 튜닝에도 활용 가능하다.
→ 경우에 따라 학습된 K개의 모델을 앙상블(majority vote 등)로 합치기도 한다.

즉

• Training / Validation / Test 데이터는 각각 연습, 모의고사, 수능 같은 역할을 한다.
• Validation 데이터는 오버피팅을 방지하고 학습 중 모델 성능을 조율하는 데 필요하다.
• 데이터가 적을 때는 K-Fold Cross Validation으로 검증 안정성을 높일 수 있다.

딥러닝 모델을 학습시킬 때 가장 중요한 과정 중 하나는 손실 함수(Loss Function)를 최소화하는 것이다.
모델이 예측한 값과 실제 정답이 다르면 손실이 발생하는데, 이 손실을 줄이려면 모델 파라미터(가중치, 편향 등)를 잘 조정해야 한다.

그럼 어떻게 하면 파라미터를 조금씩 조정해 최적의 값을 찾을 수 있을까?
바로 최적화 알고리즘(Optimization Algorithm) 이 그 역할을 한다.

Gradient Descent

Gradient Descent 원리

최적화 알고리즘의 출발점은 경사 하강법(Gradient Descent) 이다.
아이디어는 아주 단순하다.

• 일단 가중치와 편향을 아무렇게나 초기화한다.
• 현재 위치에서 손실이 얼마나 되는지 확인한다.
• 손실을 줄이려면 어디로 가야 할까?

여기서 그라디언트(Gradient) 가 등장하는데, 그라디언트는 손실 함수가 가장 빠르게 증가하는 방향을 알려준다.
그렇다면 손실을 줄이려면? 반대 방향으로 가면 된다.

이때 이동하는 보폭을 learning rate(학습률, α) 라고 부른다.
너무 크게 가면 발산할 수 있고, 너무 작으면 학습이 너무 느려진다.

Gradient Descent 기본 수식

$$ \theta := \theta - \alpha \nabla_\theta L(\theta) $$

• $\theta$: 모델의 파라미터(가중치, 편향 등)
• $L(\theta)$: 손실 함수 (loss function)
• $\nabla_\theta L(\theta)$: 파라미터에 대한 손실 함수의 기울기(gradient)
• $\alpha$: 학습률(learning rate)

Gradient Descent 종류

1. Gradient Descent (경사 하강법, GD)
   모든 데이터를 사용해 기울기를 계산하고, 그 방향으로 파라미터를 한 번씩 업데이트하는 방식이다. 안정적이지만 데이터가 많을수록 계산이 느리고, 지역 최적해(local minimum)에 갇히기 쉽다.

2. Stochastic Gradient Descent (확률적 경사 하강법, SGD)
   매번 데이터를 하나만 뽑아서 그라디언트를 계산하고 파라미터를 업데이트한다. 속도는 빠르지만, 매번 방향이 불안정해서 진동이 크다.
   대신 local minimum을 탈출할 기회가 있다는 장점도 있다. (늘 global minimum을 찾는다는 것은 아님!

3. Mini-batch SGD (미니배치 경사 하강법)
   SGD는 데이터를 하나씩만 보니까 너무 성급하게 방향을 결정한다는 단점을 보완하기 위한 방법이다. 이는 전체 데이터 중 일부(배치)를 뽑아 기울기를 계산한다.
   GPU 병렬 연산 덕분에 빠르고, 안정성도 적당히 유지된다.
   그래서 딥러닝에서는 사실상 표준처럼 사용된다.

발전된 최적화 알고리즘들

연구가 발전하면서 경사 하강법을 더 효율적으로 만들려는 시도가 이어졌다.
대표적으로 다음과 같은 알고리즘들이 있다.

• Momentum
  매번 기울기를 그대로 따르지 않고, 이전 업데이트 방향을 조금 더 반영한다.
  관성을 가진 것처럼 움직여서 진동을 줄이고 빠르게 수렴한다.

• RMSProp (Root Mean Square Propagation)
  파라미터마다 다른 학습률을 적용한다.
  가파른 방향은 조심스럽게, 완만한 방향은 과감하게 이동한다.

• Adam (Adaptive Moment Estimation)
  Momentum(1차 모멘트)과 RMSProp(2차 모멘트, 기울기 제곱 평균)을 합친 알고리즘이다.
  파라미터마다 학습률을 다르게 적용하면서도 진동을 줄여 안정적으로 학습된다.
  현재 가장 널리 쓰이는 최적화 알고리즘이다.

• AdamW
  Adam에 Weight Decay(가중치 감소) 를 명시적으로 적용한 버전이다.
  정규화 효과가 커져서 과적합을 방지하는 데 도움이 된다.
  최신 딥러닝 모델에서는 Adam보다 AdamW를 더 많이 쓴다.

하이퍼파라미터 vs. 파라미터

최적화 알고리즘에는 사람이 직접 정해줘야 하는 값들이 있다.
이를 하이퍼파라미터(hyperparameter) 라고 부른다.

대표적인 예시:

• Epoch: 전체 데이터를 몇 번 반복할지
• Batch size: 한 번에 몇 개 데이터를 볼지
• Learning rate: 한 번 이동할 때 보폭 크기

반면, 모델이 스스로 학습하는 값들은 파라미터(parameter) 라고 부른다.
예를 들어 가중치(weight)와 편향(bias)는 파라미터이고, epoch나 learning rate는 하이퍼파라미터다.

하이퍼파라미터 예시:

• 학습 관련: epoch, batch size, learning rate, initial weight
• 모델 구조: layer 수, node 수, activation function
• 학습 목표: loss function 선택, optimization algorithm 선택

즉

• 최적화 알고리즘은 손실을 줄이기 위해 파라미터를 조정하는 방법이다.
• Gradient Descent는 그 기본 아이디어이고, 배치/확률적/미니배치 방식으로 나뉜다.
• Momentum, RMSProp, Adam, AdamW 같은 발전된 알고리즘은 더 빠르고 안정적으로 학습을 돕는다.
• 학습 과정에서는 epoch, batch size, learning rate 같은 하이퍼파라미터를 잘 설정하는 것이 중요하다.

정리하자면, 딥러닝 모델의 성능은 단순히 모델 구조만으로 결정되지 않는다.
어떤 최적화 알고리즘을 쓰느냐, 그리고 하이퍼파라미터를 어떻게 조율하느냐에 따라 같은 모델도 전혀 다른 결과를 낼 수 있다.

우리가 어떤 현상에서 입력과 출력이 어떻게 연결되는지 알고 싶을 때가 많다.
예를 들어 유튜브 영상의 조회수가 늘면 수익이 얼마나 늘어나는지 궁금하다.
선형 회귀는 이 관계를 하나의 직선으로 설명하려는 방법이다. 식으로 쓰면 y = ax + b다.

• a: 기울기(가중치, weight) → 조회수가 늘어날 때 수익이 얼마나 변하는지
• b: 절편(바이어스, bias) → 조회수가 0일 때 발생하는 기본 수익

즉, 선형 회귀는 데이터를 가장 잘 설명하는 직선을 찾는 방법이다.
이때 “가장 잘”의 기준은 손실 함수(loss function)다. 예측값 ŷ와 실제값 y의 차이를 계산한다.

손실 함수

• MAE (Mean Absolute Error): 오차의 절댓값 평균 → 이상치에 덜 민감하다.
• MSE (Mean Squared Error): 오차의 제곱 평균 → 큰 오차에 더 큰 벌점을 준다.

손실을 최소화하는 a, b가 우리가 찾는 최적의 파라미터다.

왜 경사 하강법인가

파라미터가 두 개일 때는 눈으로 직선을 그려볼 수도 있다.
하지만 실제 문제는 파라미터가 수백만, 수십억 개다.
모두 바꿔보며 비교하는 것은 불가능하다.

그래서 경사 하강법(Gradient Descent)을 쓴다.
아이디어는 간단하다. 현재 위치에서 손실이 가장 빨리 줄어드는 방향(그라디언트의 반대 방향)으로 조금씩 이동하는 것인데, 이 과정을 반복하면 손실이 점점 줄어든다.

로지스틱 회귀(Logistic Regression)

로지스틱 회귀는 분류 문제에 사용하는 모델이다.
출력이 “예/아니오”, “스팸/정상”처럼 0과 1로 갈리는 문제에서 주로 쓴다.

선형 결합 z = w·x + b를 만든 뒤, 이를 시그모이드(sigmoid) 함수에 통과시켜 확률을 얻는다.
시그모이드 함수는 입력이 아무리 커도 0과 1 사이로 눌러준다.
그래서 “양성일 확률이 0.87이다”처럼 해석이 가능하다.

• 확률 > 0.5 → 1(긍정 클래스)
• 확률 ≤ 0.5 → 0(부정 클래스)

여기서 시그모이드 입력값 z를 로짓(logit)이라고 부른다.

손실과 학습

로지스틱 회귀는 이진 교차 엔트로피(Binary Cross Entropy)를 손실 함수로 쓴다.
예측이 정답과 다를수록, 특히 확신을 가지고 틀릴수록 손실이 크게 증가한다.

파라미터 학습 과정은 선형 회귀와 같다.
손실을 파라미터에 대해 편미분해 그라디언트를 구하고, 그 반대 방향으로 이동한다.
최적화 알고리즘으로는 Gradient Descent, SGD, Adam 등을 많이 쓴다.

두 모델의 차이 요약

• 문제 성격

  • 선형 회귀: 연속값 예측 (매출, 온도, 수익 등)
  • 로지스틱 회귀: 이진 분류 (스팸 여부, 질병 유무 등)

• 출력 해석

  • 선형 회귀: 실수값을 그대로 출력한다.
  • 로지스틱 회귀: 0~1 사이의 확률을 출력하고, 기준값으로 0/1을 결정한다.

• 손실 함수

  • 선형 회귀: MSE(주로 사용), MAE(이상치 대응)
  • 로지스틱 회귀: Binary Cross Entropy

• 학습 방식

  • 둘 다 손실을 줄이는 방향으로 파라미터를 업데이트한다.
  • 핵심은 그라디언트와 경사 하강법이다.

딥러닝에서 우리가 흔히 부르는 인공 신경망(ANN, Artificial Neural Network)은 가장 작은 단위부터 출발한다.
그 단위가 바로 인공 신경(Artificial Neuron)이다.

인공 신경은 사람 뇌 속의 뉴런(Neuron)을 모방한 구조이며, 노드(Node)와 이를 잇는 엣지(Edge, connection)로 이루어진다.
흐름은 다음과 같다.

1. 입력값이 들어온다.
2. 입력값은 웨이트(가중치, weight)와 곱해진다.
3. 바이어스(편향, bias)를 더해준다.
4. 활성화 함수(Activation function)를 통과한다.
5. 최종 출력값이 나온다.

즉, 인공 신경은 곱하기 → 더하기 → 비선형 변환을 거쳐 출력을 내는 단순한 함수다.

활성화 함수에는 여러 종류가 있지만, 가장 단순한 형태는 계단 함수(Unit Step Function)다.
입력이 어떤 기준을 넘으면 1, 아니면 0을 내는 방식이다.

인공 신경망 (Artificial Neural Network, ANN)

인공 신경 하나만으로는 복잡한 문제를 풀 수 없다.
그래서 여러 개의 인공 신경을 층층이 쌓아 올려 만든 구조가 바로 인공 신경망이다.

• 각 층(layer)에서는 가중치 곱하기 → 바이어스 더하기 → 활성화 함수 적용이 반복된다.
• 모든 노드가 서로 연결된 층은 완전 연결 층(Fully Connected Layer, FC Layer)이라고 부른다.

우리가 흔히 딥러닝에서 말하는 "네트워크"는 바로 이 인공 신경망의 구조를 뜻한다.

인공 신경망은 결국 '함수'다

그렇다면 이렇게 여러 층을 쌓은 인공 신경망은 어떤 역할을 할까?
바로 입력을 받아 출력을 내는 하나의 거대한 함수라고 볼 수 있다.

학습 과정은 이 함수가 올바른 출력을 내도록 웨이트와 바이어스를 조정하는 과정이다.
즉, 많은 데이터를 넣어주고

• “이 입력에는 이런 출력이 나와야 해”라는 예시를 알려주면서
• 그 차이를 줄이는 방향으로 파라미터를 업데이트한다.

그 결과, 새로운 데이터가 들어와도 적절한 출력을 낼 수 있게 된다.
결국 AI는 입력과 출력을 매핑(mapping)하는 함수를 학습한다고 말할 수 있다.

간단한 예시

가장 단순한 1차 함수 y = ax + b도 인공 신경망으로 표현할 수 있다.

• 입력: x
• 가중치(weight): a
• 바이어스(bias): b
• 출력: y

즉, 우리가 수학 시간에 배운 1차 함수조차도 인공 신경의 구조로 해석할 수 있다.
이런 단순한 블록을 쌓고 확장해 나간 것이 오늘날의 인공 신경망이다.

지도학습은 정답(label)이 있는 데이터를 기반으로 입력-출력 간의 관계를 학습한다. 미리 사람이 입력에 대한 정답을 미리 만들어놓은 것이다. 이를 통해 데이터를 보고 ‘정답’을 맞히는 방식으로 학습한다.

주요 알고리즘: 의사결정나무, 랜덤포레스트, SVM, 로지스틱 회귀, 선형 회귀 등

2. 비지도 학습 (Unsupervised Learning)

비지도 학습은 정답(label)이 없는 데이터에서 유의미한 패턴, 구조, 그룹을 발견하는 것이다. 데이터 간의 유사성을 기반으로 자동으로 분류하거나 압축하는 데 사용된다.

3. 자기지도 학습 (Self-Supervised Learning)

자기지도 학습은 지도학습과 비지도학습의 중간 형태이다. 비지도처럼 정답(label)이 없는 원천 데이터에서 학습하지만, 지도처럼 가짜 라벨을 스스로 생성하여 학습한다. 즉, 사람이 직접 라벨링하지 않아도, 데이터의 일부를 숨기고 나머지 데이터를 활용하여 '스스로 문제를 내고 맞히는 방식'으로 학습하는 것이 핵심이다. GPT, BERT와 같은 모델 역시 자기지도학습을 통해 만들어진 것이다!

4. 강화 학습 (Reinforcement Learning)

강화학습은 보상을 최대화하며 정책을 학습하는 것이다. 이는 꼭 사람이 학습하는 것과 비슷한 방식인데, 어떤 행동을 했을 때 상대방이 웃고 있으면 계속 그 행동을 이어가고, 찡그리는 표정을 지으면 싫은 행동임을 인식하고 그 행동을 하지 않는 방식으로 학습해왔다.

바둑을 예시로 들어서 강화학습의 주요 용어들에 대해 살펴보면 다음과 같다.

• Agent: 게임 속에서 직접 행동하는 주체. ex) 흑돌
• Action: 에이전트가 할 수 있는 선택. ex) 수
• Reward: 행동의 결과로 받는 점수. ex) 승점
• Environment: 에이전트와 상호작용하는 세상 전체. ex) 바둑판+상대방+규칙+심판
• State: 현재 상황. ex) 돌이 어떻게 놓여 있는가.
• Q-function: 이 상태에서 이 행동을 하면 얼마나 좋은가? ex) 지금 이 수를 두면 이길 확률
• Episode: 여러 번의 에피소드를 겪으면서 점점 강화됨. ex) 게임 한 판
• Q-learning: 이 상황에선 이 수가 이득이구나. 하며 점차 업데이트 하는 방식. ex) Q-function을 배우는 방법
• Exploration: 이미 아는 수만 두면 발전이 없으므로, 새로운 수를 시도해보는 것. ex) 새로운 길을 찾게 해줌.
• Discount factor: 좋고 나쁨을 얘기해 줌.

주요 예시:

• 알파고(바둑 AI)
• 로봇 제어
• 게임 플레이 에이전트

다운로드 및 설치

• 공식 웹사이트 접속: https://git-scm.com/
• 운영체제에 맞는 버전 선택 후 설치
• 설치 중 특별한 설정 없이 기본 옵션으로 진행해도 무방

설치 확인

설치 후 터미널(Git Bash 등)에서 아래 명령어 입력:

git --version

정상적으로 설치되었다면 버전 정보 출력

2. Git 명령어 사용 환경

Git 명령어는 다양한 환경에서 사용 가능 운영체제나 개발 환경에 따라 적합한 방법을 선택하면 됨

Git을 처음 사용하는 경우, Git Bash 또는 VS Code 터미널 사용을 추천!

3. 기본 리눅스 명령어 (Git Bash 기준)

Git은 CLI 기반 도구이므로 기본적인 경로 명령어를 알아야 한다.

• cd: 디렉토리 이동
• ls: 현재 폴더 내 파일/디렉토리 목록 출력
• shift + insert: 붙여넣기
• tab: 자동완성

4. Git 기본 명령어 실습 흐름

Git은 일반적으로 다음 순서로 사용된다:

1. 작업 디렉토리 설정
2. 저장소 초기화
3. 사용자 정보 등록
4. 원격 저장소 연결
5. 변경 사항 추가 → 커밋 → 푸시

1) 작업 디렉토리 이동

cd Desktop
cd 폴더명

2) Git 저장소 초기화

git init

현재 디렉토리를 Git 저장소로 초기화함. 이후 Git 명령어 사용 가능.

3) 사용자 정보 등록

git config --global user.name "사용자 이름"
git config --global user.email "사용자 이메일"

--global 옵션은 최초 1회만 설정하면 모든 프로젝트에 적용됨.

4) 원격 저장소 연결 (GitHub 등)

1. GitHub에서 새 레포지토리 생성

2. 주소 복사:
   예시
   https://github.com/사용자명/레포지토리명.git

3. 연결 명령어:

   git remote add origin 복사한_주소

5) 파일 추가 및 커밋

변경 파일 스테이지에 추가

git add .

또는 특정 파일만:

git add 파일명

커밋

git commit -m "커밋 메시지"

6) GitHub에 푸시

git push origin master

※ 브랜치 이름이 main인 경우:

git push origin main

7) GitHub에서 변경사항 받아오기

git pull origin master

5. 추가 명령어

사용자 정보 확인

git config --global --list

원격 저장소 확인

git remote -v

원격 저장소 삭제

git remote rm origin

로컬 Git 저장소 삭제 (주의!)

rm -rf .git

해당 폴더 내 Git 기록 완전 삭제. 이후 git init부터 다시 진행 필요.

개발을 시작하면 가장 먼저 접하게 되는 개념 중 하나가 Git과 GitHub이다.
이름은 비슷하지만 두 도구는 역할이 명확히 다르다.

Git

Git은 로컬에서 사용하는 분산 버전 관리 도구이다.
코드 변경 이력을 기록하고, 이전 상태로 되돌리거나 브랜치를 만들어 실험할 수 있도록 도와준다.
개인 개발은 물론 협업에서도 필수적인 도구이다.

주요 기능

• 코드 변경 사항 추적 및 복원
• 브랜치를 활용한 실험 및 개발
• 병합(Merge)과 충돌 해결을 통한 협업

모든 Git 정보는 로컬 저장소에 .git 폴더로 저장된다.

GitHub

GitHub는 Git 저장소를 온라인에 저장하고 공유할 수 있게 해주는 플랫폼이다.
Git으로 관리된 프로젝트를 업로드하여 백업하고, 다른 사람과 협업할 수 있는 환경을 제공한다.

주요 기능

• 원격 저장소 관리 및 백업
• Pull Request를 통한 코드 리뷰
• 이슈 트래킹, 협업, 오픈소스 기여 등 지원

GitHub는 Git을 기반으로 하며, 명령어는 Git과 동일하게 사용된다.

local repository vs remote repository

Git은 로컬 저장소와 원격 저장소를 함께 사용한다.

• 로컬 저장소(local): 개발자가 직접 작업하는 컴퓨터 내 Git 저장소
• 원격 저장소(remote): GitHub와 같은 온라인 플랫폼에 위치한 저장소

동기화 명령어

• git push : 로컬 → 원격 저장소로 변경 사항 업로드
• git pull : 원격 → 로컬 저장소로 변경 사항 다운로드

GitHub는 이러한 push와 pull을 통해 로컬 저장소와 원격 저장소를 연결해주는 역할을 한다.

Git과 GitHub 비교

Flutter를 공부하다가 iOS에서 돌아가는 어플을 만들기 위해서는 맥북이 필수적으로 필요하다는 이야기를 들어서 궁금했던 내용들을 정리해보려고 한다! 결론부터 말하자면, iOS는 Mac에서만 개발 가능하다.

🎯 목표

"안드로이드 + iOS 둘 다 돌아가는 어플 만들고 싶다!"

요즘은 크로스 플랫폼 프레임워크인 Flutter 덕분에,
한 번의 코드 작성으로 Android와 iOS 앱을 동시에 개발할 수 있는 시대다.
하지만 개발 환경에 따라 몇 가지 제약이 생긴다.

Windows vs Mac 노트북 비교

Mac에서만 iOS 개발할 수 있는 이유

• iOS 앱을 빌드하고 실행하기 위해서는 애플의 공식 개발 도구인 Xcode가 필요하다.
• 하지만 이 Xcode는 오직 macOS에서만 설치 및 실행 가능하다.
• Windows에서 Flutter로 iOS 코드를 작성하는 건 가능하지만, 빌드(실행)하거나 App Store에 배포하는 건 불가능하다.

요약표

Flutter로 iOS 앱까지 만들고 싶다면
iOS 빌드용 Mac 환경은 반드시 필요하다.

추가 팁

• Flutter Web이나 Desktop 앱은 Windows에서도 문제 없이 가능하다.
• iOS 개발만 목표라면 Swift + Xcode + Mac 조합이 더 효율적이다.
• Flutter는 Firebase, Supabase 등과 잘 어울린다. → 백엔드 걱정도 줄여준다!

JavaScript는 HTML에서 다음 세 가지 방식으로 선언할 수 있다.

17-1. 내부 방식 (Internal JavaScript)

<script>
  alert("내부 방식으로 작성된 JavaScript입니다.");
</script>

• <script> 태그 내부에 코드를 작성
• 보통 <body> 하단에 위치해 HTML 로딩 이후 실행되도록 함

17-2. 인라인 방식 (Inline JavaScript)

<button onclick="alert('인라인 방식')">클릭</button>

• HTML 태그의 속성으로 JS 코드 직접 삽입
• 유지보수가 어렵고 추천되지 않음

17-3. 외부 방식 (External JavaScript)

<script src="main.js"></script>

• JS 코드를 별도 .js 파일에 작성하고 링크함
• 가장 실무적인 방식 (HTML, CSS, JS 분리)

주의사항

• <script>는 HTML 요소보다 뒤쪽에 위치해야 DOM 요소를 정상 인식함
• <head>에 넣을 경우 DOMContentLoaded 이벤트나 $(document).ready() 필요

18. 제이쿼리(jQuery)

개요

• JS의 문법을 간결하고 브라우저 호환성 있게 사용할 수 있도록 설계
• DOM 조작, 이벤트 처리, Ajax 등 간편하게 처리 가능

기본 문법

$(선택자).동작함수(매개변수);

• 접근: $("#id"), $(".class")
• 동작: .html(), .text(), .css()
• 이벤트: .on("click", function() {...})

예제

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<script>
  $(document).ready(function() {
    $("#btn").on("click", function() {
      $("#text").text("버튼 클릭됨!");
    });
  });
</script>

<button id="btn">클릭</button>
<p id="text">기본 텍스트</p>

19. 동기 vs 비동기 통신

19-1. 동기(Synchronous)

• 요청 → 응답을 받을 때까지 대기
• 흐름이 차단됨

alert("닫기 전까지 다음 코드 실행 안 됨");
console.log("이건 나중에 출력됨");

19-2. 비동기(Asynchronous)

• 요청 → 기다리지 않고 다음 코드 즉시 실행
• 흐름을 멈추지 않음

setTimeout(() => {
  console.log("3초 후 출력");
}, 3000);
console.log("이건 먼저 실행됨");

동기 vs 비동기 비교

JSON 예시

{
  "name": "Emma",
  "age": 25,
  "skills": ["JavaScript", "Python"]
}

let data = {
  name: "Emma",
  age: 25,
  skills: ["JavaScript", "Python"]
};

console.log(data.skills[1]); // "Python"

fetch 예제 (비동기 통신)

fetch("https://api.example.com/data")
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error("에러 발생:", err));

20. 동적 요소 생성

HTML 요소를 JS로 동적으로 생성하는 방법 정리

핵심 메서드

텍스트 포함 요소 생성

let span = document.createElement("span");
let text = document.createTextNode("생성된 텍스트입니다.");
span.appendChild(text);
document.getElementById("container").appendChild(span);

이미지 생성 예시

let img = document.createElement("img");
let src = document.createAttribute("src");
src.value = "https://image-url.com/example.png";
img.setAttributeNode(src);
document.getElementById("container").appendChild(img);

댓글 동적 생성 실습 예시

• input에 댓글 입력
• 등록 버튼 클릭 or Enter 시 li 생성
• 삭제 버튼도 함께 생성

→ 실습 전체 HTML은 마크다운 상단 참고

• JavaScript를 통해 HTML 요소의 스타일을 동적으로 변경할 수 있다.
• 이는 프론트엔드 인터랙션의 핵심 요소로, 사용자 경험을 향상시키는 데 중요한 역할을 한다.

스타일 제어 방법

• CSS 스타일을 JavaScript로 수정할 수 있다.
• 방식: 요소.style.속성명 = "값" 또는 요소.style.cssText = "속성: 값; ...".
• 인라인 방식으로 적용되며 유지보수는 어렵지만 빠르게 적용 가능하다.

예제: 버튼 클릭 시 텍스트 색상과 크기 변경

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>스타일 제어</title>
</head>
<body>
  <span id="text">나의 스타일을 변경해줘!!</span>
  <button id="btn">스타일 변경하기!</button>

  <script>
    const change = () => {
      document.getElementById("text").style.cssText = "color: pink; font-size: 50px";
    };

    document.getElementById("btn").addEventListener("click", change);
  </script>
</body>
</html>

실습 포인트

• 속성 접근은 .style.속성명 또는 .style.cssText
• 단순 스타일 제어 시는 인라인 방식도 유효
• 유지보수 관점에서는 클래스 제어를 추천 (classList.add/remove)

16. 이미지 다루기 (Image)

HTML에서 이미지를 삽입하거나 JavaScript로 동적으로 제어할 수 있다.

기본 이미지 삽입 (HTML 태그)

<img src="이미지경로.jpg" alt="대체텍스트" width="300">

예시:

<img src="https://via.placeholder.com/300x200" alt="예시 이미지" width="300">

JS로 이미지 속성 변경

<img id="myImg" src="cat.jpg" alt="고양이" width="200">
<button onclick="changeImage()">이미지 변경</button>

<script>
  function changeImage() {
    document.getElementById("myImg").src = "dog.jpg";
  }
</script>

버튼 클릭 시 이미지가 변경된다 (src 속성 수정).

JS로 이미지 생성 및 삽입

<button onclick="addImage()">이미지 추가</button>
<div id="container"></div>

<script>
  function addImage() {
    const img = document.createElement("img");
    img.src = "https://via.placeholder.com/150";
    img.alt = "동적으로 생성된 이미지";
    img.width = 150;

    document.getElementById("container").appendChild(img);
  }
</script>

버튼을 누르면 이미지가 동적으로 생성되어 화면에 추가된다.

이미지 경로 정리

• 버튼 클릭 시 div 영역에 h1, a, ul 태그를 누적 생성한다.
• 각 버튼은 각기 다른 태그를 생성한다.
• 코드 구조를 다음 3영역으로 정리한다.

1) 요소를 변수에 저장하는 영역
2) 함수를 제작하는 영역
3) 함수와 태그를 연결하는 영역

React, Vue, Angular 등 프레임워크는 값이 바뀌면 자동 렌더링되지만,
순수 JavaScript에서는 innerHTML, innerText 등을 직접 수정해 반영해야 한다.

코드 예시

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>태그 생성 실습</title>
</head>
<body>
  <h1 id="text">클릭해서 태그를 누적 생성</h1>
  <button id="btn_h1">h1태그 생성</button>
  <button id="btn_a">a태그 생성</button>
  <button id="btn_ul">ul태그 생성</button>
  <div id="content"></div>

  <script>
    let div = document.getElementById("content");
    let btn_h1 = document.getElementById("btn_h1");
    let btn_a = document.getElementById("btn_a");
    let btn_ul = document.getElementById("btn_ul");

    const h1 = () => {
      div.innerHTML += "<h1>h1태그 생성</h1>";
    }

    const a = () => {
      div.innerHTML += "<a href='#'>a태그 생성</a>";
    }

    const ul = () => {
      div.innerHTML += `
        <ul>
          <li>HTML</li>
          <li>CSS</li>
        </ul>`;
    }

    btn_h1.addEventListener("click", h1);
    btn_a.addEventListener("click", a);
    btn_ul.addEventListener("click", ul);
  </script>
</body>
</html>

Tip!

• innerHTML +=로 기존 내용 유지한 채 누적 가능
• 백틱(``)을 사용하면 가독성 좋은 HTML 작성 가능
• 요소 생성 후 바로 삽입하지 않으면 렌더링되지 않는다

12. 업다운 실습

• + 버튼 클릭 시 숫자가 1씩 증가
• - 버튼 클릭 시 숫자가 1씩 감소 (단, 0 미만 불가)

속성 접근 기본

• innerText, innerHTML → 텍스트 변경
• value → 입력값 접근
• type, src, className, style 등 속성 직접 접근/수정 가능

코드 예제

<p id="number">0</p>
<button id="btn_plus">+</button>
<button id="btn_minus">-</button>

<script>
  const plus = () => {
    document.getElementById("number").innerText =
      Number(document.getElementById("number").innerText) + 1;
  };

  const minus = () => {
    const current = Number(document.getElementById("number").innerText);
    if (current > 0) {
      document.getElementById("number").innerText = current - 1;
    }
  };

  document.getElementById("btn_plus").addEventListener("click", plus);
  document.getElementById("btn_minus").addEventListener("click", minus);
</script>

13. 속성 변경 실습: 비밀번호 보이기

목표

• 버튼 클릭 시 비밀번호 input의 type 속성을 text로 전환 → 비밀번호 노출
• 한 번 더 클릭 시 다시 password로 변경

비밀번호: <input type="password" id="input">
<button id="btn">비밀번호 보이기</button>

<script>
  const change_type = () => {
    const input = document.getElementById("input");
    input.type = input.type === "password" ? "text" : "password";
  }

  document.getElementById("btn").addEventListener("click", change_type);
</script>

14. 복수 요소 처리 실습

개념

• getElementsByTagName, getElementsByClassName 등으로 가져온 결과는 HTMLCollection (유사 배열)
• 반복문 가능하지만 map, filter, push 등은 사용 불가
• → Array.from()을 사용해 배열로 변환 필요

코드 예제

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>
<button id="btn">li태그 출력</button>

<script>
  const print = () => {
    const li = document.getElementsByTagName("li");
    for (let i = 0; i < li.length; i++) {
      console.log(li[i].innerText);
    }

    const arr = Array.from(li);
    console.log("배열 변환:", arr);
  }

  document.getElementById("btn").addEventListener("click", print);
</script>

• HTML 문서의 요소를 효과적으로 다루기 위해 모든 요소를 트리 구조로 표현한 모델을 DOM(Document Object Model) 이라고 한다.
• JavaScript는 이 DOM을 활용해 HTML 문서의 내용을 조작할 수 있다.

DOM의 개념

• HTML 문서를 트리 형태로 구조화하여 태그, 속성, 텍스트를 객체처럼 다룰 수 있게 만든 구조이다.
• 최상위 노드는 document 객체이다.
• DOM을 통해 HTML 요소에 접근, 수정, 삭제, 생성 가능하다.

HTML 문서 읽는 순서

DOM 요소 접근 방법

JavaScript에서 DOM 요소에 접근하는 방법은 여러 가지가 있다.

1) 요소 자체에 접근

let h1 = document.getElementById("text");
console.log(h1);

2) 요소의 텍스트만 접근 (innerText)

let span = document.getElementById("number").innerText;
console.log("innerText:", span);

3) HTML 구조 전체 접근 (innerHTML)

let spanHtml = document.getElementById("number").innerHTML;
console.log("innerHTML:", spanHtml);

innerText는 태그를 무시하고 순수 텍스트만,
innerHTML은 HTML 태그 구조까지 포함하여 인식한다.

4) 요소의 텍스트 수정

document.getElementById("text").innerText = "변경된 텍스트입니다.";

주의사항

document.getElementById("text").innerText = "<a href='#'>JS로 변경한 텍스트입니다.</a>";
// 출력: <a href='#'>JS로 변경한 텍스트입니다.</a>

document.getElementById("text").innerHTML = "<a href='#'>JS로 변경한 텍스트입니다.</a>";
// 출력: JS로 변경한 텍스트입니다. (링크 포함)

• innerText: HTML 태그 인식 ❌ (문자 그대로 출력)
• innerHTML: HTML 구조로 렌더링됨 (태그까지 포함)

DOM 접근 요약

10. 이벤트 연결

JavaScript에서 이벤트(event)란 사용자의 동작(클릭, 입력 등)에 반응하는 동작을 의미한다.
이벤트를 연결하는 방법에는 대표적으로 3가지가 있다.

10-1. 인라인 방식

• 태그 안에 직접 onclick 등의 속성으로 함수를 연결
• 코드가 많아지면 유지보수가 어려워짐

const print = () => {
  alert("함수가 실행되었습니다.");
}

<button onclick="print()">알림창 출력</button>

10-2. addEventListener 방식

• JS 코드로 HTML 요소에 이벤트를 연결
• 함수 호출 시 () 생략 → 즉시 실행 방지

const print = () => {
  alert("함수가 실행되었습니다.");
}

document.getElementById("btn2").addEventListener("click", print);

<button id="btn2">분리된 이벤트 실행</button>

10-3. 익명 함수 방식

• 함수 선언 없이 이벤트와 동시에 정의
• 해당 태그에서만 사용하는 이벤트에 적합

document.getElementById("btn3").addEventListener("click", () => {
  alert("나만 쓰는 함수입니다.");
});

<button id="btn3">오직 나만 쓰는 함수</button>

전체 예시 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>이벤트 연결 예제</title>
</head>
<body>
  <button id="btn1" onclick="print()">알림창 출력</button>
  <button id="btn2">분리된 이벤트 실행</button>
  <button id="btn3">오직 나만 쓰는 함수</button>

  <script>
    // 1. 인라인 방식
    const print = () => {
      alert("함수가 실행되었습니다.");
    }

    // 2. addEventListener 방식
    document.getElementById("btn2").addEventListener("click", print);

    // 3. 익명 함수 방식
    document.getElementById("btn3").addEventListener("click", () => {
      alert("나만 쓰는 함수입니다.");
    });
  </script>
</body>
</html>

Tip!

• 이벤트 연결 시에는 반드시 함수가 먼저 선언된 후에 연결해야 한다.
• 이벤트명은 대소문자를 구분 (click, keydown, mouseenter, submit 등)한다.
• onclick, onchange 같은 속성은 HTML 태그에서 직접 사용할 수 있다.

JavaScript에서 객체(Object)와 배열(Array)은 데이터를 구조화하고 관리하는 기본 단위이다.
객체는 서로 다른 의미의 데이터, 배열은 동일한 성격의 데이터를 저장하는 데 적합하다.

8-1. 객체 (Object)

Python의 딕셔너리(dict)와 유사하며,
key-value 쌍으로 데이터를 저장하는 자료형이다.

let person = {
  name: "하영",
  hobby: "발레",
  gender: "여자",
  school: ["한국초", "한국중", { 전공: "이과", 구분: "인문계" }]
};

• 키(key)를 통해 값을 조회한다.
• 중첩된 데이터도 자유롭게 표현할 수 있다.

객체의 특징

• 의미가 서로 다른 데이터를 저장할 때 적합하다.
• 객체의 속성은 객체명.키 또는 객체명["키"] 형태로 접근한다.
• 데이터 송수신(JSON) 시 주로 사용된다.

console.log(person.name);           // "하영"
console.log(person.school[1]);      // "한국중"
console.log(person.school[2].전공); // "이과"

8-2. 배열 (Array)

JS에서의 배열은 Python의 리스트(list)와 유사하며,
동일한 성격의 데이터를 순차적으로 나열하는 자료형이다.

let name = ["정형", "서보경", "이도연", "손지영"];

배열의 특징

• 배열의 크기는 동적이다.
• 배열의 크기가 지정되어 있어도 데이터를 추가하면 저장공간이 자동으로 할당된다.
• 배열의 크기는 배열의 length라는 프로퍼티(property)에 저장된다.
• 모든 타입을 저장할 수 있는 구조이다.
• 순서가 있는 데이터 집합이다.
• index로 조회하며, index는 0부터 시작한다.
• 반복문과 함께 매우 자주 사용된다.

console.log(name[0]);        // "정형"
console.log(name.length);    // 4

배열 메서드 정리

name.push("Emma");
console.log(name.includes("Emma"));  // true

객체 vs 배열 비교 요약

예시 복습

// 객체 접근 예시
console.log(person.name);            // "하영"
console.log(person.school[2].구분);  // "인문계"

// 배열 접근 예시
console.log(name[0]);                // "정형"

JavaScript에서 프로그램의 흐름을 제어할 때 사용하는 대표적인 문법은 조건문과 반복문이다.
사용자의 입력, 조건에 따라 실행 분기나 반복을 구성할 수 있으며, 동적 로직 구현에 필수적이다.

6-1. 조건문

조건에 따라 코드 실행 흐름을 달리하고 싶을 때 사용한다.

if / else if / else

let score = 85;

if (score >= 90) {
  console.log("A");
} else if (score >= 80) {
  console.log("B");
} else {
  console.log("C");
}

switch 문

let fruit = "apple";

switch (fruit) {
  case "apple":
    console.log("사과입니다");
    break;
  case "banana":
    console.log("바나나입니다");
    break;
  default:
    console.log("알 수 없는 과일입니다");
}

break를 쓰지 않으면 다음 case까지 실행됨에 주의!

6-2. 반복문

같은 작업을 여러 번 반복하고 싶을 때 사용한다.

for문

for (let i = 0; i < 5; i++) {
  console.log(i);
}

for...of (배열 전용)

let arr = [1, 2, 3];

for (let num of arr) {
  console.log(num);
}

for...in (객체 전용)

let person = { name: "Emma", age: 25 };

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

while문

let i = 0;
while (i < 3) {
  console.log(i);
  i++;
}

do-while문

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 3);

break / continue

• break : 반복문을 즉시 종료
• continue : 다음 반복으로 건너뛰기

for (let i = 1; i <= 5; i++) {
  if (i === 3) continue;
  if (i === 5) break;
  console.log(i);  // 1, 2, 4
}

7. 함수 (Function)

함수는 특정 작업을 수행하는 코드 블록으로, 재사용성, 유지보수성, 가독성을 높이기 위해 사용된다.

7-1. 함수란?

• 특정 기능을 하나로 묶은 코드 단위
• JS 함수는 매개변수 타입이나 개수에 제약이 없음
• 인자의 개수가 부족하면 undefined, 초과 인자는 무시됨

let data;           // undefined
let data2 = null;   // null

예시

function add(num1, num2) {
  console.log(num1, num2);
}

add(1);          // 1 undefined
add(1, null);    // 1 null
add(1, 2, 4);    // 1 2 (초과 인자 무시)

7-2. 함수 정의 방법

JavaScript에서 함수를 정의하는 방법은 대표적으로 2가지가 있다.

기본 함수 선언 방식

function add(num1, num2) {
  return num1 + num2;
}

console.log(add(3, 5));  // 8

• function 함수명(매개변수) { ... }
• 가장 전통적인 함수 선언 방식
• 호이스팅(코드 선언보다 위에서 호출 가능) 지원

화살표 함수 (Arrow Function)

const minus = (a, b) => {
  return a - b;
};

console.log(minus(7, 2)); // 5

• const 함수명 = (매개변수) => { 실행 코드 }
• 한 줄인 경우 중괄호와 return 생략 가능

const square = x => x * x;
console.log(square(4));  // 16

• 익명 함수로 정의되며 변수에 할당
• this 바인딩 없음, 객체 내부 메서드로 사용 시 주의

함수 정의 비교 요약표

JavaScript는 다양한 데이터 타입을 제공하며, 동적 타이핑(dynamic typing) 언어로, 변수에 저장되는 값의 타입이 실행 중(runtime)에 자동으로 결정된다.

기본 데이터 타입

✅ JavaScript에서는 정수와 실수를 모두 Number 타입으로 처리한다.

자동 형변환 (Type Coercion)

JavaScript는 연산자에 따라 값의 타입을 자동으로 변환하기도 한다.

+는 문자열 우선, 나머지 연산자는 숫자 우선!

⚠️ ==과 !=은 형변환이 일어나므로 예상치 못한 결과가 나올 수 있다.
→ 항상 ===, !==를 사용하는 것이 안전한 Best Practice이다.

명시적 형변환 (Type Casting)

문자열 → 숫자

Number("123");     // 123
parseInt("3.14");  // 3
parseFloat("3.14");// 3.14

숫자 → 문자열

String(123);       // "123"
(123).toString();  // "123"

5. 연산자와 표현식

• JavaScript의 연산자는 값을 계산하거나 조건을 비교할 때 사용된다.
• 대표적으로 산술 연산자, 대입 연산자, 비교 연산자, 논리 연산자, 삼항 연산자가 있다.

산술 연산자 (Arithmetic Operators)

console.log(5 + 2);    // 7
console.log(10 % 3);   // 1
console.log(2 ** 4);   // 16

대입 연산자 (Assignment Operators)

let a = 10;
a += 5;  // 15
a *= 2;  // 30

비교 연산자 (Comparison Operators)

console.log(5 == "5");    // true
console.log(5 === "5");   // false

논리 연산자 (Logical Operators)

AND == && OR == || NOR == ! 사실 이 내용을 표 안에 넣고 싶었는데, 표 마크다운 할 때 | 이 기호가 자꾸 표로 인식돼서 넣기 실패했다 ㅠ.. 이스케이프 코드도 안먹는데 방법 아시는 분?

let a = true;
let b = false;
console.log(a && b);   // false
console.log(a || b);   // true
console.log(!a);       // false

삼항 연산자 (Ternary Operator)

조건에 따라 값을 구분할 수 있는 간단한 연산자이다.
형식: 조건 ? 참일 때 값 : 거짓일 때 값

let score = 85;
let result = score >= 60 ? "합격" : "불합격";
console.log(result);  // "합격"

• JavaScript는 웹 브라우저에서 동작하는 프로그래밍 언어로,
  웹 페이지를 동적으로 제어하기 위해 만들어졌다.

• HTML과 CSS로 구성된 정적인 웹페이지에 → 인터랙티브한 기능을 추가할 수 있다.

• 예를 들어:

  • 알림창 띄우기
  • 이미지 슬라이드
  • 버튼 클릭 시 이벤트 처리
  • 사용자 입력값에 따라 화면 변화 등

✅ JavaScript는 웹사이트에 생명력을 불어넣는 역할을 한다.

JavaScript의 역사

• 1995년, 넷스케이프(Netscape)에서 Brendan Eich가 처음 개발했다.
• 초기에는 LiveScript라는 이름이었으나, Java의 인기에 편승해 JavaScript로 개명되었다.
• 본래 브라우저 내에서만 작동했지만, Node.js가 등장하면서 서버 개발 영역까지 확장되었다.

💡 JavaScript는 Java와 이름만 비슷할 뿐, 완전히 다른 언어이다.

JavaScript의 활용 분야

JavaScript는 이제 웹 프론트엔드를 넘어 앱 개발, 서버, 데이터 시각화, IoT 등 다양한 분야에서 활용된다.

• 웹 프론트엔드 : React, Vue, Angular
• 모바일 앱 : React Native, Ionic
• 서버 개발 : Node.js, Express
• 데스크탑 앱 : Electron
• 데이터 시각화 : D3.js, Chart.js
• 게임 / IoT 개발 : Phaser, Johnny-Five 등

🎯 과거엔 브라우저 전용이었지만, 지금은 전방위 개발에 활용되는 범용 언어다.

JavaScript의 주요 특징

1. 브라우저에서 실행 가능한 유일한 언어
2. Node.js를 통해 서버 개발까지 가능
3. 다양한 프레임워크 및 생태계와 호환
4. 빠르고 유연한 개발 환경
5. 동적 타이핑 언어로 프로토타입 개발에 유리
6. 호이스팅, 클로저, 이벤트 루프 등 고유한 특징 보유

JavaScript는 웹을 넘어 모든 플랫폼을 아우르는 다재다능한 언어다.

2. 입력과 출력 in JavaScript

입력 (Input)

prompt("text", "입력 예시")

• 사용자의 텍스트 입력을 받아오는 창을 띄운다.
• 반환값은 항상 문자열(String)이다.

let birth = prompt("생년월일을 입력하세요", "Ex)YYMMDD");

confirm("text")

• 확인 / 취소 버튼이 있는 팝업창을 띄운다.
• 반환값은 Boolean(true / false)이다.

let isDelete = confirm("정말 삭제하시겠습니까?");

출력 (Output)

document.write("text")

document.write("Hello JavaScript!");

console.log("text")

console.log("로그 출력");

alert("text")

alert("작업이 완료되었습니다!");

3. 변수 선언 방식

var

var a = 10;
var a = 20;
console.log(a); // 20

let

let b = 30;
b = 40;
console.log(b); // 40

const

const c = 100;
const user = { name: "Emma" };
user.name = "HY";
console.log(user);

변수 선언 방식 요약

• Flutter 개발에서 가장 핵심이 되는 개념은 "위젯(Widget)"이다.
• 이 글에서는 위젯의 정의부터 기본 UI 구성, 상태 관리, 레이아웃까지 실무에 필요한 위젯 개념 전체를 정리한다.

1. 위젯(Widget)이란?

• Flutter의 모든 요소는 위젯이다.
• 버튼, 텍스트, 이미지, 입력창 등 UI를 구성하는 모든 구성 요소가 위젯이며, 개발자는 이 위젯들을 조합해 앱을 만든다.

2. Stateless vs Stateful

Stateless Widget (변하지 않는 UI)

• 상태가 없고, 화면이 한 번 렌더링되면 바뀌지 않는 UI이다.
• 예: 아이콘, 제목, 고정된 텍스트

class MyText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('나는 Stateless 위젯!');
  }
}

Stateful Widget (상태가 바뀌는 UI)

• 사용자의 입력이나 앱 상태에 따라 화면이 다시 그려지는 위젯이다.
• setState()를 사용해 상태를 갱신해야 화면이 업데이트된다.

class CounterWidget extends StatefulWidget {
  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int counter = 0;

  void _increment() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('카운터: $counter'),
        ElevatedButton(
          onPressed: _increment,
          child: Text('증가하기'),
        ),
      ],
    );
  }
}

3. Scaffold

Scaffold란?

• Scaffold는 Flutter에서 Material Design 기반 앱의 기본 레이아웃 구조를 제공하는 위젯으로, 거의 모든 Flutter 앱에서 사용된다.
• 화면의 상단, 하단, 본문, 플로팅 버튼 등 UI의 기본 틀을 구성할 수 있도록 돕는다.

Scaffold(
  appBar: AppBar(title: Text('앱 타이틀')),
  body: Center(child: Text('여기는 본문 영역')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
)

appBar, body, drawer, bottomNavigationBar 등 다양한 영역을 정의할 수 있다.

Scaffold 주요 속성 정리

4. 기본 UI 위젯 정리

Text

Text('안녕하세요!', style: TextStyle(fontSize: 20))

Container

Container(
  width: 100,
  height: 50,
  color: Colors.amber,
  child: Text('박스'),
)

Image

Image.asset('assets/logo.png')
Image.network('https://flutter.dev/images/flutter-logo-sharing.png')

Icon

Icon(Icons.favorite, color: Colors.red)

ElevatedButton

ElevatedButton(onPressed: () {}, child: Text('클릭'))

TextField

TextField(decoration: InputDecoration(labelText: '입력하세요'))

5. 레이아웃 위젯

↔️ Row / ↕️ Column

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [Text('A'), Text('B'), Text('C')],
)

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [Text('첫 번째'), Text('두 번째')],
)

Padding

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('패딩이 들어간 텍스트'),
)

SizedBox

SizedBox(width: 20, height: 50)

여백을 주거나 크기를 지정할 때 사용

Expanded

Row(
  children: [
    Expanded(child: Container(color: Colors.red)),
    Expanded(child: Container(color: Colors.blue)),
  ],
)

남은 공간을 위젯 간에 비율로 배분

Align / Center

Align(alignment: Alignment.bottomRight, child: Text('오른쪽 아래'))
Center(child: Text('가운데'))

Stack

Stack(
  children: [
    Container(width: 200, height: 200, color: Colors.green),
    Positioned(top: 50, left: 50, child: Text('겹친 텍스트')),
  ],
)

위젯을 겹쳐서 배치할 수 있음

6. 기타 유용한 위젯들

ListView (스크롤 가능한 목록)

ListView(
  children: [
    ListTile(title: Text('항목 1')),
    ListTile(title: Text('항목 2')),
  ],
)

GridView (그리드 형태 목록)

GridView.count(
  crossAxisCount: 2,
  children: List.generate(4, (index) => Text('아이템 $index')),
)

GestureDetector (제스처 인식)

GestureDetector(
  onTap: () {
    print('탭됨!');
  },
  child: Container(color: Colors.blue, child: Text('탭해보세요')),
)

요약표