본문 바로가기

JavaScript

 (35)
자바스크립트 ES6모듈 내보내기/불러오기(export/import) 하나의 파일에서 다른 파일의 코드, 외부 라이브러리를 불러오고 싶다. example: import moment from "moment"; 위 코드는 MomentJS라는 라이브러리를 불러오는 작업을 수행하고 있다. # ES6 모듈 시스템의 이점 - import, from, export, default처럼 모듈 관리 전용 키워드를 사용하기 때문에 가독성이 좋다. - 비동식 방식으로 작동 - 모듈에서 실제로 쓰이는 부분만 불러오기 때문에 성능과 메모리 부분에서 유리한 측면이 있다. # 복수 객체 내보내기/불러오기 하나의 자바스크립트 모듈 파일에서 여러 개의 객체를 내보내고 불러오는 방법을 알아보자. ## 내보내기 import 키워드의 짝꿍인 export 키워드를 사용해서 명시적으로 선언한다. 이때 내보내는 변..
함수 호출 방식에 의해 결정되는 this - 1. 함수 호출 자바스크립트의 함수는 호출될 때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달받는다. 자바스크립트의 경우, 함수호출 방식에 의해 this에 바인딩할 객체가 동적으로 결정된다. 다시 말해, 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되는 것이 아니고, 함수를 호출할 때 함수가 어떻게 호출되었는지에 따라 this에 바인딩할 객체가 동적으로 결정된다. 함수 호출 방식 1. 함수 호출 2. 메소드 호출 3. 생성자 함수 호출 4. apply/call/bind 호출 var foo = function () { console.dir(this); }; //1. 함수호출 foo(); // window // window.foo();와 동일 //2. 메소드 호출 va..
이벤트 리스너(event listener) : 특정 이벤트가 발생했을 때, 실행되는 함수. 이벤트 핸들러(event handler)라고도 한다. 여기서 이벤트는 웹페이지에서 발생하는 사용자의 행동(마으수 클릭, 키보드 입력 등)이나 웹페이지의 상태 변화(로딩 완료, 타이머 종료 등)를 나타낸다. JavaScript에서는 DOM요소에 이벤트 리스너를 등록할 때는 addEventListener 함수를 사용. DOM객체.addEventListener(이벤트명, 이벤트리스너) const button = document.getElementById('myButton'); //HTML에서 id가 'myButton'인 요소 가져오기 button.addEventListener('click', function(){ // 버튼이 클릭 되었을때 실행되는 함수(이벤트리..
순수 자바스크립트를 왜 바닐라 자바스크립트(Vanilla JS)라고 할까? '바닐라 자바스크립트'라는 단어를 정말 많이 들었는데 정확한 의미를 몰랐다. 그래서 '바닐라 자바스크립트(Vanilla JS)'의 정확한 의미를 찾아보았다. 바닐라 자바스크립트란? : 프레임워크 또는 라이브러리가 적용되지 않은 '순수한' 자바스크립트를 의미한다. 즉, jQuery, Angular, Vue, React 같은 라이브러리/프레임워크를 사용하지 않은 순수한 자바스크립트를 말한다. 여기서 궁금한건, 이렇게 '순수한' 자바스크립트에 왜 '바닐라'라는 단어를 붙였을까? '바닐라'는 그 바닐라맛 아이스크림에서 그 '바닐라' 아닌가? 바닐라에 다른 의미도 있는건가? 궁금증이 많은 나는 또한번 구글링을 해보았다. 결론부터 말하면, vanilla에는 우리가 아는 그 바닐라맛의 '바닐라' 의미 뿐만 아니라 '..
객체지향 Class 문법 게임 LOL에 등장하는 캐릭터들에 대한 데이터들을 JavaScript로 정리를 하고싶다. JavaScript의 object 형태로 정리해보자. var 캐릭터1 = {name: '..'} var 캐릭터2 = {name: '..'} var 캐릭터3 = {name: '..'} var 캐릭터4 = {name: '..'} 이렇게 캐릭터가 100개가 필요하다. LOL에 등장하는 캐릭터들은 특징이 여러가지가 있다. 먼저 캐릭터 2개의 특징에 대해 정리해보자. var nunu = { q : 'consume', w : 'snowball' } var garen = { q : 'strike', w : 'courage' } 이렇게 100개의 캐릭터에 대한 특징을 정리하려면... 밤을 새야한다. 이런 작업을 쉽게 할 수 있는 ..
[JS] 연산자 - 산술연산자 산술연산자 : 사칙연산을 다루는 가장 기본적이면서도 많이 사용하는 연산자. 덧셈, 뺄셈, 곱셈, 나눗셈이 있다. 순서대로 +, -, *, / 나누고 난 나머지를 계산해주는 연산자인 %도 존재. (%를 한국어로는 나머지 연산자, 영어로는 remainder operator 또는 modulo operator라고도 한다.) 산술 연산을 할 수 없는 경우에는 NaN을 반환. 산술 연산자는 '이항 산술 연산자'와 '단항 산술 연산자'로 구분할 수 있다. 1) 이항 산술 연산자 : 2개의 피연산자를 대상으로 연산하여 숫자 타입의 값을 만든다. 모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수 효과(Side Effect)가 없다. 다시 말해, 어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경우는 없고 단지 새로운..
유사배열객체(array-like object) 정의 유사배열객체 : 배열처럼 보이지만 실제 key가 숫자이고 length값을 가지고 있는 객체. JS에서 querySelectorAll이나 document.body.children으로 엘리먼트를 가져오면 유사배열객체에 담겨서 온다. Example index.html(html파일) Hello World I'm Programmer javascript.js(js파일) let array = [1,2,3]; //[1,2,3] let nodes = document.querySelectorAll('.text');// NodeList[div, div, div,..] let els = document.body.children;// HTMLCollection[div,div,..,script] nodes, els값을 co..
변수의 정의, 변수 호이스팅, var / let / const의 특징 # 변수 - 메모리 : 데이터를 저장할 수 있는 메모리 셀의 집합체. 각 셀은 고유한 메모리 주소를 갖는다. 이 메모리 주소는 '메모리 공간의 위치'를 나타낸다. 메모리 주소를 통해 데이터에 직접 접근하는 것은 치명적 오류를 발생시킬 가능성이 높은, 매우 위험한 일이다. 만약 실수로 운영체제가 사용하고 있는 값을 변경하면 시스템을 멈추게 할 수 있는 치명적인 오류를 발생시킬수 있기때문에, 자바스크립트는 직접적으로 메모리를 제어하는것을 허용하지 않는다. 그래서 자바스크립트는 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기위해서 '변수'를 사용한다. - 변수 : 메모리 공간을 식별하기 위해 붙인 이름. 즉 값의 위치를 가리키는 이름. ex: 변수 'score'는 값 90이 저장되어 있는 메모리 주..

티스토리툴바