[TIL 9] Vue.js 소개, Vue.js를 위한 ES6

nini·2025년 3월 14일

JavaScript KB KB it's your life TIL node.js vue.js

KB IT's Your Life

목록 보기

9/40

Vue.js 소개

DOM(Document Object Model, 문서 객체 모델)?

웹 페이지(HTML 문서)를 자바스크립트에서 조작할 수 있도록 객체로 표현한 구조
HTML을 자바스크립트에서 다룰 수 있도록 만든 트리 구조

✅ DOM은 HTML을 자바스크립트에서 다룰 수 있도록 트리 구조로 표현한 것

✅ 자바스크립트로 HTML 요소를 가져오고, 수정하고, 추가하고, 삭제할 수 있음

✅ 이벤트를 추가해서 동적인 웹 페이지를 만들 수 있음

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

Document
 ├── <html>
 │   ├── <head>
 │   │   ├── <title> → "My Page"
 │   ├── <body>
 │       ├── <h1> → "Hello, World!"
 │       ├── <p> → "This is a paragraph."

Vue.js

프로그레시브 자바스크립트 프레임워크
- 웹 사용자 인터페이스를 만들기 위한 쉽고 강력하며 다재다능한 프레임워크
MVVM 패턴
- Model-View-ViewModel
- 애플리케이션 로직과 UI 분리를 위해 설계된 패턴
  - View: HTML과 CSS로 작성
    - ViewModel: View의 실제 논리(script 코드) 및 데이터 흐름 담당
    - Model: 순수 데이터 자체
가상 DOM
- 브라우저 메모리에서 관리하는 DOM에 대한 추상 객체
- 빠른 UI 렌더링 성능을 제공
- 브라우저 DOM은 화면에 그리는 직접 그리는 작업을 수행
- 가상 DOM은 변경된 부분을 탐지하는 것이 목적
- ✅ 데이터가 수정되었을 때 액션을 취하겠다

개발환경 설정

개발도구
- Node.js
- npm
- VS Code - Vue 3 Snippets 확장팩
- 크롬 - Vue.js devtools 확장팩

Chrome 확장팩 확인

데이터 변경 감지 및 UI 업데이트(개발도구 콘솔에서 확인 가능)

Vue.js를 위한 ES6

ES6(ECMAScript6)

ES6는 이전 버전의 문법을 포함하여 지원하면서 Class, Arrow Function 등 새로운 문법을 추가로 지원함
ES6 미지원 브라우저에 대한 대처
- 트랜스파일러(Transpiler)를 이용해서 ES6코드를 ES5 코드로 변환
- babel, tsc(typescript 트래스파일러) 등
- vue.js 개발 환경에서 자동으로 처리해 줌
  - 모듈 작성(ES 모듈) -(배포, packing)→ 비모듈 코드
  - vite를 써서 모듈로 작성된 것을 하나로 묶어준 다음(packing) babel 작업을 해줌

let과 const

var 변수의 호이스팅
- 자바스크립트가 실행될 때 선언문을 먼저 해석 후 실행
- 변수의 선언문이 사용하는 문장 후에 있어도 해당 변수를 인식
```
console.log(A1); // undefined
var A1 = "hello"; // 여기서 선언한 걸 위에서도 쓸 수 있음(호이스팅)
// 재선언도 가능 
// 비권장
```
- 함수 단위로 호이스팅
  - 블록 단위로 동작하지 않음
  - 진정한 지역변수가 아님
- 변수 선언을 여러 번 할 수 있음(에러가 아님)
let 변수
- ES6에서 도입한 블록 단위의 변수 선언
  - 유효 범위가 블록 단위임
- 호이스팅 지원하지 않음
  - 선언하지 않고 사용하면 에러 발생
const
- 값 변경 불가 → 상수 선언
- 범위(scope)는 let과 동일
- 참조 변수인 경우 참조는 변경 불가
  - 필드는 수정 가능
  
  ⇒ 객체 내부의 속성을 변경할 수는 있지만 새로운 객체를 생성하여 할당하는 것은 허용하지 않는다!
```
			const p1 = { name: 'john', age: 20 };
			p1.age = 22;
			console.log(p1); // { name: 'john', age: 22 }
			//p1 = { name: 'lee', age: 25 }; // 불가능
			// typeError: Assignment to constant variable.
			```
```

기본 파라미터와 가변 파라미터

기본 파라미터(Default Parameter): 함수 파라미터의 기본값을 지정

함수 호출 시 인수를 생략했을 때 가지는 기본값을 지정
반드시 뒤부분에 지정(중간에만 기본값 지정하는 것은 불가능)

가변 파라미터(Rest Parameter): 여러 개의 파라미터 값을 배열로 받을 수 있도록 함

전달하는 파라미터의 개수를 가변적으로 적용

매개변수 앞에 …연산자 지정

전달된 인수를 매개변수로 매칭한 후,
매칭되지 않은 인수를 모아 배열로 지정 → 가변 파라미터로 전달
```
function func(arg1, arg2, ...argv) {...}
-> 배열
```

1개만 지정 가능, 마지막 매개변수에만 지정 가능

function foodReport(name, age, ...favoriteFoods) {
	console.log(name + ", " + age);
	console.log(favoriteFoods);
}

foodReport("이몽룡", 20, "짜장면", "냉면", "불고기");
foodReport("홍길동", 16, "초밥");
foodReport("이", 20);

이몽룡, 20
[ '짜장면', '냉면', '불고기' ]
홍길동, 16
[ '초밥' ]
이, 20
[] -> 빈 배열이 출력됨

구조분해 할당

구조분해 할당(Destructing Assignment)

배열, 객체의 값들을 추출하여 한 번에 여러 변수에 할당할 수 있는 기능

함수의 파라미터에서도 사용 가능

// 많이 쓰는 기법
function addContact1({name, phone, email="이메일없음", age=0}) { // 여기서 대입은 기본값
	console.log(name,phone,email,age);
}
addContact1({ name : "이몽룡", phone : "010-3434-8989" }) // 키워드 인수 전달(호출)
// 객체를 표현할 때 순서는 상관이 없음

-> 함수를 호출할 때 전달한 객체를 구조분해 할당으로 받아내면서 기본 파라미터까지 지정한 것

function addContact2(contact) { // 객체 하나로 받아줌
	if (!contact.email) contact.email = "이메일없음";
	if (!contact.age) contact.age = 0;
	let { name, phone, email, age} = contact;
	console.log(name,phone,email,age);
}
addContact2({ name : "이몽룡", phone : "010-3434-8989" })

-> 인자를 객체로 전달하도록 한 함수

function addContact3(name,phone,email="이메일없음",age=0) { // 중괄호를 안 붙임 -> 위치 기반
	console.log(name,phone,email,age);
}
addContact3("이몽룡","010-3434-8989")

-> 기본 파라미터만 적용한 함수

화살표 함수(Arrow Function)

화살표 함수의 형식

기존 함수 표현식 간결화
함수를 정의하는 영역의 this를 그대로 전달받을 수 있음

함수의 본체가 한 줄 문장인 경우

{} 생략
한 줄을 표현식으로 해석하여 자동 리턴(return 생략)

(a,b) => {a,b} // {a:a, b:b}를 원했지만 실제로 실행하면 이게 아님 -> return undefined
// 중괄호의 해석을 문제(함수의 코드블럭을 나타내는 중괄호로 해석됨)
// 객체 내부가 아니다!
(a,b) => ({a,b}) // 객체의 리터럴이 됨, 괄호로 반드시 묶어주어야 함

자바스크립트의 this
- 메서드, 함수가 호출될 때마다 현재 호출중인 메서드를 보유한 객체가 this로 연결
- 현재 호출 중인 메서드를 보유한 객체가 없다면 전역 객체가 연결
  - 전역 객체(Global Object)
    - 브라우저 환경에서는 window 객체
- ~~일반 함수에서는? this는 top 객체~~
자바스크립트의 this 지정
- 자바스크립트 함수, 메서드는 어떤 객체의 메서드 형태로 호출되느냐가 this를 결정하는 기본적인 규칙
  
  함수, 메서드를 호출할 때 직접 연결할 this를 지정하고 싶다면?
  
  (함수 수준의 메서드 이용하기!)
- bind() 지정한 객체를 this로 미리 연결한(binding) 새로운 함수를 리턴(영구적으로 바꿈)
- apply(), call() 지정한 객체를 this로 연결한 후 함수를 직접 호출(이번 한번만 바꿔서 호출하겠다?)
화살표 함수에서의 this
- 함수를 정의하는 영역의 this 그대로 전달

새로운 객체 리터럴

객체 리터럴
- 기존 객체 리터럴
- ES6 객체 리터럴
  - 변수명이 객체의 속성명과 일치하는 경우 변수명 제시 가능
- 메서드인 경우 function 키워드 없이 바로 선언

전개 연산자

전개 연산자(spread operator)
- … 연산자
- 배열이나 객체를 …연산자와 함께 객체 또는 배열에서 사용 → 객체, 배열 내의 값을 분해된 값으로 전달
- 기존 값을 복사하거나, 기존 값을 복사하면서 새로운 항목 추가시 사용
  
  let obj2 = obj1 : 참조를 통해 서로 다른 두 객체가 같은 내용을 공유하겠다(동일한 객체 참조)
  
  let obj3 = {...obj1} : 복사(객체 내부의 값은 복사하지만 서로 다른 객체임)
  
  let obj4 = {...obj1, color} : 기존 객체(color)가 있었다면 업데이트, 없었다면 추가가 됨(새로운 속성 추가)

Proxy

Proxy
- 객체의 속성을 읽어오거나 설정하는 작업을 가로채기 위해 래핑할 수 있도록 하는 객체
- 객체의 속성에 접근할 때 개발자가 원하는 지정된 작업을 수행하도록 할 수 있음

nini

사용자를 고려한 디자인과 UX에 관심있는 개발자

이전 포스트

[TIL 8] 파일 관리하기 - path, File System 모듈, 노드와 비동기 처리

다음 포스트