Lesson - Primitive & Reference
원시 자료형
자바스크립트에서 원시 타입의 데이터(primitive data types; 원시 자료형)는 객체가 아니면서 method를 가지지 않는 아래의 6가지의 타입을 말한다.
string, number, bigint, boolean, undefined, symbol, null
원시 자료형의 보관함인 변수에는 하나의 원시 자료형만 담을 수 있다. 이 특징은 참조 자료형이 보관되는 특별한 보관함과는 구분된다. 우리가 배웠던 참조 자료형(배열, 객체...)는 어떻게 코드를 작성하느냐에 따라 보관되는 데이터의 양이 천 개, 만 개가 될 수 있지만, 원시 자료형은 "하나"의 의미를 가지는 데이터임에는 변함이 없다. 그렇기 때문에 원시 자료형이 담기는 보관함의 크기는 고정하는 것이 합당하다. 어느정도 일정한 크기의 데이터가 온다고 예상할 수 있기 때문. 원시 자료형은 값 자체의 변경은 불가능(immuatable)하지만, 변수에 다른 데이터를 할당할 수는 있다.
const num1 = 123;
const num2 = 123456;참조 자료형
자바스크립트에서 원시 자료형이 아닌 모든 것은 참조 자료형이다. 배열([])과 객체({}), 함수(function(){})가 대표적이다. 이런 자료형을 자바스크립트에서는 참조 자료형(reference data type; 참조 타입)이라고도 부른다.
참조 자료형의 데이터 보관
참조 자료형의 데이터가 위치한 곳(메모리 상 주소)을 가리키는 주소가 변수에 저장된다. 즉, 변수에는 특별한 데이터 보관함을 찾아갈 수 있는 주소가 담겨있고, 이 주소를 따라가보면 특별한 데이터 보관함을 찾을 수 있는데, 이 특별한 데이터 보관함에서는 자기 마음데로 사이즈를 늘렸다가 줄일 수 있다. ("동적(dynamic)으로 변한다"라고 하기도 한다.) 이처럼 데이터는 별도로 관리되고, 우리가 직접 다루는 변수에는 주소가 저장되기 때문에 reference type이라고 하며, 이런 특별한 데이터 보관함을 heap이라고도 부른다.
원시 자료형과 참조 자료형의 특징
- 원시 자료형이 할당될 때에는 변수에 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다.
- 그래서 참조 자료형은 기존에 고정된 크기의 보관함이 아니라, 동적으로 크기가 변하는 특별한 보관함을 사용할 수 있다.
Lesson - Scope & Closure
Scope
컴퓨터 공학과 JaaScript에서의 scope는 "변수의 유효범위"라는 의미로 사용된다. JavaScript는 기본적으로, 함수가 선언(lexical)되는 동시에 자신만의 scope를 가진다.
Rule 1: Local Scope vs Global Scope
- 안쪽 scope에서 바깥 변수/함수를 접근할 수 있다.
- 바깥쪽 scope에서 안쪽 변수/함수에 접근할 수 없다.
- scope는 중첩이 가능하다. (함수 안에 함수를 넣을 수 있다.)
- Global Scope는 전역 변수라고 불리우는 최상단의 scope로, 어디서든 접근이 가능하다.
- Local Scope는 함수 내에서 Global Scope보다 더 높은 우선순위를 가진다.
Rule 2: Function Scope vs Block Scope
여기서 Block은 중괄호로 시작하고, 끝나는 단위로 이해할 수 있다.
Block Scope를 이해한다면 let, var, const 키워드의 차이점을 이해할 수 있다.
- JavaScaript는 기본적으로, 함수 단위로 자신만의 scope를 가진다.
var(old trend) - Block 단위로 scope를 구분했을 때 가독성을 높이고 코드를 작성하기 쉽다.
let(new trend) - 값이 변하지 않는 변수를 정의할 때는
const를 사용한다.
Rule 3: 전역 변수와 window 객체
window는 전역 범위(Global Scope)를 대표하는 객체이다. 개발자 도구의 console에서 수많은 전역 변수를 확인할 수 있다.
Global Scope에서 선언된 함수, 그리고
var키워드를 이용해 선언된 변수는 window 객체와 연결된다. 전역 변수에 너무 많은 변수를 선언할 경우 서버 부하 등의 요인으로 작용함.
Rule 4: 선언 없이 초기화된 전역 변수
선언 키워드 (var, let, const)없이 변수를 사용한 경우, 때에 따라 의도치 않게 해당 변수가 전역 변수로 취급되는 경우가 있어 이는 해당 전역 변수의 초기화로 이어진다. 따라서 선언 키워드 없이 변수를 초기화 하는 것은 절대 금지!
function showAge() {
age = 90;
// age는 전역 변수로 취급됩니다
// 전역 변수 age는 90으로 초기화 됨
console.log(age);
}
showAge(); // 90
console.log(age); // 90
// 전역 변수 age를 호출 시 90을 뱉어냄Strict Mode
이런 실수를 방지하고 싶을 경우use strict를 사용하여 문법 실수를 줄일 수 있다.
Closure
클로저는 외부 함수의 변수에 접근할 수 있는 내부 함수 또는, 이러한 작동 원리를 일컫는 용어로 사용된다. 즉, 반환된 내부함수가 자신이 선언되었을 때의 환경 스코프를 기억하여 자신이 선언되었을 때의 환경 밖에서 호출되어도 그 환경에 접근할 수 있는 함수를 의미한다.
자신이 생성될 때의 환경을 기억하는 함수를 클로저라고 한다.
왜 클로저를 사용하는가?
- 정보 은닉을 위해
- 전역 변수의 사용을 억제하기 위해
- 현재 상태를 기억하고 변경된 최신 상태를 유지하기 위해
1. 유용한 사용법 - 커링(1)
커링
여러 개의 인자를 가진 함수를 호출할때, 파라미터 수보다 적은 수의 파라미터를 인자로 받으면 누락된 파라미터를 인자로 받는 기법이다. 함수 재사용성을 높일 수 있다.
함수 하나가 n개의 인자를 받는 대신, n개의 함수를 만들어 각각 인자를 받게하는 방법
function adder(x) {
return function(y) {
return x + y;
}
}
adder(2)(3); // 5
let add100 = adder(100); // x의 값을 고정하고 재사용할 수 있다.
add100(2); // 102
add100(10); // 1102. 유용한 사용법 - 커링(2)
외부 함수의 변수가 저장되어 마치 템플릿 함수와 같이 사용 가능하다.
function htmlMaker(tag) {
let startTag = '<' + tag + '>';
let endTag = '</' + tag + '>';
return function(content) {
return startTag + content + endTag;
}
}
let divMaker = htmlMaker('div');
divMaker('code'); // <div>code</div>
let h1Maker = htmlMaker('h1');
h1Maker('Headline'); // <h1>Headline</h1>3. 유용한 사용법 - 클로저 모듈 패턴
변수를 스코프 안쪽에 가두어 함수 밖으로 노출시키지 않는 방법으로 은닉화에 사용된다.
function makeCounter() {
let privateCounter = 0;
return {
increment: function() {
privateCounter++;
},
decrement: function() {
privateCounter--;
},
getValue: function() {
return privateCounter;
}
}
}
let counter1 = makeCounter();
counter1.increment();
counter1.getValue(); // 1
let counter2 = makeCounter();
counter2.decrement();
counter2.decrement();
counter2.getValue(); // -2두 카운터(counter1, counter2)에 각기 다른 privateCounter를 다루면서 privateCounter 함수를 밖으로 노출시키지 않아 은닉화를 실현하면서 함수를 실행하고 있다.
Lesson - Command Line
CLI(Command Line Interface를 사용하는 이유?
- 빠르다
- 강력하다
- 접근성이 좋다
CLI 명령어
아래에 터미널에서 사용하는 기본적인 unix/linux 명령어를 나타낸다.
ls: 파일 및 폴더 리스트 보기cd: 디렉토리로 이동 (cd.: 현재 디렉토리 이동,cd ..: 이전(부모) 디렉토리로 이동)mkdir: 디렉토리 생성 (mkdir newdir)rm:
파일 삭제 (rm [filename])
폴더 및 하위 디렉토리 삭제 (rm -r [dirname])
-
pwd: 현재 디렉토리 확인 -
touch: 빈 파일 생성(touch newfile.txt) -
cat: 텍스트 형태의 파일 확인 (cat newfile.txt) -
mv:
파일 및 디렉토리 위치 이동 (mv newfile.txt newdir: newfile을 newdir 디렉토리로 이동)
파일 및 디렉토리 이름 변경 (mv newfile.txt newfile1.txt) -
cp:
파일 복사 (cp newfile.txt target_dir: 타겟 디렉토리로 newfile 복사)
하위 디렉토리까지 모두 복사 (cp -r [folder]) -
~: 홈 디렉토리 (cd ~: 홈 디렉토리로 이동) -
/: 루트 디렉토리 (cd /: 루트 디렉토리로 이동) -
explorer .: 현재 폴더를 Windows 파일 관리자에서 보기 -
open .: 현재 폴더를 macOS Finder에서 보기 -
code .: 현재 폴더를 VS Code에서 보기
권한
파일 및 폴더 리스트를 나타내는 ls 명령어에 -al을 붙여 다시 실행해보면, 해당 파일 및 폴더의 상세 정보를 확인할 수 있다.
만일 touch 명령어를 통해 빈 폴더 및 파일을 생성한다면 (3)에 해당하는 소유자는 Ben으로 나타날 것이지만, sudo touch 관리자 명령어를 사용한다면 소유자는 root으로 표시된다. root 로 생성된 파일을 수정 후 저장하려고 하면 권한의 문제로 저장할 수 없다는 에러 메시지가 발생한다. GUI 환경에서는 에러 메시지에 표시된 관리자로 변경하기버튼을 누르면 되지만 터미널 환경에서는 다음과 같은 명령어로 권한 설정을 해줄 수 있다.
chown owner:group file: 파일 소유권 변경 (sudo chown Ben:staff testfile.txt)
관리자 명령(sudo)을 통해 testfile.txt를 staff 그룹의 Ben 사용자에게 소유 권한을 줌
이후 정상적으로 소유권이 변경되어 파일 및 폴더의 수정이 가능하다.
