✅ 객체 = 필드 + 메서드 (프로퍼티 집합)
[HTML에서의 객체]
- HTML(DOM) 객체 명칭: 요소(Element = 객체) = 속성(Attribute = 프로퍼티) + Content
- 요소: `<head></head>`
- 속성: `<div class="example">`
✅ 객체 내에서 메서드 표현법
[1. Default 버전]
//1.
var person = {
name: "Aaron",
sayName: function() {
console.log(this.name);
}
};
//2.
class Person {
name = "Aaron";
sayName = function() {
console.log(this.name);
}
};
[2. Shorten 간략 버전]
var person = {
name: "Aaron",
sayName() {
console.log(this.name);
}
};✅ 자바스크립트 객체 생성 방법
JSON보면 알 수 있듯 Java와 같이 객체 사용에 꼭 클래스가 필요한 건 아니다.
일반적으로 자바스크립트 코딩을 할때 웹만해선 클래스 없이 메서드 + 필드 만으로 모든것들을 만들 수 있다.
객체 리터럴: JSON
일반적으로 메서드를 포함하지 않은 JSON으로 데이터 전송 시 유용하게 사용한다. -> Java에서의 DTO와 유사
{
name: "Aaron",
age: 10,
}클래스 (ES6+ 에서 사용 가능)
조금이라도 SOLID나 디자인패턴 같은 객체 지향적 요인으로 코드 재사용성을 증대시키기 위해선 클래스를 사용
- 클래스를 왜 사용하는가? Encapsulation: 단순히 감춤이 아닌 독립된 시스템 구축
아래 코드는 User 객체를 만드는 코드
class User {
constructor(firstname, lastname) {
this.firstname = firstname
this.lastname = lastname
}
fullname() {
alert(`${this.firstname} ${this.lastname}`)
}
}[클래스 내 Private 필드 설정과 Getter와 Setter 메서드]
- private 필드: 클래스 필드 앞에 `#`을 붙인다.
- private 메서드: 클래스 메서드 앞에 `#` 을 붙인다.
✅ 모듈 시스템: ES Modules(ESM) 의 imoprt / export 표현법
두 방식의 자바스크립트 모듈 시스템이 존재하나, 프론트엔드에서는ES6 이후 ESM가 표준화되어 널리 쓰인다.
1. ESM 이전 모듈 시스템: <script> 태그
HTML 내 `<script>` 를 통해 필요한 라이브러리들을 받아 사용하였으니, 아래와 같은 수많은 문제가 발생
- 성능 문제: 페이지 로딩 시 동시에 모든 스크립트를 한번에 로드 후 실행, 큰 규모 프로젝트에 로딩 속도 문제
- 성능 최적화의 한계: 모든 스크립트를 동기적으로 로드 시 브라우저는 페이지 렌더링을 일시 중지
- 의존성 관리 어려움: 여러 개의 스크립트 간 의존성 관리(스크립트 간의 로드 순서 관리) 취약
- 전역 스코프 문제: 모든 `<script>` 스크립트들은 기본적으로 전역 스코프로 변수 이름 충돌이나 오염 발생
- 코드 재상용의 어려움: 모든 페이지에서 동일한 스크립트를 사용 시 코드의 재사용이 어려움
-> ESM과 CJS모듈 시스템 등장
2. ESM(ECMAScript Modules): import / export
앞선 `<script>`태그를 이용한 모듈은 전역 스코프, ESM은 모듈 스코프 -> 필요할 때만 가져다 쓸 수 있게 제공
- 브라우저에서 `import` 와 `export`를 완벽하게 지원하지 않아 webpack같은 모듈 번들러와 함께 사용
[named export]: 고정된 명칭
한 파일에 여러개 export
export const sum = (x, y) => x + y
export const minus = (x, y) => x - y
import { sum, minus } from './util.mjs'
console.log(sum(2, 4))
[deefalut export]: 명칭 변경 가능
한 파일에 하나만 export
export default (x, y) => x + y
import ssam from './util.mjs'
console.log(ssam(2, 4))
//-----------또는
const sum = (x, y) => x + y
export default sum
import ssam from './util.mjs'
console.log(ssam(2, 4));
3. CJS(CommonJS): require / module.exports
웹 브라우저(프론트엔드)에서가 아닌 웹 서버(백엔드)에서 자바스크립트 모듈 쓰려면 파일 단위 모듈화 절실
다양한 라이브러리 등장 및 웹 서버 자바스크립트 코딩량이 많아지면서 변수, 함수의 모듈화 필요
- Node.js 부터 새로운 모듈 시스템으로 ESM을 채택하긴 했지만, 여전히 node에선 CJS가 지배적이다.
모듈 시스템을 어떤때 어떤 것을 사용해야하는가?
일반적으로 CJS는 Node.js(서버)에서 사용 ESM은 브라우저에서 사용
- CJS를 지원하는 것이 중요한 이유: Node.js 활용한 SSR 사용 서비스를 위해 CJS 지원 필요
- CJS - 모듈 동기 로드: 빌드 타임에 정적 분석 불가 -> 런타임에 모듈 관계 파악
- ESM을 지원한는 것이 중요한 이유: Tree-Shaking을 지원하는 ESM이 브라우저 성능에 중요
- ESM - 모듈 비동기 로드: 정적 모듈 의존 강제 = 빌드 타임에 Tree-Shaking 가능
'ASAC 웹 풀스택' 카테고리의 다른 글
| React 의 특장점, 렌더 라이프사이클 및 Hook(2) - 단방향 바인딩 + Hook (1) | 2024.09.20 |
|---|---|
| React 의 특장점, 렌더 라이프사이클 및 Hook(1) - JSX문법 (0) | 2024.09.20 |
| 자바스크립트 기본, 심화 문법 및 엔진 동작 원리(3) - JS 엔진의 수행 방식 (0) | 2024.09.10 |
| 자바스크립트 기본, 심화 문법 및 엔진 동작 원리(2) - JS 변수, 함수 정의 및 사용 (0) | 2024.09.10 |
| 자바스크립트 기본, 심화 문법 및 엔진 동작 원리(1) - 함수형 프로그래밍 패러다임(순수함수, 얕은복사, 깊은복사) (1) | 2024.09.10 |
