2022 Dev-Matching 테스트 회고

회고

https://programmers.co.kr/competitions/2165/2022-web-fe-first

2022 Dev-Matching: 웹 프론트엔드 개발자(상반기)

2022.03.12 Dev-Matching 테스트를 보았다.우려했던 것보단 테스트의 난이도가 크게 어렵진 않았지만 한동안 라이브러리 사용에 익숙해 있던 나에게, 오랜만에 Vanilla JS만으로 어플리케이션 구현하는 과정이 조금 낯설었다.

 

테스트가 끝난 뒤, 어떠한 라이브러리에 맹목되지 않고 기반이 되는 JS를 끊임 없이 학습해야 겠다는 의지를 되새겼다. 이에 테스트 도중 중요하거나 헷갈렸던 부분을 간략하게 포스팅하고자 한다.

 

HTMLCollection은 Array가 아니다

ul 태그 내에 각 li 태그들에 클릭 이벤트를 바인딩해주기 위해, querySelectorAll() 메서드를 사용하여 모든 li 태그의 노드 정보들을 하나의 객체에 저장하였다. 

 

해당 객체를 순회해주기 위해 for() 문을 사용하였지만 의도한 결과가 나오지 않는 문제가 발생하였다.처음에는 로직 상의 문제인 줄 알고 코드를 계속 살펴보며 간단한 예시로 테스트까지 해 보았지만 마찬가지로 의도한 결과는 나오지 않았다. 이윽고 querySelectorAll() 메서드를 사용하여 가져 온 노드 객체는 HTMLCollection 임을 기억해 냈다.

DOM 컬렉션 객체인 HTMLCollection은 DOM API가 여러 개의 결과값을 반환하기 위한 DOM 컬렉션 객체이다. HTMLCollection은 유사 배열 객체이며 이터러블이다.

즉, HTMLCollection 그 자체만으로 배열의 프로퍼티 및 메서드를 사용할 수 없는 것이다.for() 문을 사용할 경우 범위를 지정해주기 위해 (array).length을 선언해 준다.

 

length는 Array.prototype에서 제공하는 프로퍼티 값이기 때문에, 단순 HTMLCollection 객체만으로 Array의 prototype을 상속 (프로토타입 체이닝)받아서 쓰지 못했던 것이다.

 

이에 해당 HTMLCollection 객체를 Array.from() 메서드를 사용하여 배열 객체 타입으로 변환하여 for()문으로 순회할 수 있었다.

 

fetch 함수의 응답 값은 바로 사용할 수 없다

평소 axios 라이브러리를 통해 HTTP Requests를 익히 사용하였다.하지만 해당 테스트에선 axios 라이브러리를 사용할 수 없었고 내장 Web API인 fetch 함수를 사용해야 했다.

 

처음에 별 생각 없이 axios를 쓸 때와 마찬가지로 async/await 비동기 함수내에서 API 호출을 하고 해당 반환 값을 이용하여 어떠한 연산을 수행하였지만 지속적인 오류가 발생하였다.

 

이에 결과 값을 콘솔로 확인해 보니, 하나의 기술에 얽매인 나의 실수임을 바로 확인할 수 있었다.

fetch 함수는 HTTP 응답을 나타내는 Response 객체를 래핑한 Promise 객체를 반환한다. fetch 함수가 반환한 프로미스가 래핑하고 있는 MIME 타입이 application/json인 HTTP 응답 몸체를 취득하려면 Response.prototype.json 메서드를 사용해야 한다. 

즉, fetch 함수가 반환한 결과값은 우리가 실제 코드 상에서 쓸 body값이 아닌 Response 객체이기 때문에 이를 바로 사용하여 문제가 발생했던 것이다.

 

이에 Response 객체에서 HTTP 응답 몸체(response.body)를 취득하여 역직렬화한 반환값을 얻기 위해Response.prototype.json 메서드를 사용하였고 해당 문제를 해결할 수 있었다.

 

돌고 돌아 protoype...

이전 프로젝트 도중 동료 개발자에게 이런 질문을 받은 적이 있다.

 

"병현님, MDN에 있는 프로토타입이 뭔가요?"

 

이에 대해 

 

"상속이요!"

 

라고 간단하게 얘기하고 넘어갔던 적이 있었다.

 

자바스크립트은 ES6 이후부터 클래스를 지원하지만 기본적으로 프로토타입을 기반으로 객체지향의 프로그래밍의 핵심인 상속을 구현하여 불필요한 중복(기존의 코드를 적극적으로 재사용)을 제거한다.

 

이번 테스트에서 헷갈렸던 부분은 모두 prototype 개념과 직간접적으로 관련이 있었다.

이에 다시 한번 개념서를 봤던 초반의 마음 가짐으로 돌아가 prototype 개념에 관해 간략하게 포스팅해보고자 한다.

 

예를 들어 Circle과 관련된 생성자 함수가 있다고 가정해 보자.

function Circle(radius) {
	this.radius = radius;
    this.getArea = function() {
      return Math.PI * this.radius ** 2;
    }
}

const circle1 = new Circle(1);
const circle2 = new Circle(2);

Circle 생성자 함수가 생성하는 모든 객체(인스턴스)는 radius 프로퍼티와 getArea 메서드를 갖는다.

 

하지만 위 코드에서의 circle1과 circle2 인스턴스가 가리키는 getArea 메서드는 참조(주소)값이 다른 함수 객체이기 때문에 모든 인스턴스가 중복 소유하고 있는 형태이다.

하지만 getArea 메서드는 모든 인스턴스가 동일한 내용의 메서드를 사용하므로 단 하나만 생성하여 모든 인스턴스가 공유해서 사용하는 것이 바람직하다. 동일한 생성자 함수에 의해 생성된 모든 인스턴스가 동일한 메서드를 중복 소유하는 것은 메모리를 불필요하게 낭비한다.

 

위와 같은 퍼포먼스에 악영향 미치는 사항을 제거하기 위해 다음과 같이 코드를 리팩토링할 수 있다.

function Circle(radius) {
	this.radius = radius;
}

Circle.prototype.getArea = function() {
    return Math.PI * this.radius ** 2;
}

const circle1 = new Circle(1);
const circle2 = new Circle(2);

Circle 생성자 함수가 생성한 모든 인스턴스는 자신의 프로토타입, 즉 상위(부모) 객체 역할을 하는 Circle.prototpe의 모든 프로퍼티와 메서드를 상속받는다.

getArea 메서드는 단 하나만 생성되어 프로토타입인 Circle.prototype의 메서드로 할당되어 있어, 자신의 상태를 나타내는 radius 프로퍼티만 개별적으로 소유하고 내용이 동일한 메서드는 상속을 통해 공유하여 사용하는 것이다.

 

배열 객체 내에 프로퍼티 length를 HTMLCollection 객체에서 접근하려고 할때, 문제가 발생했던 원인이 바로 여기에 있는 것이다.

 

length 프로퍼티는 Array 생성자 함수에 존재하는 것이 아니라 자체 [[Prototype]] 내부 슬롯에 바인딩되어 있는 Array.prototype에 적재되어 있다.

 

그리고 배열 객체에서 length 프로퍼티에 접근할 경우, (해당 객체에 접근하려는 프로퍼티가 없다면) [[Prototype]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 프로토타입의 프로퍼티를 순차적으로 검색하는 프로토타입 체인 과정을 거친다.

 

HTMLCollection 유사 배열 객체는 Array 생성자 함수에 의해 생긴 인스턴스가 아니기 때문에 [[Prototype]] 내부 슬롯의 참조를 따라 가더라도 Array.protoype 내 length 프로퍼티를 사용할 수 없는 것이다.

 

마치며

이번 포스팅에선 결국 프로토타입에 대해서 많은 설명을 하게 되었다.

 

프로토타입이 코드를 작성할 때 직접적으로 사용되는 일은 아직까지 없었다. 하지만 결국 우리들이 익히 사용하는 프로퍼티와 메서드들이 프로토타입에 기반하고 있으며 해당 개념에 대해서 정확하게 인지하지 못하고 있다면 이번 테스트에서와 같이 기본적인 실수를 하는 일이 많을 것이다.

 

이러한 기초적인 자바스크립트 동작 방식을 항상 숙지하고 이를 통해 사소한 실수들을 줄여나가는 것이 신입 개발자에게 있어서 중요한 소양이 아닐지 다시 한번 깨달을 수 있었던 좋은 경험이었다.