로니의 개발 이야기

1. React? React는 페이스북에서 만든 UI 라이브러리이다. 2. React의 component 사용을 통해 얻을 수 있는 이점 가독성을 높일 수 있다. 재사용성이 높아 진다. 유지보수가 편리해진다.

1. Object.create()을 사용해보기 만약 이 superObj 라는 객체를 부모로 하고, 상속받는 자식 객체를 만들고 싶으면 어떻게 하면 될까? 아래와 같은 형식을 이용하면 된다. 실제 코드에 적용해본 것이다. 이를 통해서 부모 객체의 상속을 받는 subObj 객체를 만들 수 있었다. subObj 객체가 잘 만들어졌는지 객체의 property를 입력해주고 출력을 진행해보았다. 그 결과 정상적으로 잘 출력이 되는 것을 확인할 수 있다.

1. 일반적인 객체 지향 프로그래밍의 상속 객체 지향 프로그래밍은 크게 두 가지 요소로 나누어져 있다. 첫번째는 class, 두 번째는 그 class를 통해 만들어진 object가 있다. 객체 지향 언어에서의 상속은 sub class가 super class의 자식이 되고, 그 sub class를 통해서 객체를 생성한다. 따라서 이 객체가 어떤 기능을 하는지는 class단에서 결정되기 때문에 다른 객체의 상속을 받는 것은 불가능하다. 2. 자바스크립트에서의 객체 상속 __proto__ 자바스크립트에서는 객체가 직접 다른 객체로부터 상속을 받을 수 있다. 따라서 sub object(기능을 추가하고 싶은 객체)가 super object로부터 직접 기능을 상속받을 수 있다. 다른 객체로부터 상속을 받고 싶을 때..

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에서 method 구현 1) prototype 이용 클래스를 선언하고, 외부에서 프로토 타입을 통해 함수를 구현한 예이다. 결과 값은 정상적으로 합계 30이 출력 되는 것을 볼 수 있다. 2) 내부 메소드로 구현하기 클래스 안에 메소드를 선언함으로써, 위의 코드와 같은 결과물을 얻을 수 있다. 그렇다면 'dongle' 이라는 객체에서 sum을 다르게 정의 즉 재정의하고 싶다면 어떻게 하면 될까? 형식 : 객체 이름. 내부 메소드 이름 = function() { return 리턴할 내용; } 이 형식대로 재정의를 하면 된다. console 창에서도 반영이 잘 되어있을까? 하는 의문이 들 수 있다. 이 콘솔 로그는 sum()을 출력하기 위해서 다음과 같은 순서를 갖는다. '..

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 두 번씩이나 언급할 필요가 있을까? 물론 두번정도는 괜찮을 수 있겠지만 평가 ..