From 9f5af565ac316354a15680cb9211c1c4ffbd2c4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B2=BD=ED=95=98?= Date: Mon, 18 Aug 2025 18:59:37 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Create=20=EC=9D=B4=EA=B2=BD=ED=95=98.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 4-1 주차 요약 --- .../\354\235\264\352\262\275\355\225\230.md" | 286 ++++++++++++++++++ 1 file changed, 286 insertions(+) create mode 100644 "4-1_\352\260\235\354\262\264 \352\270\260\354\264\210/\354\235\264\352\262\275\355\225\230.md" diff --git "a/4-1_\352\260\235\354\262\264 \352\270\260\354\264\210/\354\235\264\352\262\275\355\225\230.md" "b/4-1_\352\260\235\354\262\264 \352\270\260\354\264\210/\354\235\264\352\262\275\355\225\230.md" new file mode 100644 index 0000000..dd8b998 --- /dev/null +++ "b/4-1_\352\260\235\354\262\264 \352\270\260\354\264\210/\354\235\264\352\262\275\355\225\230.md" @@ -0,0 +1,286 @@ +# 1️⃣ 폴리필 + +- 모던 자바스크립트를 이용해 스크립트를 작성하려면 트랜스파일러와 폴리필은 필수 + +# 2️⃣ 객체 + +- 빈 객체 만드는 두가지 방법 + + ```jsx + let user = new Object(); // '객체 생성자' 문법 + let user = {}; // '객체 리터럴' 문법 + ``` + + - 객체를 선언할 땐 주로 ‘객체 리터럴’ 방법을 사용한다 +- 객체 기본 구성 및 규칙 + + ```jsx + let object = { // 객체 + key1: value1, // 프로퍼티 1 + key2: value2, // 프로퍼티 2 + ... + } + ``` + + - key = 프로퍼티 ‘이름’ = ‘식별자’ + - key엔 문자형(or 심볼), value엔 모든 자료형이 허용 + - 프로퍼티 이름 규칙 + - 숫자로 시작하거나, 띄어쓰기•특수문자(`$`와 `_`제외)가 있으면 안됨 + - 위의 경우 이름을 따옴표로 묶어줘야 함 + - 객체 프로퍼티 이름에는 예약어 사용 제약이 없음(참고: 변수 이름엔 불가능) + - 특별 대우를 받는 이름: `__proto__` + - 점 표기법이나 []표기법으로 프로퍼티 값을 읽을 수 있다 + ex. `console.log(object.key1) // value1 출력` + `console.log(object["key1"]) // value1 출력` + + 주의할 점 — [] 표기법 안에서 문자열을 사용할 땐 문자열을 따옴표로 묶어줘야 한다 + + > **유연하게 코드를 작성할 수 있는 대괄호 표기법** + > + > + > `user[표현식]` + > 1. 대괄호 안의 표현식을 먼저 평가해서 어떤 값인지 확인 + > 2. 그 결과값을 문자열로 변환해서 객체의 프로퍼티 키로 사용 + > + > ```jsx + > let user = {}; + > + > // case 1: 변수 사용 + > let key = "likes birds"; + > user[key] = true; + > console.log(user); + > // { "likes birds": true } + > + > // case 2: 문자열 연산 + > user["like" + "s birds"] = false; + > console.log(user); + > // { "likes birds": false } + > + > // case 3: 함수 호출 결과 + > function getKey() { return "hobby"; } + > user[getKey()] = "reading"; + > console.log(user); + > // { "likes birds": false, "hobby": "reading" } + > + > // case 4: 숫자 표현식 + > user[2 * 5] = "ten"; + > console.log(user); + > // { "likes birds": false, "hobby": "reading", "10": "ten" } + > ``` + > + + > **대괄호 표기법 VS. 점 표기법** + 프로퍼티 이름이 확정된 상황이고, 단순한 이름이라면 처음엔 **점 표기법**을 사용하다가 뭔가 복잡한 상황이 발생했을 때 **대괄호 표기법**으로 바꾸는 경우가 많음 + > + - delete 연산자를 사용해 프로퍼티를 삭제할 수 있다 + - 할당으로 프로퍼티를 추가할 수 있다 + - **상수 객체는 수정될 수 있다** + object의 값을 고정하지만 그 내용은 고정하지 않음 + - 객체 정렬 방식 + : 정수 프로퍼티는 자동으로 정렬되고, 그 외의 프로퍼티는 객체에 추가한 순서대로 정렬됨 + +### 계산된 프로퍼티 + +- 객체를 만들 때 객체 리터럴({})안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티라고 부른다 +”객체 안에 [name]로 적힌 프로퍼티 키가 있다면, 변수 name 에서 프로퍼티 키를 가져오겠다는 것을 의미” + +## 단축 프로퍼티 + +- 프로퍼티 값을 기존 변수에서 받아와 사용하는 경우가 종종 있는데, +프로퍼티의 이름과 값이 변수의 이름과 동일할 때, 프로퍼티 값 단축 구문을 사용하면 코드를 짧게 줄일 수 있다 + + ```jsx + function makeUser(name, age) { + return { + name, // name: name 과 같음 + age: 30, // 한 객에체서 일반 프로퍼티와 단축 프로퍼티를 함께 사용하는 것도 가능 + // ... + }; + } + + let user = makeUser("John", 30); + alert(user.name); // John + ``` + + +## 프로퍼티 존재 여부 확인하기 — `in` 연산자 + +- 문법 + + ```jsx + **"**key**"** in object + ``` + +- 기본규칙 + - 불린형으로 반환(true / false) + - 프로퍼티 이름은 반드시 따옴표로 감싸야한다 + + 감싸지 않을 경우 엉뚱한 변수가 조사 대상이 됨(아래 예시) + + ```jsx + let user = { age: 30 }; + + let key = "age"; + alert( key in user ); // true, 변수 key에 저장된 값("age")을 사용해 프로퍼티 존재 여부를 확인합니다. + + ``` + + - 존재하지 않는 프로퍼티에 접근하면 에러가 아닌 `undefined`를 반환 + +## for…in 반복문 + +- 객체의 모든 키 혹은 값을 순회 +- 문법 + + ```jsx + //예시 + let user = { + name: "John", + age: 30, + isAdmin: true + }; + + for (let key in user) { // **반복 변수 선언** + // 키 + alert( key ); // name, age, isAdmin + // 키에 해당하는 값 + alert( user[key] ); // John, 30, true + } + ``` + + +# 3️⃣ 참조에 의한 객체 복사 + +- **객체가 할당된 변수를 복사할 땐 ‘객체’가 복사되는 게 아니라, +객체가 저장되어있는 메모리 주소인 객체에 대한 '참조 값’이 저장됨** +- 기본 규칙 + - 비교 연산자(`==`, `===`) + 피연산자인 두 객체가 동일한 객체일 경우 `true` 반환 + 독립된 객체면 `false` 반환 + +## 객체 복사 + +*참조에 의한 복사로 해결 가능한 일이 대다수이기 때문에, 객체를 복제해야 할 일은 거의 없다. 그래도 정말 복제가 필요한 상황이라면?* + +### 기존에 있던 객체와 똑같으면서 독립적인 객체를 만드는 법 + +1. 반복문 사용 + +```jsx +let user = { + name: "John", + age: 30 +}; + +let clone = {}; // 새로운 빈 객체 + +// 빈 객체에 user 프로퍼티 전부를 복사해 넣음 +for (let key in user) { + clone[key] = user[key]; +} + +// 이제 clone은 완전히 독립적인 복제본 +clone.name = "Pete"; // clone의 데이터 변경 + +alert( user.name ); // 기존 객체에는 여전히 John이 있음 +``` + +1. Object.assign 사용 (얕은 복사) + +```jsx +// 예시1 +let user = { name: "John" }; +let permissions1 = { canView: true }; +let permissions2 = { canEdit: true }; +// permissions1과 permissions2의 프로퍼티를 user로 복사 +Object.assign(user, permissions1, permissions2); +// now user = { name: "John", canView: true, canEdit: true } + +// 만약 목표 객체(user)에 동일한 이름을 가진 프로퍼티가 있다면 기존 값이 덮어씌워짐 +let user = { name: "John" }; +Object.assign(user, { name: "Pete" }); +alert(user.name); // user = { name: "Pete" } + +// 예시2 +let user = { + name: "John", + age: 30 +}; +let clone = Object.assign({}, user); // user에 있는 모든 프로퍼티가 빈 배열에 복사되고 변수에 할당됨 +``` + +- 목표 객체(user)에 동일한 이름을 가진 프로퍼티가 있을 땐, 기존 값이 덮어씌워짐 + +### 중첩 객체 복사(깊은 복사) + +- 복사할 객체의 키 별 값을 검사하면서 그 값이 객체인 경우 객체의 구조도 복사해주는 반복문을 사용해야 함 — “깊은 복사” +1. 재귀 함수 이용 + + ```jsx + var deepCopy = function (obj) { + var result = {}; + if (typeof obj === 'object' && obj !== null) { + for (var prop in obj) { + result[obj] = deepCopy(obj[prop]); + } + } else { + result = obj; + } + return result; + }; + ``` + +2. JSON.parse(JSON.stringify(obj))를 사용 + + ```jsx + const obj1 = { a: 1, b: { c: 2 } }; + const deepCopy1 = JSON.parse(JSON.stringify(obj1)); + + deepCopy1.b.c = 3; + + console.log(obj1.b.c); // 2 - 원본 객체는 영향 받지 않음 + console.log(deepCopy1.b.c); // 3 + + const obj2 = { + number: 1, + undefinedValue: undefined, + symbolValue: Symbol("unique") + }; + + const deepCopy2 = JSON.parse(JSON.stringify(obj2)); + + console.log(deepCopy2); // {number: 1} -- JSON으로 변환 가능한 데이터만 복사 + ``` + + - 참고: “얕은 복사와 깊은 복사” https://pozafly.github.io/javascript/shallo-copy-and-deep-copy/ + - `JSON.stringify()` — JavaScript 값이나 객체를 *JSON 문자열로 변환 + + *JSON: JavaScript Object Notation의 약자로, 브라우저와 서버 사이에서 오고가는 데이터의 형식 + + - 얕은 복사: 참조형 타입의 값의 바로 아래 단계의 값만 복사하는 방법 + - spread(`…`) 연산자 — 배열이나 객체와 같은 반복 가능한(iterable) 객체의 요소들을 펼쳐서 다른 배열이나 객체에 추가하거나 함수 호출 시 인수로 전달할 때 사용 + - 참고2: “JS 깊은 복사 쉽게 하기” + https://puk0806.tistory.com/117 +3. 자바스크립트 라이브러리 [lodash](https://lodash.com/)의 메서드인 [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep)을 사용 + +# 4️⃣ 가비지 컬렉션 + +- 자바스트립트는 ‘도달 가능성’이라는 개념을 사용해 메모리 관리를 수행하는데, 도달할 수 없는 객체는 자바스크립트 엔진 내에 있는 가비지 컬렉터가 삭제한다 + - 도달 가능한 값이란? + 어떻게든 접근하거나 사용할 수 있는 값 + 도달 가능한 값은 메모리에서 삭제되지 않는다 + 1) 루트(root) + - 현재 함수의 지역 변수와 매개변수 + - 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 + - 전역 변수 등 + 2) 루트가 참조하는 값이나 체이닝으로 루트에서 참조할 수 있는 값 +- 가비지 컬렉션 기본 알고리즘 — ‘mark-and-sweep’ + + 가비지 컬렉터가 루트 정보를 수집하고 기억(mark)함 → 루트가 참조하고 있는 것들은 기억함 → 도달 가능한 모든 객체에 방문할 때까지 계속 mark → 방문할 수 없었던 객체를 메모리에서 삭제 + + +## 자바스크립트 엔진 최적화 기법 + +- generational collection(세대별 수집) +- incremental collection(점진적 수집) +- idle-time collection(유휴 시간 수집) From 1436ca91d39fafe3817e7e156ffcffbd92cbeb71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B2=BD=ED=95=98?= Date: Mon, 18 Aug 2025 19:00:36 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Delete=204-1=5F=EA=B0=9D=EC=B2=B4=20?= =?UTF-8?q?=EA=B8=B0=EC=B4=88/=EC=9D=B4=EA=B2=BD=ED=95=98.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\354\235\264\352\262\275\355\225\230.md" | 286 ------------------ 1 file changed, 286 deletions(-) delete mode 100644 "4-1_\352\260\235\354\262\264 \352\270\260\354\264\210/\354\235\264\352\262\275\355\225\230.md" diff --git "a/4-1_\352\260\235\354\262\264 \352\270\260\354\264\210/\354\235\264\352\262\275\355\225\230.md" "b/4-1_\352\260\235\354\262\264 \352\270\260\354\264\210/\354\235\264\352\262\275\355\225\230.md" deleted file mode 100644 index dd8b998..0000000 --- "a/4-1_\352\260\235\354\262\264 \352\270\260\354\264\210/\354\235\264\352\262\275\355\225\230.md" +++ /dev/null @@ -1,286 +0,0 @@ -# 1️⃣ 폴리필 - -- 모던 자바스크립트를 이용해 스크립트를 작성하려면 트랜스파일러와 폴리필은 필수 - -# 2️⃣ 객체 - -- 빈 객체 만드는 두가지 방법 - - ```jsx - let user = new Object(); // '객체 생성자' 문법 - let user = {}; // '객체 리터럴' 문법 - ``` - - - 객체를 선언할 땐 주로 ‘객체 리터럴’ 방법을 사용한다 -- 객체 기본 구성 및 규칙 - - ```jsx - let object = { // 객체 - key1: value1, // 프로퍼티 1 - key2: value2, // 프로퍼티 2 - ... - } - ``` - - - key = 프로퍼티 ‘이름’ = ‘식별자’ - - key엔 문자형(or 심볼), value엔 모든 자료형이 허용 - - 프로퍼티 이름 규칙 - - 숫자로 시작하거나, 띄어쓰기•특수문자(`$`와 `_`제외)가 있으면 안됨 - - 위의 경우 이름을 따옴표로 묶어줘야 함 - - 객체 프로퍼티 이름에는 예약어 사용 제약이 없음(참고: 변수 이름엔 불가능) - - 특별 대우를 받는 이름: `__proto__` - - 점 표기법이나 []표기법으로 프로퍼티 값을 읽을 수 있다 - ex. `console.log(object.key1) // value1 출력` - `console.log(object["key1"]) // value1 출력` - - 주의할 점 — [] 표기법 안에서 문자열을 사용할 땐 문자열을 따옴표로 묶어줘야 한다 - - > **유연하게 코드를 작성할 수 있는 대괄호 표기법** - > - > - > `user[표현식]` - > 1. 대괄호 안의 표현식을 먼저 평가해서 어떤 값인지 확인 - > 2. 그 결과값을 문자열로 변환해서 객체의 프로퍼티 키로 사용 - > - > ```jsx - > let user = {}; - > - > // case 1: 변수 사용 - > let key = "likes birds"; - > user[key] = true; - > console.log(user); - > // { "likes birds": true } - > - > // case 2: 문자열 연산 - > user["like" + "s birds"] = false; - > console.log(user); - > // { "likes birds": false } - > - > // case 3: 함수 호출 결과 - > function getKey() { return "hobby"; } - > user[getKey()] = "reading"; - > console.log(user); - > // { "likes birds": false, "hobby": "reading" } - > - > // case 4: 숫자 표현식 - > user[2 * 5] = "ten"; - > console.log(user); - > // { "likes birds": false, "hobby": "reading", "10": "ten" } - > ``` - > - - > **대괄호 표기법 VS. 점 표기법** - 프로퍼티 이름이 확정된 상황이고, 단순한 이름이라면 처음엔 **점 표기법**을 사용하다가 뭔가 복잡한 상황이 발생했을 때 **대괄호 표기법**으로 바꾸는 경우가 많음 - > - - delete 연산자를 사용해 프로퍼티를 삭제할 수 있다 - - 할당으로 프로퍼티를 추가할 수 있다 - - **상수 객체는 수정될 수 있다** - object의 값을 고정하지만 그 내용은 고정하지 않음 - - 객체 정렬 방식 - : 정수 프로퍼티는 자동으로 정렬되고, 그 외의 프로퍼티는 객체에 추가한 순서대로 정렬됨 - -### 계산된 프로퍼티 - -- 객체를 만들 때 객체 리터럴({})안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티라고 부른다 -”객체 안에 [name]로 적힌 프로퍼티 키가 있다면, 변수 name 에서 프로퍼티 키를 가져오겠다는 것을 의미” - -## 단축 프로퍼티 - -- 프로퍼티 값을 기존 변수에서 받아와 사용하는 경우가 종종 있는데, -프로퍼티의 이름과 값이 변수의 이름과 동일할 때, 프로퍼티 값 단축 구문을 사용하면 코드를 짧게 줄일 수 있다 - - ```jsx - function makeUser(name, age) { - return { - name, // name: name 과 같음 - age: 30, // 한 객에체서 일반 프로퍼티와 단축 프로퍼티를 함께 사용하는 것도 가능 - // ... - }; - } - - let user = makeUser("John", 30); - alert(user.name); // John - ``` - - -## 프로퍼티 존재 여부 확인하기 — `in` 연산자 - -- 문법 - - ```jsx - **"**key**"** in object - ``` - -- 기본규칙 - - 불린형으로 반환(true / false) - - 프로퍼티 이름은 반드시 따옴표로 감싸야한다 - - 감싸지 않을 경우 엉뚱한 변수가 조사 대상이 됨(아래 예시) - - ```jsx - let user = { age: 30 }; - - let key = "age"; - alert( key in user ); // true, 변수 key에 저장된 값("age")을 사용해 프로퍼티 존재 여부를 확인합니다. - - ``` - - - 존재하지 않는 프로퍼티에 접근하면 에러가 아닌 `undefined`를 반환 - -## for…in 반복문 - -- 객체의 모든 키 혹은 값을 순회 -- 문법 - - ```jsx - //예시 - let user = { - name: "John", - age: 30, - isAdmin: true - }; - - for (let key in user) { // **반복 변수 선언** - // 키 - alert( key ); // name, age, isAdmin - // 키에 해당하는 값 - alert( user[key] ); // John, 30, true - } - ``` - - -# 3️⃣ 참조에 의한 객체 복사 - -- **객체가 할당된 변수를 복사할 땐 ‘객체’가 복사되는 게 아니라, -객체가 저장되어있는 메모리 주소인 객체에 대한 '참조 값’이 저장됨** -- 기본 규칙 - - 비교 연산자(`==`, `===`) - 피연산자인 두 객체가 동일한 객체일 경우 `true` 반환 - 독립된 객체면 `false` 반환 - -## 객체 복사 - -*참조에 의한 복사로 해결 가능한 일이 대다수이기 때문에, 객체를 복제해야 할 일은 거의 없다. 그래도 정말 복제가 필요한 상황이라면?* - -### 기존에 있던 객체와 똑같으면서 독립적인 객체를 만드는 법 - -1. 반복문 사용 - -```jsx -let user = { - name: "John", - age: 30 -}; - -let clone = {}; // 새로운 빈 객체 - -// 빈 객체에 user 프로퍼티 전부를 복사해 넣음 -for (let key in user) { - clone[key] = user[key]; -} - -// 이제 clone은 완전히 독립적인 복제본 -clone.name = "Pete"; // clone의 데이터 변경 - -alert( user.name ); // 기존 객체에는 여전히 John이 있음 -``` - -1. Object.assign 사용 (얕은 복사) - -```jsx -// 예시1 -let user = { name: "John" }; -let permissions1 = { canView: true }; -let permissions2 = { canEdit: true }; -// permissions1과 permissions2의 프로퍼티를 user로 복사 -Object.assign(user, permissions1, permissions2); -// now user = { name: "John", canView: true, canEdit: true } - -// 만약 목표 객체(user)에 동일한 이름을 가진 프로퍼티가 있다면 기존 값이 덮어씌워짐 -let user = { name: "John" }; -Object.assign(user, { name: "Pete" }); -alert(user.name); // user = { name: "Pete" } - -// 예시2 -let user = { - name: "John", - age: 30 -}; -let clone = Object.assign({}, user); // user에 있는 모든 프로퍼티가 빈 배열에 복사되고 변수에 할당됨 -``` - -- 목표 객체(user)에 동일한 이름을 가진 프로퍼티가 있을 땐, 기존 값이 덮어씌워짐 - -### 중첩 객체 복사(깊은 복사) - -- 복사할 객체의 키 별 값을 검사하면서 그 값이 객체인 경우 객체의 구조도 복사해주는 반복문을 사용해야 함 — “깊은 복사” -1. 재귀 함수 이용 - - ```jsx - var deepCopy = function (obj) { - var result = {}; - if (typeof obj === 'object' && obj !== null) { - for (var prop in obj) { - result[obj] = deepCopy(obj[prop]); - } - } else { - result = obj; - } - return result; - }; - ``` - -2. JSON.parse(JSON.stringify(obj))를 사용 - - ```jsx - const obj1 = { a: 1, b: { c: 2 } }; - const deepCopy1 = JSON.parse(JSON.stringify(obj1)); - - deepCopy1.b.c = 3; - - console.log(obj1.b.c); // 2 - 원본 객체는 영향 받지 않음 - console.log(deepCopy1.b.c); // 3 - - const obj2 = { - number: 1, - undefinedValue: undefined, - symbolValue: Symbol("unique") - }; - - const deepCopy2 = JSON.parse(JSON.stringify(obj2)); - - console.log(deepCopy2); // {number: 1} -- JSON으로 변환 가능한 데이터만 복사 - ``` - - - 참고: “얕은 복사와 깊은 복사” https://pozafly.github.io/javascript/shallo-copy-and-deep-copy/ - - `JSON.stringify()` — JavaScript 값이나 객체를 *JSON 문자열로 변환 - - *JSON: JavaScript Object Notation의 약자로, 브라우저와 서버 사이에서 오고가는 데이터의 형식 - - - 얕은 복사: 참조형 타입의 값의 바로 아래 단계의 값만 복사하는 방법 - - spread(`…`) 연산자 — 배열이나 객체와 같은 반복 가능한(iterable) 객체의 요소들을 펼쳐서 다른 배열이나 객체에 추가하거나 함수 호출 시 인수로 전달할 때 사용 - - 참고2: “JS 깊은 복사 쉽게 하기” - https://puk0806.tistory.com/117 -3. 자바스크립트 라이브러리 [lodash](https://lodash.com/)의 메서드인 [_.cloneDeep(obj)](https://lodash.com/docs#cloneDeep)을 사용 - -# 4️⃣ 가비지 컬렉션 - -- 자바스트립트는 ‘도달 가능성’이라는 개념을 사용해 메모리 관리를 수행하는데, 도달할 수 없는 객체는 자바스크립트 엔진 내에 있는 가비지 컬렉터가 삭제한다 - - 도달 가능한 값이란? - 어떻게든 접근하거나 사용할 수 있는 값 - 도달 가능한 값은 메모리에서 삭제되지 않는다 - 1) 루트(root) - - 현재 함수의 지역 변수와 매개변수 - - 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 - - 전역 변수 등 - 2) 루트가 참조하는 값이나 체이닝으로 루트에서 참조할 수 있는 값 -- 가비지 컬렉션 기본 알고리즘 — ‘mark-and-sweep’ - - 가비지 컬렉터가 루트 정보를 수집하고 기억(mark)함 → 루트가 참조하고 있는 것들은 기억함 → 도달 가능한 모든 객체에 방문할 때까지 계속 mark → 방문할 수 없었던 객체를 메모리에서 삭제 - - -## 자바스크립트 엔진 최적화 기법 - -- generational collection(세대별 수집) -- incremental collection(점진적 수집) -- idle-time collection(유휴 시간 수집) From 87af014d89936ac15a2ad05a8616773036c99b0e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B2=BD=ED=95=98?= Date: Wed, 24 Sep 2025 16:44:27 +0900 Subject: [PATCH 3/4] =?UTF-8?q?Create=20=EC=9D=B4=EA=B2=BD=ED=95=98.md?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../\354\235\264\352\262\275\355\225\230.md" | 111 ++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 "Part2-02 \353\252\250\353\223\210/\354\235\264\352\262\275\355\225\230.md" diff --git "a/Part2-02 \353\252\250\353\223\210/\354\235\264\352\262\275\355\225\230.md" "b/Part2-02 \353\252\250\353\223\210/\354\235\264\352\262\275\355\225\230.md" new file mode 100644 index 0000000..ab2ce40 --- /dev/null +++ "b/Part2-02 \353\252\250\353\223\210/\354\235\264\352\262\275\355\225\230.md" @@ -0,0 +1,111 @@ +# 1️⃣ 모듈 + +- 모듈이란, 분리된 파일 하나하나를 말한다. +대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됨 +- export와 import 지시자를 적용하면 다른 모듈을 불러오고 호출하는 기능 공유가 가능해짐 +- 브라우저에서 동작 시킬 땐,