본문 바로가기

programming/javascript

 (15)
자바스크립트 this Java와 같은 언어의 this는 그 쓰임새가 명확하고 간결하다고 할 수 있다. 근데 Javascript의 this는 어디서 어떻게 함수 호출에 쓰이느냐에 따라 가리키는 곳이 다양하다. 즉, 함수 호출방식에 따라서 this에 바인딩(묶일) 될 객체가 동적으로 결정된다. 그 부분에 대해서 정리를 해보려한다. 함수가 호출 되는 방식은 아래와 같은 방법이 있다. 함수 호출 메서드 호출 생성자 함수 호출 apply, call, bind를 이용한 호출 1. 함수 호출 console.log(this) // window function func() { console.log(this) // window function inner() { console.log(this) // window } } func() 기본적으로 t..
Rest syntax VS Spread syntax (...) 나머지 연산자 vs 전개 연산자 자바스크립트 개발을 할 때 ' ... ' 연산자는 매우 유용하게 쓰인다. 쓰임에 따라서 나머지 연산자 혹은 전개 연산자라고 불리는데, 말 그대로 나머지를 가져오거나 어딘가에 배열이나 객체를 펼쳐놓을 때 많이 썼다. 쓸 줄도 알고 이름도 알았지만 이렇게 분류해서 생각해본 적은 처음이다. 그냥 같은 것이라고 생각만하고 썼는데, 직접 분류하려고 보니 명백하게 다른 쓰임새를 갖고 있었다. 그래서 한번 정리를 해보려한다. Rest syntax (나머지 구문) Rest Parameter 와 Rest Property로 나누어 진다. 이름 그대로 생각하면 된다. 전자는 매개변수이고 후자는 객체의 프로퍼티이다. rest parameter (나머지 매개변수) 매개변수의 이름 앞에 ... 를..
자바스크립트 클로저(Closure) 클로저 클로저란 어떤 함수에다가 그 함수가 선언된 환경(렉시컬 환경, lexical environment)에 대한 참조가 결합된 형태를 얘기한다. 다시 말해서, 클로저는 이미 호출이 완료된 외부함수의 스코프에 내부함수가 접근이 가능하도록 한다. C와 같은 언어를 사용하다가 자바스크립트 클로저를 본 사람들은 이상하게 생각할 수도 있다. 왜 함수가 끝났는데 함수 내부 변수에 접근이 가능한거지? C언어에서는 정적변수를 함수내에서 선언하지 않는 이상, 함수 호출이 끝나면 그 내부 변수에 대해서는 참조를 할 수 없다. 근데 자바스크립트는 가능하다. 알아보자. 렉시컬 스코프 (lexical scope) 렉시컬 스코프란 쉽게 말하면 함수가 어디서 호출되는지에 따라서가 아닌 함수가 선언된 위치를 따라 스코프가 결정되는..
[webpack] 오래된 글을 보고 웹팩 설정을 하다가 바뀐 부분이 많아 고생했던 일 벨로퍼트님의 블로그( https://velopert.com/1492 )를 보고 일부 babel 및 webpack 설정을 하다가 업데이트되어 바뀐 부분이 너무 많아서 웹팩으로 컴파일이 안되서 한참 고생했다. 그래서 바뀐 부분을 정리해 보고자 한다. babelbabel-cli , babel-core , babel-preset-es2015 , babel-preset-react 는 더 이상 쓰지 않는게 좋은 듯하다. 웹팩 컴파일에 경고나 오류같은 것이 떴고, 찾아보니 더이상 안쓴다는 말이 있었다. 이것들은 @babel/cli , @babel/core , @babel/preset-env (이거는 babel 홈페이지에 보면 babel-preset-2015, 2016, 2017 등을 대신 한다고 나와있다. 이게 편하..
[jquery] offset 화면에 어떤 객체를 랜덤의 좌표로 만들어 주었을 때 두 곳의 거리를 구하려면 흔히 피타고라스의 정리로 구하면 된다고 알고 있다.그것을 구현하려면, 각 객체의 좌표(스타일에서 left, top 값)를 알아야 X,Y로 지정을 해주고 피타고라스정리로 구할 수 있다.그런데 그 값을 가져오려면 그 객체의 스타일에 접근 해야하는데, document.getElementById(객체)style.left 이런 식으로 불러 올 수는 있다. 근데 이값은 '111px' 이런식으로 string 값으로 불러오는데다가 px까지 붙어서 나오기 때문에 피타고라스 정리로 계산하려면 까다롭다. 그 대신 쓸 수 있는게 있는데, offset이라는 jquery 메서드이다. 객체를 불러와서 뒤에 offset() 만 붙여주면 top과 left 값..
[ES6] 클래스(class) 클래스JS에는 정확히 클래스라는 개념 자체가 있지는 않았다. 그러나 그와 비슷한 프로토타입 기반 방식을 구현해서 상속 등을 구현했는데, ES6 에서는 클래스라는 개념이 명시적으로 생겼다. class Book{// 속성(프로퍼티) constructor(title, author, price){this.title = title;this.author = author;this.price = price;} // 메서드(프로토타입객체에 쓰던것)book_info() {console.log(`${this.title}, ${this.author})`;}} // end class let book = new Book('난중일기', '이순신', '12000'); book.book_info(); // '난중일기, 이순신' 이런 ..
[ES6] 배열과 객체의 비구조화 배열과 객체의 비구조화비구조화 할당(destructuring assignment) 구문은 배열이나 객체에 있는 각 데이터의 값을 자동으로 추출하기 위한 방법이다. 배열 비구조화let [a, b] = [3, 4]; // a = 3, b = 4 를 대입console.log(`${a}, ${b}`); // "3, 4" [a, b] = [b, a]; // a = b, b = a를 대입(교환)console.log(`${a}, ${b}`); // "4, 3" [a, b] 에 우측 배열 [3, 4]의 값을 추출해 각각 순서대로 전달받는다. 순서를 바꾸어 대입하면 값을 서로 교환하는 처리가 가능해진다. (원래는 temp같은 임시 저장할 변수가 필요한데 간단해졌다.) 대입할 변수의 갯수와 배열의 크기가 일치하지 않아도 ..
[ES6] 템플릿 표현식 템플릿 표현식자바스크립트는 코드를 쓸 때 문자열, HTML 등과 같이 쓰면, 보기에도 쓰기에도 불편하다. 예를 들면, let a = 1, b = 2, c = 3; let sentenceWithVar = 'a = ' + a + ', b = ' + b + ', c = ' + c + '\n';console.log(sentenceWithVar); // a = 1, b = 2, c = 3 문자열(HTML) 부분과 변수 부분을 따옴표로 하나하나 나누고 ' + ' 기호로 다 붙여주어야 한다. 그래서 ES6에서 나온 해결책이 템플릿 표현식이다.ES6에서는 역따옴표( ` )로 이를 간단히 표현할 수 있다. let a = 1, b = 2, c = 3;let sentenceWithVar = `a = ${a}, b = ${b..

티스토리툴바