generated from muhandojeon/study-template
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
121 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
## 들어가며 | ||
|
||
- 네임스페이스 : 코드 단위를 고유한 식별자로 그룹화한 것 | ||
- 하나의 식별자를 여러 네임스페이스에서 참조 가능 | ||
- 전역 네임스페이스 내에 존재하는 다른 객체나 변수와의 충돌을 방지 | ||
- 프로그램의 기능들을 체계적으로 구성 | ||
- JS는 다른 언어들처럼 네임스페이스를 기본적으로 지원하지는 않음 | ||
- 단, **객체와 클로저를 활용하여 비슷한 효과를 낼 수 있음** | ||
|
||
## 단일 전역 변수 패턴 | ||
|
||
> 하나의 전역 변수를 주요 참조 객체로 사용하는 방식 | ||
```javascript | ||
const myUniqueApplication = (() => { | ||
function myMethod() { | ||
// 코드 | ||
return; | ||
} | ||
|
||
return { | ||
myMethod | ||
}; | ||
})(); | ||
|
||
|
||
myUniqueApplication.myMethod(); | ||
``` | ||
|
||
- 가장 큰 문제점은 **다른 개발자가 같은 이름의 전역 변수를 이미 사용하고 있을 가능성이 있음** | ||
|
||
|
||
## 접두사 네임스페이스 패턴 | ||
|
||
> 고유한 접두사를 선정한 다음, 모든 메서드, 변수, 객체를 이 접두사 뒤에 붙여 정의 | ||
```javascript | ||
const myApplication_propertyA = {}; | ||
const myApplication_propertyB = {}; | ||
function myApplication_MyMethod() { | ||
// 코드 | ||
return; | ||
} | ||
``` | ||
|
||
- **단일 전역 변수 문제에 대한 해결책 중 하나** | ||
- 전역에서 특정 변수와 이름이 겹칠 가능성을 효과적으로 줄임 | ||
- 스스로 고유한 이름을 가진 객체도 같은 효과를 낼 수 있음 | ||
- 문제점1 : **애플리케이션이 커질수록 많은 전역 객체가 생성됨** | ||
- 문제점2 : **다른 개발자가 같은 접두사를 전역 네임스페이스에서 사용하지 않고 있었을 것이라고 가정** | ||
|
||
|
||
## 객체 리터럴 표기법 패턴 | ||
|
||
> 키와 값으로 이뤄진 집합 | ||
```javascript | ||
myApplication.foo = () => "bar"; | ||
|
||
myApplication.utils = { | ||
toString() { | ||
// ... | ||
}, | ||
export() { | ||
// ... | ||
} | ||
} | ||
``` | ||
|
||
- 키 자체가 새로운 네임스페이스가 될 수 있음 | ||
- 전역 네임스페이스를 오염시키지 않으면서도 코드와 매개변수를 논리적으로 구성하는 데 도움 | ||
- 동일한 이름의 변수가 있는지 검사하도록 설계되는 경우가 많음 -> 충돌 가능성을 크게 줄여줌 | ||
- 장점1 : 키-값 구조이므로 알아보기 쉬움 | ||
- 장점2 : 애플리케이션 내의 서로 다른 로직이나 기능을 쉽게 캡슐화하여 깔끔하게 분리 | ||
- 장점3 : 코드 확장에 있어 든든한 기반 제공 | ||
- JSON은 사실 객체 리터럴 표기법의 서브셋 | ||
|
||
|
||
## 중첩 네임스페이스 패턴 | ||
|
||
> 객체 리터럴 표기법 패턴을 확장한 것 | ||
```javascript | ||
YAHOO.util.Dom.getElementsByClassName("test"); | ||
``` | ||
|
||
- 다른 패턴에 비해 충돌 위험이 낮음 | ||
- 단일 객체 네임스페이스 패턴과 성능상 차이가 크지 않음 | ||
|
||
|
||
## 즉시 실행 함수 표현식 패턴 | ||
|
||
```javascript | ||
(() => { /** */ })(); | ||
|
||
(function foobar() { /** */ })(); | ||
|
||
function foobar() { | ||
foobar(); | ||
} | ||
``` | ||
|
||
- JS에서는 즉시 실행 함수로 정의된 내부의 변수와 함수 모두 외부에서 접근 불가능 | ||
- 함수를 호출하는 것만으로도 쉽게 코드의 은닉성 구현 가능 | ||
- 애플리케이션의 로직을 캡슐화하여 전역 네임스페이스로부터 보호 | ||
|
||
|
||
## 네임스페이스 주입 패턴 | ||
|
||
> 즉시 실행 함수 패턴의 또다른 변형 | ||
- 함수 내에서 this를 네임스페이스의 프록시로 활용 | ||
- 특정 네임스페이스와 속성을 '주입' | ||
- 장점1 : 여러 객체나 네임스페이스에 기능적인 동작을 쉽게 적용 가능 | ||
- 장점2 : 이후에 확장될 기본 메서드(예: 게터, 세터)에 적용할 때 유용 | ||
- 단점 : 같은 목적을 달성하는 더 쉽고 효율적인 방법이 존재할 수도 있음 | ||
|
||
|
||
## 나의 생각 | ||
|
||
이번 장은 전반적으로 저자가 알고 있는 지식과 경험을 토대로 내용을 많이 적은 것 같아요. 그래서 중간중간 나오는 내용도 지식의 전달이라기보다는 '나는 이게 나은 것 같다', '나의 주관적인 의견이다'라는 식으로 얘기를 많이 하고 있죠. 그런데 이게 독자에게 결정권을 주거나 사고의 확장을 노린 것일 수도 있지만, 한편으로는 책으로 쓰는 동안도 지식의 확신이 제대로 든 것일까 의문이 들기도 했어요. |