2021-01-05(Tue)

항목	내용
학습 날짜	2021-01-05(화)
학습 시간	12:00~24:00
학습 범위 및 주제	루비온레일즈 클라이언트 개발 - Sprockets, Asset pipeline
학습 목표	퍼펙트 루비온레일즈의 클라이언트 개발에 대한 내용을 훑고 트렌젠더스 구현시 필요한 개념을 숙지해둔다.
동료 학습 방법	eunhkim, jujeong, sanam, yohlee 님과 디스코드로 학습시간 공유 + 학습미팅을 진행했다.

상세 학습 내용

레일즈 클라이언트 개발에 대해서 책을 훑었다. 이 과정에서 Sprockets만 책에 적혀있는데 Asset 파일 구조가 Rails 6와 달라서 깊게 파보았더니 webpacker와 기능이 나누어진 상황임을 알게 되었다. 이 부분까지 팠던 팀원이 없었기에 정리해서 공유하였다. Ajax, 터보페이지 등은 실습해보지는 않았지만 개념을 확인해뒀으니 추후 Rails 개발시 적용시키면 될 것 같다.

backbone js를 학습하기 전에 우선 javascript에 대한 학습이 선행되어야함을 확인했다. 빠르게 TCP School을 훑었다.

아래는 학습한 내용의 메모이다.

Rails 클라이언트 개발

Sprockets vs Webpacker

우선 에셋 개념을 짚자. 애셋(Asset)이란 자바스크립트 코드, 스타일시트, 그림처럼 애플리케이션에서 다루는 모든 리소스의 총칭이다.

Rails4 에서는 에셋을 읽어들이기 위해 Sprockets 라는 라이브러리를 사용한다. Rails6 에서는 Sprockets 말고도 Webpacker라는 라이브러리를 함께 사용한다. 같이 사용하는 이유를 찾아보니 Webpacker는 자바스크립트 소스파일을 다루는데 쓰고, Sprockets는 나머지 전부를 다루는데 쓰는 것 같다.

"Rails way": Webpacker to compile JavaScript, Sprockets for CSS, images, and fonts

어차피 두 라이브러리는 서로 의존성을 1도 가지고 있지 않다. 따라서 Sprockets만 쓰거나 Webpacker만 쓰는 것도 유효하다. 즉, 둘 다 선택지로 존재한다는 소리고 상황에 따라 선택해야할 문제다. 아래 예시를 참고하자.

Sprockets을 쓸 이유(상황)

• 내 Rails 앱이 자바스크립트를 많이 안 쓴다.

• 전역 스크립트와 jQuery를 선호한다. 예를 들어 자바스크립트 모듈 시스템을 쓸 필요가 없는 상황이다.

• legacy Rails 앱을 Webpacker로 업그레이드 비용이 넘 비싸다.

• 로컬 개발을 위해 고급 툴링(tooling)을 할 필요가 없다.

• 걍 돌아가는 서비스를 만들기를 원한다. 막 좋은 대안을 찾을 시간이 없다.

• 내 Rails 앱이 특정 gem을 사용하며, NPM을 대신 할 수 없다.

Sprockets를 쓰지 않을 이유(상황)

• Sprockets는 로컬개발환경에서 느리다.

• asset을 좀 더 섬세하게 제어해야한다.

• 내 앱에는 JavaScript가 많고 대량의 페이로드를 방지하기 위해 코드 분할 기능이 필요하다.

• 장기적으로 지원을 유지할 서비스다.

Webpacker를 쓸 이유(상황)

• 의존성 관리하는데 자바스크립트 모듈 시스템을 쓰는 것을 선호한다. 예를 들어 전역 스코프가 오염되었거나 명시적인 종속성 그래프가 요구된다.

• ES6+, Babel, PostCS의 최첨단 기능을 활용하고 싶다.

• 동적 가져오기 및 웹 팩의 splitChunks 최적화와 같은 지능형 코드 분할 기능을 원한다.

• 빌드 시스템에서 소스 맵을 생성하는 방식으로 더 많은 유연성을 원한다.

• hot module replacement 같은 고급 툴링(tooling)이 필요하다.

• 싱글 페이지 앱을 만들고 싶다. 아, 물론 Webpack을 쓰려고 싱글 페이지 앱을 만들 필요는 없다. Webpack은 멀티 페이지 앱에서 더 잘 작동한다.

Webpacker를 쓰지 않을 이유(상황)

• 내 Rails 앱이 자바스크립트를 많이 안쓴다.

• 자바스크립트 에코시스템에 대해서 지식이 부족하다.

• webpack과 Webpacker 학습에 시간을 쓸 수가 없다.

• 넘 복잡해보인다.

Sprockets로 자바스크립트, 스타일시트 임포트

Sprockets는 에셋을 매니페스트, 즉 미리 준비된 리소스로 읽어들인다. app/assets 폴더를 확인하자.

매니페스트 정의는 각각 주석(//, /* ~ */)의 내부에 =<지시자> <매개 변수>의 현식으로 표기한다.

참고로 Rails는 클라이언트 사이드 개발 언어로 커피스크립트와 SCSS를 표준으로 지원하고 있다. 하지만 반드시 사용할 필요는 없다.

에셋 파이프라인(Asset Pipeline)

에셋 파이프라인은 Sprockets 라이브러리로 제공되는 구조로, 자바스크립트와 스타일시트, 이미지 등의 접근을 한꺼번에 관리하고 사용자에게 보다 효율적으로 응답해주는 기능을 제공한다.

책에서 묘사된 Rails4 기준 에셋 파이프라인은 아래 과정을 거친다.

1. 원래 소스 코드 ex) articles.js.coffee, photos.css.scss

2. 컴파일 ex) article.js, photos.css

3. 결합 ex) 각각 application.js, application.css 에 결합됨.

4. 압축

   원래 코드에서 주석이나 개행, 공백 등을 제거하는 것을 말한다. ex) 각각 application.js, application.css 에 압축됨.

5. 다이제스트 추가

   코드의 내용을 기반으로 해시(다이제스트)를 연산해서 파일의 마지막에 붙인다. 이는 브라우저에서 의도하지 않은 캐시 사용을 피하기 위해서이다. 코드가 변경될 때 파일 이름을 강제적으로 함께 변경하므로 브라우저가 이전의 에셋 코드를 재활용하는 일 없이 에셋 수정이 실시간으로 반영된다. ex) 각각 application-xxxx.js, application-xxxx.css로 다이제스트 추가됨.

이 때 개발 환경은 2번(컴파일) 과정을 거친 후에 바로 출력해버린다.

반면 배포 환경은 2번 과정을 건너뛰고 바로 3(결합), 4(압축), 5(다이제스트 추가) 과정을 거친다.

Ajax 개발

Ajax(Asynchronous JAvascript + Xml)은 브라우저 위에서 데스크톱 애플리케이션처럼 다양한 표현을 가능하게 하는 기술이다. 이러한 기술로 구현된 웹 애플리케이션을 RIA(Rich Internet Applications)라고 부르기도 한다. RIA 기술 구현 방법엔 플래시나 실버라이트 같은 기술과 Ajax 기술이 있다. 플래시와 실버라이트는 플러그인을 사용해야하지만 Ajax는 웹 표준 기술만으로 작동한다는 점이 다르다. 참고로 플래시는 사장되었다.

Ajax를 사용하면 비동기 통신이 된다. 따라서 페이지 전체가 새로고침될 때까지 기다릴 필요도 없다.

Javascript

javascript를 학습하며 간단하게 메모합니다.

자바스크립트 특징

현재 자바스크립트의 최신 표준은 2015년에 발표된 ECMAScript 6이다.

타입

자바스크립트의 기본 타입은 원시 타입과 객체 타입으로 구분할 수 있다.

원시 타입(primitive type)

1. 숫자(number)

   자바스크립트는 모든 수를 정수, 실수 구분 없이 실수 하나로만 표기한다.

2. 문자열(string)

   자바스크립트에서는 숫자와 문자열을 더할 수도 있다. 이럴 경우에 숫자를 문자열로 자동 형변환해서, 두 문자열을 연결하는 연산을 수행한다.

3. 불리언(boolean)

4. 심볼(symbol): ECMAScript 6부터 제공됨. 심볼은 유일하고 변경할 수 없는 타입으로, 객체의 프로퍼티를 위한 식별자로 사용할 수 있다. 익스플로러에서는 지원하지 않는다.

5. undefined null과 구별하자. null은 object 타입이며, 아직 '값'이 정해지지 않은 것을 의미한다. 또한, undefined란 null과는 달리 '타입'이 정해지지 않은 것을 의미한다. 따라서 자바스크립트에서 undefined는 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 반환된다.

   null과 undefiend는 동등 연산자(==)와 일치 연산자(===)로 비교할 때 그 결과값이 다르므로 주의하자.

   null == undefined; //true, 타입을 제외하고는 같은 의미이다.
   null === undefined; //false, 타입이 다르므로 일치하지 않는다.

참조데이터 타입

참조 데이터 타입에는 객체(object)가 있다.

형 변환

묵시적 타입 변환

왠만하면 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면, 자동으로 타입을 변환하여 사용한다.

1 - "문자열"; 처럼 아예 형변환이 불가능할 경우 NaN 값을 반환한다.

NaN
Not a Number의 축약형으로, 정의되지 않은 값이나 표현할 수 없는 값이라는 의미를 가집니다. 이러한 NaN은 Number 타입의 값으로 0을 0으로 나누거나, 숫자로 변환할 수 없는 피연산자로 산술 연산을 시도하는 경우에 반환되는 읽기 전용 값입니다.

명시적 타입 변환

명시적 타입 변환을 위해 자바스크립트가 제공하는 전역 함수는 아래와 같다.

1. Number()

2. String()

3. Boolean()

4. Object()

5. parseInt()

6. parseFloat()

변수

자바스크립트에서는 var 키워드를 사용하여 변수를 선언한다.

만약 선언되지 않은 변수을 사용하려하거나 접근하면 오류가 발생한다. 단, 선언되지 않은 변수를 초기화할 경우에는 자동으로 선언을 먼저 한 후 초기화를 진행한다.

date = 25; //date라는 이름의 변수를 묵시적으로 선언

음..? 그리고 컴파일 단계가 없는 인터프리터 언어이다보니 변수 재선언시 컴파일 에러가 날 수가 없으므로 걍 변수 재선언 문구가 무시된다.

var num = 10;        // 변수의 선언과 함께 초기화
num = [10, 20, 30];  // 배열 대입
var num;             // 이 재선언문은 무시됨.

연산자

동등연산자와 일치 연산자를 체크하자.

비교 연산자	설명
===	왼쪽 피연산자와 오른쪽 피연산자의 값이 같고, 같은 타입이면 참을 반환.
==	왼쪽 피연산자와 오른쪽 피연산자의 값이 같으면 참을 반환.
!=	왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않으면 참을 반환.
!==	왼쪽 피연산자와 오른쪽 피연산자의 값이 같지 않거나, 타입이 다르면 참을 반환.

자바스크립트에서 피연산자가 둘 다 문자열이면, 문자열의 첫 번째 문자부터 알파벳 순서대로 비교한다.

비트 연산자, 삼항 연산자, delete, typeof 연산자도 C, C++이랑 동일하다.

instanced 연산자는 피연산자인 객체가 특정 객체의 인스턴스인지 아닌지를 확인해준다.

var str = new String("이것은 문자열입니다.");
​
str instanceof Object;  // true
str instanceof String;  // true
str instanceof Array;   // false
str instanceof Number;  // false
str instanceof Boolean; // false

void 연산자는 피연산자로 어떤 타입이 오던지 상관없이 언제나 undefined 값만을 반환한다.

반복문

for / in 문

for / in 문은 해당 객체의 모든 열거할 수 있는 프로퍼티(enumerable properties)를 순회할 수 있도록 해준다. 다시 한번 말하지만, for / in 문은 해당 객체가 가진 모든 프로퍼티를 반환하는 것이 아닌, 오직 열거할 수 있는 프로퍼티만을 반환한다.

열거할 수 있는 프로퍼티란 내부적으로 enumerable 플래그가 true로 설정된 프로퍼티를 의미합니다. 이러한 프로퍼티들은 for / in 문으로 접근할 수 있게 됩니다.

for / of 문

for / of 문은 반복할 수 있는 객체(iterable objects)를 순회할 수 있도록 해주는 반복문이다.

자바스크립트에서 반복할 수 있는 객체에는 Array, Map, Set, arguments 객체 등이 있다.

for / of 문은 익스플로러에서 지원하지 않는다.

루프 제어 - label 문

일반적으로 표현식의 검사를 통해 루프로 진입하면, 다음 표현식을 검사하기 전까지 루프 안에 있는 모든 실행문을 실행한다. 하지만 continue 문과 break 문은 이러한 일반적인 루프의 흐름을 사용자가 직접 제어할 수 있게 해준다.

label 문을 사용하면 continue 문과 break 문의 동작이 프로그램의 흐름을 특정 영역으로 이동시킬 수 있다. 문법은 아래와 같다.

label:
식별하고자 하는 특정 영역

예시는 아래와 같다.

예시1) 홀수에 대해서만 구구단 적용.

gugudan:
for (var i = 2; i <= 9; i++) {
    dan:
    for (var j = 1; j <= 9; j++) {
        if ((i*j) % 2 == 0)
            continue dan;
        document.write(i + " * " + j + " = " + (i*j) + "<br>");
    }
}

예시2) 3단까지만 구구단 적용

gugudan:
for (var i = 2; i <= 9; i++) {
    dan:
    for (var j = 1; j <= 9; j++) {
        if (i > 3)
            break gugudan;
        document.write(i + " * " + j + " = " + (i*j) + "<br>");
    }
}

배열(array)

자바스크립트에서 배열(array): 이름과 인덱스로 참조되는 정렬된 값의 집합

배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 헌더,

자바스크립트에서 배열의 특징은 다음과 같습니다.

1. 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 다를 수도 있다.

2. 배열 요소의 인덱스가 연속적이지 않아도 되며, 따라서 특정 배열 요소가 비어 있을 수도 있다.

3. 자바스크립트에서 배열은 Array 객체로 다뤄진다.

배열 생성

생성 방식은 3가지가 있으며 모두 같은 결과의 배열을 만들어 준다.

1. var arr = [배열요소1, 배열요소2,...]; // 배열 리터럴을 이용하는 방법

2. var arr = Array(배열요소1, 배열요소2,...); // Array 객체의 생성자를 이용하는 방법

3. var arr = new Array(배열요소1, 배열요소2,...); // new 연산자를 이용한 Array 객체 생성 방법

배열 요소의 추가

배열에 요소를 추가하는 방법은 3가지가 있다.

1. arr.push(추가할 요소);         // push() 메소드를 이용하는 방법
2. arr[arr.length] = 추가할 요소; // length 프로퍼티를 이용하는 방법
3. arr[특정인덱스] = 추가할 요소; // 특정 인덱스를 지정하여 추가하는 방법

push() 메소드와 length 프로퍼티를 이용한 방법은 모두 배열의 제일 끝에 새로운 요소를 추가한다.

인덱스에 대응하는 배열 요소가 없는 부분은 배열의 홀(hole)이라고 한다. 자바스크립트에서는 이러한 배열의 홀을 undefined 값을 가지는 요소처럼 취급한다.

희소 배열

희소 배열이란 배열에 속한 요소의 위치가 연속적이지 않은 배열을 의미한다.

연관 배열

숫자로 된 인덱스 대신에 문자열로 된 키(key)를 사용하는 배열을 연관 배열(associative array)이라고 한다. 자바스크립트는 연관 배열을 별도로 제공하지는 않지만, 인덱스로 문자열을 사용하여 연관 배열처럼 사용할 수 있는 객체(object)를 만들 수 있다.

이렇게 생성된 배열은 자바스크립트 내부적으로 Array 객체가 아닌 기본 객체로 재선언된다. 즉, 연관 배열은 Array 객체가 아니므로 length 프로퍼티의 값이 0 이고 숫자를 인덱스로 하여 요소에 접근하면 undefined를 확인하게 된다.

ECMAScript6 부터는 이러한 불편함을 해결하기 위해 새로운 데이터 구조인 Map 객체를 별도로 제공하고 있다.

자바스크립트에서 배열 여부 확인

자바스크립트에서는 해당 변수가 배열인지 여부를 확인할 수 있도록 다음과 같은 방법들을 제공하고 있다.

1. Array.isArray() 메소드

2. instanceof 연산자

3. constructor 프로퍼티

또한 Array 객체의 constructor 프로퍼티를 사용하여 배열 여부를 확인할 수도 있다. 예시를 보면 된다.

function isArray(a) {

    return a.constructor.toString().indexOf("Array") > -1;

}

var arr = [1, true, "JavaScript"];          // 배열 생성
document.write(arr.constructor);            // constructor 프로퍼티의 값 출력
document.write(arr.constructor.toString()); // function Array() {[native code]}
document.write(arr.constructor.toString().indexOf("Array")); // 10
document.write(isArray(arr))                // true

자바스크립트 함수

자바스크립트에서는 함수도 하나의 타입(datatype)이다.

따라서 함수를 변수에 대입하거나, 함수에 프로퍼티를 지정하는 것도 가능하다. 또한 자바스크립트 함수는 다른 함수 내에 중첩되어 정의될 수도 있다.

값으로서의 함수

자바스크립트에서 함수는 문법적 구문일뿐만 아니라 값(value)이기도 하다. 따라서 함수가 변수에 대입될 수도 있으며, 다른 함수의 인수로 전달될 수도 있다.

변수 스코프

지역 변수(local variable)

함수 내에서 선언된 변수. 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라진다.

전역 변수(global variable)

전역 변수(global variable)란 함수의 외부에서 선언된 변수를 가리킨다. 이러한 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹 페이지가 닫혀야만 메모리에서 사라진다.

자바스크립트에서 지역 변수를 선언할 때에는 반드시 var 키워드를 사용하여 선언해야 한다. 함수 내부에서 var 키워드를 사용하지 않고 변수를 선언하면, 해당 변수는 지역 변수가 아닌 전역 변수로 선언된다.

또한, 전역 변수와 같은 이름의 지역 변수를 선언하면, 해당 블록에서는 해당 이름으로 지역 변수만을 호출할 수 있다.

물론 이 경우엔 전역 변수가 window 객체의 프로퍼티임을 명시하면 전역 변수를 호출할 수도 있다.

함수 스코프

블록(block)이란 코드 내에서 중괄호({})로 둘러싸인 부분을 가리키며, 대부분의 프로그래밍 언어에서는 블록 내에서 정의된 변수를 블록 외부에서는 접근할 수 없다.

하지만 자바스크립트는 다른 언어와 달리 함수를 블록 대신 사용한다.

'전역 함수'는 모든 전역 변수와 전역 함수에 접근할 수 있다.

반면, 다른 함수 내에 정의된 '내부 함수'는 그 함수의 부모 함수(parent function)에서 정의된 모든 변수 및 부모 함수가 접근할 수 있는 모든 다른 변수까지도 접근할 수 있다.

아래 예시를 참고.

// x, y, name을 전역 변수로 선언함.
var x = 10, y = 20;
// sub()를 전역 함수로 선언함.
function sub() {
    return x - y;     // 전역 변수인 x, y에 접근함.
}
document.write(sub() + "<br>");
// parentFunc()을 전역 함수로 선언함.
function parentFunc() {
    var x = 1, y = 2; // 전역 변수와 같은 이름으로 선언하여 전역 변수의 범위를 제한함.
    function add() {  // add() 함수는 내부 함수로 선언됨.
        return x + y; // 전역 변수가 아닌 지역 변수 x, y에 접근함.
    }
    return add();
}
document.write(parentFunc());

함수 호이스팅(hoisting)

자바스크립트에서 함수의 유효 범위라는 것은 함수 안에서 선언된 모든 변수는 함수 전체에 걸쳐 유효하다는 의미이다.

그런데 이 유효 범위의 적용이 변수가 선언되기 전에도 똑같이 적용된다. 이러한 자바스크립트의 특징을 함수 호이스팅(hoisting)이라고 한다. 즉, 자바스크립트 함수 안에 있는 모든 변수의 선언은 함수의 맨 처음으로 이동된 것처럼 동작한다.

아래 예제를 보자.

var globalNum = 10;     // globalNum을 전역 변수로 선언함.

function printNum() {
    document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다.<br>"); // ①
    var globalNum = 20; // globalNum을 지역 변수로 선언함. // ②
    document.write("지역 변수 globalNum 선언 후의 globalNum의 값은 " + globalNum + "입니다.<br>");
}

printNum();

①에서 전역변수를 참조할 것 같지만 아니다. 호이스팅이 적용되어 아래처럼 코드가 바뀌기 때문.

var globalNum = 10;     // globalNum을 전역 변수로 선언함.

function printNum() {
		var globalNum; // 함수 호이스팅에 의해 변수의 선언 부분이 함수의 맨 처음 부분으로 이동됨.
    document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다.<br>"); // ①
    globalNum = 20; // globalNum을 지역 변수로 선언함. // ②
    document.write("지역 변수 globalNum 선언 후의 globalNum의 값은 " + globalNum + "입니다.<br>");
}

printNum();

매개변수와 인수

자바스크립트에서는 함수를 정의할 때는 매개변수의 타입을 따로 명시하지 않는다. 함수를 호출할 때에도 인수(argument)로 전달된 값에 대해 어떠한 타입 검사도 하지 않는다.

함수를 호출할 때 함수의 정의보다 적은 수의 인수가 전달되더라도, 다른 언어와는 달리 오류를 발생시키지 않는다.

이 같은 경우 자바스크립트는 전달되지 않은 나머지 매개변수에 자동으로 undefined 값을 설정한다.

arguments 객체

만약 함수의 정의보다 더 많은 수의 인수가 전달되면, 매개변수에 대입되지 못한 인수들은 참조할 방법이 없게 된다.

하지만 arguments 객체를 이용하면, 함수로 전달된 인수의 총 개수를 확인하거나, 각각의 인수에도 바로 접근할 수 있다.

arguments 객체는 함수가 호출될 때 전달된 인수를 배열의 형태로 저장하고 있다. 첫 번째 인수는 arguments[0]에 저장되며, 다음 인수는 arguments[1]에 저장된다. 또한, 인수의 총 개수는 arguments 객체의 length 프로퍼티에 저장된다.

디폴트 매개변수와 나머지 매개변수

ECMAScript 6부터 새롭게 정의된 매개변수는 다음과 같다.

1. 디폴트 매개변수(default parameter) 자바스크립트에서 매개변수의 기본값은 undefined 값으로 설정되어 있다.

2. 나머지 매개변수(rest parameter) 나머지 매개변수는 생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지를 한 번에 지정할 수 있다. 이건 예제를 보자.

   // 첫 번째 인수를 변수 firstNum에 저장하고 나머지 인수들은 배열 restArgs에 저장함.
   
   function sub(firstNum, ...restArgs) {
       for(var i = 0; i < restArgs.length; i++) {
           firstNum -= restArgs[i];
       }
       return firstNum;
   }
   
   sub(10, 2, 3);    // 10 - 2 - 3 = 5
   sub(10, 1, 5, 8); // 10 - 1 - 5 - 8 = -4

미리 정의된 전역 함수(predefined functions)

자바스크립트는 사용자의 편의를 위해 다양한 기능의 여러 전역 함수를 미리 정의하여 제공한다. 이러한 전역 함수는 자바스크립트의 어떤 타입의 객체에서도 바로 사용할 수 있다.

자바스크립트에서 미리 정의되어 있는 전역 함수는 다음과 같다.

1. eval() : 문자열로 표현된 자바스크립트 코드를 실행하는 함수

2. isFinite() : 전달된 값이 유한한 수인지를 검사하여 그 결과를 반환. 인수로 전달된 값이 숫자가 아니라면 숫자로 변환하여 검사.

3. isNaN()

4. parseFloat()

5. parseInt()

6. decodeURI() : encodeURI() 함수나 다른 방법으로 만들어진 URI를 해독한다.

7. decodeURIComponent()

8. encodeURI()

9. encodeURIComponent()

10. escape()

11. unescape()

12. Number()

13. String()

자바스크립트 객체

자바스크립트에서 객체의 프로퍼티를 참조하는 방법은 다음과 같다.

객체이름.프로퍼티이름
또는
객체이름["프로퍼티이름"]

메소드를 참조할 때 메소드 이름 뒤에 괄호(())를 붙이지 않으면, 메소드가 아닌 프로퍼티 그 자체를 참조하게 된다. 따라서 괄호를 사용하지 않고 프로퍼티 그 자체를 참조하게 되면 해당 메소드의 정의 그 자체가 반환된다.

객체의 생성

자바스크립트에서 객체를 생성하는 방법은 다음과 같다.

1. 리터럴 표기(literal notation)를 이용한 방법

   var 객체이름 = {
   	프로퍼티1이름: 프로퍼티1의 값
   	...
   }

2. 생성자 함수(constructor function)를 이용한 방법

   var day = new Date(); // new 연산자를 사용하여 Date 타입의 객체를 생성함.
   document.write("올해는 " + day.getFullYear() + "년입니다.");

3. Object.create() 메소드를 이용한 방법 Object.create() 메소드는 지정된 프로토타입(prototype) 객체와 프로퍼티를 가지고 새로운 객체를 만들어준다.

   따라서 이 메소드를 이용하면 사용자가 프로토타입 객체를 직접 명시할 수 있으므로, 상당히 유용하게 사용된다.

   Object.create(프로토타입객체[, 새로운객체의프로퍼티1, 새로운객체의프로퍼티2, ...]);

   Object.create() 메소드의 첫 번째 인수로는 프로토타입으로 사용할 객체를 전달한다. 두 번째 인수로는 새로운 객체의 추가할 프로퍼티 정보를 전달한다.

프로토타입 - 상속

C#이나 C++과 같은 클래스 기반(class-based)의 객체 지향 언어와는 달리 자바스크립트는 프로토타입 기반(prototype-based)의 객체 지향 언어이다.

따라서 상속 등의 개념이 좀 다른데, 자바스크립트에서는 현재 존재하고 있는 객체를 프로토타입으로 사용하여, 해당 객체를 복제하여 재사용하는 것을 상속이라고 한다.

프로토타입

자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있다. 모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속 받는다.

이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 한다.

아 단 하나, Object.prototype 객체는 어떠한 프로토타입도 가지지 않으며, 아무런 프로퍼티도 상속받지 않는다.

프로토타입 체인(prototype chain)

자바스크립트에서는 객체 이니셜라이저를 사용해 생성된 같은 타입의 객체들은 모두 같은 프로토타입을 가진다.

또한, new 연산자를 사용해 생성한 객체는 생성자의 프로토타입을 자신의 프로토타입으로 상속받는다.

이런 프로토타입 상속의 가상 연결고리를 프로토타입 체인이라고 한다. Object.prototype 객체는 어떠한 프로토타입도 가지지 않으며, 아무런 프로퍼티도 상속받지 않는다고 했었는데, Object.prototype 객체는 이러한 프로토타입 체인에서도 가장 상위에 존재하는 프로토타입이기 때문이다.

Math 객체

Math 객체는 수학에서 자주 사용하는 상수와 함수들을 미리 구현해 놓은 자바스크립트 표준 내장 객체이다. Math 객체는 다른 전역 객체와는 달리 생성자(constructor)가 존재하지 않는다. 따라서 따로 인스턴스를 생성하지 않아도 Math 객체의 모든 메소드나 프로퍼티를 바로 사용할 수 있습니다.

대부분의 Math 메소드는 웹 브라우저마다 다른 결괏값을 얻을 가능성이 높다. 심지어 같은 자바스크립트 인터프리터라도 운영체제가 다르면 다른 결괏값을 반환할 수 있다. 따라서 아주 정확한 결괏값이 필요한 작업에는 Math 메소드는 사용하지 않는 것이 좋다.

학습 내용에 대한 개인적인 총평

우선 벼르고 벼르던 javascript 에 대한 학습을 할 수 있어서 좋았습니다. backbone.js를 학습할 수 있는 정도로만 딱 훑어야겠습니다.

팀 미팅도 팀원들을 독려해서 공유할만한 이슈를 공유 받고, 다음 학습할 것을 확인하는 흐름이 잘 정착된 것 같네요.

학습 일정의 경우 Rails의 실시간 채팅에 대한 내용과 backbone.js에 대해서 어떻게 학습을 이어나갈지 정했고, 학습 방식의 경우 개선이 필요하다 판단하여 1) 강제로 디스코드 참여시간대 정하기 2) 학습소스를 통일하기 를 실험해보기로 했습니다. 잘 되면 좋겠네요.

다음 학습 계획

• javascript 개념 떼기. backbone js 학습가능한 수준으로.