거미줄코딩

[Node.js] try/catch 에러 핸들링

정민교 — Wed, 12 Oct 2022 14:30:19 +0900

https://ko.javascript.info/try-catch

CORS 캐싱

정민교 — Thu, 22 Sep 2022 11:59:46 +0900

https://news.hada.io/topic?id=7453

DDD(Domain Driven Development)

정민교 — Tue, 2 Aug 2022 12:07:58 +0900

DDD(Domain Driven Development) 레퍼런스

https://happycloud-lee.tistory.com/94

DDD 핵심만 빠르게 이해하기

마이크로서비스의 설계 방법론인 DDD(Domain Driven Design)에 대해 제가 가진 지식과 그간의 경험을 기반으로 정리하였습니다. 이 글을 읽기 전에 먼저 일하는 방식 변화를 이끌고 있는 애자일, 마이

happycloud-lee.tistory.com

https://velog.io/@dnflekf2748/DDDDomain-Driven-Design

[DB]분산 저장 기법(파티셔닝,샤딩,레플리케이션)의 개념

정민교 — Tue, 19 Jul 2022 17:33:28 +0900

개 요

개발을 하는데에 있어서 서비스의 성능향상 또는 안정화에 관한 문제는 항상 고려해야하고 그만큼 중요하다. 가령 대부분의 서비스에서 클라이언트-서버와 통신을 할 때 데이터 I/O는 필수적이라고 볼 수 있고 그만큼 이용하는 유저들이 늘어났을 때의 트래픽을 감당하기 위한 적절한 조치와 방법을 찾아야한다. 다양한 방법이 존재하지만 이 포스팅에서는 서버가 DB와 통신해 데이터 I/O 작업을 할 때 이슈를 최소화하고 성능을 향상시키는 대표적인 방법(파티셔닝, 샤딩, 레플리케이션)에 대해서 알아보려고 한다.

개 념

파티셔닝(Partitioning)

파티셔닝

파티셔닝이란 데이터베이스를 특정 조건을 적용해 여러 부분으로 분할하는 것이다. 하나의 DBMS에 데이터가 너무 큰 테이블이 들어가면서 용량과 성능 측면에서 이슈가 발생할 때 테이블이나 인덱스를 작은 파티션 단위로 나누어 사용하는 기법이다.

샤딩(Sharding)

샤딩

샤딩이란 같은 테이블 스키마를 가진 데이터들을 다수의 DB에 분산해서 저장하는 기법을 뜻한다. Shard key 라고 알려진 키를 기준으로 데이터가 나뉘며 Shard key 알고리즘에 따라 여러 샤딩이 존재한다. 또한 샤딩은 여러 서버에 스키마가 복제된다.

레플리케이션(Replication)

레플리케이션

여러 개의 DB를 수직적인(Master - Slave)구조로 구축하는 방식, Master Node에서는 쓰기 작업만, Slave Node에서는 읽기 작업만 처리하며 비동기 방식으로 Replication해서 각 노드들 간의 데이터를 동기화한다.

단, Replica와 Replication은 단어는 비슷해보이지만 각기 다른 개념이다. Replication은 완전 복제는 아니고 동일한 DB서버가 Active-StandBy 환경일 때 주로 사용된다. CDC(Change Data Capture의 약자로 로그파일을 읽어 데이터를 긁어오는 방식)가 대표적인 Replication에 해당된다. Replication은 데이터를 읽어서 대상에 복제하는데에 딜레이가 생기기 때문에 메인 서버에 문제가 발생할 경우 Slave서버에 모든 데이터가 반영됐다는 보장이 없다. 반면 Replica는 완전한 복제로 Commit된 순간부터 두 개의 DB 인스턴스는 동일한 데이터를 가져야하고 데이터의 원자성(모두 반영되거나 안되거나)이 유효해야한다. 때문에 Acitve-Active 환경으로 구조를 구성할 수 있다.

그렇다면 여기서 한 가지 의문점이 들 것이다.

"파티셔닝과 샤딩은 비슷한거 같은데?"

얼핏 보기에는 나눈다는 기준에서 보았을 때는 비슷해 보일수도 있지만 파티셔닝 종류 중에서도 수평 파티셔닝은 같은 스키마에 다른 테이블로 쪼개서 저장하고 샤딩은 나눈 데이터들을 Shard key를 기준으로 스키마를 복제하여 다른 DB에 저장한다는 차이점이 있다.

왜 사용하는 걸까?

위와 같은 방식의 데이터 분산저장기법을 왜 사용하고 또 어떤 상황일 때 사용해야 하는 걸까? 큰 틀에서 보자면 한 저장공간에 너무 많은 데이터가 들어가게 되면 데이터의 I/O 작업에서 성능저하 등의 이슈가 생겨 데이터를 분할하는 기법을 사용하는 것이다. 각 기법별 세부적으로 사용이유(또는 장점)에 대해 알아보자.

파티셔닝

파티션별 연산으로 I/O분산이 가능하여 성능이 향상
파티션별로 백업 및 복구가 가능
전체 데이터를 손실할 가능성이 줄어든다.

하지만 테이블이 여러개로 나누어지기 때문에 테이블간 JOIN연산에 대한 비용이 증가하고 테이블과 인덱스를 별도로 파티셔닝할 수 없다.

샤딩

Request에 대한 부하를 서로 다른 샤드가 있는 여러 서버에 분산이 가능하다.
DB 스키마를 유지하기 때문에 DB확장에 용이하다.
이 외 수평 파티셔닝과 동일하다.

하지만 프로그램 복잡도가 높아지고 서버 간의 연결 과정이 많아져 비용이 증가한다. 또한 하나의 서버가 고장나면 데이터 무결성이 깨질 수도 있으며 한번 샤딩을 사용하면 샤딩 이전의 구조로 돌아가기가 힘들다. 때문에 잘못 사용할 경우 리스크가 크다.

레플리케이션

DB작업의 대부분이 Select(읽기) 작업이기 때문에 Replication만으로도 충분히 성능을 높일 수 있다.
비동기 방식으로 동기화되어 지연시간이 거의 없다.
Master DB가 장애가 발생할 경우 MHA를 이용해 Slave DB를 Master DB로 승격시켜 빠른 서비스 복구가 가능하다.

하지만 각각 다른 서버에서 운영하다보니 버전 동기화를 해야하고 최소 Slave버전이 Master버전보다 높아야한다. 또한 비동기 방식으로 데이터를 동기화하면 일관성있는 데이터를 얻어오지 못할 수 있다. 마지막으로 Master DB가 장애가 발생하면 복구 및 대처가 까다롭다는 단점이 있지만 MHA를 이용해 해결이 가능하다.

각 기법별 종류(방법)는?

파티셔닝

수평 파티셔닝

수직 파티셔닝

Column을 기준으로 나누는 수직 파티셔닝, Row를 기준으로 나누는 수평 파티셔닝이 있다.

수평 파티셔닝은 데이터의 갯수를 기준으로 나누어 파티셔닝을 하고 때문에 데이터와 인덱스의 갯수가 줄어들어 성능 향상에 도움이되지만 데이터를 찾는 과정이 기존보다 복잡하기 때문에 레이턴시가 증가한다.

수직 파티셔닝은 같은 타입의 데이터가 저장되어 데이터 압축률을 높일 수 있고 조회 시 필요 없는 컬럼을 조회하지 않아도 되므로 성능향상에 도움이 된다. 하지만 수평 파티셔닝과 동일하게 데이터를 찾는 과정이 기존보다 복잡하다.

또한 파티셔닝에서 데이터를 분할하는 4가지 분할기준이 있다. (수평 분할에 해당)

분할기준 4가지(출처 : https://yunamom.tistory.com/291)

라운드 로빈 분할 방식(출처 : https://yunamom.tistory.com/291)

1. 범위분할(Range)

연속적인 숫자나 날짜를 기준으로 파티셔닝(ex : 분기별)
분할 키 값이 범위 내에 있는지 여부로 구분
우편번호, 날짜 등의 데이터에 적합

2. 목록 분할(List)

값 목록에 파티션을 할당하고 분할 키 값을 그 목록에 비추어 파티션을 선택한다. (ex : Country컬럼 값이 Norway, Finland, Sweden인 값들을 묶으면 임의의 기준을 가지고 북유럽 국가 파티션이라는 이름으로 나눔)

3. 해시 분할(Hash)

파티션 키의 해시 값에 의한 파티셔닝(인덱스를 해시함수를 통해 분류)
균등한 데이터 분할 가능
데이터 관리보다는 성능향상에 목적
특정 데이터가 어느 Hash 파티션에 있는지 판단 어려움
범위가 없는 데이터에 적합

4. 합성 분할(Composite)

위 분할법들을 조합하여 파티셔닝

5. 라운드로빈(Round Robin)

CPU 스케줄링 알고리즘에서 알고 있는 라운드로빈 방식과 동일하다. (하나의 중앙처리장치를 여러 프로세스들이 조금씩 돌아가며 할당받아 실행)
파티션에 행의 고른 분포를 원할 때 사용한다.
회전하면서 새로운 행이 파티션에 할당된다.

샤딩

1. 해시샤딩(Hash Sharding) (모듈러 샤딩이라고도 함)

해시샤딩(출처 : https://techblog.woowahan.com/2687/)

Shard Key는 DB id(pk)를 Hashing하여 결정
레인지샤딩에 비해 데이터가 균일하게 분산된다
클러스터가 포함하는 Node갯수를 변경하면 해시크기가 변경되고 key또한 변경되어 ReSharding이 필요
일정 수준에서 유지될 것으로 예상되는 데이터 성격을 가진 곳에 적절

2. 레인지 샤딩(Range Sharding)

레인지 샤딩(출처:https://techblog.woowahan.com/2687/)

해시샤딩에 비해 기본적으로 증설작업에 재정렬 비용이 들지 않고 증설작업에 드는 비용이 크지 않다.
활성유저가 몰린 일부 DB에 데이터가 편향될 수도 있다.

마치며

서버 개발자의 꽃은 적은 비용으로 최대한의 부하를 잡는 것이라고 생각한다. 지금도 전 세계 여러 훌륭한 개발자분들이 다양한 방법을 연구하고 끊임없이 새로운 기술이 도입되고 있기 때문에 항상 관심을 가지고 있어야한다고 생각한다. 오늘 포스팅 했던 이 방법들은 널리 알려져 있고 또 쓰이는 방법들이니 꼭 숙지해야한다고 생각하며 이번 포스팅에는 분산 저장 기법의 대표적인 방법에 대한 개념을 포스팅 했지만, 조만간 사이드 프로젝트에서 분산 저장기법을 사용하여 그 과정들을 따로 포스팅 할 예정이다.

참고 포스팅

https://yunamom.tistory.com/291

https://soye0n.tistory.com/267

https://silight.tistory.com/21

https://tecoble.techcourse.co.kr/post/2021-09-18-replication_clustering/

https://cornswrold.tistory.com/561

https://gmlwjd9405.github.io/2018/09/24/db-partitioning.html

https://code-lab1.tistory.com/202

https://bryceyangs.github.io/study/2021/06/01/Database-Sharding-&-Replication-&-Clustering/

https://techblog.woowahan.com/2687/

[JavaScript] 구조 분해 할당(Destructuring Assignment)

정민교 — Thu, 7 Jul 2022 12:59:19 +0900

개 요

JS에서 다른 js모듈을 require할 때나 비즈니스 로직에서도 빈번하게 사용하는 구조 분해 할당에 대해서 포스팅 하려고 한다.

개 념

배열이나 객체의 값, 속성(프로퍼티)을 해체해서 해체한 개별의 값들을 변수에 담을 수 있게 하는 표현식이다.

배열 구조 분해 할당

let [a, b] = [10, 20];
// a = 10;
// b = 20;

보다시피 굉장히 간단하다. 각각 위치에 맞게 좌측 변수에 우측 값을 (분해하여) 할당한다. 조금 더 응용해보면 아래와 같은 방법으로도 가능하다.

let array = [1, 2, 3];
let [a, b, c] = array;
// a = 1, b = 2, c = 3

Rest 파라미터 구조 분해 할당

let array = [1, 2, 3, 4, 5];
let [a, b, ...rest] = array;
// a = 1, b = 2, rest = [3, 4, 5];

Rest 파라미터에 대해서 간략하게 설명을 하면 rest를 직역했을 때 '나머지' 라는 의미를 가지고 있다. 이로 유추해보면 rest 파라미터는 나머지 값들에 대해 처리하는(받는) 변수(파라미터)라고 볼 수 있다. 위의 코드로 보면 1과 2는 각각 변수 a, b에 구조 분해 할당 되었지만 3, 4, 5 나머지 값들은 rest 변수에 배열 형태로 저장되는걸 확인할 수 있다.

기존 배열에서 특정 인덱스값을 할당할 때의 비교

/* 배열에서 index를 지정해 할당 */
let array = [1, 2, 3, 4, 5];
let test = array[0];
// test = 1

/* 구조분해할당을 이용 */
let array = [1, 2, 3, 4, 5];
let test = array;
let [test2, test3] = array;
// test = 1
// test2 = 2, test3 = 3

기존 배열에서 특정 인덱스 값을 할당할 때는 상단 코드와 같이 배열의 인덱스를 따로 지정해주어 사용했지만 구조분해할당을 이용하면 하단 코드와 같은 할당이 가능해 코드 간소화가 가능하다. 구조분해할당을 사용할 때는 기본적으로 기존 배열의 첫번째 인덱스부터 차례로 할당하기 때문에 test2와 test3 변수에는 array배열의 첫번째와 두번째 값인 1, 2가 차례로 할당되고 나머지 3, 4, 5 값은 할당이 되지 않는다.

객체에서의 구조 분해 할당

언젠가 타인이 작성한 코드를 분석할 때 상단 모듈 선언부(require)에 아래와 비슷한 코드를 본 적이 있을 것이다.

const { object1, object2 } = require('exampleModule');

앞서 설명한 배열에서의 구조 분해 할당을 잘 이해했다면 객체에서의 구조 분해 할당도 어렵지 않게 이해가 가능할 것이다. 먼저 구조분해할당을 사용하지 않았을 때 기존 객체에서 새로운 변수에 값을 할당할 때는 어떤 식으로 사용했는지 아래 코드를 확인해보자.

const obj = {
    name : "gyo",
    sex : "male",
    age : 99
};

const myName = obj.name;
const mySex = obj.male;
const myAge = obj.age;
// myName = "gyo", mySex = "male", myAge = 99

구조분해할당을 사용하지 않았을 때는 해당 객체의 프로퍼티에 직접적으로 접근해 변수에 값을 할당한다. 물론 이와 같은 방법도 좋지만 코드의 간소화를 위해 구조분해할당을 사용해 아래와 같이 사용이 가능하다.

let obj = {
    name : "gyo",
    sex : "male",
    age : 99
};

const { name, sex } = obj;
// name = "gyo", sex = "male"

/* 순서가 바뀌었을 때 */
const { sex, name } = obj;
// name = "gyo", sex = "male"

기존 객체 obj를 새로운 변수에 구조분해할당을 사용하면 obj에서 분해된 각각 프로퍼티의 key 이름과 동일한 변수명에 알아서 할당을 해준다. 또한 배열 구조분해할당과 다르게 값을 할당받는 변수들의 순서가 바뀌어도 프로퍼티의 key이름 기준으로 할당하기 때문에 하단 코드와 같이 할당이 된다.

여기서 만약 프로퍼티명과 동일한 변수명을 사용하지 않고 새로운 변수명으로 할당을 받고 싶다면 아래와 같이 코드를 작성하면 된다.

let obj = {
    name : "gyo",
    sex : "male",
    age : 99
};

const { name: myName, age: myAge, sex: mySex } = obj;
// myName = "gyo", myAge = 99, mySex = "male"

또한 배열에서 구조분해할당과 동일하게 rest 파라미터도 사용가능하다.(ES9 도입) 이 부분은 배열 구조분해할당과 크게 차이가 없으니 아래 코드 예시만 작성하겠다.

let obj = {
    name : "gyo",
    sex : "male",
    age : 99
};

const { name, ...rest } = obj;
// name = "gyo", rest = { sex : "male", age : 99 }

객체 구조분해할당은 여기서 마무리 하고 앞서 이야기한 상단 모듈 선언부(require)에서 사용한 객체 구조 분해할당은 결국 해당 모듈에서 할당받을 변수명과 같은 프로퍼티 이름을 찾아 할당한다고 볼 수 있다.

참고 포스팅

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

https://chanhuiseok.github.io/posts/js-10/

[JavaScript] 표준 내장객체 정리(상시 업데이트)

정민교 — Fri, 3 Jun 2022 16:03:59 +0900

개 념

가령 어떤 프로그래밍 언어든 미리 정의된 내장 메소드(객체)가 있기 마련이다.

JavaScript도 마찬가지로 유형(내장 객체)별로 여러가지 내장 메소드가 있는데 MDN을 참고해 이 메소드(객체)들에 대해서 유형별로 정리하려고 한다.

이 포스팅은 상시 업데이트 되는 포스팅입니다.

◆ : 실험 중인 기술

객체명	메소드명	설명	링크
에러관련
AggregateError		다수의 에러가 한 에러로 랩핑되어야 할 때의 오류	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/AggregateError
배열관련
Array		리스트 형태의 객체인 배열 생성	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
Array	◆ at()	정수 값을 받아 배열에서 해당 값에 해당하는 인덱스 요소 반환	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/at
	concat()	인자로 주어진 배열이나 값들을 기존 배열에 합쳐 새 배열로 반환	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
	copyWithin()	배열의 일부를 복사한 뒤 배열의 지정한 인덱스에 붙여 넣은 다음 그 배열을 반환	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin
	entries()	배열의 각 인덱스에 대한 key/value를 가지는 새로운 Array Iterator 객체를 반환	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/entries
	every()	배열안의 모든 요소가 주어진 판별 함수를 통과하는지 테스트	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/every
	fill()	배열의 시작 인덱스부터 끝 인덱스 이전까지 정적인 값 하나로 채움	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/fill
	filter()	주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
	find()	주어진 판별 함수를 만족하는 첫 번째 요소의 값을 반환 (없으면 undefined)	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/find
	findIndex()	주언진 판별 함수를 만족하는 배열의 첫 번째 요소의 인덱스를 반환 (없으면 -1)	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
	flat()	모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/flat
	flatMap()	매핑함수를 사용해 각 Element에 대해 map()을 수행 후 결과를 새로운 배열로 반환	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/flatMap
	forEach()	주어진 함수를 배열 요소 각각에 대해 실행	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
	from()	유사배열 객체나 반복가능한 객체를 전체 또는 일부 복사해 새로운 배열을 반환	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/from
	◆ groupBy()	테스트 함수에서 반환된 문자열 값에 따라 호출 배열의 요소를 그룹화	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/groupBy
	includes()	배열의 요소 안에 특정 값을 포함하는지 여부를 결정하여 boolean 반환	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
	indexOf()	주어진 요소가 배열에서 존재하는 첫 번째 인덱스를 리턴 (존재하지 않을 시 -1)	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
	isArray()	배열인지 아닌지 판별해서 boolean 반환	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray
	join()	배열의 요소들을 지정한 값으로 연결해 문자열로 반환	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/join
	keys()	배열의 각 인덱스에 대한 키(또는 인덱스)를 반환	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/keys
	lastIndexOf()	주어진 요소를 찾을 수 있는 마지막 인덱스를 반환 (존재하지 않을 경우 -1)	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
	map()	배열의 모든 요소에 대해서 함수를 호출한 결과로 채워진 새 배열을 반환	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
	of()	지정한 요소로 새 배열을 생성 기존 생성자와의 차이점은 element만큼 슬롯을 생성하느냐 element 값이 들어있는 배열을 생성하느냐의 차이	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/of
	pop()	배열에서 마지막 요소를 제거하고 제거한 요소를 반환 (배열의 길이를 변경함)	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/pop
	push()	배열 끝에 하나 이상의 요소를 추가하고 새 길이를 반환	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push
	reduce()	배열의 각 요소를 순회하면서 callback함수의 실행 값을 누적해 하나의 결과 값을 반환	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
	reduceRight()	reduce()와 동일하나 배열의 끝부터 시작	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight
	reverse()	배열을 제자리에서 뒤집음	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
	shift()	첫 번째 요소를 제거하고 제거된 요소를 반환 (pop과 반대)	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift
	slice()	배열의 시작지점부터 끝 지점까지의 요소를 새 배열로 반환	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
	some()	적어도 하나의 요소가 테스트 함수를 통과하는지 여부를 boolean으로 반환	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some
	sort()	배열 요소를 제자리에서 정렬하고 정렬된 배열을 반환 (기본 정렬 순서는 오름차순, 요소를 문자열로 반환 후 UTF-16 코드 단위 값의 시퀀스를 비교)	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
	splice()	기존 요소를 제거하거나 교체하고 새 요소를 추가해 배열의 내용을 변경	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
	toLocaleString()	배열의 요소 값을 지역에 따른 문자열로 반환	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
	toString()	배열 => 문자열 변환	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toString
	unshift()	배열의 시작 부분에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환 (push()와 반대)	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift
	values()	배열의 각 인덱스에 대한 값을 포함하는 새 배열을 반환 (keys()를 생각하면 될 듯)	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/values
ArrayBuffer		바이트로 구성된 배열로 임시로 바이너리 데이터를 저장하기 위한 공간( 메모리 수동관리 가능 )	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
ArrayBuffer	isView()	주어진 값이 TypeArray 또는 DataView인지 판별	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/isView
ArrayBuffer	slice()	현재 ArrayBuffer를 주어진 시작과 끝점에 맞춰 새로운 ArrayBuffer를 반환	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice
함수관련
Async Function		새로운 async function을 만든다. ( js에서 모든 비동기 함수는 사실상 AsyncFunction 객체 )	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/AsyncFunction
Async Function	apply()	주어진 this 값과 배열 또는 객체로 제공되는 파라미터로 함수를 호출 ( 첫번째 인자값에 객체 또는 배열이 있으면 해당 인자에 2번째 인자 배열 또는 객체로 메소드 수행 )	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
	bind()	기존함수에서 사용할 바인딩 함수를 지정하여 새로운 함수를 생성 ( 기존함수의 this 키워드가 참조할 객체 지정 )	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
	call()	주어진 this 값 및 각각 전달된 인수와 함께 함수를 호출 ( 해당 객체 또는 함수에서 사용할 다른 객체나 함수를 인자값으로 전달 )	https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/call
	toString()	함수 전체를 String으로 반환	https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString

[PHP] 클로저(Closure)

정민교 — Mon, 21 Mar 2022 17:00:38 +0900

개 념

PHP 공식 문서 발췌

익명 함수(Anonymous function)는 말 그대로 함수의 이름이 없는 함수로 클로저(Closure) 또는 콜백(Callback) 이라고도 부르고 PHP 5.3 부터 추가된 기능이며 5.4 에서 기능이 보강되었습니다.

JavaScript의 함수형 프로그래밍을 모르는 사람은 그렇게 드물지 않을 것이다. PHP에서도 클로저를 이용한 함수형 프로그래밍이 가능하며 그 방법을 포스팅 하려고 한다.

먼저 클로저란 익명함수 라고도 부르며, 일반 함수와의 차이점은 다음과 같다.

차이점

1. 클로저는 일반 함수와 다르게 외부 함수나 변수에 접근할 수 있다.

2. 클로저는 실행이 완료된 시점에도 함수의 상태와 내부 변수들의 상태 값은 유지된다. (외부함수가 소멸된 후에도 환경(변수)를 기억)

코드로 예시를 들어 자세히 알아보자

1번 차이점

// 일반함수
$strString = "hello";
$fnClosure = function() {
    echo $strString;
}
$fnClosure(); // Undefined variabl: strString

// 클로저
$strString = "hello";
$fnClosure = function() use ($strString) {
    echo $strString;
}
$strString = "Bye";
$fnClosure(); // hello

클로저는 use 키워드를 사용하여 일반 변수와는 다르게 외부 변수에 접근할 수 있다.

2번 차이점

// 일반함수
function hello($name) {
    $_name = $name;
    echo "Hello".$_name;
}
hello("민교");    // Hello민교
hello("정민교");  // Hello정민교

// 클로저
function hello($name) {
    $_name = $name;
    return function() {
        echo "Hello".$_name;
    }
}

$hello1 = hello("민교");
$hello2 = hello("정민교");
hello1();    // Hello민교
hello2();    // Hello정민교

두번째 hello function 의 return 값은 클로저(익명함수)로 되어있다. 아래 함수 사용부를 보면, 일반함수는 $_name 값으로 "민교"라는 문자열이 바인딩 되는데 해당 함수가 호출된 후에는 함수가 소멸되어 같은 함수를 사용하기 위해서 또 다시 "민교"라는 함수를 선언해야 한다.

하지만 클로저의 경우 hello("민교")로 바인딩 된 함수가 함수 실행 후에도 소멸하지 않고 클로저가 전역변수의 값을 기억하고 있어서 별 다른 파라미터 값 설정없이 hello1()만 사용해도 클로저가 외부의 전역변수 값을 가져와서 출력한다.

클로저의 사용법

[ 예제 1 ]

function($name, $age) {
    return 'name:'.$name.' age:'.$age;
}

클로저는 익명함수이기 때문에 function 이름 없이 파라미터변수만 작성하면 된다.

[ 예제 2 ]

$fnPeople = function($name, $age) {
    return 'name:'.$name.' age:'.$age;
}
echo $fnPeople('gyo', 5);

일반변수에 바로 할당도 가능하다.

[ 예제 3 ]

$age = 5;

function fnNormal($name) {
    return function($sex) use ($age, $name) {
        return "name=".$name.", age=".$age.", sex=".$sex;
    }
}

$test = fnNormal("민교");

echo $test("남"); // name=민교, age=5, sex=남

use 키워드를 사용하여 외부변수를 사용가능하며 여러개의 파라미터 변수가 필요하면 , 를 구분자로 사용한다. fnNormal 함수가 $test에 바인딩 되면서 실행이 되고 소멸이 되지만 use 키워드로 받은 $name 파라미터는 소멸되지 않고 계속해서 남게 된다. 따라서 $test에서는 fnNormal의 return 값인 클로저(익명함수)가 할당되고 클로저의 파라미터인 $sex에는 $test 함수가 실행될때의 파라미터인 '남' 이 되며, $age는 전역변수, $name은 소멸되지 않고 남아있던 fnNormal의 $name 값이 들어가게 된다.

마무리

클로저는 콜백을 만들때 아주 유용하다. 특히 php 프레임워크인 라라벨에서는 다양하게 클로저를 사용하고 있고, 대표적으로 URL을 매핑하는 route(라우트)에서 사용하고 있으므로 클로저의 이해가 매우 중요하다고 할 수 있다.

간단하게 예를 들자면

Route::get('/hello', function() 
{
    return "Hello, World!";
});

/hello 라는 URL로 접근했을 때 Hello, World!를 출력하는 라우팅 처리로 클로저를 사용하고 있다.

참고사이트

https://bkjeon1614.tistory.com/219

http://daplus.net/php-php%EC%97%90%EC%84%9C-%ED%81%B4%EB%A1%9C%EC%A0%80-%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B4%EB%A9%B0-%EC%99%9C-%EC%82%AC%EC%9A%A9%EC%8B%9D%EB%B3%84%EC%9E%90%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%A9/

https://demain18-blog.tistory.com/28

[JavaScript] 프로토타입(Prototypes)의 이해

정민교 — Fri, 25 Feb 2022 16:26:22 +0900

개 념

MDN의 발췌한 내용은 다음과 같다.

모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다.

그냥 보기에는 설명이 복잡하고 애매하다. 그래서 예제와 그림등을 사용하여 조금 더 자세히 알아보도록 하겠다.

먼저 JS에는 Class라는 개념이 없다. 때문에 기존 객체를 복사해서 새로운 객체를 생성한다. 이걸 프로토타입 기반 언어라고 하는데, 이렇게 생성된 새로운 객체도 다른 객체의 원형이 될 수 있다. 이걸 프로토타입 체인(prototype chain)이라 부르며 객체지향적인 프로그래밍을 할 수 있게 해준다.

JS에서는 객체의 prototype(객체 멤버인 __proto__ 속성으로 접근 가능한)과 생성자의 prototype 속성의 차이를 알아야하는데, 전자는 '개별 객체의 속성이'며 후자는 '생성자의 속성'이다. 이 말인 즉 Object.getPrototypeOf(new Apple())의 return 값이 Apple.prototype와 동일한 객체라는 의미이다. 전자와 후자의 차이점을 정확하게 이해하려면 JS의 함수의 구조와 객체 내부의 구조부터 정확하게 알고 있어야한다.

함수의 내부구조와 객체의 내부구조

function Person(){} // Person의 prototype 속성은 프로토타입 객체를 참조

// 생성된 모든 객체는 Person prototype 객체를 참조
var Min = new Person(); 
var Gyo = new Person();

① 속성이 아무것도 없는 Person이라는 함수가 정의 되고 파싱단계에서 Person함수의 prototype 속성은 Person Prototype 객체를 참조한다. ② 반대로 Person prototype 객체의 멤버인 constructor 속성은 Person 함수를 참조하는 구조이다. ③ 여기서 Person Prototype 객체는 new라는 연산자와 Person함수를 통해서 생성된 모든 객체의 원형이 되는 객체이다.(생성된 모든 객체가 참조한다.)

JS는 기본 데이터 타입 boolean, number, string 그리고 null, undefined을 제외하고는 모두 객체이다. (사용자정의 함수, new 연산자로 생성된 인스턴스도 객체 등) 객체 안에는 기본적으로 proto 속성이 있는데, 이 속성은 객체가 만들어지기 위해 사용된 원형 prototype 객체(그림에서 Person Prototype 객체)를 참조하는 역할을 한다.

프로토타입 객체

[예제1]

function Person(){} // Person의 prototype 속성은 프로토타입 객체를 참조

// 생성된 모든 객체는 Person prototype 객체를 참조
var Min = new Person(); 
var Gyo = new Person();

// 프로토타입 객체에서 동적으로 멤버(getType) 추가
Person.prototype.getType = function() {
    return "휴먼";
}

// 원형을 복사로 생성된 객체는 추가된 멤버(getType) 사용가능
console.log(Min.getType()); // 휴먼
console.log(Gyo.getType()); // 휴먼

Person 함수를 정의 했을 때 다른 곳에 생성되는 Person Prototype 객체는 prototype 객체 자신이 다른 객체의 원형이 되는 객체이다. 모든 객체는 Person prototype 객체에 접근할 수 있고, prototype 객체도 동적으로 런타임에 멤버를 추가할 수 있다. Person prototype을 원형으로 해서 복사된(생성된) 모든 객체는 추가된 멤버를 사용할 수 있다.

다만, prototype 객체에 멤버를 추가,수정,삭제할 때는 함수안의 prototype 속성을 사용해야하고, prototype 멤버를 읽을 때는 함수 안의 prototype 속성 또는 객체 이름으로 접근한다.

[예제 2]

function Person(){} // Person의 prototype 속성은 프로토타입 객체를 참조

// 생성된 모든 객체는 Person prototype 객체를 참조
var Min = new Person(); 
var Gyo = new Person();

// 프로토타입 객체에서 동적으로 멤버(getType) 추가
Person.prototype.getType = function() {
    return "휴먼";
}

Min.getType = function() {
    return "사람";
}

console.log(Min.getType());  // 사람
console.log(Gyo.getType());  // 휴먼

Gyo.age = 27;

console.log(Min.age);  // undefined
console.log(Gyo.age);  // 27

Person prototype 객체를 원형으로 하는 Min 객체에서 getType 멤버를 수정을 하였는데 이렇게 되면 원형인 prototype 객체에 있는 멤버를 수정하는 것이 아니라 자신의 객체에 멤버를 추가한 것이다. 결국 Min 객체의 getType은 prototype의 getType 멤버를 호출한 것이 아닌 Min 객체 자신에 추가된 getType멤버를 가져오는 것이다. Person prototype에 있는 getType을 수정하고 싶은 경우에는 prototype 속성을 사용해서 수정해야한다.(아래 코드 참조)

Person.prototype.getType = function () {
    return "사람";
}

console.log(Gyo.getType()); // 사람

프로토타입

JS에서는 기본 데이터 타입을 제외한 모든 것이 객체라고 위에서 언급했다. 객체가 만들어지려면 자신을 만드는데 사용된 원형인 prototype 객체를 이용해서 객체를 만든다. 이때 만들어진 객체 안에 __proto__ 라는 속성(멤버)이 자신을 만들어낸 원형인 prototype 객체를 참조하는 숨겨진 링크가 있다. 이 숨겨진 링크를 프로토타입이라고 한다. 크롬 개발자도구로 디버깅을 하게되면 아래와 같이 언젠가 한번 객체에 __proto__ 라는 속성이 있는 것을 확인했을 것이다.

정리하자면, JS에서의 프로토타입은 Person 함수의 멤버인 prototype 속성이 Person prototype 객체를 참조하는 속성이고 'new 함수명()' 으로 생성된 객체의 prototype 객체를 지정해주는 역할을 하는 프로토타입이며 생성된 객체의 __proto__ 속성은 자신을 만들어낸 원형인 Person prototype 객체를 참조하는 숨겨진 링크인데 이 링크로 Person prototype 객체 멤버에 접근하는 용도로서의 프로토타입이다.

Prototype을 활용한 코드 재사용

Classical 방식

Java에서 인스턴스를 생성하는 방법과 유사(new 연산자를 사용해 인스턴스를 생성)

[예제 1] 기본방법

// 부모 함수
function Person(name) {
    this.name = name;   // name = "민교";   
}

// Person 프로토타입 객체에 getName 속성 추가
Person.prototype.getName = function () {
    return this.name;
}

// 자식 함수
function Man(name){}

// 자식 함수의 프로토타입 객체의 속성을 부모 프로토타입 객체의 속성으로 변경
Man.prototype = new Person();

var man1 = new Man();
var man2 = new Man("정민교");

console.log(man1.getName());  // 민교
console.log(man2.getName());  // 민교

먼저 코드를 보면 Person함수의 Prototype 객체는 getName() 이라는 멤버를 추가했고 Man 함수의 Prototype 객체는 아무런 멤버도 선언하지 않았다. ③ 여기서 Man함수의 Prototype 객체를 Person 함수로 생성된 객체로 바꾸게 되면, ④ Man함수는 Man Prototype 객체와 Person Prototype 객체 모두 참조하게 된다. 그렇기 때문에 자식 인스턴스를 생성할 때 인자를 넘기더라도 부모 인스턴스를 생성할 때의 인자를 넘겨주지 못해 man2 인스턴스 생성자 인자로 "정민교"를 넣어도 부모 생성자에 인자를 넘겨주지 않았으므로 default 값인 "민교"가 출력된다. 물론 인스턴스를 생성할 때마다 부모의 함수를 호출할 수도 있지만 매우 비효율적이다.

[예제 2] 생성자 빌려 쓰기

function Person(name) {
    this.name = name; 		// name = "민교"
}

Person.prototype.getName = function() {
    return this.name;
}

function Man(name) {
    Person.apply(this, arguments);
}

var man1 = new Man("정민교");
console.log(man1.name); // 정민교

Man 함수를 정의하는 부분을 보면 아까와는 달리 Man 함수 내부에서 Apply함수를 사용해 부모 객체인 Person 함수의 this를 Man 함수안의 this로 바인딩한다. (new 연산자로 Man함수의 "정민교"로 파라미터를 줄때 Person함수의 this.name에 바인딩 해 Man의 파라미터를 arguments의 유사배열로 받아서 Person함수를 실행한다.) 이렇게 될 경우 부모 객체의 멤버를 복사해서 자신의 것으로 만들어 버리기 때문에 부모 객체의 this로 된 멤버들만 물려받게 되는 단점이 있다. 그래서 결국에는 Person Prototype 객체의 멤버들을 물려받지 못한다. 기본방법에서와는 달리 man1객체에 Person Prototype객체의 링크가 없는걸 확인하면 된다.

[예제 3] 생성자 빌려 쓰고 프로토타입 지정

function Person(name) {
    this.name = name; 		// name = "민교"
}

Person.prototype.getName = function() {
    return this.name;
}

function Man(name) {
    Person.apply(this, arguments);
}
Man.prototype = new Person();

var man1 = new Man("정민교");
console.log(man1.getName()); // 정민교

이전 코드와 달라진 점이 있다면 Man함수 하단에 Man함수의 prototype 객체를 Person함수로 생성된 객체로 지정하는데 이번에는 Person 객체 속성(this.name)에 대해 참조를 가지는 것이 아닌 복사본을 통해서 자신의 것으로 만듬과 동시에 기본방법과 동일하게 Person prototype 객체에 대한 링크도 참조가 된다. 때문에 Person의 Prototype 객체 멤버도 사용할 수가 있고 위의 방법들과의 차이점이 있다면, man1 인스턴스에 name 멤버를 가지고 있다는 점이다. 그러나 이 방법은 부모 생성자를 2번 호출한다는 단점이 있다. 때문에 name에 대해서 man1 객체와 Person함수를 이용한 객체(new Person())에도 name이 있는 것을 볼 수 있다.

[예제 4] 프로토타입 공유

function Person(name) {
    this.name = name; 		// name = "민교"
}

Person.prototype.getName = function() {
    return this.name;
}

function Man(name) {
    this.name = name;
}
Man.prototype = Person.prototype

var man1 = new Man("정민교");
console.log(man1.getName()); // 정민교

이 방법은 ④ Man함수의 Prototype 속성을 Person함수의 Prototype 속성이 참조하는 객체로 설정했다. Man 함수를 통해 생성된 인스턴스는 Person함수를 통해 생성된 객체(new Person())을 거치지 않고 Person 함수의 Prototype 객체를 부모로 지정해서 인스턴스를 생성한다. 이 때 Person함수의 내용은 상속받지 못하기 때문에 상속받으려는 부분은 Person Prototype 객체에 작성해야 원하는 결과를 얻을 수가 있다.

Prototypal 방식

인스턴스를 생성함과 동시에 Prototype 객체를 지정

[예제 1]

var person = {
    type : "휴먼",
    getType : function() {
        return this.type;
    },
    getName : function() {
        return this.name;
    }
};

var jung = Object.create(person);
jung.name = "민교";

console.log(jung.getType());  // 휴먼
console.log(jung.getName());  // 민교

이 방법은 Object.create()를 사용해 인스턴스를 생성과 동시에 Prototype 객체를 지정하는데, 이 Object.create() 함수는 첫 번째 파라미터로 부모 객체로 사용할 객체를 넘겨주고, 두 번째 파라미터는 선택 파라미터로 자식 객체의 속성에 추가되는 부분을 넣어준다. person 객체는 객체 리터럴 방식으로 객체를 선언하고 자식 객체인 jung은 Object.create()를 이용해 첫 번째 파라미터로 person을 넘겨받아 객체를 생성했다. 단 한줄로 객체를 생성함과 동시에 부모객체인 person객체의 속성도 물려받았다. 위의 classical 방식보다 훨씬 간결하면서 다양한 상황을 생각할 필요도 없어서 해당 방식을 많이 선호한다.

참고 포스팅

https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes

https://www.nextree.co.kr/p7323/

[JavaScript] 호이스팅(Hoisting)

정민교 — Thu, 30 Dec 2021 12:10:17 +0900

개 요

지금의 나는 자바스크립트를 어느정도 사용할 줄은 안다고 하지만 에러발생(특히 휴먼 에러)같은 상황에 직면 했을 때, 아직 JS의 아이덴티티에 대해서는 깊게 모르고 있다는 생각이 들었다. 때문에 JS의 아이덴티티에 대해 차근차근 포스팅해보려고 한다.

개 념

MDN문서에 나와 있는 내용을 그대로 발췌하면

'인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것'

추가적인 설명을 요약해서 덧붙이자면 '함수, 변수(var)와 같은 선언문을 유효 범위의 최상단으로 끌어올린다.' 라고 생각하면 될 것 같다. 따라서 결론적으로 이야기하자면 변수나 함수를 정의하는 코드보다 사용하는 코드가 앞서서 등장할 수 있다.

예를 들면 다음과 같다.

// 일반적인 코드 작성 순서
function printName(name) {
    console.log("이름은 " + name + " 입니다."); // 이름은 정민교 입니다.
}

printName("정민교");

//----------------------------------------------------------------------

// 호이스팅
printName("정민교");

function printName(name) {
    console.log("이름은 " + name + " 입니다."); // 이름은 정민교 입니다.
}

일반적인 코드 순서로는 함수를 먼저 정의하고 사용을 하지만 자바스크립트에서는 함수의 호출부분이 먼저 오고 그 뒤에 선언 부분이 있어도 정상적으로 잘 동작한다. 이게 가능한 이유가 바로 호이스팅이다.

이게 어떻게 가능할까? 먼저 아래의 코드를 살펴보자

for(var i=0; i<10; i++) {
    // do
}
console.log(i); // 10

//--------------------------------------------------------

if(true) {
    var test = "테스트";
}
console.log(test); // 테스트

//--------------------------------------------------------

function fnTest(name){
    var firstName = '정';
    console.log(firstName+name);
}
fnTest("민교"); // 정민교

변수의 선언문 쪽에 포커싱을 해보자. 일반적으로 변수의 선언문은 블록 스코프에서만 유효하다. 이러한 관점에서 봤을 때 for문의 i와 if문의 test는 해당 블록이 종료되는 시점에 없어지게 되어 출력부분에서 출력이 되지 않아야하는게 정상이지만, JS에서는 선언문을 해당 유효범위의 최상단으로 끌어올리게 되는데 이것을 호이스팅이라고 하는 것이다.

그럼 위의 코드는 결과적으로 아래와 같이 해석되어 실행된다.

// ▼ 호이스팅
var i;
var test;
function fnTest(name){
    var firstName;
    firstName = '정';
    console.log(firstName+name);
}
// ▲ 호이스팅

for(i=0; i<10; i++) {
    // do
}
console.log(i); // 10

//--------------------------------------------------------

if(true) {
    test = "테스트";
}
console.log(test); // 테스트

//--------------------------------------------------------

fnTest("민교"); // 정민교

함수와 변수의 선언부가 모두 최상단으로 올라가서 해석이 되기 때문에 최상단에 있는 코드와 같은 형태가 작동이 될 수 있는 것이다.

단, 실제로 코드가 끌어올려지는 게 아니고 JS Parser 내부적으로 끌어올려서 처리를 하는 것이라 실제 메모리에는 변화가 없다.

또한 변수같은 경우 var 키워드로 선언된 변수만 호이스팅이 된다고 알려져있지만 ES6의 let과 const도 호이스팅이 일어난다.

하지만 let과 const의 경우 변수가 초기화 되기 전 까지 temporal deadzone(죽어있는 공간)에 머물게 되어있다.

아래 코드로 조금 더 이해하기 쉽게 설명을 하자면

/* let a; -> 호이스팅이 일어났지만 초기화가 되기 전까지 deadzone에 있는 상태 */
console.log(a);  // 참조에러
let a = '정';    /* 초기화가 일어난 후 호이스팅된 변수는 deadzone을 벗어난 상태 */
console.log(a);  // 정

변수 a는 호이스팅이 되어있지만 초기화가 되기 전 temporal deadzone에 있는 상태이기 때문에 첫 번째 console.log는 참조에러가 발생하게 되고 바로 아래 라인에서 '정'으로 초기화를 해줌과 동시에 호이스팅이 된 변수 a는 temporal deadzone에서 빠져나오게 되어 참조가 가능한 상태가 된다. 때문에 마지막 줄의 console.log는 정상적으로 값이 출력이 된다.

let과 const가 호이스팅이 정말로 되는지 어떻게 알까?

아래 코드를 보자

let a = 5;
let b = 10;

{
    console.log(a);  // 5
}

{
    console.log(b);  // Ref Error
    let b = 20;
    console.log(b);  // 20
}

먼저 첫번째와 두번째 라인이 호이스팅 후 초기화까지 되어 참조를 할 수 있는 상태가 되었다고 가정을 하면 console.log(a)는 5가 나오는 것이 정상이다.

하지만 만약 호이스팅이 되지 않았다면 첫번째 console.log(b)는 10이 나와야 하는 것이 정상이지만 let은 블록 스코프에서 동작하기 때문에 해당 블록안에서의 호이스팅이 발생하게 되어 b는 초기화 전 참조가 불가능한 상태가 된다. 때문에 첫번째 console.log(b)는 참조에러가 발생하게 된다.

참고 포스팅

https://developer.mozilla.org/ko/docs/Glossary/Hoisting

호이스팅 - 용어 사전 | MDN

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다. var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다

developer.mozilla.org

https://gmlwjd9405.github.io/2019/04/22/javascript-hoisting.html

[JavaScript] 호이스팅(Hoisting)이란 - Heee's Development Blog

Step by step goes a long way.

gmlwjd9405.github.io

https://yuddomack.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EA%B3%BC-%EC%8A%A4%EC%BD%94%ED%94%84

자바스크립트 호이스팅과 스코프

이번 글에서는 자바스크립트의 호이스팅(hoisting) 현상을 스코프 관점에서 이해해보도록 하겠습니다. 호이스팅 현상에 대해 좀 더 깊게 이해하기 위해, 본 글을 읽기 전에 자바스크립트 스코프

yuddomack.tistory.com

[JavaScript] 불변 객체 만들기(const, Object.freeze())

정민교 — Tue, 28 Dec 2021 16:19:20 +0900

개요

카카오 코딩테스트 문제를 풀다가 임의 객체 A를 배열B에 Push한 후 객체 A의 내용을 바꿨는데 배열B에 Push 되어 있던 객체 값이 바뀐 결과가 발생했다. 이 때 나는 배열에 push한 값은 value로 들어간다고 착각했고, 설마 주소값이 들어가는 것 인가? 예상해보았지만 그 결과는 정확히 맞았다.

이미 선언된 객체를 변하지 않는 불변 객체로 만들면 되지 않을까? 라는 생각에 불변 객체에 대해 알아보고 남기는 포스팅이다.

~~(코딩테스트 문제에서는 이 방법을 사용하지는 않았지만...)~~

불변 객체

먼저 불변(immutability)이란 뭘까? 단어에서 유추해볼 수 있다시피 '변하지 않는' 뜻이라고 생각하면 되겠다.

그럼 '불변 객체'란? '변하지 않는 객체' 즉 이미 할당된 객체가 변하지 않는다는 뜻을 가지고 있다.

자바스크립트에서 불변 객체를 만들 수 있는 방법은 기본적으로 2가지 인데 const와 Object.freeze()를 사용하는 것이다.

const

자바스크립트 키워드 중 하나인 const이다. ES6문법부터 let과 const를 지원한다.

const 키워드는 변수를 상수로 선언할 수 있다, 일반적으로 상수로 선언된 변수는 값을 바꾸지 못하는 것으로 알려져 있다.

그렇다면 상수로 선언한 객체는 불변 객체일까?

const test = {};
test.name = "mingyo";

console.log(test);  // {"mingyo"}

ES6에서의 const는 할당된 값이 상수가 되는 것이 아닌 바인딩된 값이 상수가 되는, 즉 test변수가 상수가 되기 때문에 const 키워드로 선언된 test변수에는 객체 재할당은 불가능하지만 객체의 속성은 변경 가능하다.

재할당이 불가능 한 이유는 변수와 값(객체) 사이의 바인딩 자체가 변경이 되기 때문에 상수인 test변수는 재할당이 불가능한 것이고

객체의 속성이 변경가능 한 이유는 실제 객체가 변경은 되지만 ( {} -> name : "mingyo" ) 객체와 변수(test)사이의 바인딩은 변경이 되지 않기 때문에 객체의 속성은 변경가능한 것이다.

때문에 비록 재할당은 불가능하지만 객체의 속성을 변경함으로 인해 변수에 바인딩된 객체의 내용까지 변경이 되기 때문에 불변객체라고 하기는 힘들다. 따라서 Object.freeze()라는 JS내장메소드도 살펴보도록 하겠다.

Object.freeze()

자바스크립트에서 기본적으로 제공하는 메소드인 Object.freeze() 메소드이다. 공식 문서에서는 "객체를 동결하기 위한 메소드" 라고 적혀있다.

그렇다면 이 메소드를 사용하면 불변 객체를 만들 수 있을까?먼저 이 메소드의 사용법부터 알아보면,

let test = {
    name : 'kim'
}

Object.freeze(test);

사용법은 간단하다. test 변수에 key value를 가진 객체를 바인딩 후 Object.freeze(test)를 사용해 바인딩된 변수를 동결 객체로 만들었다. 때문에 test 객체는 객체의 속성을 변경하는 시도는 불가능하다.

test.name = 'Jung';
console.log(test) // {name: 'kim'}

위와 같이 객체의 속성을 변경하는 시도는 무시된다.

그러나 Object.freeze()는 동결된 객체를 반환하지만 객체의 재할당은 가능하다.

test = {
    age : 15
};
console.log(test); // {age: 15}

위와 같이 객체의 재할당은 가능하다. 때문에 Object.freeze()도 불변 객체라고 할 수는 없을 것 같다.

그럼 결국 불변 객체는 어떻게 만들 수 있냐면..

const와 Object.freeze()를 조합하여 만들 수 있다. (const의 재할당불가 + Object.freeze()의 객체속성 변경불가)

그렇다면 아래 코드와 같이 사용하면 된다.

const test = {
    'name' : 'jung'
};

Object.freeze(test);

먼저 const키워드로 바인딩 된 변수를 상수화 시킨 다음, Object.freeze()로 해당 변수를 동결 객체를 만들면

객체의 재할당과 객체의 속성 둘 다 변경불가능한 불변 객체가 된다.

참고 포스팅

https://yorr.tistory.com/21

[Javascript] const와 Object.freeze()를 이용하여 Immutable한 Object 만들기

프로그래밍을 하다보면 개발자의 실력과는 별개로 언제나 "Human Error"가 발생할 수 있다. 특히 개발자의 실수로 인해 의도치 않게 전역 공간이나 외부 스코프의 값이나 상태가 변경되는 “Human Err

yorr.tistory.com