Life goes slowly...

타입스크립트(TypeScript)의 타입 호환이란 타입스크립트 코드에서 특정 타입이 다른 타입과 잘 맞는지를 의미합니다. 기본적으로 자바스크립트는 객체 리터럴이나 익명 함수 등을 사용하기 때문에 명시적으로 타입을 지정하는 것보다는 코드의 구조 관점에서 타입을 지정하는 것이 더 올바른 코드 방식입니다. interface user { name: string; } inteface login { name: string; } let i: user; i = new login(); 구조적 타이핑 예시 구조적 타이핑이란 코드 구조 관점에서 타입이 서로 호환되는지의 여부를 판단하는 것입니다. interface Users { name: string; } let loginName: Users; // 타입스크립트가 추론한 y..

타입스크립트(TypeScript) 코드의 인터페이스는 객체 내의 프로퍼티를 정의하는 방법입니다. 변수를 선언할 때마다 각각 타입을 지정하는 방법보다 인터페이스를 사용하는 방법이 편하고 재사용도 가능하기에 자주 사용하는 문법입니다. 타입스크립트(TypeScript) 인터페이스란? 프로그래밍 코드에서 상호간에 정의한 약속 혹은 규칙을 인터페이스라고 합니다. 타입스크립트(TypeScript)에서 인터페이스는 다음과 같은 범위에서의 약속을 정의가 가능합니다. 인터페이스를 통하여 값이 따라야 할 제약을 타입으로 표현 가능하며, 인터페이스 타입을 통하여 값의 형태를 서술이 가능합니다. 1. 클래스 2. 배열과 객체를 접근하는 방법 3. 함수의 파라미터 4. 객체의 스펙(속성과 속성의 타입) 5. 함수의 스펙(파라미..

타입스크립트(TypeScript) 고유문법 1. 타입 주석과 타입 추론 타입 주석이란 변수 뒤에 콜론(:)과 타입 이름을 말합니다. 하지만 타입 주석을 생략도 가능합니다. 타입 부분이 생략되면 대입 연산자(=)의 오른쪽 값을 분석하여 변수의 타입을 결정하는데 이를 타입 추론이라고 합니다. 타입스크립트(TypeScript)의 타입 추론 기능은 자바스크립트 코드와 호환성을 보장하는데 큰 역활을 하며, 이 때문에 자바스크립트로 작성된 '. js' 파일을 확장자만 '. ts'의 확장자로 바꾸게 되면 타입스크립트 환경에서도 동작이 가능합니다. //타입 주석 let num: number = 1; //타입 추론 let n = 10; 2. 튜플(Tuple) 튜플(Tuple)은 파이썬과 같은 몇몇 프로그래밍 언어에서 사..

타입스크립트(TypeScript) 코드에서는 어떠한 변수 또는 값의 타입을 표기하기 위하여 타입 표기를 사용합니다. 타입 표기는 식별자 또는 값 뒤에 콜론(:)을 붙여서 value:type 의 형태로 표기합니다. 타입스크립트(TypeScript) 기본 타입 1. Boolean - 타입의 진위 값을 확인하기 위한 타입, 참 또는 거짓을 나타내는 타입입니다. let status: boolean = true; 2. Number - 숫자를 나타내는 타입입니다. let count: number = 1; 3. String - 문자열을 나타내는 타입입니다. let str: string = "Hello World"; 4. Array - 배열을 나타내는 타입으로 요소의 타입까지 정의해야 합니다. let arr: numb..

자바스크립트에는 현재 세 가지 종류가 있습니다. 웹 브라우저에 동작되는 표준 자바스크립트 ES5(ECMA Script 5)와 2015년부터 새로운 버전을 발표하고 있는 ESNext(ES6), 그리고 ESNext에 타입(Type) 기능을 추가한 타입스크립트(TypeScript)가 있습니다. 타입스크립트(TypeScript)란? 타입스크립트는 마이크로소프트가 개발하고 유지하고 있는 오픈소스 프로그래밍 언어로써 2012년에 처음 발표되었습니다. 타입이 있는 자바스크립트라는 단어보다는 정적 타입 시스템을 도입한 자바스크립트라는 뜻으로 프로그램의 예상 동작을 타입으로 나타내고, 그 예상에 맞게 동작할 지의 여부를 실행전에 확인이 가능합니다. 따라서 타입스크립트(TypeScript)는 프로그래밍 언어이면서 도구입니..

npm 패키지란? npm이란 Node.js 패키지 관리자로 Node Package Manager의 약자입니다. Node.js를 설치하게 되면 자동으로 설치되며, npm은 자바스크립트 라이브러리를 설치하고 관리할 수 있는 패키지 매니저입니다. IT 개발자들이 npm명령어를 통하여 자바스크립트 라이브러리를 쉽게 다운로드하고 관리하며 사용할수 있습니다. npm 패키지는 프론트엔드 프로젝트에서 많이 사용되며, 특히 Vue.js, React.js 와 같은 자바스크립트 프레임워크를 사용할 때에 npm으로 프로젝트의 버전을 쉽게 관리할 수 있습니다. Node.js 다운로드 : https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome'..

자바스크립트(Javascript)의 test() 함수 자바스크립트(Javascript)의 test() 함수를 사용하여 주어진 문자열이 정규 표현식을 만족하는지 판별하여 그 여부를 true 도는 false로 반환하여 패턴 형식을 체크하면 됩니다. 일단 정규 표현식이란 "특정 패턴의 문자열"을 찾기 위한 표현 방식이며 형식 언어(Formal Languange)라고도 합니다. 가장 기본적으로는 전화번호, 이메일의 패턴을 찾을 수 있습니다. // 패턴 정규표현식 //전화번호 정규식표현식 var telRegex1 = /\d{3}-\d{4}-\d{4}/; //(\d는 숫자를 의미하고, {} 숫자갯수를 의미합니다.) //휴대폰 정규식표현식 var telRegex2 = /^01([0|1|6|7|8|9])-?([0-9]..

자바스크립트(Javascript)의 attr()과 prop() 차이점 자바스크립트(Javascript)에서 선택자를 통하여 선택한 엘리먼트를 append 하여 새롭게 생성하는 엘리먼트에 속성을 지정할 때 많이 사용하는 attr() 함수와 prop() 함수가 있습니다. attr()과 prop() 함수의 차이점은 무엇이 있을까 알아보도록 하겠습니다. jQuery(제이쿼리) 1.6 버전 이전에는 attr() 함수와 prop() 함수의 차이는 없었지만 1.6 버전 이후에는 구분되어 있습니다. attr() 함수는 엘리먼트가 가지고 있는 속성값이나 정보를 조회할 때 사용하는 함수이며, prop() 함수는 엘리먼트가 가지고 있는 상태를 제어할 때 사용하는 함수입니다. 폼의 속성 값을 확인하거나 변경할 때에는 prop..

자바스크립트(Javascript)의 escape() 함수 자바스크립트(Javascript)의 escape() 함수는 알파벳과 숫자 및 특수문자(*,@,-,_,+,.,/)를 제외한 문자를 모두 16진수로 인코딩하는 함수입니다. escape() 함수는 쉼표와 세미콜론 같은 문자가 쿠키 문자열과의 충돌을 피하기 위하여 사용됩니다. 숫자를 escape() 함수를 사용하여 인코딩하게 되면 문자 타입으로 변환하여 반환됩니다. 아스키 문자가 아니라면 escape() 함수를 통하여 모두 유니코드 형식으로 인코딩 되어 반환됩니다. 그 인코딩 되어 변환된 문자는 16진수 형식으로 표시되며 1바이트 문자는 %XX 형태로 변환되며, 2바이트 문자는 %uXXXX 형태로 변환됩니다. 이러한 처리를 이스케이핑(escaping)이라..

자바스크립트(Javascript)의 console() 함수 자바스크립트(Javascript)의 console 함수는 대부분 디버그 확인용으로 많이 사용하게 되는 함수입니다. 대표적으로 console.log가 있습니다. console 객체는 브라우저의 디버깅 콘솔에 접근할 수 있도록 제공하는 함수로써 동작의 방식은 브라우저마다 다르고, 표준으로 여겨지는 기능도 여러 가지가 있습니다. // console() 함수 종류 console.log(); console.info(); console.warn(); console.error(); console.dir(); //코드 호출 count를 확인할때 사용하는 console 함수 console.count(); //코드 수행시간을 확인할때 사용하는 console 함수 ..

자바스크립트(Javascript)의 fromCharCode() 함수 자바스크립트(Javascript)의 fromCharCode() 함수는 지정된 유니 코드 값을 받아서 문자열로 반환하는 함수입니다. 문자열, 지정된 별도의 숫자 유니코드 인코딩으로 문자열의 각 문자의 정적인 방법입니다. UTF-16 유니코드의 시퀀스로부터 값을 받아야 하며 문자열을 생성하여 반환하는 함수입니다. // fromCharCode() 함수 사용방법 String.fromCharCode(n1, n2, ..., nX) let test1 = String.fromCharCode(9733); let test2 = String.fromCharCode(104,101,108,108,111); let test3 = String.fromCharCod..

자바스크립트(Javascript)의 repeat() 함수 자바스크립트(Javascript)의 repeat() 함수는 주어진 문자열을 옵션의 count 만큼 반복하여 붙인 다음에 새로운 문자열로 반환하는 함수입니다. 문자열을 반복한 값을 반환하는 함수인 repeat() 함수로써 반복문을 사용하여 반환도 가능합니다. 반복의 횟수인 count는 양의 정수여야 하며 무한대보다 작고, 최대 문자열 크기를 넘어서는 안됩니다. // repeat() 함수 사용방법 string.repeat( [반복 count]) let test = "123"; testRepeat = test.repeat(3); console.log(testRepeat); let strTest = ['A', 'B', 'C', 'D', 'E']; for(..

자바스크립트(Javascript)의 includes() 함수 자바스크립트(Javascript)의 includes() 함수는 배열 값(Object)에 특정 값이나 특정 문자가 포함되어 있는지 확인하기 위한 함수입니다. 배열 안에 특정 값이 포함되어 있는지 확인하기 위하여 기본적으로 반복문을 사용하여 확인하기도 합니다. 자바스크립트(Javascript)의 indexOf() 함수를 사용하여 반환도 가능하지만 true/false를 반환하는 includes() 함수를 사용하기도 합니다. // includes() 함수 사용방법 object.includes( [검색 문자], [검색 할 위치]) let test = [1,2,3,4,5,1,2,3] console.log(test.includes(3)); console.l..

자바스크립트(Javascript)의 History 인터페이스 자바스크립트(Javascript)의 History 인터페이스는 브라우저의 세션 기록을 불러온 탭 도는 프레임의 방문 기록을 조작할 수 있는 방법을 제공하는 인터페이스입니다. History 인터페이스는 어떠한 속성에도 상속되지 않는 특징을 가지고 있습니다. history의 객체는 사용자 히스토리에서의 앞 뒤 이동이 가능하도록 유용한 함수와 속성들을 제공합니다. 하지만 사용자의 개인정보를 보호하기 위하여 이 객체에 접근하는 방법을 일부 제한하기도 합니다. 간단하게 요약하자면 History 인터페이스는 현재 열고 있는 페이지의 이동 상태를 확인 할수 있고 이동 및 조작이 가능합니다. //History 인터페이스 사용방법 history.length//..

자바스크립트(Javascript)의 removeEventListener() 함수 자바스크립트(Javascript)의 removeEventListener() 함수는 등록되어 있는 이벤트 리스너를 제거하는 함수입니다. 이벤트를 제거할때에는 제거할 엘리먼트(element) 요소가 필요하고, click이나 keypress 등의 이벤트 타입이 필요하며, 제거할 이벤트 callbakc 함수가 필요로 합니다. removeEventListener() 함수는 EventTarget에 등록되었던 이벤트 리스너를 제거하는데, 이 이벤트 리스너는 이벤트 종류와 이벤트 리스너 함수 자체의 조합으로 식별되어 제거되며, 제공되었던 다양한 옵션의 일치하는 이벤트 리스너만 제거가 가능합니다. //removeEventListener() ..