본문 바로가기
TypeScript 강좌 16. 복합형 객체, JSON, MAP 사용 방법 객체TypeScript 객체는 JavaScript의 핵심 데이터입니다만, 클래스 등을 정의하지 않고 편하게 한 데이터만 처리할 때 사용합니다. 배열 요소에 액세스하는 방법은 인덱스(숫자)지만, 오브젝트는 문자열입니다. 키, 이름이 변수 등에서 사용할 수 있는 문자만으로 구성되었다면, 이름(문자열)을 그대로 쓸 수 있습니다. 하지만, 공백이나 마이너스 등을 포함하는 경우엔 큰따옴표나 작은따옴표로 묶어야 합니다. 또한, 키 이름에 변수를 쓴다면 [ ]로 묶습니다. const key = 'favorite drink'; const smallAnimal = { name: "작은동물", favorite: "작은옷", 'home town': "관악구 경찰서 있는 곳", [key]: "스트링 제로"}; // 참조는 '.. 2020. 2. 21.
TypeScript 강좌 15. 복합형 for of 및 iterable 반복자 루프는 for ... of 사용루프 작성 크게 3가지 방법이 있습니다. C언어에서 유래한 루프는 예전부터 존재했고 루프 사용 시 변수가 필요합니다. Typescript forEach()는 ES5에서 추가되었고, 언어 사양의 업데이트와 함께 for ... of 구문도 추가되었습니다. 이 구문은 Array, Set, Map, String 등의 반복 가능한(iterable) 객체(오브젝트)를 대상으로 루프가 돕니다. 배열의 경우 인덱스 값이 필요한 경우 entries() 메소드를 사용합니다. 타입스크립트 코드를 함수형 스타일로 통일하기 위해 for ... of를 금지하고, forEach()만 사용한다는 코딩 표준을 정하는 회사도 있습니다(Airbnb). var iterable = ["김일성", "원균", "기.. 2020. 2. 18.
TypeScript 강좌 14. 복합형 : 배열 튜플 스프레드 사용법 복합형다른 원시형 또는 복합형을 내부에 포함하여 큰 데이터로 정의하는 데이터 자료형을 타입스크립트 「복합형」이라고 합니다. 배열, 객체 등이 이에 해당합니다. 클래스를 정의하고 만드는 인스턴스도 복합형이며, 리터럴로 정의하는 배열 및 오브젝트들을 소개합니다. 배열배열은 TypeScript에서 많이 사용되는 리터럴입니다. 스프레드 구문, 분할, 할당 등이 더해져, 다양한 방법을 구사하여 함수형 언어처럼 쓰이기도 합니다. 배열은 다음에 소개하는 개체뿐만 아니라 리터럴로 정의할 수 있는 타입스크립트 복합형 중 하나입니다. // 변수에 대입. 자료형을 부여하고 [ ] = 여기에 요소를 삽입합니다// 자료형이 똑같으면, 자료형 생략 가능합니다const years: number[] = [2019, 2020, 202.. 2020. 2. 15.
TypeScript 강좌 13. undefined, null 프리미티브 속성 undefined와 nullJavaScript / TypeScript에 undefined와 null이 있습니다. 다른 언어에는 null(또는 None, nil 이라고도 부름)만 있는 경우가 대부분이지만, JavaScript / TypeScript에는 2종류로 등장합니다. 이 가운데 타입스크립트 undefined는 정의되지 않거나 아직 값이 할당되지 않은 변수를 참조할 때, 객체의 정의되지 않은 속성에 접근하면 리턴되는 값입니다. TypeScript는 클래스 등의 형식 정의 기능이 있어 코딩이 쉽다고 알려져 있는데, "undefined 발생으로 코드를 사전에 체크해 준다"는 것이 그 이 키워드의 본질이라는 생각이 듭니다. let favoriteGame: string; // 아직 대입하지 않아서 undefi.. 2020. 2. 7.
TypeScript 강좌 12. string Literal Primitive (문자열) TypeScript string literal (스트링 리터럴)타입스크립트 string 리터럴은 문자열을 표현합니다. 작은따옴표, 큰따옴표로 묶어 표현할 수 있습니다. 작은따옴표와 큰따옴표 중간에 줄 바꿈이 들어가면 "끝이 없다"고 오류가 납니다만, 역 따옴표로 여러 줄을 묶을 수 있어서 여러 줄 텍스트를 표현할 수 있습니다. JavaScript는 UTF-16이라는 문자 코드를 채용하고 있습니다. Java와 같습니다. 이모티콘(그림 문자) 등 일부 문자열은 하나의 문자로 데이터를 취급하지 못하여 두 문자로 표현할 수 있습니다. 이를 게이트 짝(게이트 쌍)이라고 합니다. // 값을 표시 // 싱글 쿼트, 더블 쿼트, 백 쿼트로 묶기 console.log('hello world'); // 변수에 대입. 변수.. 2020. 2. 6.
TypeScript 강좌 6. 프로젝트 환경과 명령어 실행 프로젝트 폴더 공유 후 환경 구축 팀 내부에선 git 등으로 TypeScript 프로젝트 소스 코드를 공유합니다. JavaScript 계열 프로젝트는 그 안에 package.json, package-lock.json이 있습니다. 타입스크립트 프로젝트 배포 시 환경 구축을 하는 등 공유한 사람은 개발 환경을 손쉽게 재현할 수 있습니다. npm install dependencies와 devDependencies를 설치 npm install --prod dependencies만 설치 npm ci dependencies와 devDependencies를 설치 package-lock.json은 갱신하지 않음 npm ci --prod dependencies만 설치 package-lock.json은 갱신하지 않음 설치.. 2020. 1. 8.
TypeScript 강좌 5. Node.js 환경 체험하기 Node.js 생태계를 체험하자 TypeScript는 JavaScript로의 변환을 목적으로 만들어진 언어입니다. 공식적인 처리 루틴이 있고, 변환하면 JavaScript가 생성됩니다. 공부 목적으로 실행하려면 현재 몇 가지 옵션이 있습니다. 이 가운데 우선 안정적으로 사용할 수 있고, 비교적 간단한 것은 ts-node 입니다. 타입스크립트 웹 사이트 playground 1 : 공식 컴파일러로 변환하여 브라우저에서 실행tsc + Node.js : 공식 컴파일러로 변환하고 Node.js에서 실행babel + ts-loader + Node.js : Babel 통해 공식 컴파일러로 변환하고 Node.js에서 실행babel + @ babel / preset-typescript + Node.js : Babel에서.. 2019. 12. 17.
TypeScript 강좌 4. 호환성 tsconfig.json TypeScript와 호환성인터넷에서 모든 사용자가 볼 수 있는 사이트를 만든다고 했을 때, 현재, 기능적인 하한선은 Internet Explorer 11 4입니다 (그러나, 우리나란 IE6까지 호환하는 걸 원하는 막장 상황). Google 검색 엔진 로봇도 이와 거의 똑같은 기능(const, let이 있는 클래스 제외)인 Chrome 41로 고정되어 있습니다. 그렇지만, 버전업이 더이상 지원되지 않는 iOS 및 Android 스마트폰의 경우엔 최신 기능이 작동하지 않을 수 있습니다. 브라우저 이외에, Google Apps Script가 ECMAScript3에만 대응하고 있습니다. 브라우저 호환성 100%를 만들고 유지한다는 것은 개발 자원이 아무리 많아도 불가능합니다. 그래서 공수와 현실적인 부분을 고.. 2019. 11. 11.
TypeScript 강의 3. 자바스크립트 버전과 ECMAScript JavaScript 버전최근 JavaScript 사양은 커뮤니티에서 논의되고 있습니다. TC39라는 ECMA 내부의 Technical Committee가 바로 그곳입니다. 클래스 등 대폭적인 기능 추가가 이루어진 ES6는 정식 릴리즈 때 ECMAScript 2015라는 정식 명칭이 부여됐으며, 이후로는 릴리즈 연도를 버전 이름으로 사용하고 있습니다. 논의 결과와 현재 올라있는 제안들은 모두 GitHub에서 볼 수 있습니다. https://github.com/tc39/proposals 기능 단위로 제안이 이루어집니다. 처음에는 stage 0에서 시작하여 stage 1, stage 2으로 분기됩니다. 처음에는 아이디어로 시작하여 서서히 제대로 된 사양과 데모, 참고 구현 등 잘 동작한다는 결과(검증)를 요구.. 2019. 11. 10.
TypeScript 강의 2. 웹 개발 위상과 도입해야할 이유 TypeScript 웹 개발 분야에서의 위상 프론트엔드 개발이 다양해지고 있는 동시에 개발의 동향 또한 다양해졌습니다. 일례로, 브라우저에서 동작하는 JavaScript를 직접적으로 쓰지 않게 되었다는 것입니다. JavaScript는 2015년 이전에는 보수적인 업데이트가 이루어졌었습니다. Netscape사(현 Mozilla)가 개발하여 기업 간 컨소시엄을 통해 사양이 책정되고 있었죠. 클래스를 도입하는 대규모 업데이트를 일단 목표로 했지만(ECMAScript 4), 당시엔 완성되지 못했습니다. 그러나 ECMAScript 2015 시점에서 대폭적인 업데이트가 더해져 더 개방적인 커뮤니티인 TC39에서 논의하게 되었습니다. 그러나 브라우저의 기본 언어인, 서버 어플리케이션(응용 프로그램) Java 또는 P.. 2019. 11. 7.
TypeScript 강의 1. 프론트엔드 개발자와 TS 직장에서 바로 사용할 수 있는 TypeScript : 서문 - 본 문서의 위치 서문본 문서의 위치이 문서는 아직 미완성입니다. 웹 프론트엔드 개발을 배울 때 JavaScript를 거치지 않고 처음부터 TypeScript(타입스크립트)를 배운다는 시점에서 작성되었습니다. TypeScript는 기본적으로 JavaScript의 상위 호환이며, JavaScript는 오랜 역사만큼이나 안정적인 문법 또한 많습니다. 따라서 TS 문법을 배운다는 뜻에는 최신 웹 소스 코드 작성 기법을 배운다는 측면 또한 강합니다. 현재 B2B 기업, B2C가 아닌 기업들도 웹 프론트엔드 개발자가 부족하다고 말합니다. 이전에는 기업 시스템의 프론트엔드 개발자 업무라면 DB 테이블이 있고, 각 행의 CRUD(Create : 생성, Re.. 2019. 11. 3.