세상 긴 제목과 그렇지 않은 내용. JavaScript에서 addEventListener를 사용할 경우... 이런 식으로 사용하는 경우가 많다. 즉 addEventListener의 첫 번째 인자로 해당 event를, 두 번째 인자로 이벤트 발생 시 실행될 함수를 적어주는 것. 그런데 만약, 요 두번째 함수(콜백 함수)에 파라미터를 넘겨야 한다면? 이렇게 써주면 당연히 안된다. 왜? → 이러면 JS 파일을 읽어내려가는 순간 imgDragStart()란 함수가 실행되고 말 테니까! 우리가 원하는 건 touchstart라는 이벤트가 발생됐을 때 imgDragStart함수가 실행되는 것. 따라서 함수 실행을 잠시 미뤄야 한다 === 화살표 함수를 통해 가능! 쨔잔. 이렇게 써주면 된다. 그런데 이렇게만 하면....

React나 Next.js를 사용하면 배포 시 (거의) 자동으로 build 파일을 생성할 수 있다. 그런데 요 build 파일의 역할은? → 필요 없는 공백이나 주석을 삭제해 파일의 용량을 줄이고, 서버 측에서 이해할 수 있는 언어로 변환하거나, 아무나 해당 스크립트를 해석할 수 없도록 암호화한다! 여기서 문제, 그렇다면 라이브러리 없이 그냥 HTML, CSS, JS 파일을 배포해야 할 때는? 해당 JS 파일을 직접 build 해줘야 한다! https://github.com/terser/terser terser/terser 🗜 JavaScript parser, mangler and compressor toolkit for ES6+ - terser/terser github.com 관련된 여러 패키지 중 t..

비동기 방식을 사용하기 위해 Ajax의 맛을 봐보자! 전체적인 흐름! 하나하나 무슨 소리인지 알아보자. js가 Ajax를 사용할 때 쓰는 객체인 XMLHttpRequest를 생성! 객체이므로 new를 통해 만들어 준거다! XMLHttpRequest 객체의 open() 메서드를 사용해 해당 요청의 전송 방식, 전송 위치, 방식 을 지정해준다. 배치 순서는 → open(전송 방식 , 전송 위치 , 방식) 형태로! 역시 XMLHttpRequest 객체의 send() 메서드를 통해 XMLHttpRequest를 보낼 수 있다! 성공적으로 보내질 경우 responseText란 속성으로 답이 오는데, 요 녀석도 XMLHttpRequest 객체의 속성! 아하... 이를 통해 지난번 PNU Quiz에서 사용된 Ajax ..

문서 객체 모델을 사용하면 HTML 페이지에 태그를 추가, 수정, 제거할 수 있다! 1. DOM 관련 용어 문서 객체 모델(DOM)! 그런데 태그니, 문서 객체니, 노드니 하는 용어가 등장한다. 우선 태그는? 우리에게 익숙한, HTML 페이지에 존재하는 , 같은 녀석들! 이 태그를 js에서 이용할 수 있는 객체로 만들면? → 요놈이 문서 객체다! (var header = document.getElementById('header')시 header가 문서 객체! document 객체를 사용한걸 이제 안다!) 마지막으로 노드 란... HTML 페이지는 위 그림처럼 트리 모양으로 나타낼 수 있다. 이 때 그림 속 각 요소들을 노드 라고 부른다! 노드는 요소 노드와 텍스트 노드로 구분할 수 있는데, 요소 노도는 ..

브라우저 객체 모델(BOM)이란? 웹 브라우저와 관련된 객체의 집합! 그림처럼 최상위의 window, 하위의 location, navigator, history, screen, document 객체가 있다! 이중 document 객체와 관련된 객체의 집합을 DOM이라 부르는 것! 1. window 객체 브라우저 기반 js의 최상위 객체인 window 객체! open() 메서드를 통해 새로운 window 객체를 생성할 수 있으며, 만들어진 객체에 접근할 수도 있다. 역시나 다양한 기본 메서드를 제공하고 있으며, 위 예시처럼 작성하면... 새로운 window 객체가 뜨며, 1초마다 왼쪽으로 10px 아래쪽으로 10px씩 이동한다! 참말로 신기하고만. 2. screen 객체 다음은 운영체제 화면의 속성을 가지..

JavaScript에 내장된 객체 중 가장 기본적인 내장 객체를 살펴보자! 1. 기본 자료형과 객체의 차이 변수 primitiveNumber은 기본 자료형 숫자, 변수 objectNumber은 객체에 해당한다. 이 둘을 출력해보면... 같은 값이다! 심지어 속성과 메서드는 객체가 가질 수 있는 것인데... 기본 자료형에도 속성과 메서드가 존재한다. 이게 어찌 된 일? 기본 자료형의 속성이나 메서드를 사용하면 기본 자료형이 자동으로 객체로 변환되기 때문! 예를 들어 기본 자료형 숫자의 속성이나 메서드를 사용할 때는 자동으로 Number 객체로 변환된다. 따라서... 기본 자료형과 객체의 차이점은 찾기 어렵다! 굳이 굳이 찾자면 기본 자료형은 객체가 아니므로 속성과 메서드를 추가할 수 없다는 점. 따라서 기..