- TypeScript (~.ts)
- Node.js Modules
- VSCode
- Code Convention
- .vscode 환경 구성
- GitHub
- GitHub 설정
- Git Convention
- .github 환경 구성
- TypeScript 환경 구성
- TypeScript 언어 개요
TypeScript (~.ts)
JavaScript의 상위 버전으로 ES7 이하의 표준을 포함 한다.
MS에서 개발하고 관리하는 오픈소스
정적 타입 언어로 컴파일 필요
Node.js Modules
Package Manager
npm
yarn
pnpm
Excel 파일 관리
exceljs 4.3.0 : Excel 읽기
excel4node 1.8.2 : Excel 생성
Text 파일 관리
decompress 4.2.1 : zip 파일 압축 해제
iconv-lite 0.6.3 : 문자셋 변경
REST API와 Web Service
node-fetch 3.3.1
ws 8.13.0
Template
ejs 3.1.9
암복호화
crypto 1.0.1
Logger
winston 3.9.0
Database
TypeScript (--save-dev)
typescript 5.1.3
tsconfig.json 설정 파일
ts-node 10.9.1
tsc-alias 1.8.6
tsconfig-paths 4.2.0
types
@types/ejs: 3.1.2
@types/jquery: 3.5.16
@types/node: 20.3.1
@types/webpack: 4.41.31
문서 포맷 정리
eslint (--save-dev) : 코드 품질 향상
@typescript-eslint/parser
@typescript-eslint/eslint-plugin
.eslintrc.json 설정 파일
prettier 2.8.8 (--save-dev) : 포매터
reflect-metadata 0.1.13 : Decorators
테스트 자동화
기타 미분류
uuid 9.0.0 : GUID 생성
ajv 8.12.0 : JSON Schema Validator
class-transformer 0.5.1 : 역직열화
VSCode
Code Convention
JSDoc 사용
ESLint 사용
TSLinit 사용
Prettier 사용
.vscode 환경 구성
.vscode/ 폴더
extensions.json
dbaeumer.vscode-eslint : 코드 품질 향상
esbenp.prettier-vscode : 포매터
psioniq.psi-header : 파일 상단에 주석을 자동으로 달아 준다.
settings.json에 설정 필요
{ "recommendations": [ "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "psioniq.psi-header" ] }settings.json
{ "psi-header.config": { "forceToTop": true, "license": "Custom", "license-text": "GNU General Public License v3.0", "author": "pnuskgh", "authorEmail": "pnuskgh@gmail.com", }, "psi-header.license-text": ["GNU General Public License v3.0"], "psi-header.templates": [ { "language": "*", "template": [ "<>/< >", "", "@version < >", "@license < >", "@author < > << >>" ] } ], }
GitHub
GitHub 설정
Labels
bug
documentation
duplicate
enhancement
good first issue
help wanted
invalid
question
wontfix
Milestones
Pull Request Template 제작
.github/PULL_REQUEST_TEMPLATE.md
## 요약
## 작업 내용
## 참고 사항
## 관련 이슈 - Close #이슈번호
Issue Template 제작
"Settings > General > Feature > Issues > Set up templates" 메뉴
bug_report.md
feature_request.md
.github/ISSUE_TEMPLATE/~.md
--- name: Bug template about: 버그 발생 시 사용하는 템플릿입니다 title: "버그 리포트" labels: "\\U0001F41B BUG" assignees: --- # 버그 리포트 ## 어떤 버그인가요? > 버그에 대해 알려주세요
## 어떤 상황에서 겪으셨나요? > 버그를 겪으신 상황을 알려주세요
## 참고할만한 자료가 있을까요? > 참고자료가 있다면 첨부해주세요
Git Convention
형상 관리를 위한 branch 전략
master : 제품으로 출시될 수 있는 브랜치
develop : 다음 출시 버전을 개발하는 브랜치
feature : 기능을 개발하는 브랜치
release : 이번 출시 버전을 준비하는 브랜치
hotfix : 출시 버전에서 발생한 버그를 수정 하는 브랜치
Merge Request > 동료 Review > Merge
Commit message 규칙
[Type] commit message
type
feature : 새로운 기능 추가
fix : 버그 수정
docs : 문서 업데이트
style : frontend의 style 수정
refactor : 코드의 리팩토링
test : 테스트코드 업데이트
env : 환경 구축
.github 환경 구성
.github/ 폴더
workflows/ 폴더
test.yaml : 테스트 자동화 설정
TypeScript 환경 구성
npm install typescript --save-dev
npx tsc --version
npm install typescript -g #--- Global 환경에 설치
npm list -g #--- Global package 조회
npm list -g --depth 0 #--- Global package 조회
tsc --version
npm install ts-node --save-dev
npm install tsconfig-paths --save-dev
npm install tsc-alias --save-dev
npm install @types/ejs --save-dev
npm install @types/jquery --save-dev
npm install @types/node --save-dev
npm install @types/webpack --save-dev
#--- 코드 자동 생성용
npm install class-transformer --save #--- 역직열화
npm install reflect-metadata --save #--- Decorators
npm install ajv --save #--- JSON Schema Validator
npm install tslint --save-dev
# eslint
# prettier
# mocha
tsc --init #--- tsconfig.json 파일 생성
vi tsconfig.json
"compilerOptions": {
"target": "es2016",
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"module": "commonjs",
"rootDir": "./",
"moduleResolution": "node",
"baseUrl": "./",
"paths": {},
"rootDirs": [],
"types": [ "node" ],
"allowUmdGlobalAccess": true,
"allowJs": true,
"checkJs": true,
"sourceMap": true,
"removeComments": false,
"noEmit": false,
"esModuleInterop": true,
"preserveSymlinks": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictBindCallApply": true,
"strictPropertyInitialization": true,
"noImplicitThis": true,
"alwaysStrict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"skipLibCheck": true
},
"include": [ "**/*.ts" ],
"exclude": [
".gulp-scss-cache", ".nyc_output", ".vscode",
"coverage", "dist", "library",
"logs", "manual", "node_modules",
"sessions", "themes", "upgrades",
"zzstudy", "zztest",
"**/*.spec.ts"
]
vi tslint.json
tsc #--- 모든 *.ts 파일 컴파일
tsc --project tsconfig.json #--- 모든 *.ts 파일 컴파일
tsc -w #--- 수정된 모든 *.ts 파일 컴파일
# zztest.ts 파일을 zztest.js 파일로 변환
# tsc zztest.ts #--- 하나의 ts 파일 컴파일TypeScript 언어 개요
//--- typeof
// string
// number
// boolean
// undefined
// function
// array : Array.isArray(~)
//--- JavaScript Built-in types : typescript types
// Number : number
// String : string
// BigInt : bigint
// Boolean : boolean
// Symbol : symbol
// Null : null
// Undefined : undefined
// Object : object
// : unknown
// : never
// : object literal
// : void
// : ~[] - 배열
// : [ ~, ~ ] - Tuples
// : (~: ~) => ~ - 함수
// : any
//--- Type과 interface
type MyBool = true | false;
type StringArray = Array;
interface User {
name: string;
id: number;
}
const user: User;
//--- Generic (Type)
interface Backpack {
add: (obj: Type) => void;
get: () => Type;
}
//--- Class
class VirtualPoint {
x: number;
y: number;
constructor(x: number, y: number) {
this.x = x;
this.y = y;
}
}