인프런 커뮤니티 질문&답변

안녕하세요 :)

질문1. windowEvent() => {} 이게 함수를 만드는 문법인건가요?

네 맞습니다. javascript es6 문법에 등장한 화살표 함수 표현이라고하는데요

전통적인 함수표현( function windowEvent() {} )의 간편한 대안이라고 할 수 있습니다.

조금 더 깊이 들어가면 this의 사용법 등 여러가지 다른점이 있기 때문에 JS es6 강의를 들어보시는걸 추천드립니다 !! :D

질문2.제가 쓰는 에디터에서 자꾸 노란줄이 생기는데요?

해당 현상은 코드 eslint가 es6문법을 제대로 인식하지 못하는것 같습니다 (다른 문제일수도 있습니다. 하지만 이부분을 먼저 확인해보세요), 또는 vs code를 최신 버전으로 업데이트해보세요!

제가 사용하는 vs code에서는 노란줄이 생기지 않거든요^^;; 코드 하이라이터등의 플러그인을 업데이트 해보거나 config를 수정해보면 해결 될 것 같습니다 :D

질문3. `translateX(${this.movex}px)` 이문법이 무엇인지?

이문법은 템플릿 리터럴이라고 합니다 :)

이문법의 장점은 여러가지가 있는데요. 

기존에 사용하던 방식을 보면

var a = 5;
var b = 10;
console.log("Fifteen is " + (a + b) + " and\nnot " + (2 * a + b) + ".");

이런식으로 사용했습니다. 조금 복잡해 보이고 사용하기도 불편하죠. 이것을 템플릿 리터럴로 표현한다면

var a = 5;
var b = 10;
console.log(`Fifteen is ${a + b} and
not ${2 * a + b}.`);

다음과 같이 간편하게 표현할 수 있는겁니다 :)

차이점을 보면 첫번째 예제에서는 줄바꿈을 위해 \n을 사용했지만 두번째 예제에서는 \n 없이 줄바꿈이 간편하게 되는걸 알 수 있습니다.  그리고 복잡한 + 기호를 계속 붙여 쓰지 않아도 되죠 

예) `문자열 가나다라마 ${a+b} 사아자차카타파하`;

다음과 같이 말이죠^^ 너무 간편하죠?

설명만으로 이해가 부족하다면 위 예제 코드를 복사해 실행시켜 보세요. 그럼 이해가 빠를겁니다 :)

 

* 마지막으로 주의사항 한가지 따옴표와 백틱은 다릅니다.

' ' <-따옴표

`` <- 백틱

템플릿 리터럴 문법은 따옴표가 아닌 백틱 ( ` ` ) 으로 감싸줘야합니다 :) 질문자님은 따옴표를 사용한것 같네요^^;;

`문자열${a+b}`; 

다음과 같이 사용해야합니다. 백틱은 키보드 숫자 1옆에 있습니다 :)

 

그럼 또 다른 궁금증이 생길때 문의주세요 :D