[Level 1] 미션 1: 자동차 경주 게임 1단계

 

package.json

---

package.json을 깔끔하게. 항상 npm init 후 아무 생각 없이 엔터를 누르며 작성했던 package.json이었다. 코드 리뷰를 받다보니 package.json이 첫인상?을 결정지을 것 같다는 느낌이 든다. 깔끔하고 보기 좋은 것이 코드 리뷰를 할때 보기 좋고 읽기 좋을 것이다. 공식 문서를 보며 package.json에 대해 좀 더 자세하게 알아보았다.

만약 사용하지 않는 패키지가 다운받아졌다면 아래 명령어를 사용하여 삭제해주도록 하자.

npm uninstall [package-name]

https://docs.npmjs.com/cli/v8/configuring-npm/package-json

 

innerHTML VS insertAdjacentHTML

---

요소(element)의 내용을 변경하는 대신 HTML을 문서(document)에 삽입하려면, insertAdjacentHTML() 메서드를 사용하십시오.

MDN innerHTML문서에 나와있는 문구이다. 지금까지 굳이 길게 insertAdjacentHTML을 사용해야하나 하며 innerHTML을 사용해오던 나를 반성하게 만드는 문구였다. 그렇다면 왜 insertAdjacentHTML을 사용하라고 하는 것일까?

innserHTML을 사용하게 되면 기존 노드를 삭제 후 재구성하는 과정을 거치게 된다. insertAdjacentHTML을 사용하면 지정한 곳에 노드가 추가되는 형식으로 진행이 된다. 즉, innerHTML을 사용하면 돔 트리를 그때그때 다 갈아엎게 되고, InsertAdjacentHTML을 사용하면 HTML, XML 같은 특정 텍스트를 파싱하고 특정 위치에 원하는 노드들을 추가하게 된다(element 안에 존재하는 element를 건드리지 않는다). innerHTML보다 작업이 덜 필요해서 더 빠르다.

또 innerHTML을 사용하면 XSS 공격에 대해 취약하다고 한다. XSS는 웹 페이지에 악성 스크립트를 삽입하는 방식으로 이루어지는 공격이다. 예를 들어 사용자 입력 폼에 스크립트 코드를 입력한다면, 스크립트 내용이 DOM에 추가된다. 아래 MDN의 예시에서도 확인할 수 있다. 물론 이를 보완하기 위해 HTML5에서는 innerHTML 속성을 통해 삽입된 문자열에 <script>태그가 있을 경우 실행되지 않도록 처리했지만, 다른 우회적인 경로는 여전히 열려 있다. 이런 내재적인 취약점 때문에 innerHTML을 사용한 프로젝트는 보안성 검사에서 통과되지 않을 가능성이 높다.

const name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// ...

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

MDN말대로 이제 element를 변경할 일이 아니라면 insertAdjacentHTML을 사용하자.

XSS공격은 학교 수업시간에 분명 배웠던 것 같은데 기억이 잘 안난다. 호호호

 

element내의 모든 child 삭제

물론 innerHTML을 사용하면 노드 안의 모든 child들을 삭제할 수 있다. 하지만 이는 추천되지 않는 방식이므로 함수를 따로 만들어서 삭제해주자

function removeAllChildNodes(parent) {
    while (parent.firstChild) {
        parent.removeChild(parent.firstChild);
    }
}

 

 

replaceChild

특정 부모 노드의 한 자식 노드를  다른 노드로 교체할때 사용할 수 있다. 교체된 노드를 리턴한다. 메모리상 참조는 여전히 가지게 된다.

replacedNode = parentNode.replaceChild(newChild, oldChild);

replacedNode는 교체된 노드이다. oldChild와 동일한 노드이다.

https://tecoble.techcourse.co.kr/post/2021-04-26-cross-site-scripting/

https://developer.mozilla.org/ko/docs/Web/API/Element/innerHTML

https://developer.mozilla.org/ko/docs/Web/API/Element/insertAdjacentHTML

https://developer.mozilla.org/ko/docs/Web/API/Node/replaceChild

 

git commiter를 확인하자

---

처음으로 페어 프로그래밍을 진행하다 보니 git 안다고 생각했는데 하나도 모른다는 것을 알 수 있었다. 열심히 커밋하고 푸시까지 했는데 커밋터가 내가 아니라서 깜짝 놀랐다. 뒤늦게 push후 발견해서 어찌저찌 수정하기는 했지만(수정할때 너무 무서웠음) 앞으로는 git status로 확인하고 아래 명령어로 author를 수정하도록 하자.

git config --global user.name "prefer2"
git config --global user.email sunho6200@gmail.com

 

HTML tag(semantic tag)

---

Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation.

<div>만 쓰지말고 제공해주는 태그 잘 사용해먹자. 나도 알아보기 좋고 남들도 알아보기 좋다.

<section>

HTML <section> 요소는 HTML 문서의 독립적인 구획을 나타내며, 더 적합한 의미를 가진 요소가 없을 때 사용한다. 보통 <section>은 제목을 포함하지만, 항상 그런 것은 아니다.

<article>

HTML <article> 요소는 문서, 페이지, 애플리케이션, 또는 사이트 안에서 독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타낸다. 사용 예제로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 있다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/section

https://developer.mozilla.org/ko/docs/Web/HTML/Element/article

https://www.w3schools.com/html/html5_semantic_elements.asp

 

forEach VS map

---

페어와 코딩하면서도 가장 애매한 부분이었던 것 같다. 과연 언제 forEach를 쓰고 언제 map을 쓰는게 적절할까?

우선 정의를 찾아보니 forEach는 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행한다(오름차순이 뭔소린가하고 영어로 보니 그냥 인덱스 오름차순이다). map의 경우 callback함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만든다. return이 있는가 없는가만 다른 것인지 MDN을 찾아보니 아래와 같은 말도 있다.

forEach()는 각 배열 요소에 대해 한 번씩 callback 함수를 실행합니다. map()과 reduce() 와는 달리 undefined를 반환하기 때문에 메서드 체인의 중간에 사용할 수 없습니다. 대표적인 사용처는 메서드 체인 끝에서 부작용(side effect)을 실행하는 겁니다.

https://stackoverflow.com/questions/34426458/javascript-difference-between-foreach-and-map

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

 

테스트코드 alert → stub으로 바꾸기

---

테스트코드에서는 내가 alert로 에러를 쓰는지 알 수가 없다! stub을 사용해서 에러처리를 해주자

이와 관련된 용어로 테스트 더블(Test Double)이라는 단어가 있는데 이는 테스트를 진행하기 어려운 경우 이를 대신해 테스트를 진행할 수 있도록 만들어주는 객체를 말한다.

https://docs.cypress.io/api/commands/stub#Syntax

 

더 공부해 보아야 할 것

---

• git rebase, merge
• css flex