인사이드 자바스크립트#

오늘은 인사이드 자바스크립트의 6장 객체지향 프로그래밍을 공부하였다.

6.1 클래스, 생성자, 메소드까지는 그럭저럭 이해가 되었으나, 6.2 상속 부분에서 정말 오후, 저녁 시간 내내 쩔쩔 매면서 읽었지만 도저히 이해가 되지 않았다.

내가 Java나 Python을 깊숙히 사용해본 것도 아닌데, 클래스 기반의 객체지향 프로그래밍에 자연스럽게 물들어 있었다. Java에서 사용하던 클래스 기반의 상속이 매끄럽고자연스럽고 직관적이라는 생각이 들었고, 반면에 자바스크립트의 프로토타입을 이용한상속 방식은 코드가 아니라 친절히 설명하는 그림을 봐도 너무 복잡하고 이해하기 어려웠다. 뭔가 커다란 장벽을 만난 기분이었다. (나는 자바스크립트를 하면 안되는 건가..) 자신감이 떨어지고 어딘가 물어보고 싶은 사람이 절실했다..

일단 이해되지 않는 점을 정리해본다.

• Object.create() 함수 - 🔗 MDN web docs

인사이드 자바스크립트 책에 따르면 ECMAScript 5에서 제공하는 Object.create() 함수의 내부 구현은 이러하다고 한다.

function create_object(o) {    function F() {}    F.prototype = o;    return new F();}

이 함수를 이용해서 상속을 구현해보자.

var Person = {    name: 'zzoon',    getName: function () {        return this.name;    },    setName: function (arg) {        this.name = arg;    },};
function create_object(o) {    function F() {}    F.prototype = o;    return new F();}
var student = create_object(person);
student.setName('me');console.log(student.getName()); // me

이 그림까지는 이해가 되었다.

var Parent = (function () {    function Parent(name) {        this.name = name;    }
    Parent.prototype.sayHi = function () {        console.log('Hi! ' + this.name);    };
    return Parent;})();
var child = Object.create(Parent.prototype);child.name = 'child';
child.sayHi(); // Hi! child
console.log(child instanceof Parent); // true

예제 출처 : 🔗 자바스크립트 객체지향 프로그래밍 - Poiemaweb

의문점 : 위 예제는 부모가 되는 Person 객체를 직접 넣은 반면, 이 예제에서는 Parent.prototype 을 Object.create 의 인수로 넣었는가?

앗.. 아래는 부모로 삼을 생성자 함수가 있는 경우에, 위는 부모로 삼을 객체가 있는경우에 사용할 수 있는 패턴인 것이었다..!

이해 안되는 점들

• extend() 함수

• apply() 함수 (대략은 이해됨 ..;;)

• 클래스 기반의 상속인 경우 왜 자식 클래스의 prototype 이 부모 클래스의 인스턴스를 참조하는데, 이 구조가 왜 자식 클래스의 prototype 에 메소드를 추가할 때문제가 되는가?

일단 객체지향 프로그래밍 부분을 내일 한번 더 공부해 봐야겠다. 그리고 패턴이 다양하다보니 어느 패턴이 좋다는 건지 이해가 안되겠는 상황이 종종 있다. 아직 1회독도안해봤기 때문에, 아직 다 이해하려는게 무리인거 같기도 하다.

자바스크립트#

• 변수 키워드 var 생략 가능?

미디어프로젝트#

자료 조사#

  - Tmap + 블랙박스 연동
     - 영상 데이터에 시간 정보는 잘 담김
     - `mdls [파일명]` (메타데이터 보는 명령어)
     - (번외) Tmap 블랙박스는 영상에 날짜 시간이 표시 안됨 → 사고시 법적 효력 X
  - Tmap API 공부 - 🔗 [http://tmapapi.sktelecom.com/main.html](http://tmapapi.sktelecom.com/main.html)
  > 웹페이지 보기가 불편하니 아래 코드로 수정
  ```html  <div id="side_wrap" class="ui-resizable" style="height: 768px; width: 0px;">  ```


  ![2020-03-09-200310-image-0](./images/2020-03-09-200310-image-0.png)
  <br />

필요한 기술#

Tmap과 연동한 운전 습관 개선 확장 앱#

1. pwa를 만들고 영상 촬영과 GPS 로그를 백그라운드에서 진행하고 Tmap을 실행해서경로를 안내함 Tmap에서 운행 종료를 하면 영상 촬영, 기록을 멈춤. GPS로그와 영상을 담아 서버로 전송함.

   PWA에서 백그라운드 프로세싱이 안되는 한계

2. pwa를 만들고 목적지를 입력 후 Tmap 실행 (Tmap은 블랙박스 사용으로 설정되어 있는 상태) Tmap 완료 후 gps + 영상 추출.

   Tmap 주행 후 GPS 추출이 가능하지 않으면 마찬가지로 PWA에서 백그라운드 프로세싱이 안되서 GPS 데이터 만드는게 불가능할 듯

3. 앱을 만들고 백그라운드에서 영상 촬영, GPS 트랙하면서 (블랙박스 역할) Tmap으로경로 안내.

   사실상 블랙박스 앱?

   다른 앱들

   • 지켜보고있다 블랙박스

   • 오토보이 블랙박스

앱 만들기#

• ionic

  한번 시도해보고 구글링 결과 내장 카메라, 비디오 레코딩 하는 화면을 그리는 것까지 하기엔 예제나 자료가 부족했음.

• React-Native

  자료가 조금 더 많은 편인듯

어떤 것으로 해야할 지는 조금 더 공부를 하면서 정하는 것으로 한다.

그외 만들고 싶은 프로젝트들#

• 웹페이지 모든 소스 다운로드 툴

• 읽기모드 익스텐션 (chrome)

이 글은 고현준, 송형주 님의 인사이드 자바스크립트를참조하여 작성한 글입니다.

JavaScript 데이터 타입과 연산자 (계속)#

참조 타입(객체 타입)#

for in 문과 객체 프로퍼티 출력#

for in 문을 사용하면, 객체에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다 .

// 객체 리터럴을 통한 foo 객체 생성var foo = {    name: 'foo',    age: 30,    major: 'computer science',};
// for in 문을 이용한 객체 프로퍼티 출력for (var prop in foo) {    console.log(prop, foo[prop]);}

[출력 결과]

name fooage 30major computer science

for in 문이 수행되면서 prop 변수에 foo 객체의 프로퍼티가 하나씩 할당되고, prop 에 할당된 프로퍼티의 이름을 통해서 foo[prop] 와 같이 대괄호 표기법을 이용해 프로퍼티 값을 출력한다.

객체 프로퍼티 삭제#

JS 에서는 객체의 프로퍼티를 delete 연산자를 이용해 즉시 삭제할 수 있다.

주의할 점은 delete 연산자는 객체의 프로퍼티를 삭제할 뿐, 객체 자체를 삭제하지는 못한다는 것이다.

// 객체 리터럴을 통한 foo 객체 생성var foo = {    name: 'foo',    nickname: 'babo',};
console.log(foo.nickname); // (출력값) babodelete foo.nickname; // (출력값) nickname 프로퍼티 삭제console.log(foo.nickname); // (출력값) undefined
delete foo; // (출력값) foo 객체 삭제 시도console.log(foo.name); // (출력값) foo

참조 타입의 특성#

자바 스크립트에서는 기본 타입인 숫자, 문자열, boolean, null, undefined 5가지를제외한 모든 값은 객체다. 배열이나 함수 또한 객체로 취급된다. 그리고 이러한 객체는자바스크립트에서 참조 타입이라고 부른다. 객체의 모든 연산이 실제 값이 아닌 참조값으로 처리되기 때문이다.

var objA = {    value: 40,};var objB = objA;
console.log(objA.value); // 40console.log(objB.value); // 40
objB.value = 50;
console.log(objA.value); // 50console.log(objB.value); // 50
var a = 40;var b = a;
console.log(a);console.log(b);
b = 50;
console.log(a);console.log(b);

objA 는 객체 자체를 저장하고 있는 것이 아니라 생성된 객체를 가리키는 참조값을저장하고 있다.

objB 에 objA 를 할당할 때 참조값이 objB 에 전달되고, objB 와 objA 가동일한 객체를 가리키게 되어 objB.value 의 값을 50으로 갱신하자 objA.value 의값도 50으로 갱신된다.

반면 객체가 아닌 기본 타입인 a , b 의 경우는 b 에 a 를 할당할 때, 참조값이 전달되는 것이 아니라, 값이 복사된다. 따라서 b 를 50으로 갱신해도 a 의 값은 40으로 유지된다.

Call by value vs Call by reference

객체 비교 ( == )#

동등 연산자( == )를 사용하여 두 객체를 비교할 때도 객체의 프로퍼티값이 아닌 참조값을 비교한다.

var objA = {    value: 100,};
var objB = {    value: 100,};
var objC = objB;
console.log(objA.value == objB.value); // trueconsole.log(objA == objB); // falseconsole.log(objB == objC); // true

objA.value 와 objB.value 를 동등 연산자( == )로 비교하면, true 가 되는데이 둘은 기본 타입으로 값 자체를 비교하기 때문이다.

반면 objA 와 objB 는 같은 프로퍼티 값을 갖고 있지만, 다른 객체이기 때문에 둘의 참조값이 다르기 때문에 false 가 출력된다.

objC 는 objB 의 참조값을 복사해왔기 때문에, true 가 출력된다.

표준 동치 ( == ) vs 엄격 동치 ( === )

== : 두 피연산자의 자료형이 같지 않은 경우 같아지도록 변환한 후, 비교를 수행한다. 모두 객체라면 참조를 비교한다. - 숫자와 문자열 비교시엔 문자열을 숫자로 변환한다. 그리고 가장 가까운 Number *자료형 값으로 반올림한다.

• 하나의 연산자가* Boolean 인 경우 true 는 1, false 는 0으로변환한다. - 객체를 문자열이나 숫자와 비교하는 경우, 연산자는 우선 객체의 valueOf() 또는 toString() 메서드를 이용해 문자열 혹은 숫자 값을 받으려 시도한다.

=== : 자료형 변환 없이 두 연산자가 엄격히 같은지 판별한다. 모두 객체라면 참조값 비교한다.

- 🔗 MDN web docs - 비교 연산자 에서

참조에 의한 함수 호출 방식#

기본 타입과 참조 타입의 경우는 함수 호출 방식도 다르다.

기본 타입의 경우는 값에 의한 호출 방식으로 함수의 매개변수로 복사된 값이전달되기 때문에 함수 내부에서 매개변수를 이용해 값을 변경해도 실제로 호출된 변수의 값이 변경되지는 않는다.

참조 타입의 경우 참조에 의한 호출 방식으로 인자로 참조 타입인 객체를 전달할경우, 인자로 넘긴 객체의 참조값이 전달되기 때문에 함수 내부에서 참조값을 이용해서 실제 객체의 값을 변경한다.

var a = 10;var objA = {    value: 10,};
function changeArg(num, obj) {    num = 20;    obj.value = 20;
    console.log(num); // 20    console.log(obj.value); // 20}
changeArg(a, objA);
console.log(a); // 10 (바뀌지 않음)console.log(objA.value); // 20 (바뀜)

이 글은 고현준, 송형주 님의 인사이드 자바스크립트를참조하여 작성한 글입니다.

프로토타입#

자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다. (객체지향의 상속 개념과 비슷)

부모 객체의 속성을 자신의 것처럼 쓸 수 있다.

var foo = {    name: 'foo',    age: 30,};
console.log(foo.toString());console.dir(foo);

[출력 결과]

생성한 foo 객체에는 toString() 메소드가 없음에도 에러가 발생하지 않는데, 이는 foo 객체의 프로토타입에 toString() 메소드가 정의되어 있기 때문이다.

자바스크립트의 모든 객체는 자신의 프로토타입을 가리키는 [[Prototype]] 라는 숨겨진 프로퍼티를 가진다.

크롬 브라우저에서는 __proto__ 가 숨겨진 [[Prototype]] 프로퍼티를 의미한다.

우선은 Object.prototype 객체가 생성된 객체의 프로토타입 객체가 된다는 것만기억하고 넘어가자.

또한 객체를 생성할 때 결정된 프로토타입 객체는 임의의 다른 객체로 변경하는 것도가능하다.

(이를 통해 객체의 상속 등의 기능을 구현한다.)

배열#

배열은 자바스크립트 객체의 특별한 형태이다.

C나 Java의 배열과 같은 기능을 하는 객체지만 크기를 따로 지정하지 않아도 되고, 어떤 위치에 어느 타입의 데이터를 저장하더라도 에러가 발생하지 않는다. ex) var arr = [ 1, '2', true, 1.1, '안녕하세요', [1, 2, 3, 4]];

배열 리터럴#

객체 리터럴이 중괄호 {} 를 이용한 표기법이었다면, 배열 리터럴은 대괄호 [] 를이용한다.

객체 리터럴은 key: value 쌍으로 프로퍼티의 이름과 프로퍼티의 값을 모두 표기해야 하지만, 배열은 각 요소의 값만을 포함한다.

객체가 프로퍼티의 이름으로 대괄호나 마침표 표기법으로 프로퍼티에 접근했다면, 배열은 대괄호 내에 인덱스 값을 넣어서 접근한다.

배열의 요소 생성#

객체가 동적으로 프로퍼티를 추가할 수 있듯이, 배열도 동적으로 원소를 추가할 수 있다. 특히 자바스크립트의 경우는 값을 순차적으로 넣을 필요 없이 아무 인덱스 위치에나 동적으로 추가할 수 있다.

var emptyArr = [];console.log(emptyArr[0]);
emptyArr[0] = 100;emptyArr[3] = 'eight';emptyArr[7] = true;console.log(emptyArr);console.log(emptyArr.length);

배열의 length 프로퍼티#

자바스크립트의 모든 배열은 length 프로퍼티가 있다.

length 프로퍼티는 배열의 가장 큰 인덱스에 1을 더한 값이다. (원소 개수와 일치하는 것이 아님)

var arr = [];console.log(arr.length); // 0
arr[0] = 0;arr[1] = 1;arr[2] = 2;arr[100] = 100;console.log(arr.length); // 101

arr 의 원소 개수가 4개 뿐이지만, arr.length 의 값은 101임.

배열의 length 프로퍼티는 코드를 통해 명시적으로 값을 변경할 수도 있다.

var arr = [0, 1, 2];console.log(arr.length); // 3
arr.length = 5;console.log(arr); // [0, 1, 2, undefined, undefined]
arr.length = 2;console.log(arr); // [0, 1]console.log(arr[2]); // undefined

arr.length 를 기존 length 보다 크게 변경하면 원소가 할당되지 않았던 인덱스는 undefined 로 출력되고, 또한 기존 length 보다 작게 변경하면 할당되었던 인덱스가 삭제된다.

배열 표준 메소드와 length 프로퍼티#

자바스크립트는 배열에서 사용가능한 다양한 표준 메소드를 제공하는데, 이러한 배열 메소드는 length 프로퍼티를 기반으로 동작하기 때문에 length 프로퍼티가 굉장히 중요하다.

• push() 메소드 : 배열의 현재 length 값의 위치에 새로운 원소를 추가한다.

arr.length 값을 변경하면 변경한 위치 뒤에 push() 를 하게 된다.

배열과 객체#

자바스크립트에서는 배열 역시 객체인데, 배열은 일반 객체와 약간 차이가 있따.

// colorsArray 배열var colorsArray = ['orange', 'yellow', 'green'];console.log(colorsArray[0]); // orangeconsole.log(colorsArray[1]); // yellowconsole.log(colorsArray[2]); // green
// colorsObj 객체var colorsObj = {    0: 'orange',    1: 'yellow',    2: 'green',};console.log(colorsObj[0]); // orangeconsole.log(colorsObj[1]); // yellowconsole.log(colorsObj[2]); // green
// typeof 연산자 비교console.log(typeof colorsArray); // objectconsole.log(typeof colorsObj); // object
// length 프로퍼티console.log(colorsArray.length); // 3console.log(colorsObj.length); // undefined
// 배열 표준 메소드colorsArray.push('red');console.log(colorsArray); // ['orange', 'yellow', 'green', 'red']colorsObj.push('red'); // Uncaught TypeError: Object #<Object> has no method 'push'

• 배열과 객체는 유사하게 리터럴 방식으로 생성할 수 있고, 결과값 출력과 프로퍼티접근 모두 비슷하게 할 수 있다.

객체의 프로퍼티 접근에서 프로퍼티 속성을 문자열 형태로 적어야 하는데, 자바스크립트 엔진이 [] 내부에 숫자가 사용될 경우, 숫자를 자동으로 문자열 형태로바꾸어주어 정상적으로 접근된 것을 볼 수 있다.

• typeof 연산자 결과가 모두 object 이다.

• 객체에는 length 프로퍼티가 없다. ( undefined )

• 객체에서는 배열 표준 메소드를 호출할 수 없다.

객체의 경우 객체 표준 메소드를 저장하고 있는 Object.prototype 객체가 프로토타입인 반면 배열의 경우 Array.prototype 객체가 프로토타입이다. 또한 Array.prototype 의 프로토타입은 Object.prototype 객체이다. 따라서 배열은 Array.prototype 에 포함된 배열 표준 메소드와 Object.prototype 의 객체 표준메소드를 모두 사용할 수 있다.

배열의 프로퍼티 동적 생성#

배열도 자바스크립트 객체로, 인덱스가 숫자인 배열 원소 이외에도 객체처럼 동적으로프로퍼티를 추가할 수 있다.

// 배열 생성var arr = ['zero', 'one', 'two'];console.log(arr.length); // 3
// 프로퍼티 동적 추가arr.color = 'blue';arr.name = 'number_array';console.log(arr.length); // 3
// 배열 원소 추가arr[3] = 'red';console.log(arr.length); // 4
// 배열 객체 출력console.dir(arr);

[ console.dir(arr) 출력 결과]

배열도 객체처럼 key: value 형태로 배열 원소 및 프로퍼티를 가질 수 있다.

배열의 프로퍼티 열거#

객체는 for in 문으로 프로퍼티를 열거하는데, 배열도 객체이므로 for in 문을 사용하는 것이 가능하지만, 불필요한 프로퍼티가 출력될 수 있으므로 for 문을 사용하는 것이 좋다.

for of 문 for in 은 객체의 모든 열거가능한 속성에 대해 반복하는 반면, for of 문은 컬렉션 전용으로 [Symbol.iterator] 속성이 있는 컬렉션 요소에 대해 반복한다.

const iterable = [10, 20, 30];
for (const value of iterable) {    console.log(value);}// 10// 20// 30

☝ 의문 : 참조 변수의 let , const 차이 - 🔗 [javascript] ES6 반드시 알아야할 문법 let, const 차이점

기본 변수일 때

• let : 변수

• const : 상수

참조 변수일 때

• let : 참조값이 변할 수 있음. (다른 객체 지정 가능)

• const : 참조값이 변할 수 없음. (내부 속성은 변화 가능)

const objA = {};let objB = {};
objA = objB; // Error: "objA" is read-onlyobjB = objA;

배열 요소 삭제#

배열도 객체이므로 배열 요소나 프로퍼티를 삭제하는 데 delete 연산자를 사용할 수있다.

var arr = ['zero', 'one', 'two', 'three'];delete arr[2];console.log(arr); // ['zero', 'one', undefined, 'three']console.log(arr.length); // 4

delete arr[2] 로 배열의 요소를 삭제하면, arr[2] 에 undefined 가 할당되게되지만, 배열의 length 값은 변하지 않는다. 즉 원소 자체를 삭제하지 않는다.

때문에 배열에서 요소를 완전히 삭제할 경우 자바스크립트에서는 splice() 배열 메소드를 사용한다.

splice() 함수#

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

매개변수

• start : 배열의 변경을 시작할 인덱스, 배열의 길이보다 큰 값이라면 배열의 길이로 설정됨. 음수일 경우 배열의 끝에서부터 세어가고, 절대값이 배열의 길이보다 큰경우 0으로 설정됨

• deleteCount [옵셔널] : 배열에서 제거할 요소의 수. 0이면 어떤 요소도 제거하지않음. (새로운 요소를 추가할 때 사용)

• item1, item2, ... [옵셔널] : 배열에 추가할 요소. 없으면 splice() 는 요소를제거하기만 한다.

반환 값

• 제거한 요소를 담은 배열, 하나만 제거한 경우 길이가 1인 배열을 반환 아무 것도제거하지 않으면 빈 배열.

Array() 생성자 함수#

일반적인 리터럴로 생성하는 것도 결국 생성자 함수로 생성하는 과정을 단순화한 것이다.

Array() 생성자로 생성할 때는 반드시 new 연산자를 써야한다는 것을 기억하자.

Array() 생성자 함수는 호출할 때 인자 개수에 따라 동작이 다르다.

• 호출할 때 인자가 숫자 1개 일 경우 : 호출된 인자를 length 로 갖는 빈 배열 생성

• 그 외 : 호출된 인자를 요소로 갖는 배열 생성

var foo = new Array(3);console.log(foo); // [undefined, undefined, undefined]console.log(foo.length); // 3
var bar = new Array(1, 2, 3);console.log(bar); // [1, 2, 3]console.log(bar.length); // 3

유사 배열 객체#

만약 일반 객체에 length 라는 프로퍼티가 있으면 어떻게 될까? - 이러한 객체를 유사 배열 객체(array-like object) 라고 한다.

유사 배열 객체는 객체임에도 불구하고 표준 배열 메소드를 사용하는게 가능하다. ( apply() 메서드를 사용해야 한다)

var arr = ['bar'];var obj = {    name: 'foo',    length: 1,};
arr.push('baz');console.log(arr); // ['bar', 'baz']
Array.prototype.push.apply(obj, ['baz']);console.log(obj); // { '1': 'baz', name: 'foo', length: 2}

arguments 객체나 jQuery 객체가 유사 배열 객체 형태로 되어 있다.

기본 타입과 표준 메서드#

자바스크립트는 숫자, 문자열, Boolean 에 대해 각 타입별로 호출 가능한 표준 메소드를 정의하고 있다.

기본 타입의 경우는 객체가 아닌데 어떻게 메소드를 호출할 수 있는가?

기본값은 메소드 처리 순간에 객체로 변환된 다음 타입별 표준 메소드를 호출하고, 끝나면 다시 기본값으로 복귀한다.

var num = 0.5;console.log(num.toExponential(1)); // 5.0e-1
console.log('test'.charAt(2)); // s

연산자#

+ 연산자#

더하기 연산과 문자열 연결 연산

typeof 연산자#

피연산자의 타입을 문자열 형태로 리턴.

☝ null 과 배열이 'object' 라는 점. 함수는 'function' 이라는 점에 유의

동등 연산자( == )와 일치 연산자( === )#

동등 연산자는 비교하려는 피연산자의 타입이 다를 경우에 타입 변환 후 비교.

일치 연산자는 타입이 다를 경우 변경하지 않고 비교.

== 동등 연산자는 권장되지 않음.

!! 연산자#

!! 연산자는 피연산자를 Boolean 값으로 변환한다.

console.log(!!0); // falseconsole.log(!!1); // trueconsole.log(!!''); // falseconsole.log(!!'string'); // trueconsole.log(!!false); // falseconsole.log(!!true); // trueconsole.log(!!null); // falseconsole.log(!!undefined); // falseconsole.log(!!{}); // trueconsole.log(!![]); // true

null 과 undefined 는 false , 객체와 배열은 모두 비어있어도 true

인터넷 강좌로는 이해가 안되는 점들이 많아서 '인사이드 자바스크립트' ebook을 구입해 공부한다.

이 글은 고현준, 송형주 님의 인사이드 자바스크립트를참조하여 작성한 글입니다.

JavaScript 데이터 타입과 연산자#

자바스크립트의 값들은 크게 기본 타입과 참조 타입으로 나뉜다.

• 기본 데이터 타입

  • 숫자

  • 문자열

  • boolean

  • null

  • undefined

• 참조 데이터 타입

  • 객체

    • 배열

    • 함수

    • 정규표현식

배열, 함수, 정규표현식이 모두 객체에 속하는 개념.

기본 타입#

기본 타입의 특징은 그 자체가 하나의 값을 나타낸다는 것

자바스크립트는 느슨한 타입 체크 언어다. C나 Java 등의 엄격한 타입 체크 언어는 변수를 선언할 때 변수에 저장할 데이터 종류에 따라 char, int, float 등의 예약어를 이용해서 변수의 데이터 타입을 지정한다.

반면 자바스크립트는 변수를 선언할 때 타입을 미리 정하지 않고 var (let, const) 라는 한 가지 키워드로만 변수를 선언한다.

var intNum = 10;var floatNum = 0.1;
var singleQuoteStr = 'Single quote string';var doubleQuoteStr = 'Double quote string';var singleChar = 'a';
var boolVar = true;
var emptyVar;
var nullVar = null;
console.log(    typeof intNum, // number    typeof floatNum, // number    typeof singleQuoteStr, // string    typeof doubleQuoteStr, // string    typeof boolVar, // boolean    typeof emptyVar, // undefined    typeof nullVar, //object);

숫자#

자바스크립트에서는 모든 숫자를 64비트 부동 소수점 형태로 저장한다.

intNum과 floatNum 변수 모두 typeof 연산자의 결과값이 number 타입이다.

자바스크립트에서는 정수형이 따로 없고 모든 숫자를 실수로 처리하므로 나눗셈 연산을 할 때 5/2 의경우 2가 아니라 2.5가 출력된다.

var num = 5 / 2;
console.log(num); // 2.5console.log(Math.floor(num)); // 2

문자열#

문자열은 작은 따옴표나 큰 따옴표로 생성한다. typeof의 결과는 string이다.

자바스크립트에서는 C언어의 char 타입과 같이 문자 하나만을 별도로 나타내는 데이터타입은 존재하지 않는다.

주의해야할 점은 한 번 정의된 문자열은 변하지 않는다는 것이다. (immutable)

불린값#

true, false를 나타내는 불린 타입이다.

null과 undefined#

이 두 타입은 모두 '값이 비어있음'을 뜻한다.

자바스크립트 환경 내에서 기본적으로 값이 할당되지 않은 변수는 undefined 타입이며 , undefined 타입의 변수는 변수 자체의 값 또한 undefined이다. 이처럼 자바스크립트에서 undefined는 타입이자, 값을 나타낸다

null 타입 변수의 경우는 개발자가 명시적으로 값이 비어있음을 나타내는 데 사용한다 .

주의할 점은 null 타입 변수의 typeof 결과가 null이 아니라 object라는 것이고따라서 null 타입 변수인지 확인할 때 typeof 연산자를 사용하면 안되고, 일치 연산자 (===)를 사용해서 변수의 값을 직접 확인해야 한다.

var nullVar = null;
console.log(typeof nullVar === null);console.log(nullVar === null);

참조 타입(객체 타입)#

자바스크립트에서 숫자, 문자열, boolean, null, undefined 같은 기본 타입을 제외한모든 값은 객체다.

따라서 배열, 함수, 정규표현식 등도 모두 결국 자바스크립트 객체로 표현된다.

자바스크립트에서 객체는 단순히 '이름(key):값(value)' 형태의 프로퍼티들을 저장하는 컨테이너로서, 컴퓨터 과학 분야에서 해시(hash)라는 자료구조와 상당히 유사하다.

객체는 여러 개의 프로퍼티를 포함할 수 있으며, 기본 타입의 값을 포함하거나 다른객체를 가리킬 수도 있다. 객체의 프로퍼티는 함수로 포함할 수 있으며, 자바스크립트에서는 이러한 프로퍼티를 메소드라고 부른다.

객체 생성#

자바스크립트에서 객체를 생성하는 방법은 크게 세 가지가 있다.

• Object() 생성자 함수 이용

var foo = new Object();
foo.name = 'foo';foo.age = 30;foo.gender = 'male';
console.log(typeof foo); // objectconsole.log(foo); // { name: 'foo', age: 30, gender: 'male' }

• 객체 리터럴 방식 이용

var foo = {    name: 'foo',    age: 30,    gender: 'male',};
console.log(typeof foo); // objectconsole.log(foo); // { name: 'foo', age: 30, gender: 'male' }

중괄호를 이용해서 생성, {} 안에 아무것도 적지 않은 경우 빈 객체가 생성된다.

• 생성자 함수 이용

생성자 함수를 이용하는 것은 다음에 다룬다.

객체 프로퍼티 읽기/쓰기/갱신#

객체 프로퍼티에 접근하는 두 가지 방법

• 대괄호 ( [] ) 표기법

• 마침표 ( . ) 표기법

var foo = {    name: 'foo',    major: 'computer science',};
// 객체 프로퍼티 읽기console.log(foo.name); // fooconsole.log(foo['name']); // fooconsole.log(foo.nickname); // undefined
// 객체 프로퍼티 갱신foo.major = 'electronics engineering';console.log(foo.major); // electronics engineering
foo['major'] = 'digital media';console.log(foo['major']); // digital media
// 객체 프로퍼티 동적 생성foo.age = 30;console.log(foo.age); // 30
foo['gender'] = 'male';console.log(foo['gender']); // male

대괄호 표기법의 경우 접근하려는 객체의 프로퍼티를 문자열 형태로 만든 다음 대괄호로 둘러싸야 된다.

만약 문자열 형태로 만들지 않고 foo[name] 로 접근한다면 자바스크립트는 name 이라는 변수 또는 객체를 찾아 toString() 메소드를 호출하여 문자열로 바꾸려는 시도를 한다.

대괄호 표기법 만을 사용해야하는 경우 접근하려는 프로퍼티가 표현식이거나 예약어일 경우, 대괄호 표기법만을 이용해서 접근해야 한다. ex) foo['full-name']

객체 속성 이름 짓기#

점 표기법으로 접근하기 위해서는 속성의 이름이 식별자 규칙을 따라야 한다. 식별자규칙을 따를 경우 속성의 이름을 '' 로 감싸지 않아도 된다.

자바스크립트 식별자 코드 내의 변수, 함수, 속성을 식별하는 문자열대소문자를구별하며 유니코드 글자, $ , _ ,숫자(0-9)로 구성할 수 있지만, 숫자로 시작할수는 없다.

🔗MDN web docs - 식별자

대괄호 표기법에서는 문자열이나 Symbol을 속성의 이름으로 사용할 수 있고, 유효한식별자가 아니어도 된다. 1foo , !bar! , 심지어 공백 도 가능하다.

대괄호 표기법을 사용할 때는 foo['name'] 처럼 ' ' 로 감싸주어야 한다.

객체 리터럴 방식으로 객체를 생성할 때 오직 숫자로 구성된 속성 이름이 ' ' 로감싸지 않아도 가능한데 (식별자 규칙에 어긋남.) 이 이유는 아직 잘 모르겠음. 숫자가 문자열로 바뀌는 특징이 있는 것 같음. 이 경우 점 표기법으로는 접근할 수 없고, 대괄호 표기법에서는 foo['숫자'] 와 foo[숫자] 모두 접근 가능함.

참고자료#

🔗MDN web docs - 속성 접근자

🔗MDN web docs - 식별자

🔗JavaScript Object['key'] vs Object.key 차이

JavaScript#

객체#

• 객체 선언

const ironMan = {    'name': '토니스타크',    'actor': '로버트 다우니 주니어',    'alias': '아이언맨',    'key is string': true,};

객체는 { } 로 감싸고 key: value 페어로 이루어져 있는데, key 는 문자열로 공백이 있다면 ' 로 감싸야 한다. 또한 , 를 빼놓으면 error가 발생한다.

• 객체 호출

console.log(ironMan);// Object {name: "토니스타크", actor: "로버트 다우니 주니어", alias: "아이언맨"}
console.log(ironMan.name);// 토니스타크
console.log(ironMan.actor);// 로버트 다우니 주니어
console.log(ironMan.alias);// 아이언맨

• 객체 구조 분해

const {alias, name, actor} = hero;const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`;console.log(text);

객체에서 값을 추출해냄.

• 객체 내부 함수

const dog = {    name: '멍멍이',    sound: '멍멍!',    say: function () {        console.log(this.sound);    },};

function() 은 익명 함수이지만, function dogFunc() 처럼 named 함수로 만들어도 된다.

이렇게 함수를 객체 내부에 정의할 수 있다.

그런데 만약 화살표 함수를 정의하면 어떻게 될까?

const dog = {    name: '멍멍이',    sound: '멍멍!',    say: () => {        console.log(this.sound);    },};
dog.say();
// TypeError: Cannot read property 'sound' of undefined

function 키워드를 사용할 경우 this 로 자신이 속한 위치와 연결시키는 것이 가능.

화살표 함수의 경우 자기 자신이 속한 this 가 어디인지 모른다

const dog = {    name: '멍멍이',    sound: '멍멍!',    say: function () {        console.log(this.sound);    },};
const cat = {    name: '야옹이',    sound: '야옹~',};
cat.say = dog.say;dog.say(); // 멍멍!cat.say(); // 야옹~
// Errorconst dogSay = dog.say;const catSay = cat.say;dogSay();catSay();

cat.say = dog.say; 로 함수를 할당해줄 수 있는데, 만약 외부에 있는 const dogSay 에 할당한다면, 마찬가지로 this 가 어느 scope 인지를 알지 못해 error 가 발생한다.

• getter와 setter 함수

// EX 1const dog = {    _name: '멍멍이',    get name() {        console.log('_name을 조회합니다.');        return this._name;    },    set name(value) {        console.log('이름이 바뀝니다..' + value);        this._name = value;    },};
console.log(dog.name);dog.name = '뭉뭉이';console.log(dog.name);
// EX 2const numbers = {    _a: 1,    _b: 2,    sum: 3,    calculate() {        console.log('calculate');        this.sum = this._a + this._b;    },    get a() {        return this._a;    },    get b() {        return this._b;    },    set a(value) {        this._a = value;        this.calculate();    },    set b(value) {        this._b = value;        this.calculate();    },};
console.log(numbers.sum);numbers.a = 5;numbers.a = 6;numbers.a = 7;numbers.a = 8;console.log(numbers.sum);

get 함수와 sum 함수는 이름이 같아도 된다. 하지만 변수와 이름이 같으면 안된다. 따라서 변수명 앞에 _ 를 붙여준다.

EX2에서처럼 get, set을 사용할 때의 장점은 a의 값이 변할 때에 calculate 함수를 실행하여 sum 값을 업데이트하므로 효율적이다.

• 객체 내장 함수

const doggy = {    이름: '멍멍이',    소리: '멍멍',};
console.log(doggy);
console.log(Object.entries(doggy));console.log(Object.keys(doggy));console.log(Object.values(doggy));

배열#

JS에서 배열은 타입을 신경쓰지 않아도 된다. ex) [ 'a', 1, 'text' ]

배열 내장함수

• push

• pop

• length

반복문#

• for 문

• while 문

• for - of

const numbers = [10, 20, 30, 40, 50];
for (let number of numbers) {    console.log(number);}

컬렉션 전용 반복 구문

• for - in

var obj = {    a: 1,    b: 2,    c: 3,};
for (var prop in obj) {    console.log(prop, obj[prop]); // a 1, b 2, c 3}

객체의 속성들을 반복하여 작업 수행.

• continue

반복문 중에 건너뛰고 다음 반복을 실행.

• break

반복문을 빠져나감.

• foreach

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];
superheroes.forEach((hero) => {    console.log(hero);});

• map

const array = [1, 2, 3, 4, 5, 6, 7, 8];
const square = (n) => n * n;const squared = array.map(square);
console.log(squared);

// 더 간략히const array = [1, 2, 3, 4, 5, 6, 7, 8];const squared = array.map(n => n * n;);
console.log(squared);

• indexOf

const superheroes = ['아이언맨', '캡틴 아메리카', '토르', '닥터 스트레인지'];const index = superheroes.indexOf('토르');console.log(index);

• findIndex

const todos = [    {        id: 1,        text: '자바스크립트 입문',        done: true,    },    {        id: 2,        text: '함수 배우기',        done: true,    },    {        id: 3,        text: '객체 배열 배우기',        done: true,    },    {        id: 4,        text: '내장 함수 배우기',        done: false,    },];
const index = todos.findIndex((todo) => todo.id === 3);console.log(index);

• find

• filter

TIL#

TIL 작성에 너무 무리를 하는 나 자신을 발견했다.

처음에는 TIL을 어떤 언어나 기술에 대해 한 토픽 정도를 정리하는 개념으로 생각했으나, 이 생각은 다음의 잘못된 공부 방법으로 이끌었다.

• 사소한 부분 또는 크게 중요하지 않은 디테일한 부분까지 놓치지 않고 정리하게 만들어 피로도를 높였다.

• 내 자신의 생각이나 느낌이 담겨있지 않았다.

TIL 재정의#

어느 순간 너무 정확한 자료를 만들려고 애쓸 필요가 없다는 것을 알게 되었다.

TIL은 내가 다시 보고 이해하면 되는 것이지 누군가에게 알려주기 위해 쓰는 글은 아니기 때문이다.

그리고 너무 깔끔하게 정리할 필요도 없다.

(누가 본다고 깔끔하게 정리하려고 애썼는지..)

"TIL은 오늘 배운 것을 정리하는 것이 아니라 그저 날 것의 생각을 기록해놓는 것이다." 라고 재정의한다.

그 이후에 날 것의 생각이 좀 더 정제되면, 블로그를 통해 다루거나 TIL에 주제 별로묶을 수 있을 것이다.

자극이 되는 TIL의 선배님들#

TIL을 1년동안 진행하며 - 박준우블로그

일일커밋의 효용성 - jojoldu

일일커밋(Daily Commit) - 100일 회고 - 진유림

일일커밋(Daily Commit) – 1년 회고 - 진유림

나는 어떻게 개발 공부를 했나, 1편 - Jbee

나는 어떻게 개발 공부를 했나, 2편 - Jbee

0228#

토익스피킹#

"졸업 요건" + "취업"

두 가지 목적을 위해 토익스피킹 시험을 준비했다.

졸업 요건은 Lv.5, 취업에는 최소 Lv.6를 요구하는 회사가 많았다.

목표는 내심 Lv.7을 기대하면서 Lv.6로 잡았다. (지금 생각해보면 참 안일했던 목표설정)

• 독학 (유튜브)

• 인터넷 강의

• 학원

3가지 선택지가 있었는데, 빠른 시간 안에 점수를 얻고 싶었기 때문에 + 토익스피킹시험의 성격을 전혀 몰랐기 때문에, 그냥 학원을 다니기로 했다.

안일한 목표와 수동적으로 학원에 의존할 생각으로 시작해서 그런지 학원 수업과 스터디에서는 열심히 공부하고, 따로 시간을 내서 공부하지는 않게 되었다. 지금 생각해보니 당연한 결과였다.

이렇게 오전 교내 근로와 오후 학원을 병행하니 ( 집 -> 학교 -> 강남 -> 집 의 살인적인 통학 스케쥴..) 2주가 순식간에 지나갔고, 열심히 공부하지 않은 탓에 당장 시험볼 자신이 없어 1주간 추가로 독학을 했다.

토익스피킹은 스피킹 시험이기 때문에 직접 소리내어서 공부해야했고, 그래서 집에서공부를 했다. 그러다보니 문제 오디오 파일도 직접 재생해야하고, 직접 시간을 재야하고, 녹음기도 키는 등 이것저것 신경쓰면서 공부해야 했다.

그런데 시험장에 가니 스피킹하기 좋은(?) 환경에서 어느 정도의 긴장감과 함께 시험을 치루니 오히려 모의고사 풀 때보다 집중되고 잘 본 느낌이었다.

반성#

결과는 Lv.6. 아무튼 필요한 요구조건은 만족시켰지만 나름 Lv.7을 바래서 그런지 조금 실망스러웠다. 하지만 결국 안일하게 새운 목표에 당연한 결과였던 것 같고, 시험을 잘 봐야하는 이유 자체가 불분명했던 것 같다.

아무튼 여기까지 TIL을 3주간 게을리한 변명이다.

JavaScript#

드디어 HTML, CSS를 끝내고 JavaScript로 넘어왔다. Markup Language만 하다가 오랜만에 프로그래밍 언어를 공부하니 오히려 재미있었다. HTML, CSS는 속성 역할을 숙지하고, 사용법을 익히는 수준이라 흥미가 떨어졌고, JS를 다룰 줄 알아야 의미있는 프로젝트를 시작해볼 수 있겠다 싶어 JS를 빨리 공부하려고 한다.

기초적인 문법#

프론트엔드 웹개발 패키지 강좌를 통해 기초적인 JS 문법을 배웠다. 일반적인 프로그래밍 언어와 유사한 부분은 지나가고, 유의해야겠다고 발견한 부분만 정리한다.

MISC#

• CodeSandbox : javascript를 학습하기 좋은 ide

• 쌍따옴표 " 와 따옴표 ' 는 둘 중 아무거나 가능. (CodeSandbox에서는 .prettierrc 에서 설정을 통해 cmd + s 할 때 따옴표와 쌍따옴표 중 선택한것으로 변환시켜준다.)

• ; 는 생략 가능. 하지만 가독성을 위해 추가하는 것 권장.

변수와 상수#

JS에서는 변수, 상수를 선언할 때 type 별로 선언하지 않고 let , const , 그리고 var 를 사용할 수 있다.

• let 은 변수, 값을 바꿀 수 있다. 같은 이름의 변수를 또 다시 선언할 수 없다.

• const 는 상수, 한번 설정하면 값을 바꿀 수 없다. immutable

• var 역시 변수. 같은 이름의 변수를 또 다시 선언할 수 있다.

var 는 현재 권장되지 않는 변수.IE9, IE10 등의 구형 브라우저에서는 let , const 가 없어서 사용 불가하다.하지만 Babel 이라는 도구를 통해 JS 코드가 구형 브라우저에서 돌아가도록 호환해줄 수 있기 때문에 var 를 완전히 사용하지 않고 개발하는것이 가능하다.

이 외에도 var , let , const 는 scope 에서 차이가 있다.

• var 는 function-scoped

• let , const 는 block-scoped

이는 hoisting , IIFE 와 관계가 있는데, 정리된 링크가 있어서 링크로 첨부 나중에 다시 보고 공부하자.

🔗 var, let, const 차이점은?

Null, undefined#

null : 없는 것.

undefined : 값이 아직 설정되지 않음

var variable;console.log(variable); // undefined

비교 연산자#

다른 PL과 달리 == , === 두 가지의 일치연산자가 있는데,

== : 타입을 검사하지 않음 (숫자 2와 문자 '2'가 동일)

=== : 타입을 검사함.

함수#

함수는 오늘 공부한 내용 중 가장 중요한 내용이다. 다른 언어에서 함수를 다뤄본 적이 있지만, 함수의 정의를 다시 살펴본다.

일반적으로, 함수는 함수 외부 (또는 재귀(recursion)의 경우엔 내부) 코드에 의해호출될 수 있는 "하위프로그램"입니다. 프로그램 그 자체처럼, 함수는 함수 몸통 (function body)이라고 하는 일련의 구문(statement)으로 구성됩니다. 값은 함수에전달될 수 있고 함수는 값을 반환합니다. - MDN web docs - 함수

JavaScript에서의 함수의 특징은 이렇다고 한다.

JavaScript에서, 함수는 다른 객체처럼 속성 및 메서드를 가질 수 있기에 일급 (first-class) 객체입니다. 다른 객체와 함수를 구별하는 것은 함수는 호출될 수 있다는 것입니다. 간단히 말해, 함수는 Function 객체입니다. - MDN web docs - 함수

함수는 반환 값을 지정하는 return 문이 있어야 하는데, return 문이 없다면 함수는 기본값을 반환한다. 기본 반환값은 undefined 이다.

함수 정의#

함수를 정의하는 여러 방법이 있는데.

• 함수 선언

• 함수 표현식(expression)

• Function 생성자

먼저 함수 선언은 이렇다.

function name([param[, param[, ... param]]]) {   statements}

함수를 선언한 이후에 이름으로 호출해야 하기 때문에 name 이 필수적이고, param 은 함수에 전달되는 인수의 이름으로 255개까지 가능하다. statements 는 함수의 몸통을 구성한다.

다음으로 함수 표현식이다.

함수 표현식은 함수 선언과 비슷하고 구문이 같은데, 차이점은 변수에 함수를 할당한다는 것이다.

var myFunction = function [name]([param[, param[, ... param]]]) {   statements}

이 때는 name 을 생략하고, 익명(anonymous) 함수로 사용할 수 있고, name 을 넣어서 named 로 사용할 수도 있다.

익명 함수로 사용할 때 변수명(위에선 myFunction )을 함수의 이름으로 생각하면 안되는데, 함수의 참조값이 myFunction 이라는 변수에 저장된 것이다.

어디까지나 '익명' 함수이고, 함수 변수인 myFunction 을 통해 호출 하는 것이다.

또한 named 함수의 경우에 함수 변수인 myFunction 으로 외부에서 호출할 수 있지만, 함수 이름 name 으로는 함수 내부에서만 호출할 수 있고 외부에서는 호출할 수없다.

Function 생성자는 잘 사용되지 않고 권장되지도 않는 방식인데, 굳이 알아보자면,

var myFunction = new Function(arg1, arg2, ...argN, functionBody);

var myFunction = new Function('a', 'b', 'console.log(a+b)');myFunction(1, 3); // 4

이렇게 사용한다고 한다.

함수 선언과 함수 표현식의 중요한 차이는 호이스팅(hoisting)이다. 한국어로는 '끌어올림'을 뜻한다.

인터프린터가 자바스크립트 코드를 해석함에 있어서 Global 영역의 선언된 코드블럭을 최상의 Scope로 끌어올리는 것을 호이스팅이라 한다. - Function Declarations(함수선언) vs Function Expressions(함수표현)에서

단순하게 생각해서 선언문은 항상 자바스크립트 엔진 구동시 최우선적으로 해석된다. 하지만 할당은 hoisting이 되지 않는다.

// 예제 1 : 함수선언에서의 호이스팅foo();function foo() {    console.log('hello');};> hello
// 예제 2 : 함수표현에서의 호이스팅bar();var bar = function() {    console.log('hello');};> TypeError: bar is not a function

예제 출처 : Function Declarations(함수선언) vs Function Expressions(함수표현)

예제1처럼 함수 선언의 경우는 선언문이 hoisting 되어 최상의 scope로 끌어올려졌기때문에 함수 이름인 foo(); 로 호출이 가능하다.

하지만 예제 2의 경우는 함수 표현으로 되어있고, 따라서 hoisting되는 부분은 선언부분인 var bar; 뿐이다. 따라서 bar(); 로 호출했을 때는 bar 는 단지 변수일뿐이라서 TypeError: bar is not a function 의 에러가 발생한다.

이외에 IIFE , Closure 등의 개념이 연관된 것까지 확인하였는데, 이는 다음에 알아보는 것으로 마친다.

Reference#

🔗 MDN web docs - 함수

🔗 Function Declarations(함수선언) vs Function Expressions(함수표현)

🔗 함수 표현식 vs 함수 선언식

🔗 Javascript IIFE 이해하기

🔗 var, let, const 차이점은?

🔗 [JS] 함수 생성 방법: 함수 표현식, 함수 선언, Hoisting

Java를 설치하려는데...#

컴퓨터를 초기화하여 Java를 다시 설치하려고 했다.

🔗 Java SE 다운로드 페이지

왼쪽은 현재 가장 최신 버전인 듯한 13.0.1이고, 오른쪽은 보편적으로 많이 쓰인다고하는 8버전이다. 그런데 왜 표기법이 하나는 13.0.1이고, 하나는 8u231인가?

자바 버전 표기법#

💡 Java SE 13. 0. 1 (LTS)

SE : Standard Edition 13. : 주 버전 0. : 개선 버전 1 : 업데이트 버전 (LTS) : 장기 지원 서비스(Long Term Support)를 받을 수 있는 버전

위는 자바 버전을 표기하는 방법이다.

예를 들어 Java SE 13.0.1 (LTS)은 주 버전이 13이고, 수정이 1번 되었다는 것을 의미한다.

그리고 Java 8버전과 같은 경우의 Java SE 8u231은 주 버전이 8이고, 수정이 231번 되었다는 것을 의미한다. (너무 많아서 이렇게 표기했나)

또한 그냥 Java 8, Java 13 버전이라고 편하게 부르기도 한다.

그리고 Java SE 13을 설치한다는 것은 JDK 13을 설치한다는 것과 동일한 의미이다.

8버전의 경우 JDK 1.8이라고 하기도 한다.

근데 JDK가 무슨 뜻인가?

JDK가 뭔데?#

JDK는 자바 개발 도구(Java Development Kit)의 약자이다.

JDK는 Java를 실행하기 위한 환경인 JRE와 함께 + 개발을 위해 필요한 도구(javac, java 등)들을 모두 포함하는 이른바 Java Platform이다.

Java로 프로그램을 만들기 위해서는 반드시 JDK로 설치해야 한다!

그럼 JRE는?

JRE는 뭔데?#

JRE는 자바 실행환경(Java Runtime Environment)의 약자이다.

JRE는 JVM 이 자바 프로그램을 동작시킬 때 필요한 라이브러리 파일들과 기타 파일들을 가지고 있다. JRE는 JVM의 실행환경을 구현했다고 할 수 있다.

요약하면 JVM + 런타임에 사용하는 다른 파일들(라이브러리)

그럼 JVM은?

JVM은 뭔데?#

JVM은 자바 가상머신(Java Virtual Machine)의 약자이다.

JVM은 자바 바이너리 파일(.class)을 실행할 수 있다. 또한 JVM은 플랫폼에 의존적이다. 즉 리눅스의 JVM과 윈도우즈의 JVM은 다르다. 단, 컴파일된 바이너리 코드는 어떤 JVM에서도 동작시킬 수 있다.

JVM은 다음과 같은 역할을 한다.

• 바이너리 코드를 읽고 (Loads code)

• 바이너리 코드를 검증하고 (Verifies code)

• 바이너리 코드를 실행하고 (Executes code)

• 실행환경(Runtime Environment)의 규격을 제공한다. (Provides runtime environment)

💡 어떠한 장비에서든지 실행될 수 있도록 기본 환경을 제공해 준다.

그림으로 정리#

그림으로 요약하자면 이러하다.

Reference#

🔗[혼자 공부하는 자바] Java 8/11 다운로드 & 개발 환경 설정하기(JDK)

🔗[점프 투 자바] JVM, JRE, JDK의 차이

🔗자바 소프트웨어(JRE, JDK, Server-JRE) 차이

🔗[JAVA 자바] JDK, JRE, JVM 차이

🔗JDK, JRE, 그리고 JVM의 차이