웹(web)/프론트엔드-javascript
-
크롬 콘솔에서 디버깅하기웹(web)/프론트엔드-javascript 2021. 5. 5. 17:08
크롬 개발자도구 콘솔을 사용하여 다양한 디버깅 방법을 알아보자. # 콘솔 키기 크롬 개발자도구를 키고 Console 탭이 아닌 경우에 단축키인 ESC를 클릭하면 개발자도구 아래쪽에 console drawer이 나타난다. 개발자도구 상단 쪽 X 버튼 왼쪽에 있는 점 세개를 누르면 show console drawer을 눌러도 된다. 상단 탭에서 Console 탭을 찾아서 클릭하면 다음과 같이 콘솔이 나타난다. 크게 보려면 탭을 찾아서 키면 된다. # expression을 모니터링하기 실시간으로 현재 viewport의 active element를 보고 싶다면 어떻게 해야할까? 위 버튼을 누르면 아래 처럼 입력할 수 있는 창이 나타난다. 여기에 document.activeElement를 입려한 후 엔터를 치면 ..
-
자바스크립트 동작 방식: 실행 컨텍스트(execution context)웹(web)/프론트엔드-javascript 2021. 5. 2. 16:49
자바스크립트는 인터프리터 방식의 언어일까? 답은 no에 가깝다고 할 수 있다. 인터프리터 방식의 언어라면 다음 코드는 에러가 나야할 것이다. foo(); function foo(){console.log(1)} 코드는 크게 선언문과 실행문으로 나누어 볼 수 있다. 선언문은 변수, 함수 등에 대한 식별자 이름을 만드는 것이고 ( const a, function foo() {} ) 실행문은 선언된 것들을 가지고 사용하는 부분으로 볼 수 있다. (console.log(a), foo()). 결국, 자바스크립트 파일은 선언문과 실행문의 묶음이다. 이를 실행하는 규칙을 방식이 자바스크립트에서는 실행 컨텍스트라는 방식으로 되어있다. 실행 컨텍스트는 세 가지로 나뉜다. Global Execution Context: 함수..
-
비동기, Promise웹(web)/프론트엔드-javascript 2020. 11. 8. 00:07
JS로 개발이 어느 정도 되면 비동기 코드들이 사용된다. 비동기란 get('naver.com') 같은 것을 하는 코드가 있을 때 요청을 날리고 다음 코드 실행으로 넘어가는 방식이다. console.log("hello") get('naver.com') console.log('bye') 라는 세 줄의 코드가 있을 때 get에 대한 응답이 날라오기 까지 5분이 걸린다고 해보자. 만약 get의 응답이 날라오기 전까지 다음 라인을 실행하지 못한다면 'bye'가 5분 뒤에 콘솔에 찍힐 것이다. get의 응답을 받는 것이 이후 코드에 선행되어야 하지 않는다면 get의 응답이 오기 전까지 기다리느 것이 아니라 이후 코드를 실행하면 될 것이다. 요청을 날리고 -> 'bye'를 찍고 -> 요청이 5분 뒤에 응답이 올 것이..
-
scope웹(web)/프론트엔드-javascript 2020. 6. 29. 00:10
ES5까지는 global scope와 function scope만 사용되었다. scope란 변수의 사용범위이다. 변수를 선언하면 어떤 범위에서 사용할 수 있는가에 대한 규칙이다. global scope 부분에서 선언한 것이라면 해당 파일 어디에서든 사용할 수 있다. function scope부분에서 선언한 것이라면 해당 function 안에서는 어디서든 사용할 수 있다. 아래의 코드에서 b는 코드 어디에서든 사용 가능하다. 여기서 어디에서든 이라는 것은 작업하는 js파일 어느 줄에서든 사용가능하다는 뜻이다. c는 fun 함수 안이라면 어디서든 사용 가능하다. fun(){ ~~ } 에서 ~~ 부분 어디든 가능하다. var b = 1; function fun(){ var c = 2; ...end } ...e..
-
rest, spread웹(web)/프론트엔드-javascript 2020. 6. 28. 23:39
const slime = { name: '슬라임', attribute: 'cute', color: 'red'};이 있다고 하자. name 속성을 비구조화 할당하고 나머지는 others에 저장하려면 어떻게 할까? const { name, ...other } = slime; slime속성에 추가로 height: 180을 가지는 객체 tall_slime를 만들려면 어떻게 할까? const tall_slime = { ...slime, height: 180}; const numbers = [0,1,2,3,4];이 있다고 하자. 0,1을 one,two 변수에 담고 나머지는 others에 저장하려면 어떻게 할까? const [one, two, ...others] = numbers; numbers가 두번 반복하는 [0..
-
비구조화 할당(구조분해 할당)웹(web)/프론트엔드-javascript 2020. 6. 28. 23:04
ES6에서 도입된 문법이다. 호환성을 위해 사용하기 위해 babel과 같은 추가 작업이 필요하다. 배열 [1,2,3,4,5]에서 1,2를 a,b에 한번에 할당하고 싶다면 어떻게 해야할까? const [a, b] = [1,2,3,4,5]; 와 같이 사용하면 된다. { name: 'bob', age: 15, height: 170}이 있을 때 age의 값을 age 변수에 담으려면 어떻게 해야할까? const {age} = { name: 'bob', age: 15, height: 170}; 주의할 것은 속성 이름을 일치시켜줘야한다. age 변수말고 my_age에 담으려면 어떻게 해야할까? const {age: my_age} = { name: 'bob', age: 15, height: 170}; 혹시 없을 경우를..
-
falsy 한 값웹(web)/프론트엔드-javascript 2020. 6. 28. 22:46
falsy한 값이란 if의 조건식으로 평가되었을 때 false로 취급되는 값이다. 쉽게 말하면 if ( ? ) { } 에서 ? 조건이 false로 계산되는 값이다. 예를 들면 if( 'hello') { console.log('hello~~'); } 와 같은 상황에서 'hello'는 false로 판단될까? 아니면 true로 판단될까? 자바스크립트에서는 true로 판단된다. falsy한 값은 다음과 같다. undefined, null, 0, '', NaN let a ; let b = null; let c = 0; let d = ''; let e = a+ b; 이를 실제로 확인하는 방법은 !!a 처럼 !!를 붙여서 확인하는 방법이다. 또는 a ? true: false로 삼항 연산자를 사용해서 확인할 수도 있다..
-
클래스웹(web)/프론트엔드-javascript 2020. 6. 27. 18:45
클래스는 IE에서 지원하지 않는다. 간단하게 살펴보고 넘어가자. 객체 생성자와 프로토타입에 함수를 등록할 때 편하다. Animal 클래스를 만들고 객체를 만들려면? class Animal { constructor(type, name, sound) { this.type = type; this.name = name; this.sound = sound; } say() { console.log(this.sound); } }; const dog = new Animal("개", "멍멍이", "멍멍"); dog.say(); say가 prototype에 자동으로 등록됨. Dog 클래스를 만들려면? class Dog extends Animal { constructor(name, sound) { super("개", nam..