몽탁이의 개발일기

객체는 기본적으로 할당될 때 어느 정도의 크기를 가져야 할지 모르기 때문에 주소를 먼저 할당 후 해당 주소에 정의한 데이터의 타입의 크기에 맞춰서 메모리를 할당하게 됩니다. 그래서 위 그림처럼 객체를 그대로 넣어주면 이 와같이 주소를 복사하여 해당 객체에 넣어주게 됩니다. 결론적으로 주소는 같은 곳을 가리키게 되고 독립적으로 복사가 되지 않아 첫 번째 그림처럼 user2의 name을 바꿨지만 user1의 name도 바뀌게 됩니다. 이런 것을 call by reference로 인한 값 변경이라고 합니다. 그렇다면 서로에게 영향을 주지 않게 복사하는 방법은 무엇이 있을까요? 자바스크립트의 기본 객체인 Object의 API를 이용하면 데이터 자체를 clone 하여 서로 영향을 주지 않는 객체를 만들 수 있습니..

객체 생성 방법 (2가지) 1. const obj1 = {}; 2. const obj2 = new Object(); 1번의 방식을 객체 리터럴을 이용하는 방식이라고 하고 (object literal Syntax) 2번의 방식을 객체 생성자를 이용하는 방식이라고 합니다. (object construtor Syntax) 두 방식에는 큰 차이는 없지만 간단한 객체를 생성할때는 {} 리터럴 방식을 이용하게 되고 class나 function 이용하여 객체를 생성할 때는 생성자를 이용하여 만들게 됩니다. 또 생성자를 이용하는 방식은 재사용하기가 쉽다는 장점이 있습니다. 즉, 두 방식은 상황에 맞춰서 사용하는것이 좋습니다. 객체 접근 방법 (2가지) 1. 객체뒤에 .key값을 이용하여 값을 호출 2. 객체뒤에 ['k..

자바스크립트에서 class도 자바에서 처럼 상속이 가능합니다. 위 그림은 extends를 이용하여 Shape라는 클래스를 Rectangle, Triangle 두 개의 클래스에 상속을 내린 것을 보여줍니다. (상속 내린 Shape는 부모 클래스 상속받은 Rectangle, Triangle은 자식 클래스라고 불립니다) 우선, Rectangle 클래스를 이용하여 객체를 보면 Rectangle 클래스 안에 어떠한것도 정의되어있지 않지만 Shape 클래스에 정의된 함수와 변수들을 사용할수 있게 됩니다. 그래서 rectangle 이라는 객체가 printShape라는 함수에 접근하여 width, height, color를 출력할 수 있게 됩니다. 다음, Trangle 클래스 또한 Shape 클래스를 상속받았지만 pr..

객체지향 언어에서 Class란 일종의 설계도와 같다고 볼 수 있습니다. 그리고 Class라는 설계도를 통해 생성되는 물건들이 Object가 되는것입니다. 또 이 Object를 다른 말로 instance of class(한국말로 클래스의 예)라고도 합니다. 대부분의 객체지향 언어들은 Class의 개념을 기반으로 만들어진 언어들이 많습니다. 자바스크립트는 개발 당시 시간을 10일밖에 주어지지 않았기 때문에 급하게 만들 수밖에 없었습니다. 그래서 prototype을 이용한 객체지향 언어가 되어버렸습니다. 하지만 점점 자바스크립트의 사용자가 늘고 웹에서 중요한 언어로 자리를 차지하게 되면서 ES6에서 자바스크립에도 Class를 도입하게 됩니다. 우선, Class가 없던 시절에 객체지향적으로 어떻게 구현했는지 알..

자바스크립트에서 변수의 타입은 크게 3가지로 나눌 수 있습니다. 1. primitive type 2. Object 3. function 먼저 primitive type에 대해 알아보겠습니다. primitive란 더이상 작은 단위로 나눠질 수 없는 타입 원자 값을 의미합니다. 이 primitive type에는 number, string, boolean, null, undefined, symbol이 있습니다. number - 숫자 ( 0 , 1 , 2 , 2.1 , -1 , 8.888 .... ) string - 문자열 ('문자열' , '안녕하세요' , '' ... ) boolean - true , false null - 해당 변수에 어떠한 값도 들어있지 않음을 나타냄 undefined - 해당 변수는 아직..

use strict는 사용자가 자바스크립트를 이용하는데 좀 더 안전하게 사용하도록 도와줍니다. (ES 5부터 도입) 예를 들어 위와 같이 말도 안 되는 일이 발생합니다. 변수의 타입을 지정하지도 않았는데 스스로 타입을 지정하고 변수에 값을 할당하여 출력이 됩니다. 이게 가능한 이유는 자바스크립트는 런타임 시에 메모리를 동적으로 할당시키기 때문에 입니다. 런타임 시란 프로그램이 실행되고 있는 동안의 동작입니다. 하지만 use strict를 사용하게 되면 a라는 변수는 정의되어있지 않다는 에러를 띄우게 됩니다. 프로그래머는 사람이기 때문에 이런 치명적인 실수를 할 수 있기 때문에 사전에 미리 방지하고 또 use strict의 다른 기능은 자바스크립트 엔진이 자바스크립트를 효율적으로 빠르게 분석해주게 되어 좀..

script 태그는 javascrtip를 html에 작성하지 않고 따로 작성한 JS파일을 다운로드하고 실행시켜주는 태그입니다. 기본적인 script 태그의 동작은 브라우저가 HTML을 파싱을 하기되면 위에서부터 한 줄씩 파싱을 하게 됩니다. 그러다 script 태그를 만나게되면 HTML 파싱을 중단하고 JS파일을 다운로드하고 실행시켜준 뒤 다시 HTML을 파싱 하게 됩니다. 아래 그림은 script태그를 상단부분 사이에 정의했을 때 실행되는 순서입니다. 여기에는 문제점이 있습니다. 만약 JS파일의 크기가 크다면 HTML을 파싱을 하다가 중간에 JS파일 받는 틈이 생기기 때문에 사용자가 보는 화면이 완벽하게 출력이 되지않는 상황이 발생됩니다. ex) .... 위와 같은 문제점을 해결하기 위해 몇가지 방법이..

우선 인터넷이란 모두 함께 통신하는 대규모 컴퓨터 네크워크입니다. 컴퓨터 네트워크는 두대 이상의 컴퓨터를 연결하고 서로 통신하는것을 이야기합니다. 글로벌시대에 사는 우리 컴퓨터는 어떤식으로 연결이 되어있을까요? 물리적으로 선을 연결할수도 있고 와이파이나 블루투스와 같이 주파수로 무선연결하는 방식이 있습니다. 물리적인 연결은 컴퓨터가 만약 10대가 각각 서로 연결 되려면 45개의 플러그가 필요합니다. 하지만 글로벌적인 관점에서 보면 컴퓨터는 몇십억대가 훌쩍 넘어버리기 때문에 엄청난수의 플러그의수가 필요합니다. 이점을 보완하기 위해 라우터를 사용하게됩니다. 라우터는 컴퓨터에서 보낸 메세지가 올바른 대상 컴퓨터에 도착했는지 확인해주는 장치입니다. 이 장치를 활용하여 여러대의 컴퓨터를 각각 따로 연결하는것이 아..