코드스테이츠 블록체인 과정 4일차 후기 💻

코드스테이츠 블록체인 과정 4 일차 후기 🙄

 

📃 배운내용 :

1. DOM 에 대한 핸들링

 

✨ 몰랐던 내용 : 

1. appendChild

DOMObject.appendChild(DOMObject2)를 했을 때 만약 DOMObject2가 다른 DOMObject의 자식으로 존재하는 상태라면, DOMObject2를 복사하는 것이 아니라 현재의 부모에게서 빠져나와 새로운 부모의 자식으로 들어간다.

 

2. 코딩

코드를 짤 때 다음과 같은 이슈가 있었다.

A = DOMObject1;
B = DOMObject2;

function isEqual (P1,P2) {
	return P1.value === P2.value;
}

DOMObject2.onkeyup = function () {
	isEqual(A,B)
}

이런식으로 작업을 했었는데 당연하게도 결과는 잘 나왔다. 하지만 테스트 과정에서 문제가 발생했다.

이런 식으로 진행 했을 경우

function isEqual 에서 받은 파라미터값인 P1, P2 가 HTMLObject 로 받아지는데, 이런 경우 일치 불일치에 대한 판단에서 테스트 오류가 나는듯 싶었다. 테스트 코드 작성을 할 때 Mocking을 제대로 하거나, 아니면 이 과정을 수료하는 동안에는 test 코드를 고려해서 코드를 짜야할거같다.

지금 내 코드의 플로우를 간단하게 보자면

키를 눌렀다 뗀다 ( onkeyup ) -> 함수호출 ( isEqual ) -> return boolean -> onkeyup return

인데 테스트 코드의 경우에도 플로우는 같지만 파라미터에서 isEqual에 단순 변수를 주었다.

단순한 변수에서 value 값을 뽑아 낼 수는 없으니 undefined가 return 되었고

항상 undefined가 발생하니 항상 true를 반환한다고 테스트코드는 인식한것이다.

따라서 본 코드에서 isEqual을 호출할 때 HTMLObject가 아닌 value 값을 넘겨주거나

테스트코드에서 파라미터에 value 값이 아닌 HTMLObject를 넣어줘야하는데, 현실적으로 본 코드를 수정하는게 쉽고 간편하다 생각한다.

재사용성을 따지자면 당연하게 함수 내부에서는 value를 넣으면 안된다 라는 생각이 들었다.

A = DOMObject1;
B = DOMObject2;

function isEqual (P1,P2) {
	return P1 === P2;
}

DOMObject2.onkeyup = function () {
	isEqual(A.value,B.value)
}

따라서 다음과 같이 수행하여 테스트코드와 실제 코드에 대해 성공했다.

 

👨‍🎓👩‍🎓 페어와의 활동 내용 :

1. Validation 에 대해 진행하는데 페어분은 큰 막힘은 없이 진행했다. 하지만 나는 위와 같은 이슈가 발생해 약 30분만에 오류를 찾은것 같다. 단순하지만 생각보다 심도 있는 문제라 굉장히 큰 도움이 된 오류였다.

2. 페어분과 블록체인에 대한 서로의 관점에 대해서 얘기를 하기도 했다, 둘다 블록체인에 관해서는 현재 나는 대중이 무관심하다 생각하지만 페어분은 가상화폐와 연관지어 과한 관심을 받고 있다고 생각한다 하셨다.

 

💌 한줄평 :

1. 간단한 코드 실수 인거같지만 테스트코드 세계에선 심오한 실수?!?!