ABBO 기술 블로그

이전 글에서는 기본적인 객체는 인터페이스로 만든다고 하였습니다. 하지만 기존의 class는 없을까요? 그렇지 않습니다. TypeScript는 클래스 또한 존재합니다. 기존에 생성되었던 인터페이스 대신에 클래스로 변환을 해보려고 합니다. class Abbo { public group: string; public nowYear: number; public groupMessage: string; constructor(group: string, nowYear: number, groupMessage: string) { this.group = group; this.nowYear = nowYear; this.groupMessage = groupMessage; } } 위의 소스를 보시다시피 어디서 접근이 가능한 것인지..

이번 글에서는 TypeScript 모델을 만들어보려고 합니다. 보통 모델은 다른 파일에 저장하는 경우가 많죠. TypeScript는 이를 인터페이스(interface)라고 칭합니다. 직접 소스를 보시면 이해가 빠를거 같습니다. interface Abbo { group: string; nowYear: number; groupMessage: String; } 위의 소스를 index.ts 파일 내에 상단에 입력합니다. 그리고 이번에는 기존에 각각 떨어져 있던 const를 합쳐줍니다. const niyoung = { group: "ABBO", nowYear: 2020, groupMessage: "Happy new Year!!" } 자 이렇게 하나의 객체가 만들어졌습니다. 그럼 이번에는 기존의 helloWorld..

이번 시간에 다루어볼 내용은 경로(path)입니다. 모든 소스가 한 디렉터리 안에 있는건 찾기도 싫고 보기는 더 싫겠죠. 그렇기에 이제 디렉터리 분류를 할 시기가 온 거 같습니다. 먼저 디렉터리를 생성해보겠습니다. index.ts 파일이 있는 같은 레벨에 src라는 폴더와 dist라는 폴더를 생성합니다. 그 다음 tsconfig.json 파일로 이동하여 수정을 해야 합니다. 컴퓨터는 파일명 앞에 경로가 없으면 나와 같은 레벨로 밖에 인식을 못합니다. 아까 index.js로 되어 있던 "include" 가 바로 그것이죠. 그래서 아래와 같이 바꿔줍니다. "include" : ["src/**/*"] 여기서 **은 src/ 뒤에 있으므로 src 디렉터리 내에 모든 디렉터리를 의미합니다. 예를 들어 src 내에..

이번에는 컴파일 할때마다 yarn start 명령어를 치는 번거로웠던 작업을 해소하기 위해 글을 작성해보았습니다. 먼저 터미널에서 'tsc 시계'를 설치합니다. yarn add tsc-watch --dev --dev라는 옵션이 붙게 되는데 이는 개발중일 때만 작동을 하겠다라는 의미입니다. 정말 쉽게 설치가 완료되었습니다. 다음으로 설정할 것은 package.json 입니다. 기존에 스크립트 구역에 설정되었던 값을 변경하려고 합니다. "scripts" : { "start" : "tsc-watch --onSuccess \" node index.js\"" } 와 같이 치환해줍시다. 의미는 컴파일이 성공하였을 때마다(--onSuccess 옵션) tsc-watch가 작동하여 index.js를 생성한다는 의미입니다..

이번에 다룰 내용은 타입스크립트에서 사용하고 있는 문법과 그에 대한 정의입니다. 이전에는 화면적으로 이동하고 파일을 생성하는 일이 발생하여 동영상으로 제작을 하였지만 이번에는 소스 코드를 예시로 들며 설명하는 것이 좋을 것 같습니다. 먼저 기존에 만들어두었던 index.ts 파일로 이동합니다. 다음과 같이 입력해보았습니다. ABBO 그룹에게 2020년을 맞아 인사를 하는 코드를 간단하게 만들었습니다. 자바스크립트에서 기존의 문법과는 조금 다른 방식으로 구성이 되어 있습니다. 약간 느낌이 Kotlin 언어와 비슷합니다. 기본적인 Lambda를 제공하고 String 문자열의 내부 내용을 '+'로 연결하지 않고 ${selector}의 형태로 사용하였습니다. 물론 '+'로 사용하여 작성하는 부분이 편할 때도 있..

이번 글에서는 console.log를 사용하여 터미널에 출력이 되도록 설정하는 작업을 하려 합니다. 먼저 package.json 파일에 들어가서 name과 같은 레벨에 다음과 같이 소스를 추가합니다. "scripts": { "start": "node index.js", "prestart": "tsc" } script는 yarn 명령어를 사용하여 터미널에 어떤 명령어가 실행될지 설정하는 곳입니다. 위와 같이 작성하면 yarn start 명령어를 하였을 때 아래와 같은 효과가 발생하죠 typescript > tsc typescript > node index.js 그 다음으로 index.ts 파일에서 alert로 되어 있던 부분을 console.log로 변경합니다. 이후 터미널에 yarn start 명령어를 ..

기본적인 준비물은 여기 글에서 확인 가능하세요! 먼저 Visual Studio Code에서 아무 디렉터리를 하나 생성하고 초기화까지 진행합니다. 그 후, tsconfig.json이라는 파일을 root에 생성합니다. 다음으로 아래와 같이 입력해줍시다. { "compilerOptions": { "module": "commonjs", "target": "ES2015", "sourceMap": true }, "include": ["index.ts"], "exclude": ["node_modules"] } tsconfig.json 파일은 타입스크립트의 기본적인 설정으로 컴파일과도 연관이 있습니다. 모듈은 기본적인 JS를 사용하므로 'commonjs' target은 ES의 버전으로 2015~2020까지 있습니다. ..

이전 글에서 TypeScript의 프로젝트 생성 방법과 기본적인 개념에 대해 짚어보았습니다. TypeScript에 대해 알아보자 Author: 주니용 2020년 경자년 새해복 많이 받으세요 :) 이번 연도에 처음으로 다루어볼 내용은 TypeScript입니다. TypeScript는 JavaScript의 확장 버전으로 한국에서는 통상 자바스크립트의 후손이라고 일 abbo.tistory.com 제목과 그대로 TypeScript를 응용하여 요새 유명한 블록체인을 개발할 수 있을까라는 의문이 생겼습니다. 결론을 먼저 말씀드리면, 가능합니다. 아직 블록체인은 비트코인이라는 이름으로만 들어봤지 많이 생소한 단어이고 '비트코인의 몰락'으로 인해 안좋거나 부정적인 단어라고 생각하시는 분들이 많습니다. 네 그렇습니다. 비..