자바스크립트 기본, 심화 문법 및 엔진 동작 원리(5) - 자바스크립트 객체 정의 및 사용 + 모듈 시스템

✅ 객체 = 필드 + 메서드 (프로퍼티 집합)
✅ 객체 내에서 메서드 표현법
[1. Default 버전]
[2. Shorten 간략 버전]
✅ 자바스크립트 객체 생성 방법
객체 리터럴: JSON
클래스 (ES6+ 에서 사용 가능)
✅ 모듈 시스템: ES Modules(ESM) 의 imoprt / export 표현법
1. ESM 이전 모듈 시스템: <script> 태그
2. ESM(ECMAScript Modules): import / export
3. CJS(CommonJS): require / module.exports
모듈 시스템을 어떤때 어떤 것을 사용해야하는가?

728x90

✅ 객체 = 필드 + 메서드 (프로퍼티 집합)

[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 메서드: 클래스 메서드 앞에 # 을 붙인다.

getOwnPropertySymbols()로 객체의 퍼블릭 필드를 볼 수 있다.

✅ 모듈 시스템: 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 가능

728x90

'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

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

	//1.
	var person = {
	name: "Aaron",
	sayName: function() {
	console.log(this.name);
	}
	};


	//2.
	class Person {
	name = "Aaron";
	sayName = function() {
	console.log(this.name);
	}
	};

	var person = {
	name: "Aaron",
	sayName() {
	console.log(this.name);
	}
	};

	class User {

	constructor(firstname, lastname) {
	this.firstname = firstname
	this.lastname = lastname
	}

	fullname() {
	alert(`${this.firstname} ${this.lastname}`)
	}
	}

	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))

	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));

[HTML에서의 객체]

[클래스 내 Private 필드 설정과 Getter와 Setter 메서드]

[named export]: 고정된 명칭

[deefalut export]: 명칭 변경 가능

'ASAC 웹 풀스택' 카테고리의 다른 글

[HTML에서의 객체]

[클래스 내 Private 필드 설정과 Getter와 Setter 메서드]

[named export]: 고정된 명칭

[deefalut export]: 명칭 변경 가능

'ASAC 웹 풀스택' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역