히 devlog

[UIKit] MVVM 패턴

h2e — Sun, 9 Aug 2026 16:11:51 +0900

먼저 MVVM 패턴은 business logic과 presentation logic을 UI로부터 깔끔하게 분리해 주어 테스트, 유지-보수, 확장을 쉽게 하고 코드 재사용성과 개발자와 디자이너의 협업도 개선해 주기 위해 개발되었다고 한다.

1. MVVM 패턴?

1-1. MVVM 패턴의 구성 요소

MVVM 패턴에는 각자 역할이 다른 세 가지 핵심 구성 요소가 있다.

Model, View, ViewModel.

1-2. MVVM 패턴의 의존성

View는 ViewModel을 "알고", ViewModel은 Model을 "안다" (그 반대는 성립하지 않는다.)

이런 과정을 통해 ViewModel이 View를 Model로부터 격리하고, Model이 View와 독립적으로 굴러가도록 한다.

다만, UIKit에서는 ViewModel이 UI 프레임워크를 몰라야 한다. (ViewModel 파일에 import UIKit이 없을 것!!)

1-3. MVVM 패턴의 장점

장점
- 기존 Model을 바꾸기 어렵거나 위험할 때, ViewModel이 어댑터 역할을 해서 Model 코드를 크게 건드리지 않게 해 준다.
- View 없이도 ViewModel과 Model에 대한 테스트가 가능하다.
  - 로직을 ViewModel로 빼서 테스트한다.
- ViewModel을 그대로 두고 UI만 재디자인 가능하다.
  - View 구현만 바꾸면 기존 ViewModel, MODEL은 그대로 동작하다. 같은 ViewModel로 다른 레이아웃, (프레임워크도 바꿔서) 동작할 수 있다.
- 디자이너와 개발자가 각자 컴포넌트를 독립적이고 동시에 작업이 가능하다.
  → 디자이너는 View를, 개발자는 ViewModel/Model을 독립적이고 동시에 작업 가능하다.
- 데이터, 로직, 표현이 분리되어 코드 재사용성이 올라간다.

1-4. MVVM 패턴을 UIKit 관점에서 이해하는 방법 (objc.io)

MVC를 통해 MVVM으로 유도하는 것이 가장 좋은 방법이라고 한다.

전형적인 iOS 앱은 MVC다. View와 ViewController는 사실상 항상 같이 붙어다니기 때문에, 둘을 하나로 묶어서 ‘View’ 취급을 한다.
이렇게 묶어도 ViewController가 뚱뚱해진다는 문제점은 안 풀린다. ViewController 자체에 networking, 데이터 파싱, 포맷 변환 같은 presentation logic이 가득하기 때문이다.
따라서 이 presentation logic을 담을 새 객체가 필요하다. → ViewModel을 View와 Model 사이에 두면 해결된다.

그러므로 MVVM 패턴은 View와 ViewController를 연결하고, presentation logic을 ViewModel로 빼낸 MVC의 확장판이라고 볼 수 있다.

2. 구성 요소

2-1. View

View는 화면에 보이는 것의 구조, 레이아웃, 외관을 담당한다. 그러니까 ‘이것’만 담당하면 된다는 것이다.

판단 없이 표시만 한다.

판단과 로직은 전부 ViewModel에 델리게이트.하라는 이야기다. 그러면 이 ViewModel이 가져다 주는 결과만 반영하면 된다.

ViewModel이 판단할 테니, UIKit에서는 View나 ViewController가 판단하지 않도록 한다는 이야기다.

// 판단이 View에 샘 (이럼 안 됨)
button.isEnabled = viewModel.count < 10

// ViewModel이 판단 -> View는 반영만
viewModel.onEnabledChange = { [weak self] enabled in
    self?.button.isEnabled = enabled

2-2. ViewModel

View가 binding할 속성과 명령을 노출하고 상태 변화를 알린다. 어떤 기능을 제공할지는 ViewModel이 정하고, 어떻게 보여 줄지는 View가 정한다.

presentation logic을 담당한다.
- 네트워킹, 데이터 파싱, 포맷 변환, model 변경 감지
UI 타입을 노출하지 않는다.
- ex) 색 매핑은 View가 하고 색은 Color가 아니라 enum LoadState 같은 순수 값으로 노출한다.
입출력 작업은 main thread를 비동기로 처리한다.
- 오래 걸리는 일은 비동기로 돌려서 화면이 멈추지 않도록 처리한다.

// 동기 — 데이터 올 때까지 화면 멈춤
func load() {
    let data = service.fetchSync() // 여기서 3초 멈추면 화면도 3초 얼음
    self.items = data
}

// 비동기 — 기다리는 동안 화면은 멀쩡
func load() {
    Task {
        let data = try await service.fetch() // 기다려도 UI 자유로움
        self.items = data // 결과 오면 갱신
    }
}

ViewModel이 여러 개의 Model을 조합해 쓴다

ㅡ protocol 기반 설계 방법

ViewModel을 구체 타입이 아니라 protocol로 먼저 정의하면, 구현체를 자유롭게 갈아끼울 수 있어 테스트, 확장에 유리하다.

// 1. protocol
protocol GreetingViewModel {
    var name: String { get }
}

// 2. 구현체 두 개
final class RealGreeting: GreetingViewModel { // 진짜 버전
    var name = "주희"
}

final class FakeGreeting: GreetingViewModel { // 가짜 버전 (테스트용)
    var name = "테스트"
}

// 3. View는 protocol만 앎.
final class GreetingVC: UIViewController {
    let label = UILabel()
    var viewModel: GreetingViewModel? // 진짜? 가짜? 몰라도 됨

    func showName() {
        label.text = viewModel?.name
    }
}

// 4. 갈아끼우기
let vc = GreetingVC()

vc.viewModel = RealGreeting() // "주희" 표시
vc.showName()

vc.viewModel = FakeGreeting() // "테스트" 표시 — VC 코드는 그대로
vc.showName()

2-3. Model

data model + business logic, validation logic을 포함한다.

3. View와 ViewModel 연결하기

3-1. 연결 개요

View가 자신의 ViewModel을 갖고, 그 출력에 반응하게 만드는 것

UIKit에서는 ViewController에서 ViewModel 프로퍼티를 두고, 할당되는 순간 UI를 채운다.
- 이때 UI를 채우는 건 viewDidLoad와 didSet 양쪽에서 불러야 한다. ViewModel이 viewDidLoad 전에 주입될 수도, 후에 주입될 수도 있기 때문.

3-2. 구성 방식 비교

방식	설명	장점
View 먼저	View가 자신이 의존하는 ViewModel을 연결	테스트 용이, 구조 파악 쉬움, iOS navigation과 잘 맞음.
ViewModel 먼저	ViewModel 중심 구성	UI 추상화, 논리 구조 집중(대신 복잡)

3-2-2. 주입 방식 비교

1. 외부 주입

부모가 ViewModel을 만들어 자식에게 주입. 의존성을 명시적으로 주입할 수 있어 테스트에 유리하다.

final class GreetingVC: UIViewController {
    var viewModel: GreetingViewModel? // 빈 자리만 둠
}

// 부모
에서 만들어 주입
let vc = GreetingVC()
vc.viewModel = RealGreeting() // 여기서 넣어줌

2. 내부 생성

ViewController가 자기 안에서 직접 만든다.

final class GreetingVC: UIViewController {
    let viewModel = RealGreeting()   // 직접 만듦.
}

let vc = GreetingVC() // 그냥 만들면 끝

4. 데이터 동기화

4-1. Binding

Model 변경 → ViewModel이 감지 → ViewModel 프로퍼티 갱신 → View가 반영

→ 그런데 UIKit에는 자동 바인딩이 없다!!!!

→ 직접 구현 필요하다.

→ 옛날에는 KVO, Dynamic<T> 등 사용…

→ 현재는… Combine 사용

5. UI 상호작용

사용자 액션에 대한 처리 책임은 모두 ViewModel에 있다!! ViewController에는 로직을 두지 않는다.

UIKit에서는 선언적으로 command binding이 없어서 addAction/addTarget
- Combinde으로 해결 가능
ViewController는 호출만 하고 실제 로직은 ViewModel이 수행한다.

// View -> ViewModel: 동작 요청
button.addAction(UIAction { [weak self] _ in
    self?.viewModel.togglePause()  // 판단과 처리는 ViewModel이 함!!!
}, for: .touchUpInside)

6. UIKit에서의 MVVM

6-1. UIKit에서의 MVVM의 핵심 차이

UIKit에서는 자동 data binding이 없다. (스유에는 body 재실행으로 가능)

따라서 binding을 직접 구현해야 한다.

6-2. binding

Closure	Dynamic<T>	의존성 없음. 속성 많으면 closure가 너무 많아짐.	가벼움
Combine	@Published	변경을 자동으로 내보냄.	반응형
Delegate		연속 상태보다는 단발성에 적합.	보조용

- Combine 예시

import Combine

// ViewModel
final class SwitchViewModel {
    @Published var isOn = false // 이 값이 바뀌면 자동으로 알림
}

// ViewController
final class SwitchVC: UIViewController {
    private let viewModel = SwitchViewModel()
    private let label = UILabel()
    private var cancellables = Set<AnyCancellable>()

    private func bind() {
        viewModel.$isOn // isOn을 구독
            .sink { [weak self] on in
                self?.label.text = on ? "켜짐" : "꺼짐" // 바뀔 때마다 자동 실행
            }
            .store(in: &cancellables)
    }
}

6-3. ViewModel은 꼭 import UIKit 없어야 한다!!

ViewModel이 UIKit/CoreLocation을 import하지 않게 해서 재사용성을 높여야 한다.

SwiftUI 복습 1️⃣ 뷰(View)와 텍스트(Text)

h2e — Sun, 9 Aug 2026 15:51:23 +0900

1-1. View 프로토콜과 body

화면에 보이는 모든 것은 뷰(View). body 안에 "보여줄 것"을 선언하면 끝!

struct ContentView: View {
    var body: some View {
        Text("안녕, SwiftUI!")
    }
}

1-2. Text — 글자 보여주기

-> UIKit의 UILabel에 해당한다!

Text("오늘도 파이팅!")

1-3. 수정자(Modifier) — 뷰 꾸미기

점(.)을 찍어 꾸미고 위에서 아래 순서대로 적용된다!

Text("안녕하세요")
    .font(.title)
    .foregroundStyle(.blue)
    .padding()

1-4. Text 꾸미기 모음

Text("굵게").bold()
Text("기울임").italic()
Text("밑줄").underline()
Text("취소선").strikethrough()

1-5. Image와 SF Symbols

Image(systemName: "heart.fill")
    .foregroundStyle(.red)
    .font(.largeTitle)

1-6. Color도 뷰다

색 자체를 화면에 깔 수 있다!

Color.mint
    .frame(height: 100)

1-7. Label — 아이콘 + 글자 세트

Label("좋아요", systemImage: "heart")

[모던 자바스크립트 Deep Dive] 11. 원시 값과 객체의 비교 - 12. 함수

h2e — Sun, 5 Apr 2026 23:05:44 +0900

11. 원시 값과 객체의 비교

11.1 원시 값이란?

1) 변경 불가능한 값

: 원시 값은 변경 불가능한 값. 읽기 전용 값

-> 변수는 재할당을 통해 변경

2) 문자열과 불변성

: 0개 이상의 문자로 이루어진 집합.

3) 값에 의한 전달

: 값을 전달하는 것이 아니라 '메모리 주소를 전달'한다. 전달된 메모리 주소를 통해 메모리 공간에 접근하면 값을 참조 가능.

11.2 객체

: 동적으로 추가되고 삭제될 수 있는 것. -> 원시 값과는 다른 방식으로 동작하도록 설계됨.

1) 변경 가능한 값

: 객체 타입의 값. 객체는 변경 가능한 값.

2) 참조에 의한 전달

: 참조 값이 복사되어 전달되는 것. -> 두 개의 식별자가 하나의 객체를 공유함.

* 자바스크립트에는 값에 의한 전달만 존재

12. 함수

12.1 함수란?

- 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것.

- 입력 전달(매개 변수), 입력(인수), 출력(반환값)

- 함수 정의를 통해 함수 생성

- 함수 호출을 통해 실행

12.2 함수 사용 이유 (=코드 재사용성)

- 유지보수의 편의성

- 코드의 신뢰성

- 코드의 가독성

12.3 함수 리터럴

12.4 함수 정의

: 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정.

1) 함수 선언문

2) 함수 표현식

3) Function 생성자 함수

4) 화살표 함수

12.5 함수 호출

1) 매개변수와 인수

: 함수를 실행하기 위해 필요한 값을 함수 외부에서 함수 내부로 전달할 필요가 있는 경우, 매개변수를 통해 인수를 전달함.

- 인수: 값으로 평가될 수 있는 표현식

- 매개변수: 함수를 정의할 때 선언

2) 인수 확인

- 자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않음.

- 자바스크립트는 동적 타입 언어. 자바스크립트 함수는 매개변수의 타입을 사전에 지정 불가.

3) 매개변수의 최대 개수

: 엔진마다 최대 개수가 다르나 유지보수성을 위해 가급적 작게 만들어야 함.

4) 반환문

: 함수 호출은 표현식. return 키워드와 반환값으로 이뤄진 반환문 사용. 반환문 생략 시 undefined 반환.

12.6 참조에 의한 전달과 외부 상태의 변경

: 원시 값 - 값에 의한 전달 / 객체 - 참조에 의한 전달

: 값에 의한 호출 / 참조에 의한 전달

12.7 다양한 함수의 형태

1) 즉시 실행 함수

: 단 한 번만 호출. 다시 호출 불가.

2) 재귀 함수

: 자기 자신 호출. 재귀 호출을 멈출 수 있는 탈출 조건 반드시 필요.

3) 중첩 함수

: 함수 내부에 정의된 함수. 내부 함수라고도 함.

4) 콜백 함수

: repeat. 반복 수행 함수. 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 함.

- 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고 함.

5) 순수 함수와 비순수 함수

: 어떤 외부 상태에 의존하지도 않고 변경하지도 않는 부수 효과의 유무에 따른 함수

[모던 자바스크립트 Deep Dive] 9. 타입 변환과 단축평가 - 10. 객체 리터럴

h2e — Sun, 29 Mar 2026 22:56:24 +0900

9. 타입변환과 단축평가

9.1 타입 변환이란?

1) 명시적 타입 변환 (타입 캐스팅)

: 개발자가 의도적으로 타입을 변환하는 것.

2) 암묵적 타입 변환 (타입 강제 변환)

: 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 것.

9.2 암묵적 타입 변환

1) 문자열 타입으로 변환

2) 숫자 타입으로 변환

3) 불리언 타입으로 변환

9.3 명시적 타입 변환

1) 문자열 타입으로 변환

2) 숫자 타입으로 변환

3) 불리언 타입으로 변환

9.4 단축 평가

1) 논리 연산자를 사용한 단축 평가

: 논리곱(&&) 연산자와 논리합(||) 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환

단축 평가 표현식	평가 결과
true \|\| anything	true
false \|\| anything	anything
true && anything	anything
false && anything	false

2) 옵셔널 체이닝 연산자 (?.)

: 좌항 피연산자가 false로 평가되는 Falsy 값(false, undefined, null, 0, -0, NaN, ' ')이라도 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.

3) null 병합 연산자 (??)

: 좌항의 피연산자가 false로 평가되는 Falsy 값(false, undefined, null, 0, -0, NaN, ' ')이라도 null 또는 undefined가 아니면 좌항의 피연산자를 그대로 반환한다.

10. 객체 리터럴

10.1 객체란?

: 자바스크립트에서는 원시 값을 제외한 나머지 값은 모두 객체.

* 객체 (<-> 원시 값)

: 객체란 변경 가능한 값, 0개 이상의 프로퍼티로 구성된 집합 (프로퍼티는 키와 값으로 구성)

: 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라고 부름.

10.2 객체 리터럴에 의한 객체 생성

: 중괄호({ ... }) 내에 0개 이상의 프로퍼티를 정의함.

: 객체 리터럴 - 값으로 평가되는 표현식 - 따라서 닫는 중괄호 뒤에 세미콜론을 붙임!

10.3 프로퍼티

: 객체는 프로퍼티의 집합, 프로퍼티는 키와 값으로 구성

- 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값 (문자열이므로 따옴표로 묶어야 함.)

- 프로퍼티 값: 자바스크립트에서 사용할 수 있는 모든 값

10.4 메서드

: 프로퍼티 값이 함수일 경우.

10.5 프로퍼티 접근

- 마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법

- 대괄호 프로퍼티 접근 연산자([ ... ])를 사용하는 대괄호 표기법

10.6 프로퍼티 값 갱신

: 이미 존재하는 값에 값을 할당하면 프로퍼티 값이 갱신됨.

10.7 프로퍼티 동적 생성

: 존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당.

10.8 프로퍼티 삭제

: delete 연산자로 삭제.

[모던 자바스크립트 Deep Dive] 7. 연산 - 8. 제어문

h2e — Sat, 21 Mar 2026 13:46:42 +0900

7. 연산

7.1 산술 연산자

+ - * / %

피연산자를 산술하여 숫자값을 만드는 연산자

7.2 할당 연산자

할당 연산자	예	같은 표현
=	x = 5	x = 5
+=	x+= 5	x = x + 5
-=	x -= 5	x = x - 5
*=	x *= 5	x = x * 5
/=	x /= 5	x = x / 5
%=	x %= 5	x = x % 5

7.3 비교 연산자

x == y	x와 y의 값이 같음
x === y	x 와 y의 타입이 같음

* 예외

NaN === NaN;	false
0 === -0;	true
0 == -0;	true

7.4 삼항 조건 연산자

	예
타입 조건 ? 참 실행 : 거짓 실행;	var result = score >= 60 ? 'pass' : 'fail';

7.5 논리 연산자

논리 연산자	의미	부수 효과
\|\|	논리합(OR)	X
&&	논리곱(AND)	X
!	부정(NOT)	X

* 드 모르간의 법칙으로 가독성 좋게 사용 가능

7.6 쉼표 연산자

: 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환

예	반환값
x = 1, y = 2, z = 3;	3

7.7 그룹 연산자

: ()로 피연산자를 가장 먼저 평가. 따라서 우선순위 조절 가능. 연산자 우선순위가 가장 높음.

예	반환값
10 * 2 + 3;	23
10 * (2+ 3);	50

7.8 typeof 연산자

: 피연산자의 데이터 타입을 문자열로 반환. null은 반환하지 않음.

예	반환값
typeof ' '	"string"
typeof 1	"number"
typeof NaN	"number"
typeof true	"boolean"
typeof undefined	"undefined"
typeof Symbol()	"symbol"
typeof null	"object"
typeof {}	"object"
typeof function () {}	"function"

* 주의

- null 값은 object 반환. null 값 확인 시 일치 연산자 (===) 확인.

- 선언하지 않은 식별자는 ReferenceError가 아닌 undefined 반환.

7.9 지수 연산자

: 좌항의 피연산자를 밑, 우항의 피연산자를 지수로 거듭제곱.

지수 연산자	예	반환값
**	2 ** 2	4

7.10 그외의 연산자

연산자	개요
?.	옵셔널 체이닝 연산자
??	null 병합 연산자
delete	프로퍼티 삭제
new	생성자 함수를 호출할 때 사용하여 인스턴스 생성
instanceof	좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별
in	프로퍼티 존재 확인

7.11 연산자의 부수 효과

: 일부 연산자는 다른 코드에 영향을 줌.

연산자	영향
할당 연산자 (=)	변수 값 변함.
증가/감소 연산자(++/--)	피연산자 값 변경 부수 효과, 재할당 변경.
delete 연산자	프로퍼티 삭제.

7.12 연산자 우선순위

우선순위	연산자
1	()
2	new(매개변수 존재), ., [](프로퍼티 접근), ()(함수 호출), ?.(옵셔널 체이닝 연산자)
3	new(매개변수 미존재)
4	x++, x--
5	!x, +x, -x, ++x, ==x, typeof, delete
6	**
7	*, /, %
8	+, -
9	<, <=, >, >=, in, instanceof
10	==, !=, ===, !==
11	?? (null 병합 연산자)
12	&&
13	\|\|
14	? ... : ...
15	할당 연산자
16	,

7.13 연산자 결합 순서

결합 순서
좌항 -> 우항	+ - / % < <= > >= && \|\| . [] () ?? ?. in instanceof
우항 -> 좌항	++ -- 할당연산자 !x +x -x ++x --x typeof delete ? ... : ... **

8. 제어문

8.1 블록문

: 0개 이상의 문을 중괄호로 묶은 것. 코드 블록 또는 블록. 하나의 실행 단위 취급.

8.2 조건문

	실행문	활용문
if ... else	if (조건식){ // 참일 때 실행 } else { // 거짓일 때 실행 }	if (조건식1){ // 조건식1 참일 때 실행 } else if (조건식2) { // 조건식2 참일 때 실행 } } else { // 거짓일 때 실행 }
switch	switch (표현식) { case 표현식1: // switch 문의 표현식과 표현식1이 일치하면 실행 break; case 표현식2: // switch 문의 표현식과 표현식2이 일치하면 실행 break; default: // switch 문의 표현식과 일치하는 case문이 없을 때 }

* switch문보다 if ... else 권장.

8.3 반복문

	실행문
for	for (변수 선언문 또는 할당문; 조건식; 증감식) { 조건식이 참일 때 반복 실행될 문 }
while	while (조건문) { // 조건식이 참일 때 반복 실행 (반복 횟수 불명확할 때) }
do ... while	do { // 먼저 실행 후 조건문 평가 } while (조건문)

8.4 break 문

: break;로 반복 탈출

8.5 continue 문

: 코드 실행을 현 지점에서 중단하고 반복문의 증감식으로 이동. 탈출X

[프론트엔드] HTML과 CSS 개념 정리 + Grid Garden / Flexbox Froggy

h2e — Mon, 16 Mar 2026 17:02:34 +0900

1. HTML

Hyper Text Markup Language의 줄임말로 웹페이지의 뼈대를 구성할 대 사용되는 기본 언어.

웹 페이지는 HTML 문서라고도 불리며, HTML 태그들로 구성된다.

1-1. HTML의 구조

1) <!DOCTYPE html>: HTML5로 작성한 웹 문서 선언

2) <html> : 웹 문서의 시작과 끝

3) <head>: meta, title 태그 위치

4) <body> : 웹 브라우저에 표시되는 내용

- HTML의 기본 구성 요소 '태그'

<p> (Opening Tag) </p> (Closing Tag)

1-2. 시멘틱 태그 (Semantic Tag)

: 웹 문서의 구조를 나타내는 태그

1) <header> : 헤더 영역 태그

2) <nav> : 내비게이션 영역 태그

3) <main> : 핵심 콘텐츠 태그

4) <section>: 콘텐츠 영역 태그

5) <article>: 독립적인 콘텐츠 태그

6) <aside>: 사이드바 태크

7) <footer> : 푸터 영역 태그

8) <div>: 여러 소스 묶는 태그

1-3. HTML 태그

1) <img> : 이미지 삽입 태그

: <img src = "이미지 경로" width = "너비" height ="높이" alt ="대체 텍스트">

2) <audio> : 오디오 삽입 태그

: <audio src = "오디오 경로" controls>

3) <video>: 비디오 삽입 태그

: <video src = "비디오 경로" controls width = "너비">

4) <a> : 하이퍼링크

: <a href = "링크 경로"> </a>

5) <table> : 표 만드는 태그

- <table> : 표의 시작과 끝

- <caption> : 제목

- <tr> : 한 행의 시작과 끝

- <th> : 행 안의 셀 (강조)

- <td> : 행 안의 셀 (일반)

6) <form> : 사용자에게 정보를 받는 입력 양식

- <input> : type 속성을 통해 사용자의 입력을 받아오는 태그

eg) <input type = "submit" value = "로그인">

1-4. HTML 특수 문자

1) > <

2) < >

3) & &

4) " "

5)   한 칸 공백

2. CSS

Cascading Style Sheets.

style은 HTML 문서의 디자인 요소를 구성하는 스타일 시트 언어.

2-1. CSS 적용 방법

1) 인라인 스타일

: HTML 태그 안에서 style 속성을 이용해서 직접 작성 -> 해당 줄에만 적용됨.

2) 내부 스타일 시트

: <style> 태그를 이용해 html 문서 내부에 작성, <head> 태그 안에서 사용함.

3) 외부 스타일 시트

: .css 파일을 별도로 만들어 HTML 파일과 연결. -> 가장 기본적.

2-2. CSS 선택자 (Selector)

: 스타일을 어디서 적용할 것인지 선택하는 요소

1) * (전체 선택자)

- 문서 전체 스타일에 적용.

- 브라우저 기본 스타일 초기화

eg) * {속성: 속성값}

2) 태그 선택자 (타입 선택자)

- 선택한 특정 태그에 모두 적용

eg) 태그 이름 {속성: 속성값}

3) class 선택자

- 특정 부분에서만 사용

- 문서 안에서 사용 가능

- .(마침표) 기호를 클래스명 앞에 붙여 사용

eg) .class {속성: 속성값}

4) id 선택자

- # 기호를 앞에 붙여 사용

- 문서 안에서 한 번만 사용 가능

eg) #id {속성: 속성값}

5) 그룹 선택자

- 선택자를 그룹으로 나타낼 수 있음.

- ,(쉼표)로 선택자 구분하여 나열.

6) [고급] 자손 결합자

eg) 선택자A 선택자B {속성: 속성값}

- 부모 요소에 포함된 모든 자식 요소에 적용

- 자손: 선택 태그 안에 들어가 있는 모든 것

7) [고급] 자식 결합자

eg) 선택자A > 선택자B {속성: 속성값}

- 부모 요소 바로 아래 있는 자식 요소에만 적용

- 자식: 선택 태그 바로 아래 계층

8) [고급] 형제 결합자

eg) 선택자A ~ 선택자B {속성: 속성값}

- 기준이 되는 태그 뒤에 오는 모든 특정 태그에 적용

9) [고급] 인접 형제 결합자

eg) 선택자A + 선택자B {속성: 속성값}

- 기준이 되는 태그 바로 뒤에 오는 하나의 특정 태그에 적용

10) 의사 클래스 (가상 클래스)

- 선택자에 추가하는 키워드로, 선택한 키워드가 특정 상태일 때 활성화 (마우스오버, 클릭, visit 등)

eg) 선택자: 의사클래스 이름{속성: 속성값}

* 의사 클래스 스타일

- :link 사용자가 한 번도 클릭하지 않은 기본 링크 스타일

- :visited 사용자가 이미 클릭한 링크 스타일

- :hover 마우스 커서를 위에 올렸을 때 스타일 (마우스오버)

- :active 마우스커서로 항목을 클릭하는 순간 스타일

- :focus 포커싱되는 순간 스타일

* 의사 요소

: 눈에 보이지 않는 요소, 태그상 마크업되어 있지 않음.

- ::first-letter 텍스트의 첫 글자만을 선택

- ::first-line 텍스트의 첫 라인만을 선택

- ::before 특정 요소의 내용 바로 앞에 다른 요소를 삽입

- ::after 특정 요소의 내용 바로 뒤에 다른 요소를 삽입

- ::selection 해당 요소에서 사용자가 선택한 부분만을 선택

2-3. 스타일 우선순위

!important

인라인 스타일

#id

.class

태그 (타입 스타일)

상속된 스타일

- 같은 종류의 선택자일 경우 젱ㄹ 나중에 지정된 스타일

2-4. CSS 단위

* 절대 단위

1) px

- 절대적 크기로 고정.

- 화면 해상도에 다라 크기 결정.

- 반응형 웹 디자인에서 제한적임.

* 상대 단위

2) rem

- 웹페이지의 기본 글꼴 크기 기준.

- 전체 웹페이지에 걸친 일관된 크기 조정.

3) em

- 해당 요소의 부모 글꼴 크기 기준.

- 특정 요소 내의 상대적 크기 조정.

2-5. Grid와 Flex (+ Grid Garden / Flexbox Froggy 플레이)

* Flex

1) display: flex;

- Flexbox을 적용하기 위한 시작점

- Flex item들이 가로 방향으로 배치. (자신이 가진 내용물의 width만큼만 차지)

2) flex-direction

- flex-direction: row; 텍스트의 방향과 동일하게 정렬

- flex-direction: row-reverse; 텍스트의 방향과 반대 방향으로 정렬

- flex-direction: column; 요소들을 위에서 아래로 정렬

- flex-direction: column-reverse; 요소들을 아래에서 위로 정렬

3) flex-wrap 아이템 줄바꿈 설정

- flex-wrap: nowrap; (기본값) 줄바꿈 없음 - 한 줄에 표시

- flex-wrap: wrap; 줄바꿈. 아이템을 여러 줄에 표시

- flex-wrap: wrap-reverse; 줄바꿈. 아이템을 여러 줄에 표시 + 역순 배치.

4) justify-content 주축(수평 방향 정렬)

- justify-content: flex-start; 요소들을 시작점으로 정렬 (왼쪽)

- justify-content: flex-end; 요소들을 끝점으로 정렬 (오른쪽)

- justify-content: center; 요소들을 가운데로 정렬

- justify-content: space-between; 요소들 사이 균일한 간격

- justify-content: space-around; 요소들 '둘레'에 균일한 간격

- justify-content: space-evenly; 요소들 사이와 양 끝에 균일한 간격

5) align-items: 수직축(수직 방향 정렬)

- align-items: stretch; 요소들을 창에 맡게 늘립니다.

- align-items: flex-start; 요소들을 시작점으로 정렬 (위쪽)

- align-items: flex-end; 요소들을 끝점으로 정렬 (아래쪽)

- align-items: center; 요소들을 가운데로 정렬

- align-items: baseline; 시작상의 위치에 정렬

* Grid

1) grid-template Grid 형태 정의 (px, fr 픽셀, 비율 대로 트랙 크기 분할 가능)

- grid-template-rows; 행의 배치

- grid-template-columns; 열의 배치

- repeat(횟수, 크기) : 반복되는 값 줄여서 표현

- minmax(최솟값, 최댓값)

2) grid-gap 간격 지정

- grid-column-gap : 열 사이의 간격 지정

- grid-row-gap : 행 사이의 간격 지정

- grid-gap : 행과 열 사이의 간격 한꺼번에 지정

3) justify-content 가로 정렬

- justify-content: stretch;

- justify-content: start; 요소들을 시작점으로 정렬 (왼쪽)

- justify-content: end; 요소들을 끝점으로 정렬 (오른쪽)

- justify-content: center; 요소들을 가운데로 정렬

- justify-content: space-between; 요소들 사이 균일한 간격

4) align-items 수직 정렬

- align-items: start; 위쪽 정렬

- align-items: space-between;

Grid Garden / Flexbox Froggy 플레이

[모던 자바스크립트 Deep Dive] 4. 변수 - 6. 데이터 타입

h2e — Sun, 15 Mar 2026 16:45:19 +0900

4. 변수

4.1 변수란 무엇인가? 왜 필요한가?

애플리케이션: 데이터를 입력받아 처리하고 그 결과를 출력하는 것이 전부이다.

예를 들어, 이런 10 + 20 이라는 식이 있다고 가정해 보자. 자바 스크립트 엔진은 이 값을 계산하기 위해서 먼저 10, 20, +라는 기호의 의미를 알고 있어야 하며, 10+20이라는 식의 의미도 해석할 수 있어야 한다. 또한 이를 저장할 공간이 필요한데 컴퓨터에서는 이를 메모리라고 한다. 메모리에 접근하기 위해서는 메모리의 주소를 알아야 하며 16진수로 이루어져 있다. (직접 접근하는 것은 오류 발생 확률 높음)

프로그래밍 언어는 기억해야 하는 값을 메모리에 저장하고 그 값을 읽어 재사용할 수 있도록 '변수'를 제공한다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간을 식별하기 위해 붙인 이름이다. 변수에 값을 저장하는 것을 할당, 대입, 저장 등으로 표현하고 변수의 값을 읽는 것을 참조라고 표현한다.

4.2 식별자

변수 이름 = 식별자(식별할 수 있는 고유한 이름)

식별자는 메모리 주소와 매핑 관계 맺고, 메모리 주소를 기억하고 있다. 또한 변수, 함수, 클래스 등의 이름은 모두 식별자이며 선언으로 자바스크립트 엔진에 식별자의 존재를 띄울 수 있다.

4.3 변수 선언

값을 저장하기 위해 메모리 공간 확보 후 변수의 이름과 메모리 공간의 주소를 연결하여 값을 저장할 수 있도록 준비한다. let 등을 사용하여 선언한다.

* 변수 선언 과정

- 변수의 이름 등록하여 엔진에 변수의 존재 알림.

- 값을 저장할 메모리 공간 확보

- undefined 값이 암묵적으로 할당되어 초기화 수행(js에서 제공하는 원시 타입)

자바 스크립트 엔진이 소스 코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 실행 context에 변수의 이름을 비롯한 모든 식별자 등록.

4.4 변수 선언의 실행 시점과 변수 호이스팅

* 변수 호이스팅: 변수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바 스크립트 고유의 특징

4.5 값 할당

변수 선언은 소스 코드가 순차적으로 실행되는 시점인 런타임 이전 실행.

값 할당은 소스 코드가 순차적으로 실행되는 시점인 런타임에 실행.

4.6 값 재할당

* 상수(Constant) : 단 한 번만 할당 가능한 변수 (값을 재할당할 수 없어 저장된 값을 변경 불가능한 수)

* 언매니지드 언어: C와 같이 메모리 제어를 개발자가 주도적으로 할 수 있음 (<-> 매니지드 언어)

* 재할당: 새로운 메모리 공간에 값을 저장함. (기존 공간에 새로운 값을 저장하는 것이 아님.)

* 더이상 사용되지 않는 메모리는 가비지 콜렉터에 의해 메모리에서 자동 해제됨.

* var 키워드로 선언된 변수는 undefined 초기화 때문에 변수 처음 값 할당도 재할당

4.7 식별자 네이밍 규칙

- 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어, 달러 기호를 포함할 수 있다.

- 식별자는 특수문자를 제외한 문자, 언더스코어, 달러 기호로 시작해야 한다.

- 예약어는 식별자로 사용할 수 없다.

- 변수의 존재 목적을 위해 명확히 표현하여야 한다.

* 네이밍 컨밴션

- 카멜케이스

- 스네이크케이스

-파스칼케이스

5. 표현식과 문

5-1. 값

10 + 20; //30

* 값: 식이 해석(평가)되어 생성된 결과

5-2. 리터럴

* 리터럴: 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법

5-3. 표현식

* 표현식: 값으로 해석될 수 있는 문. 표현식이 해석되면 새로운 값을 참조하거나 기존 값을 참조. (값이 위치할 수 있는 자리에 위치할 수 있음.)

5-4. 문

* 문: 프로그램을 구성하는 기본 단위, 최소 실행 단위

* 토큰: 문법적인 의미를 가지고 문법적으로 더이상 나눌 수 없는 코드의 기본 요소

5-5. 세미콜론과 세미콜론 자동 삽입 기능

- 세미콜론은 문의 종료를 나타냄. 자바 스크립트에서는 세미콜론을 자동적으로 붙여 주는 세미콜론 자동 삽입 기능(ASI)가 존재한다. 하지만 직접 사용하는 것을 권장함.

5-6. 표현식인 문 vs 표현식이 아닌 문

- 변수에 할당했을 때 SyntaxError 발생하는 것이 표현식이 아닌 문.

6. 데이터 타입

6-1. 숫자 타입

- 정수 vs 실수 구분하지 않고 하나의 타입만 존재한다. 모든 실수를 실수로 처리하며 정수를 표현하기 위한 데이터 타입은 존재하지 않는다. 정수 간 나눗셈에서도 실수가 나올 수 있다.

- 모두 메모리에는 64bit 부동소수점 2진수로 저장된다. 값을 참조할 때 항상 10진수로 해석된다.

6-2. 문자열 타입 [원시 타입]

- 0개 이상, 16bit 유니코드 문자의 집합.

- 문자열은 작은 따옴표, 큰 따옴표, 백틱으로 텍스트를 감싸야 한다.(키워드나 식별자 같은 토큰과 구분 필요.)

- 문자열 생성 후 변경 불가(원시 타입)

6-3. 템플릿 리터럴

- 백틱 사용해 표현

* 멀티라인 문자열

- 일반 문자열 내 줄바꿈 허용하지 않는다. (줄바꿈의 공백 표현 시 \로 시작하는 이스케이프 시퀀스 사용)

- 템플릿 리터럴 내에서는 이스케이프 시퀀스 미사용해도 줄바꿈과 공백이 허용된다.

* 표현식 삽입 - ${}으로 표현식 감싸기

- 문자열은 문자열 연산자 '+'를 통해 연결 가능하다. (피연산자 중 하나 이상이 문자열인 경우 동작)

- 템플릿 리터럴 내에서 표현식삽입을 통해 간단히 문자열 삽입이 가능하고 문자열 연산자보다 간편하다.

6-4. 불리언 타입- true / false

6-5. undefined 타입

var 선언 - 암묵적 undefined 초기화

6-6. null 타입

- 변수에 값이 없다는 것을 명시할 때 사용한다. (이전 값을 명시적으로 제거하며 더이상 참조하지 않겠다는 의미)

- 함수가 유효한 값을 반환할 수 없을 때도 명시적으로 null을 반환한다.

6-7. 심벌 타입 (ES6에 추가된 7번째 타입) [원시 타입]

- 다른 값과 중복되지 않는 유일무이한 값. (이름 충돌 위험이 없는 객체의 유일한 프로퍼티 키를 만들 때 사용한다.)

- 심벌 외에 원시 타입은 리터럴을 통해 생성하면 심벌은 Symbol 함수를 호출하여 생성한다.

6-8. 객체 타입 (vs 원시 타입)

- 자바스크립트는 객체 기반의 언어로 위 6개의 데이터 타입 이외는 객체 타입.

6-9. 데이터 타입의 필요성

- 데이터 타입에 의한 메모리 공간의 확보와 참조 (값을 참조할 때, 식별자를 통해 값이 저장되어 있는 메모리 공간의 선두 메모리 셀의 주소를 찾아갈 수 있다. 자바스크립트의 엔진은 변수의 데이터 타입을 인식하여 변수를 참조할 때 메모리 셀의 크기를 한 번에 읽어들인다.)

- 데이터 타입에 의한 값의 해석

6-10. 동적 타이핑

- 자바 스크립트의 변수는 선언할 때 타입을 선언하지 않는데 이는 변수가 선언이 아닌 할당에 의해 타입이 결정되고 재할당에 의해 변수의 타입이 언제든지 동적으로 변할 수 있기 때문에 동적 타입 언어이다.

- 값을 확인하기 전까지는 타입 확신을 할 수 없기 때문에 변수를 제한적으로 사용, 유효 범위를 최대한 작게 하고, 전역 변수를 사용하는 것을 지양하고 변수보다는 상수 사용을 늘리며 목적과 의미를 파악할 수 있도록 네이밍하는 것이 중요하다.