JavaScript 만으로 네모 굴리기

코딩 인터뷰를 본적이 있다. 5줄 정도의 짧은 HTML 코드와 함께 아래 문제가 주어졌다. 결국 풀지 못했는데 지나고 나니 궁금해져서 정리한다.

JavaScript 만을 사용하여 사각형을 만들고 오른쪽으로 움직이시오

사각형을 만들고 style을 사용하여 움직일 계획이었다. 그런데 잠깐? 동적으로 HTML 코드를 삽입하는 방법이 정확히 기억이 안 나는 것이다. 이런, 낭패였다.

“jQuery를 사용해도 되나요?”

질문이 부끄러웠지만 그래도 일단 jQuery를 다운 받고 코드를 채우기 시작했다. 네모를 만들었다.

<style>
  .square {
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }
</style>

$("body").append("<div class="'square'"></div>");

Style을 jQuery로 적용한다.

$("body").append("<div class="'square'"></div>");
var style = {
  "width": "100px",
  "height": "100px",
  "border": "1px solid red"
};
$(".square").css(style);

움직이기

코딩 인터뷰 때는 이쯤에서 코딩이 잠시 중단되었다. 객체를 사용하여 문제를 해결하라는 다른 요구 사항이 들어 왔기 때문이다. 그 때 못한 코딩을 오늘 마무리 하겠다. 우선 네모를 오른쪽으로 움직이기 위해 간단하게 마진을 사용한다.

$("body").append("<div class="'square'"></div>");
var style = {
  "width": "100px",
  "height": "100px",
  "border": "1px solid red"
};
$(".square").css(style);

2초 후에 네모는 400px 오른쪽으로 이동한다.

setTimeout(function() {
  var moveStyle = {
    "margin-left": "400px"
  };
  $(".square").css(moveStyle);
}, 2000);

Transition을 적용하여 4초 동안 움직이게 하면 이동이 부드러워진다.

setTimeout(function() {
  var moveStyle = {
    "margin-left": "400px",
    "transition": "4s"
  };
  $(".square").css(moveStyle);
}, 2000);

굴리기

Transform을 적용하여 네모를 360도 회전할 텐데 오른쪽 이동과 동시에 적용됨으로 굴러가는 것처럼 보인다.

setTimeout(function() {
  var moveStyle = {
    "margin-left": "400px",
    "transition": "4s",
    "transform": "rotate(360deg)"
  };
  $(".square").css(moveStyle);
}, 2000);

제대로 작업을 했다면 코딩 인터뷰 때 제출했을 코드다.

jsfiddle.net/Afrontend/hggs4bfu/embedded/html,result/

jQuery 제거

아직 jQuery를 사용하고 있는 문제가 남아 있다. 본래 문제는 jQuery 사용에 대한 언급이 없음으로 jQuery 코드를 제거하고 자바스크립트 코드로 변경했다.

    <!DOCTYPE html>
    <html>
    <head>
        <title>네모 굴리기 - jQuery 사용하지 않은 버전</title>
        <meta charset="utf-8" />
        <style>
        </style>
    </head>
    <body>
    <script>
        var node = document.createElement("div");
        node.className = 'square';
        var elements = document.getElementsByTagName("body");
        elements[0].appendChild(node);
        node.style.width = "100px";
        node.style.height = "100px";
        node.style.border = "1px solid red";
        setTimeout(function() {
            node.style.marginLeft = "400px";
            node.style.transition = "4s";
            node.style.transform = "rotate(360deg)";
        }, 2000);
    </script>        
    </body>
    </html>

jsfiddle.net/Afrontend/1Lt77d5p/embedded/html,result/

HTML과 CSS 사용

jQuery를 사용한 버전이나 사용하지 않은 버전 모두 동작은 동일하지만 모두 읽기가 너무 어렵다. JavaScript만을 사용했기 때문이다. 같은 기능을 HTML, CSS를 사용하여 개선할 수 있다.

jsfiddle.net/Afrontend/3m6uku0o/embedded/html,result/

그래도 HTML, CSS, JavaScript 이렇게 세개의 파일로 분리되는 것이 일반적이다.

jsfiddle.net/Afrontend/e1d6pvkr/7/embedded/

전체 코드는 따로 확인할 수 있다. 코딩 인터뷰 때 문제를 이렇게 풀었다면 합격했을까? 하는 아쉬움이 남는다.

답글 남기기

아래 항목을 채우거나 오른쪽 아이콘 중 하나를 클릭하여 로그 인 하세요:

WordPress.com 로고

WordPress.com의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Google photo

Google의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Twitter 사진

Twitter의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

Facebook 사진

Facebook의 계정을 사용하여 댓글을 남깁니다. 로그아웃 /  변경 )

%s에 연결하는 중

This site uses Akismet to reduce spam. Learn how your comment data is processed.