Boolean Number String Object Array Tuple Enum Any Void Null Undefined Never Number let num: number = 100; Boolean let isLoggedIn: boolean = false; Array let arr: number[] = [1, 2, 3]; let arr: Array = [1, 2, 3]; Tuple 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열형식 정의하지 않은 타입, 인덱스로 접근시 오류 발생 let arr: [string, number] = ['hi', 10]; arr[1].concat('!'); // Error, 'number' does not have 'concat' arr[5] = 'hello..

/\\/ 정규 표현식(reqular expression)은 일정한 패턴을 가진 문자열의 집합을 표현하기 위해 사용하는 형식 언어다. 정규 표현식은 문자열을 대상으로 패턴 매칭 기능을 제공한다. 패턴 매칭 기능이란 특정 패턴과 일치하는 문자열을 검색하거나 추출 또는 치환할 수 있는 기능 정규표현식은 문자의 패턴을 나타내는 객체다. 자바스크립트에서 정규 표현식은 RegExp 객체로 표현된다. 정규 표현식 리터럴은 한 쌍의 슬래시(/) 문자 사이에 위치한 문자들이다. 따라서 정규 표현식에 대한 자바스크립트 코드는 다음과 같은 형태를 지닌다. var pattern = /s$/ RegExp 리터럴과 객체 생성 문자열, 숫자 같은 원시 자료형 리터럴은 프로그램 내에서 사용될 때마다 같은 값으로 평가된다. {}와 [..

Javascript의 짧은 역사 자바스크립트는 빠른 사용을 위해 설계되었으며 수백만 줄의 어플리케이션들을 작성하기 위해 만들어진 완벽한 도구이지만, 자바스크립트에 심각한 문제 또한 있다. TypeScript 정적 타입 검사자 프로그램을 실행시키기 전에 값의 종류를 기반으로 프로그램의 오류를 찾는다. Typescript의 타입 검사자는 일반적인 오류를 최대한 많이 검출하면서 올바른 프로그램을 만들 수 있게 설계되었다. 런타임 특성 Typescript는 Javascript의 런타임 특성을 가진 프로그래밍 언어이다. 삭제된 타입 Typescript의 컴파일러가 코드 검사를 마치면 타입을 삭제해서 결과적으로 컴파일된 코드를 만든다. 코드가 컴파일되서 나오면, 결과로 나온 일반 JS 코드에는 타입 정보가 없다. ..

{{ item.name + item.conditionalPolicyId }}

class Router { constructor(routes) { if (!routes) { console.error("Can not initialize routes, need routes!"); } this.routes = routes; for (const key in routes) { const route = routes[key]; if (key.indexOf(":") > -1) { const [_, routeName, param] = key.split("/"); this.routes["/" + routeName] = route; delete this.routes[key]; } } } init(rootElementId) { if (!rootElementId) { console.error("Can no..

const API_END_POINT = API_END_POINT export const request = async (url, option = {}) => { try { const fullUrl = `${API_END_POINT}${url}` const response = await fetch(fullUrl, option) if (respone.ok) { const json = await response.json() return json } throw new Error('API 통신 실패') } catch (e) { alert(e.message); } } 참고: https://prgms.tistory.com/113

index.html index.js import App from './app.js' new App({ el: '#App' }).setup() app.js export default class App { constructor(props) { this.props = props this.bindEvents() } setup() { // 클래스 컴포넌트 인스턴스 생성 // 리스트 조회와 같은 비동기 통신 // 원래는 render을 호출하지만 인트로 페이지 표시와 같은 처리가 필요할 때 init 호출 } bindEvents() { // 각 클래스 컴포넌트에서 발생하는 이벤트를 받아서 처리하는 함수(on) // addEventListener 처리 } init() { // 서비스 첫 시작에서 인트로 표시와 같은 동작..

/** * 로컬 스토리지에서 조회합니다. */ loadStorage() { // 키(item-title)를 가지고 호출합니다. const data = localStorage.getItem('item-title'); try { // 호출된 값은 문자열로 되어있기 때문에 JSON.parse를 해줍니다. const playList = JSON.parse(data); } catch (e) { // 스토리지는 모바일에서 용량 문제 등으로 에러가 발생할 수 있기 때문에 // try - catch 처리를 잘해줍니다. console.error(e); } } /** * 로컬 스토리지에 저장합니다. */ saveStorage() { try { // JSON.stringify 를 통해 문자열로 저장해줍니다. localSto..