Frontend/javascript

자바스크립트의 동작 원리

자바스크립트 동작 방식 ​ 자바스크립트는 단일 스레드 방식으로 한 번에 하나의 작업만 처리 가능 ​ 자바스크립트 엔진 V8 구조 ​ Memory Heap 메모리 할당이 일어나는 곳 ​ Call Stack 코드 실행에 따라 스택이 쌓이는 곳(후입 선출 LIFO) ​ 자바스크립트 동작환경(Runtime) ​ Web APIs DOM, AJAX, Timer 등 브라우저에서 제공하는 API ​ Callback Queue 콜백 함수들이 대기하는 곳(선입 선출 FIFO) ​ 호출 스택(Call Stack) 웹 브라우저의 자바스크립트 인터프리터 역할 현재 함수의 동작 및 다음 함수 호출 부분 등을 제어 ​ Event Loop Call Stack이 비워질 때마다 Collback Queue에 대기중인 콜백함수가 있을 경우..

[JavaScript] 디바운싱과 쓰로틀링

디바운싱 - 연속적으로 호출되는 함수들 중에서 처음 or 마지막에 호출되는 함수만 실행하는 방식(함수는 한 번만 실행) - 주로 이벤트 핸들러에 적용 // #1 타이머 예제 let timer; document.querySelector('#input').addEventListener('input', function(e) { if(timer) { clearTimeout(timer); } timer = setTimeout(function() { // 실행할 코드 내용 }, 200); }); // #2 텍스트 입력 예제 function debounce(func, delay) { let timeoutId; return function() { const context = this; const args = argum..

window 객체의 opener 사용하기

window.opener - window.open() 함수로 연 팝업창(자식창)을 의미 - opener를 통해 부모창을 제어 가능 - window.open([페이지 URL], [타겟], [옵션]) 옵션 width : 팝업창 가로길이 height : 팝업창 세로길이 toolbar=no : 단축도구창(툴바) 표시 안함 menubar=no : 메뉴창(메뉴바) 표시 안함 location=no : 주소창 표시 안함 scrollbars=no : 스크롤바 표시 안함 status=no : 아래 상태바 창 표시 안함 resizable=no : 창 변형 하지 않음 fullscreen=no : 전체 화면 하지 않음 channelmode=yes : F11 키 기능이랑 동일 left=0 : 왼쪽에 창을 고정 top=0 : 위쪽..

자바스크립트 null, undefined, NaN의 차이

null - 다른 참조 변수에 대한 주소 값이 없는 것 - 객체의 속성 값이 존재하지 않거나, 함수의 매개변수를 초기화할 때 사용 - undefined에 비해 메모리 용량 많이 차지 ​ undefined - 값이 할당되지 않은 상태 - null에 비해 메모리 용량 적게 차지 ​ NaN - Number 타입 - Not a Number의 약자로 숫자가 아닌 값을 의미 - 숫자가 아닌 문자열 값을 숫자로 변환하여 계산할 때 일종의 오류 값으로 사용 ​ null, undefined, NaN의 공통점 자바스크립트 조건식에서 false 값으로 평가

크롬 브라우저에서 자바스크립트 디버깅 하는 법

F12 버튼을 눌러 크롬 개발자 도구에 진입합니다. 소스 탭 메뉴를 누른 후에 디버깅하고 싶은 자바스크립트 파일을 찾습니다. 해당 파일을 클릭 후에 함수 왼쪽을 클릭하여 브레이크 포인트를 지정합니다. 지정한 자바스크립트 함수가 실행될 수 있도록 이벤트를 발생시킵니다. 브레이크 포인트가 걸렸으면 디버깅 모드를 이용할 수 있습니다. ​ 디버깅 모드 다음 함수 호출(Step Over) - 한 줄씩 순차 실행 다음 함수 호출(Step Into) - 해당 시점에 함수 안에 들어가 내부 함수를 탐색합니다. 현재 함수에서 벗어나기 - 현재 함수에서 상위 함수로 빠져나옵니다.

자바스크립트(3) - 객체 생성

1. 객체 이니셜라이저(객체 리터널)를 이용하여 객체 생성 // 객체 생성 var obj = {name: '홍길동', age: 20}; // var obj = { 'name':'홍길동', 'age':20 } Key에 ' '를 붙여도 가능하다. // 객체 타입 확인 console.log( typeof obj ); // "object" // 객체 필드 접근 console.log( obj.name ); // 홍길동 // 속성값 변경 obj.name = '김길동'; console.log( obj.name ); // 김길동 // 동적으로 속성 추가 obj.hobby = 'baseball'; // 객체 안에 hobby라는 Key가 존재하지 않지만 초기화를 함으로써 // baseball이라는 value(값)를 가진 ..

자바스크립트(2) - Rest, 클로저, 화살표 함수

Rest 매개변수 부정인수. 마지막 파라미터만 Rest 매개변수가 가능하며, Rest 매개변수는 유사배열이다. function add4(...args) { let s=0; for(let n=0; n { return args.length; }; // 파라미터가 하나만 있는 경우에는 주변 괄호를 생략할 수 있다. var sub3 = args => { return args.length; }; // 화살표함수의 유일한 문자로 'return'일때 'return'과 중괄호({})를 생략할 수 있다. var sub4 = args => args.length;

자바스크립트(1) - 요소 값 접근

input 상자에 입력한 값들을 가져오기 1. id로 접근 ex) let n = document.getElementById("아이디명").value; 2. class로 접근 ex) let n = document.getElementsByClassName("클래스명").value; 클래스명에 해당하는 모든 값들을 배열 요소형태로 가져온다. for문을 이용하여 각 요소에 접근이 가능하다. ex) for(let i=0; i