롤 인성 테스트

HyunHo Lee·2021년 12월 2일

토이 프로젝트

목록 보기

1/14

HTML, CSS, JavaScript의 기초를 탄탄하게 다지고, 배포와 도메인 연결을 간단하게 해보기 위해 프로젝트를 설계하게 되었다.

나는 리그오브레전드(LOL) 라는 게임을 좋아한다. 이 게임은 5명의 팀과 함께 협동심을 발휘하여 상대의 본진을 먼저 부시면 승리하는 게임이다. 롤에는 실력을 나타내는 티어 가 존재한다. (Iron - Silver - Gold...)

그렇다면 게임 실력말고, '팀 안에서 나의 인성은 어떨까?' 라는 취지로 여태 배운 Front - End 기술을 접목하여 웹 사이트를 만들게 되었다.

설계하며 어려웠던 부분

모든 코드를 보며 Velog에서 코드리뷰를 하지는 않겠다. 대신에 설계하며 어려웠던 부분에 대해 다루어보려고 한다.

테스트이기 때문에 우리가 풀어야 할 문제가 있을 것이다. 구성은 위와같이 제목, 문제설명, 유저가 선택할 응답이 있을 것이다.

<article class="question">
  <h3>제목</h3>
  <p>문제 설명</p>
  
  <div role="group" aria-label="Basic radio toggle button group">
    <input type="radio" name="q1-btnradio" id="q1-btnradio1" autocomplete="off">
    <label for="q1-btnradio1">Yes</label>

    <input type="radio" name="q1-btnradio" id="q1-btnradio2" autocomplete="off">
    <label  for="q1-btnradio2">No</label>

    <input type="radio" name="q1-btnradio" id="q1-btnradio3" autocomplete="off">
    <label  for="q1-btnradio3">Maybe</label>
  </div>
</article>

위의 부분의 HTML이다. input과 label에 class도 넣어준다면 코드는 더 길어지게 된다.

만약에 문제가 20문제라고 생각해보자. article 한 뭉탱이를 20개 추가해야한다.

input type의 name과 id, label의 for에 사용되고 있는 q1-btnradio를 보자. 다음 문제에서는 q2-btnradio로 바꾸어줘야하는데, 한 article에서만 9번 쓰였다. 20개 추가하면 몇개를 변경해주어야 할까..

그래서 JavaScript가 절실했다.

<script>
  var harr = ['하이'];
  var parr = ['나는이현호'];

  var art = document.createElement("ARTICLE");
  art.setAttribute("class", "question")
  document.body.appendChild(art);

  var head3 = document.createElement("H3");
  var head3_txt = document.createTextNode(`${harr[0]}`);
  head3.appendChild(head3_text);
  document.getElementsByClassName("question").appendChild(head3);

  var para = document.createElement("P");
  var para_txt = document.createTextNode(`${parr[0]}`);
  para.appendChild(para_txt)
  document.getElementsByClassName("question").appendChild(para);

</script>

문서들을 읽고, 구글링을 하며 방법을 찾았고 계속 시도했다. 결론부터 말하자면 위의 코드는 잘못되었다.

나의 생각은 이랬다. article요소를 js에서 생성하고, 여기에 h3와 p태그를 넣는 것이다. 하지만 동작하지 않았다.

이유를 찾아보니 body에 question class를 가진 article이 생성되지 않았는데 여기에 h3와 p태그를 넣으려고하니 동작하지 않은 것이다. 즉, article이 생성되지도 않았는데 넣으려고 한 것이다.
'${harr}'(백틱) 이 아닌 harr[0]을 사용해야한다.
문제점은 아니지만 element안에 Text를 넣을 때 createTextNode는 잘 사용하지 않는다고 한다.

        var harr = ["제목"];
        var parr = ["문제 설명"];

        const body = document.querySelector("body");
        const art = document.createElement("article");
        art.className = "question";

        const head3 = document.createElement("h3");
        head3.innerText = harr[0];
        art.appendChild(head3);

        const para = document.createElement("p");
        const para_txt = (para.innerText = parr[0]);
        art.appendChild(para);
        
        body.appendChild(art);

이후 많은 시도와 질문 끝에 해결방안을 찾게 되었다. 이 방법은 위에서 내가 원했던 예상 시나리오와 동작이 유사하다. 코드를 본다면 이해가 갈 것이다.

        var harr = ["제목"];
        var parr = ["문제 설명"];

        const body = document.querySelector("body");
        const art = document.createElement("article");
        art.className = "question";
        art.innerHTML = `
        <h3 class="${i}">${harr[i]}</h3>
        <p>${parr[i]}</p>
        `;
        body.appendChild(art);

다른 방법도 있다.
먼저 body태그를 찾아 body라는 변수에 넣는다.
그리고 article 태그를 생성한다.
innerHTML를 사용하여 article 안에 element들을 넣어주는 것이다.
문제 갯수에 따라 i값이 증가하여 모두 보여줄 것이다.
나는 이 방법을 사용했다.

        var harr = ["제목"];
        var parr = ["문제 설명"];

이제 이부분이 문제다. 배열이 매우 길어지면 뭔가 보기가 나쁠것 같다.

            const qjson = {
                            "harr" : ["제목"],
                            "parr" : ["문제 설명"],
                        }
                        
            var harr = qjson.harr;
            var parr = qjson.parr1;