frontend/javascript 6

Typescript 101: 간단한 사용법을 익혀보자

typescript basics typescript: superset of javascript 생성 후 javascript로 컴파일 해야됨. npm install typescript tsx myfile.txType Interface typescript는 타입이 선언되지 않을 경우 타입을 추론함. 그래서 아래와 같이 number로 선언된 변수에 다른 타입의 값을 넣으면 컴파일 에러가 발생한다. let myId = 5; myId = 'test string';Type Annotation typescript가 위에서 보았듯이 타입을 추론해주기는 하지만, 최대한 이를 명시해주는게 좋다. 변수의 타입 명시는 직관적이다. python typing이랑 거의 흡사한듯 let studentId: number..

frontend/javascript 2021.03.22

ES6: let, const 공통점과 차이점

es2015에 let, const가 추가됨기존 자바스크립트의 var의 문제점// var 문제점 // 재선언 var a = 'test' var a = 'test2' // hoisting c = 'test' var c 이런 문제점 때문에 생간 let, const는 모두 재선언이 불가능하다.이게 가능한 이유는 scope의 차이기본적으로 var로 선언한 변수는 Function-level scope를 가짐. 그래서 전역으로 선언하면 전역 변수로 선언이 된다.하지만 let은 Block-level scope이기 때문에 전역에 선언하더라도 보이지 않는 특정 블록 내에만 존재var varValue = 1; console.log(window.varValue); //1 let letValue = 1; console.log(..

frontend/javascript 2018.10.16

a tag 비활성화 - disable a tag

a 태그를 disabled 시키려고 찾아보다가 a tag는 disabled가 없고 href를 없애거나 를 사용하면 된다고 해서 javascript:void(0)이 뭔지 찾아보았다.Mozilla 공식 dev 문서에서는 다음과 같이 얘기하고있다.void 연산자는 주어진 식(expression)을 실행하고 undefined를 반환합니다즉, javascript void 안의 표현식을 실행하고, 이후 undefined를 반환하기 때문에 a 태그를 무력화시킨다.다음 두 코드는 똑같이 a 태그를 비활성화 하는 코드이다. href 안에 #(hash)값 없이 해쉬만 넣으면 아무 일도 일어나지 않기 때문이다.(javascript:;도 javascript:void(0)과 동일한 역할을 한다.) 물론 다음 두 방법 말고도 다..

frontend/javascript 2018.03.25

a tag 비활성화 - disable a tag

a 태그를 disabled 시키려고 찾아보다가 a tag는 disabled가 없고 href를 없애거나 를 사용하면 된다고 해서 javascript:void(0)이 뭔지 찾아보았다.Mozilla 공식 dev 문서에서는 다음과 같이 얘기하고있다.void 연산자는 주어진 식(expression)을 실행하고 undefined를 반환합니다즉, javascript void 안의 표현식을 실행하고, 이후 undefined를 반환하기 때문에 a 태그를 무력화시킨다.다음 두 코드는 똑같이 a 태그를 비활성화 하는 코드이다. href 안에 #(hash)값 없이 해쉬만 넣으면 아무 일도 일어나지 않기 때문이다.(javascript:;도 javascript:void(0)과 동일한 역할을 한다.) 물론 다음 두 방법 말고도 다..

frontend/javascript 2018.03.24

I.E.에서 .includes 함수 오류

특정 요소가 array 안에 있는지 확인하기 위해 includes를 사용했는데, 윈도우에서 다음과 같은 오류가 발생했다.개체가 'includes' 속성이나 메서드를 지원하지 않습니다. 찾아보니 includes가 엣지 이외에서는 거의 지원되지 않는다고 한다.그래서 indexOf를 찾아보니 이것도 I.E.에서 약간의 이슈가 있는것 같지만 기본적으로 잘 동작한다.// before code if (arrayName.includes(sth)) { ... } // after code if (arrayName.indexOf(sth) !== -1) { ... } python을 사용해서 backend 코딩을 할 때에는 브라우저 이슈를 전혀 생각하지 않았는데, 앞으로는 브라우저간 호환을 생각하고 코딩할 수 있는 습관을 길..

frontend/javascript 2018.03.20