js에서 css 부르는 3가지 방법+class에서 arrow function 써야 하는 이유

AeRi Lee·2020년 2월 8일
0

개념을 정리한다기 보다 enemy rain 게임을 만들다가 알게 된 것에 대해 적는 것이다.

게임을 만드는 과정에 대해서는 추후에 쓸 계획이다.

상황 설명: enemy인 귀신이 화면에 등장하면 y축으로 쭉 내려오게 해야 한다. javascript에서 top값을 바꾸려고 한다.

css와 JavaScript를 연결하는 과정

우선, enemy에서 사용하지 않은 방법이자 hero.js에서는 사용했던 방법이자 javascript에서 css를 불러왔던 방법을 첫 번째로 적도록 하겠다.

1.hero를 왼쪽, 오른쪽으로 이동하게 할 때

querySelector와 getComputedStyle을 사용했다.
getComputedStyle을 사용하면 해당하는 class의 css를 통째로 들고 올 수 있다.

그래서

색이 다른 줄을 보면
heroImg.style.left = parseInt(heroStyle.left)-10 + 'px';
라고 했을 때 잘 이동한다.

2.enemy.js에서는 getComputedStyle을 쓰지 않았고 top값을 불러오려고 했으나 실패했다.

hero에서는 class의 css를 다 들고 왔었으나
여기서는 가지고 오지 않았으므로 js에서 값을 줬어야 했다.

이렇게 한다면 getComputedStyle로는 가지고 오지 않으면서 css를 이동시킬 수 있다.

3.다른 방법으로는 .offset..

.offsetLeft
.offsetTop
.offsetBottom
.offsetRight
을 사용하는 것이다.

이거는 .offset()과는 비슷한 듯 다르다.

enemyImg.style.top = enemyImg.offsetTop+2+'px'
라고 쓰면 되는데 자바스크립트에서 css를 부르는 방법 중 하나이다.
이 방법을 쓰면 left값을 지정하고 바꾸지 않아도 되고, getCoputedStyle로 css값을 모두 불러오지 않아도 된다.

여기에서 문제는
enemyImg.offsetTop = enemyImg.offsetTop + 2'px';
로 쓰게되면 기능도 하지 않을 뿐 더러 엄청나게 빠른 속도로 무엇인가가 만들어진다는 것이다.
이유는 아직 찾지 못했다..
이 때, 이렇게 해봤다가 노트북 터지는 줄 알았다....


이 세가지 방법에 대해서 들었던 생각으로..

  1. 어떤 단점이 있을 지, 무엇이 가장 안전하거나 이상적인 방법인지, offset을 왜 두번 다 쓰면 안되는 지 알아봐야 겠다.
  2. 지금은 css와 class 로 유령 떨어지는 것을 만들었는데 x축과 y축을 이용하는 방법과 함수를 만드는 방법으로도 만들어보고 싶다.

예리님이 말씀하시길, 함수로 만드는 방법보다 class와 constructor로 만드는게 나은 이유로 let a = new Enemy
라고 했을 때 각 new Enemy는 자기 자신만 신경쓰기 때문에 귀신을 사라지게 할 때 사용하기 좋다고 하셨다.
그런 깊은 뜻이 있으셨을 줄이야...!!충격...


class속 함수=> arrow function을 써야 한다.

class 속에 constructor와 함수가 함께 들어가 있는 구조인데, this는 constructor에서는 기본값, 즉 default값만 넣어주고 나머지는 필요할 때 함수를 호출하면 발동되는 this를 함수에 써주면 된다.

그런데 여기에서 이 함수의 형태는 우리가 아는 기본 함수 형태인 function something(){} 형태로 쓰면 window를 바라보고
const something = () => {} 인 arrow function 형태로 쓰면 class를 바라본다고 한다.그래서 class안에서는 arrow function을 꼭 써야 한다고 한다.

this는 매우 깊으므로 다음에 정리해서 올리도록 하겠다.

profile
👩🏻‍💻 Junior Web Frontend Developer

0개의 댓글