https://jsisweird.com/ JS is weirdA fun and tricky JavaScript quizjsisweird.com 자바스크립트만의 매력이라고 할 수 있는 요상한 문법들을 다룬 사이트가 있다JS is weird 라는 사이트는'연산'과 '타입 변환'을 중심으로 자바스크립트 문제 25개를 풀 수 있는 곳이다 평소에 생각하지 못했던 문법들이 나와서 심심할 때 재미 삼아 풀어볼 만하다! 오늘은 그 중에서 생각해 볼 만한 문제 8개를 풀이해보려고 한다 1. true + false 👉 1 "+" 연산시 boolean 은 number 타입으로 변환된다.그러면 1 + 0 이 되니까, 결과는 1이다. 2. [,,,].length 👉 3 빈 공간에는 undefined 가 들어간다.마지막의..
input tag의 event 중 onKeyDown, onKeyPress, onKeyUp, onInput, onChange에 대해 정리를 하려고 한다. 이번에 몰랐던 사실들을 많이 알게 되었다 🤔 🤔 그럼 각 이벤트에 대해 먼저 알아보자! onKeyDown 키보드에서 키가 눌렸을 때의 그 시점이다. 다른 이벤트와의 차이점은 onKeyDown만 눌렀을 때, 계속 실행이 된다는 것이다. onKeyPress onKeyDown과 마찬가지로 키보드에서 키가 눌렸을 때의 그 시점이다. 다른 이벤트와의 차이점은 KeyCode 값이 아닌 ASCII 값이기에 한글을 포함해 shift, ctrl, backspace, tab, 한/영 등의 키를 인식하지 못한다는 것이다. 아래의 사진을 보면, 한글을 입력했을 때 해당 이벤트..
변수는 총 선언, 초기화, 할당의 3가지 과정을 거친다. var 키워드로 선언한 변수는 let, const와 다르게 선언과 초기화를 동시에 한다. 초기화 단계에서 변수의 값은 암묵적으로 undefined가 된다. 왜 여기에서 '암묵적'이라는 단어가 들어가는 것일까? 모던 딥다이브 자바스크립트책을 다시 한번 읽다가 이 키워드가 눈에 들어오기 시작했다. 암묵적 사실 변수는 undefined로 초기화되지 않는다. 메모리 공간에 이전에 다른 애플리케이션에서 사용하던 쓰레기 값이 남아있을 수 있다. 값을 할당하지 않은 상태에서 참조하게 되면 쓰레기 값이 나오는 것이다. 이러한 오류를 방지하기 위해 자바스크립트는 undefined로 한번 더 할당한다. 즉, 최초로 값을 할당하는 초기화 단계에서 var 키워드로 선언..
안녕와 같이 HTML 텍스트를 그대로 렌더링 하기 위해선 dangerouslySetInnerHTML를 사용할 수 있다. dangerouslySetInnerHTML란? HTML 텍스트를 동적으로 렌더링할 수 있는 리액트의 속성이다. 리액트 컴포넌트에 직접적으로 HTML 코드를 삽입할 수 있다. __html이라는 key를 가지고 있으며, 이를 통해 렌더링 할 HTML 코드를 문자열 형식으로 전달한다. 사용법 import React from 'react'; function Component(){ const markup = { __html: "contains HTML!!" }; return ; } 주의점 이름에서도 dangerous라고 나타나듯이, 위험하게 설정된 HTML을 뜻한다. XSS(Cross-site ..
javascript:void(0)에서 javascript: 와 void(0)로 나눌 수 있다. 각각의 부분에 대해 알아보자. 링크 javascript: 태그의 href 값으로 javascript:를 받을 때, 이는 경로로 취급하지 않고 쌍점(:) 뒤에 오는 것을 자바스크립트 코드로 해석한다. 주로 href에는 경로를 넣기 때문에, 클릭 시 페이지 이동이 일어난다. 하지만 이 경우에는 이동이 일어나지 않는다. 링크 '링크'를 누르면 콘솔 창에 '클릭'이 출력된다. void(0) void는 아무것도 반환하지 않는 것을 말한다. 함수에서도 void는 아무런 결괏값도 반환하지 않는 것으로. 호출 시 undefined를 반환한다. const sum = void(5+5); console.log(sum); // un..
클래스형 컴포넌트를 다루면서 이벤트 핸들러에 함수를 등록하는 과정에서 this를 제대로 불러오지 못했다. 어떻게 작성하는지에 따라 this 값이 달라지는 것이었다. this는 호출자에 의해 동적으로 결정된다. 따라서 this를 바인딩하여 원하는 값으로 불러올 수 있는 4가지의 방법들을 살펴보겠다. 1. bind() 메서드 this.이벤트명 = this.이벤트명.bind(this); 사용자가 만든 일반 함수를 bind 메서드를 통해 this로 사용할 객체를 전달하는 것이다. bind 메서드는 새롭게 this 값이 교체된 함수를 반환한다. 함수를 반환할 뿐이지 호출하지는 않기 때문에 apply, call 메서드와 다르게 이후에 직접 실행해야 한다. 위의 코드는 constructor() 또는 render()에..
this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 식별자이다. 바인딩이란 바인딩이란 식별자와 값을 연결하는 과정 동적으로 결정되는 this this는 호출하는 주체에 따라서 달라진다. console.log(this); // (1) window const a = { name: "realzu", getName() { console.log(this); } } a.getName(); // (2) { name: 'realzu', getName: ƒ getName() } const b = a.getName; b(); // (3) window (1)의 경우, 전역이기 때문에 전역 객체 window를 가리킨다. (2)의 경우, 호출한 객체인 a를 가리킨다. 이는 메서드 호출이라고도 부른다. ..
정규식에 사용할 패턴이 변할 가능성이 있거나, 외부에서 패턴을 가져오는 경우 변수를 사용해야 한다. 변수를 활용하기 위해서는 RegExp 객체의 생성자 함수를 사용해서 정규식을 생성할 수 있다. 기본 사용법 pattern 변수를 먼저 생성한 다음, 정규식 생성자 함수에 값을 넣어준다. 생성자 함수의 경우 빗금(/ /)이 아닌 따옴표("")를 사용한다. const str = "abcdef"; const pattern = "abc"; const regex = new RegExp(pattern); str.match(regex); // true 추가 활용 const pattern = "abc"; const regex1 = new RegExp(pattern, "g"); // 플래그 추가 const regex2 =..
데이터 타입 자바스크립트의 모든 값은 데이터 타입을 지니며, 7개의 데이터 타입이 존재한다. 모두 원시 타입과 객체 타입으로 나누어진다. 데이터 타입이 필요한 이유는 값 저장 시, 확보할 메모리 공간의 크기 결정 값 참조 시, 한 번에 읽어 들일 메모리 공간의 크기 결정 메모리의 2진수를 어떻게 해석할지를 결정 이다. 자바스크립트는 자바, C와 같은 정적 타입 언어와 다르게 동적 타입 언어이다. 따라서 값을 할당하는 "시점"에 변수의 타입이 동적으로 결정된다. 또한 추후에 원하는 타입으로 자유롭게 변경 가능하다. (재할당) 변수는 타입을 갖지 않으며, 값이 타입을 갖는다. 값에 의해 변수의 타입이 동적으로 결정된다고 할 수 있다! 오늘은 데이터 타입 중에서 원시 타입을 알아보겠다. 원시 타입 (primi..
