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)는 프로그래밍 언어이면서 도구입니..

자바스크립트(Javascript)의 moment.js 자바스크립트(Javascript)에서 가장 많이 사용되는 날짜 및 시간을 다루는 라이브러리입니다. date() 함수보다 직관적이고 일관성이 있는 라이브러리로 현재에는 개발이 중단된 라이브러리입니다. 개발이 중단이 되었지만 가장 오래된 라이브러리로써 현재까지도 많이 사용되고 있습니다. moment.js 라이브러리 설치 $ npm install moment moment.js 라이브러리 사용방법 import moment from 'moment'; or const moment = require('moment'); moment.js 라이브러리 활용 /** 현재 날짜 및 시간*/ let now = moment(); console.log(now.format());..

자바스크립트(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]..

자바스크립트의 제이쿼리(jQuery)를 사용하여 목록 List의 데이터중에 체크박스(checkBox)에 체크된 행(Row)을 삭제하는 방법입니다. 체크박스(checkBox)의 체크된 행 삭제하기 삭제 선택 No. 아이디 이메일 1 Test01 Test01@gmail.com 2 test02 test02@naver.com 3 test03 test03@gmail.com 가장 먼저 체크박스(checkBox) 목록 데이터를 반복문으로 체크된 데이터만 조회하여 관련된 상위 엘리먼트(parentElement)를 확인하여 관련돼 행(Row)을 삭제하면 됩니다.

자바스크립트의 제이쿼리(jQuery)를 사용하여 일정 시간 뒤에 콜백 함수를 실행하는 방법에는 .setTimeout() 함수를 사용하게 됩니다. .setTimeout() 함수 이외에도 일정 시간이 지난 후 애니메이션 큐를 지연하여 실행하기 위한 함수로 .delay() 함수가 있습니다. jquery(제이쿼리)의 .delay() 함수 jQuery(제이쿼리)의 .delay() 함수는 일정 시간이 경과한 후에 다음 코드를 강제적으로 실행하도록 지연시간을 생성하는 함수입니다. 단 큐를 가진 애니메이션에만 적용되는 함수입니다. 실행 중인 함수를 정해진 시간만큼 중지하기도 하는 함수입니다. // .delay()함수 사용방법 .delay( [중지할 시간] , [ queueName ] ) //p 태그의 엘리먼트가 5초후..

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

자바스크립트의 제이쿼리(jQuery)를 사용하여 현재 선택한 요소와 함께 이전에 선택한 요소도 함께 선택하는 함수입니다. .addBack() 메소드는 현재 선택된 요소의 이전 요소를 한번 더 찾아주는 필터링 역할의 함수입니다. jquery(제이쿼리)의 .addback() 함수 jQuery(제이쿼리)의 .addback() 함수는 현재 선택한 요소와 이전 요소를 함께 동시에 효과를 나타내는 함수입니다. //함수 사용방법 $([선택자]).addBack(); $([선택자]).addBack([선택자]); //ul의 하위 태그중에서 li를 선택하고 처음에 선택했던 ul 태그도 함께 선택하기 $("ul").find("li").addBack();

자바스크립트(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(..