프론트엔드 개발/Javascript

Javascript - padStart, padEnd

padStart 문자열의 길이가 최대길이가 되도록 "채울값"을 채운다. "문자열".padStart(최대길이, "채울값"); 시:분:초를 00:00:00 과 같은 포맷으로 숫자를 출력하고 싶을때 1초를 01초로 포맷으로 바꾸려는 상황에 사용될 수 있다. "1".padStart(2, "0"); "1"은 길이가 1이므로 2가 될때까지 "0"을 채운다. 그래서 01이 된다. padEnd는 뒤에 채우는 것이다. 똑같다.

자바스크립트 - 브라우저와 관련된 객체 (window,document, ...)

브라우저와 관련된 객체 종류 설명 window 브라우저 창이 열릴 때마다 생성됨. 최상위 객체 document 웹 문서마다 하나씩 있음. 태그 만나면 생성된다. HTML문서 정보 담김 navigator 현재 사용하는 브라우저 정보가 담김 history 현재 창에서 사용자 방문 기록을 저장 location 현재 페이지의 URL 정보 담김 screen 현재 사용하는 화면 정보를 다룸

자바스크립트 - 이벤트 함수, 이벤트 처리기

이벤트 함수 이벤트는 브라우저나 사용자가 행하는 어떤 행동이다. 아래의 이벤트들이 존재한다. 마우스 이벤트 종류 설명 click HTML 요소 클릭시 발생 dbclick HTML 요소 더블 클릭시 발생 mousedown HTML 요소 위에서 마우스 버튼 눌렀을 때 mouseup HTML 요소 위에서 마우스 버튼 뗄 때 mousemove HTML 요소 위에서 마우스 버튼 움직였을 때 mouseover HTML 요소 위에 마우스 포인터 올라갈 때 mouseout HTML 요소 위에서 마우스 포인터 벗어날 때 키보드 이벤트 종류 설명 keydown 사용자가 키 누르는 동안 발생 keypress 사용자가 키 눌렀을 때 발생 keyup 사용자가 키 뗄 때 발생 문서 로딩 이벤트 종류 설명 abort 문서가 완전히..

자바스크립트 - 코딩 컨벤션

이 게시물은 구글 자바스크립트 스타일 가이드를 따른다. Google JavaScript Style Guide Google JavaScript Style Guide 1 Introduction This document serves as the complete definition of Google’s coding standards for source code in the JavaScript programming language. A JavaScript source file is described as being in Google Style if and only i google.github.io 코드는 Tab 대신 Space 2칸 들여쓰기 권장 if (...) { something... } var 사용 금지, ..

자바스크립트 - Generator

Generator는 작업 도중에 다른 작업을 하다가 다시 돌아왔을때 이전 작업부터 이어서 진행할 수 있게 해준다. 개념 자체는 다른 대부분의 언어에도 있으니 여러 언어를 공부하신 분들은 이미 아실거다. Generator 는 iterable이다. 순회(차례로 진행) 가능한 객체다. for of 문으로 전체 순회가능하다. iterable은 Symbol.iterator() 메소드가 있고, 이 메소드는 iterator를 반환해야 한다. iterator는 next() 메소드를 가진다. 이 메소드는 value, done 속성을 가진 객체 반환한다. 작업 끝나면 done=true가 된다. for of 문은 iterable 객체여야 사용가능하며, Array, Map, Set, String, TypedArray, arg..

자바스크립트 - 프로미스 (promise)

프로미스 (promise) 프로미스는 콜백 함수이다. 특정 함수의 성공(resolve) 또는 실패(reject) 된 경우에 알맞은 함수를 실행할 수 있게 해준다. const pr = new Promise((resolve, reject) => { resolve('success!'); reject(new Error(''error!')); }); pr.then( # then함수에 resolve/reject가 일어났을때 일어날 함수 작성 function(result){} # 성공한 경우 ).catch( function(err){} # 실패한 경우 ).finally( function(){} # 마지막에 반드시 수행되야 하는 작업 작성 ) 프로미스 체이닝 Promise.all() 한꺼번에 프로미스를 실행하여 모두 ..

자바스크립트 - 클래스 (class)

클래스 (class) class Player{ constructor(hp, power){ 생성자 this.hp=hp; this.power=power; } showInfo(){ console.log(this.hp, this.power); } } const player1 = new Player(100,100); class healer extends Player{ constructor(hp,power,mp){ # 생성자를 명시하지 않아도 있는 것 처럼 작동은 됨. super(hp,power); # 부모 생성자를 먼저 호출해야 함. this.mp = mp; } heal(){ console.log('heal'); } showInfo(){ super.showInfo(); # 메소드 오버라이딩한 경우 부모 함수 호출..

자바스크립트 - call, apply, bind

call, apply, bind 객체 밖에 선언된 함수가 특정 객체의 프로퍼티를 다룰때 사용된다. 객체 밖에 선언되어 있으니 함수 내의 this가 무엇인지를 알 수 없는 상태인데 call/apply/bind 함수를 사용하여 this가 누군지 명시적으로 알려줄 수 있다. call 인수를 개별적으로 받는다. const user1={ name:"sponge", }; const user2={ name:"bob", }; function showInfo(){ console.log(this.name); } showInfo.call(user1); → this에 user1 객체 들어감 showInfo.call(user2); → this에 user2 객체 들어감 function changeInfo(age, gender){..

자바스크립트 - setTimeout, setInterval

setTimeout, setInterval setTimeout 일정 시간이 지난 후 함수 실행 setTimeout(함수, 시간ms) setTimeout(함수, 1000) 1초 후 함수실행 setTimeout(함수, 시간ms, 인수) setTimeout(함수, 1000, 'abc') 1초 후 함수에 'abc'를 인수로 넘기고 실행 const tID = setTimeout(함수, 시간ms, 인수) tID를 반환함. clearTimeout(tID); tID를 이용하여 스케줄링 취소 setInterval 일정 시간 대기하며 계속 함수 반복 실행 setInterval(함수, 시간ms) setInterval(함수, 1000) 1초 후 함수실행 setInterval(함수, 시간ms, 인수) setInterval(함수..

자바스크립트 - 클로저 (closure)

클로저 (closure) 클로저는 함수와 Lexcial 환경의 조합이다. 함수가 생성될 때의 외부 변수를 기억하는 것이다. 생성 후에도 그 변수에 접근 가능하다. 자바스크립트는 변수에 함수를 담을 수 있다는 것을 알 것이다. const x = sub(5); 그런데 그 함수의 반환값이 익명함수라면? x라는 변수에 익명함수가 저장되며, 인수로 넘긴 5는 sub 함수의 내부 Lexical 환경에 등록된다. (a=5) x함수를 호출했을 경우 x함수 안에 a란 변수는 없으므로 sub 함수의 내부 Lexical 환경에서 참조해온다. function sub(a){ → 5)a=5를 가져옴 return function(b){ → 3)b=10으로 인자를 받음 return a-b; → 4)a가 없으니 상위 함수에서 참조해옴..