로니의 개발 이야기

브라우저의 핵심 기능은? 사용자가 참조하고자 하는 웹페이지를 서버에 요청(request)하고 서버의 응답(response)을 받아 브라우저에 표시하는 것이다. 자원의 주소는 URI에 의해 정해진다. 그렇다면 브라우저는 어떻게 동작할까? 브라우저는 서버로부터 HTML, CSS, Javascript, 이미지 파일 등을 응답받는다. 렌더링 엔진은 HTML 문서를 파싱 해서 각각의 태그를 DOM 노드로 변환하여 DOM 트리를 생성하고 CSS 문서를 파싱 해서 CSSOM 트리를 생성한다. 그리고 이 둘을 결합하여 렌더 트리를 만들게 된다. 그 다음은 레이아웃 단계이다. 이 단계에서는 각 노드의 크기와 위치, 레이어 간 순서와 같은 정보를 계산하여 어디에 배치할지, 어떤 크기를 가질지가 정해진다. 페인팅 단계에서는..

스코프(scope)란? 식별자의 유효 범위를 뜻하며, 선언된 위치에 따라 유효 범위가 달라진다. 전역에 선언된 변수는 전역 스코프를, 지역에 선언된 변수는 지역 스코프를 갖는다. 전역 변수는 어디에서든지 참조가 가능한 값이다. 반면, 지역 변수는 함수 몸체 내부를 말한다. 따라서 지역 변수는 자신의 지역 스코프와 그 하위 지역 스코프에서 유효하다. 블록 레벨 스코프 자바스크립트에서 모든 코드 블록(ex. 함수, if, for, while, try/catch 문 등)을 지역 스코프로 인정하는데, 이를 블록 레벨 스코프라고 한다. 코드 블록 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 함수 레벨 스코프 var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지..

1. super를 왜 사용하는가? 부모 클래스의 기능을 수행하면서, 부모가 하지 못하는 기능을 자식 클래스만 하도록 하기 위해 super를 사용한다. 2. super의 사용 예시 예를 들어, 아래와 같은 부모, 자식 클래스가 있다고 가정해보자. 여기에 third라는 항목을 추가하고 싶다면? 어떻게 하면 될까? 부모 클래스에 있는 것들을 가져오고, 새로운 항목을 추가하여 코드를 짜 봤다. 이대로 실행시키면 될까? 다음과 같이 ReferenceError가 발생된다. 에러에 따르면, 'this'에 접근하기 전 또는 자식 클래스에서 return 하기 전에 자식 클래스에서 super 생성자를 호출해야 한다고 말한다. 따라서, 자식 클래스에서 super 생성자를 사용해야만 정상적으로 작동한다는 뜻이다. 첫번째로 s..

1. Javascript 에서 상속을 사용하는 이유? 어떤 클래스의 원래의 기능을 최소한으로 유지하면서, 새로운 기능을 추가하고 싶은데 클래스 안에 코드를 추가하기에는 너무 부담스러울 때 상속을 사용하게 된다. 물론 코드를 복사해서 새로운 클래스를 만들 수 있지만, 그 경우에는 중복이 발생하기 때문에 상속이 필요한 것이다. 2. 상속의 사용 예를 들어, 이 Person이라는 클래스에 평균을 내는 method를 추가하고 싶다고 해보자. 이를 복사해서 새로운 클래스를 하나 더 만들어서 avg method를 정의한다. 하지만, 중복된 코드를 제거하고 싶다는 생각이 들기 시작한다. 그래서 사용하는 것이 상속(inheritance)이다. PersonPlus라는 클래스는 Person이라는 클래스를 확장했다는 의미이..

1. Javascript class의 constructor function 클래스 안에 method를 쓸 때는 function 함수명(){} 이 아니라 함수명(){}의 형식으로 적는다. 객체의 초기 상태를 지정하기 위해, 객체가 만들어지기 전에 실행하도록 약속되어 있는 함수가 있는데, 이 함수의 이름은 constructor이다. 좌측의 코드는 Person이라는 함수를 만들고, 그 함수에 'new'를 부여했을 때 생성자 함수로써 역할을 하여 객체를 생성해주는 것이고 우측의 코드는 Person 이라는 클래스를 만들고, 그 클래스 안에 constructor 함수를 사용함으로서 객체를 초기화시키고 객체를 생성해 준다. 좌측 우측의 결과 값은 동일하게 나온다.

1. prototype이 왜 필요할까? 이 코드에서는 sum이라는 function이 Person 생성자 함수에 의해 객체를 만들 때마다 반복적으로 만들어진다. 이는 컴퓨터의 메모리가 낭비된다. 만약에 이렇게 객체를 생성하는 작업을 수억 번 반복한다면, 시간과 메모리가 소모되기 마련이다. 이렇게 생성자 안에서 method를 만드는 것은 생산성이 떨어질 수 밖에 없다. 2. prototype 을 이용해 재사용성 높이기 프로토 타입은 생성자를 통해서 만든 객체들 모두가 공통적으로 사용하는 속성을 만드는 방법이다. 한번만한 번만 실행이 되기 때문에 성능을 절약할 수 있고, 한 번만 정의되기 때문에 메모리도 절약할 수 있다. 그렇다면, 이 sum 이라는 함수의 프로토 타입이 지정되어있는데 내가 원하는 어떤 객체에..

1. constructor의 필요성 예를 들어, 아래와 같이 'dongle' 이라는 이름을 가진 객체를 만들었고, 이 객체는 어떤 평가 점수들이 담겨 있고 그 합을 구하는 객체라고 하자. 이와 똑같은 형식으로 'dongri' 라는 이름을 가진 객체를 만들었다. 이 두 객체에 third 라는 세 번째 score를 넣고 싶으면 아래와 같이 두 객체에 다 적용해주면 될 것이다. 객체의 기본적인 동작방법이 바뀌면, 같은 취지의 객체는 다 바꾸어주어야 하기 때문에 이번엔 두번만 하면 된다. 하지만 만약에 객체가 수억 개가 있다면? 아마도 인간이 하기에는 너무나도 벅찬 일 일 것이다. 때문에 'constructor' 가 필요한 것이다. 2. contructor : 객체를 찍어내는 공장 위의 코드를 바탕으로 Pers..

1. Javascript 에서 'this 다음은 dongle이라는 객체를 만든 것이다. 'dongle' 이라는 이름을 가진 사람이 어떤 평가를 받았는데 첫 번째 첨수를 10점, 두 번째 점수를 20점 받았고, 이 두 점수의 합계를 구하는 method를 정의한 것이다. 이 코드에서 두 점수의 합계를 출력하기 위해서 아래와 같은 코드를 통해 실행할 수 있다. dongle 이라는 객체에 있는 sum이라는 method를 불러오고, 그 객체 안의 인자를 불러와서 대입하는 식이다. 하지만 여기서, dongle 이라는 객체 안에 first와 second 값이 있다는 것을 알고 있는데, 굳이 dongle.first, dongle.second 두 번씩이나 언급할 필요가 있을까? 물론 두번정도는 괜찮을 수 있겠지만 평가 ..

1. 배열의 반복문 배열의 반복문에서 while의 경우, while(조건){반복 실행할 코드} 형식으로 사용된다. 출력 값을 grouping 해서 좀 더 보기 좋게 출력 값을 갖고 싶을 때, group이라는 것을 사용한다. 아래의 예시와 같이 group의 이름을 지어주고 시작점을 설정하고, 같은 이름의 끝점을 설정해주면 된다. 아래의 출력 값은 grouping 전후의 차이를 보여주고 있다. 여러 개를 분류해서 출력 값을 갖고 싶을 때, 이 기능을 활용하게 되면 보기 좋게 분류할 수 있다. 2. 객체의 반복문 객체에서 사용되는 for 문은 for in 문이라고 부르는데, 이 객체가 갖고 있는 원소의 값만큼 {}(중괄호) 안의 코드가 실행되는 문법을 가진다. for ( 변수 in 객체 ) {}의 형식으로 사..

1. 배열과 객체의 입출력 출력 값 앞의 text는 어떤 값이 출력되는지를 터미널 상에서 확인하기 위해 사용하였다. 배열에서는 값에 접근할 때 [ ](대괄호) 를 사용한다. 객체에서는 값에 접근 할때 . (점)을 사용한다. 물론 객체에서도 마치 배열처럼 [ ](대괄호) 를 통해서도 값에 접근할 수 있다. 2. 객체의 수정과 삭제 1) 만약 데이터를 수정하고 싶다면? 아래와 같이 .을 통해 호출하고, 수정할 값을 넣어주면 위의 출력 값에서 알 수 있듯이, donghyun 에서 kdh로 바뀐 것을 볼 수 있다. 2) 만약 데이터를 삭제를 하고 싶다면? delete를 사용해주면 된다. 삭제 되었기 때문에, 정의 되지 않았다고 출력되는 것을 볼 수 있다.