[typescript] 개발환경 구축하기

in SteemCoinPan •  7 months ago 

잡설

사실 초창기 nodejs 의 경우에는 nodejs 만 설치 해서 바로 실행하면 되었는데, 기술이 발전함에 따라 다양한 환경의 배포, 테스트 및 빌드를 손쉽게 지원 하기 위한 다양한 설정이 도입됨에 따라 복잡도가 올라간 것 같다.

typescript 개발환경 구축하기

가장 빠르게 구축하는 방법은 degit 을 사용하여 누군가 만들어 놓은 개발 template 을 복제 하는 것이다. 이를 좀 더 생각 해보면 기본 바탕을 만들고 나만의 구미에 따라 약간 변형하여 사용하면 더 좋음.

# nodejs 설치, 리눅스 환경에서는 curl, apt get, yum 등을 사용하여 패키지 설치도 지원
https://nodejs.org/ko/

# nodejs 설치, 리눅스 환경에서는 curl, apt get, yum 등을 사용하여 패키지 설치도 지원
npm install -g yarn

# YARN BERRY 설정
yarn set version berry
yarn init

# pm2 설치
yarn global add pm2

# typescript 설정
yarn add @types/node
yarn add -D ts-node
( 기타 필요한 의존성을 yarn add 로 추가 설치 )

# tsconfig.js 설정
# typescript 설정 파일 생성, 자신의 환경에 따라 변경해도 됨
yarn tsc --init --rootDir src --outDir ./bin --esModuleInterop --lib es2015 --module commonjs --noImplicitAny true

# vscode 용 yarn berry 인식 플러그인
# yarn은 node_module 폴더에 관련 의존성이 저장되는 것이 아니라, 압축파일에 저장됨. ( 그래서 속도가 빠름, 물론 의존성 tree등을 최적화 하여 불필요한 부분에 대한 로드 또한 제거를 많이 하였음 ) 그래서 이를 인식하기 위한 플러그인 설치
yarn dlx @yarnpkg/sdks vscode

# vscode 용 ZipFS 
# 이 확장은 zip 아카이브에서 직접 파일을 읽을 수 있도록 VSCode에 지원을 추가합니다. Yarn 도구 체인의 일부로 유지 관리됩니다. 이 확장을 Yarn SDK와 함께 사용하면 캐시에서 파일을 원활하게 열고 편집할 수 있습니다.
ZipFS - a zip file system

# 실행 스크립트 ( package.json )
"scripts": {
    "build": "tsc",
    "dev": "ts-node ./src/app.ts"
  },

# 개발모드
yarn dev 를 입력하여 ts 파일을 컴파일 없이 실행한다.

# ecosystem.config.js

> yarn build 이후 
> pm2 에서 실행하기 위해서는 빌드 된 app.js 파일 내 `require("../.pnp.cjs").setup();` 를 추가하여 yarn 의 plug n play 모드를 인식 시켜준다.

module.exports = {
  apps: [
    {
      name: "myapp" /* PM2 앱 이름 */,
      script: "./bin/app.js" /* 실행 스크립트 */,
      log_date_format: "YYYY-MM-DD HH:mm:ss" /* 로그 형식 */,
    },
  ],
};

# pm2 실행

> ecosystem.config.js 의 설정 파일을 읽어 들여 실행 함.

pm2 start 

맺음말

위와 같이 구성하면 yarn + ts + pm2 모드로 개발을 할 수 있도록 구성할 수 있다. 사실 위 방법 말고도 다양한 방법이 존재한다. 최근 구성해 본 환경에서는 위 개발환경이 typescript 로 개발 이후 pm2 로 배포하는 demon 을 만드는 것에 있어 좋아 위 내용을 공유 드립니다.

요즘 개발은 시시각각 바뀌는 관계로 넘 힘드네요, 개발 언어도 많고 방법론도 많고... 그래도 잼나네요 ( 스스로 화이팅 모드 )

다들 즐거운 주말 보내세요

앞으로 계획

typescript, godot, 3d modeling 이런 것에 좀 집중하여 영역을 좀 줄이고 깊이는 늘려가 보려 하네요 ㅜㅜ

이것 저것 다 하다보니 매번 hello world 만 하는 것 같아서 크 ...

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

[광고] STEEM 개발자 커뮤니티에 참여 하시면, 다양한 혜택을 받을 수 있습니다.

@wonsama transfered 2 KRWP to @krwp.burn. voting percent : 86.78%, voting power : 16.16%, steem power : 1969439.56, STU KRW : 1200.
@wonsama staking status : 1793.429 KRWP
@wonsama limit for KRWP voting service : 1.793 KRWP (rate : 0.001)
What you sent : 2 KRWP
Refund balance : 0.207 KRWP [64163227 - 6e312ea31f8fcbde1003d54cf74ba580d38dbd49]

image.png

Upvoted! Thank you for supporting witness @jswit.
Please check my new project, STEEM.NFT. Thank you!
default.jpg