세븐 스톡

노드 관련 업그레이드

# brew upgrade node

# brew upgrade yarn

# brew upgrade watchman

모듈 업그레이드

# npm upgrade

설치된 모듈 리스트 얻기

# npm list -g

작성중 ...

먼저 Node.js 및 React.js 패키지들을 설치 한다.

Node.js 필수 추천 패키지

React.js 필수 추천 패키지

react-native-svg

모든 Vector icon을 사용하자.

# yarn add react-native-svg --save

Lottie

앱에 Vector Animation을 넣자.

# yarn add lottie-react-native --save

react-navigation

네비게이션 컨트롤러를 편리하게 제어하자.

# yarn add react-navigation --save

네비게이션 컨트롤러를 Hooks 방식으로 쓰자.

# yarn add react-navigation-hooks --save

react-native-fs

파일시스템을 제어하자.

# yarn add react-native-fs --save

react-native-web 란?

일반적으로 React를 기반으로 프로젝트를 진행한다고 할 때, 웹 제작은 React.js 앱 제작은 React Native을 사용한다.

같은 React 라지만 React.js와 React Native는 사용법이 아주 살짝 다른 면이 있다. (스타일 적용을 위한 class 적용 부분과 StyleSheet 문법)

두가지의 차이점을 모두 고려해서 코딩하면 더욱 좋겠지만 그걸 언제까지 다 기억하고 실수 없이 만들 수 있을 것인가?

(특히 StyleSheet 부분은 String 형태로 데이터를 입력하기 때문에 코딩시 사전 검증 하기도 어려운 면이 있다.)

둘다 배워야 하는 러닝커브도 존재 한다. 그만큼 유지보수에도 부담이 가게 된다.

이는 귀차니즘이 강한 나에겐 너무나도 곤욕이다. 하나로 통일해서 작업할 수만 있다면 얼마나 편리할 것인가!?!?

그 해결책이 바로 react-native-web 이다.

react-native-web은 <div>, <p> 와 같은 웹용 테그를 전혀 신경쓰지 않고 React Native의 <View>, <Image>등의 테그를 사용하여 웹 코딩 할 수 있게 하는 패기지이다. WOW! AWESOME!!

이제 React Native로 문법을 통일하여 러닝커브 없이 편리하게 웹과 앱의 경계를 허물어 보자.

다만, 다음과 같이 최신 브라우저에 한정적으로 만 지원하니 미리 알아두고 주의하자.

Chrome, Firefox, Edge, Safari 7+, IE 10+.

설치

# yarn add react react-dom react-native-web

프로젝트 생성

# create-react-app my-app

작성중...

참고:

https://github.com/necolas/react-native-web

https://github.com/necolas/react-native-web/blob/master/docs/guides/getting-started.md

Node 및 기본 도구들 설치

$ brew install yarn
$ brew install node
$ brew install watchman
$ brew cask install adoptopenjdk/openjdk/adoptopenjdk8

$ sudo gem install cocoapods

React Native CLI 설치

글로벌하게 설치한다.

$ npm i -g @react-native-community/cli

XCode 및 Android SDK 설치

iOS

XCode 설치하기

Android

Android Studio 설치하기

환경변수 변경 (~/.zprofile or ~/.zshrc)

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

프로젝트 생성

$ npx react-native init MyApp --template react-native-template-typescript

Typescript 적용

$ yarn add --dev typescript @types/react @types/react-native @types/jest @types/react @types/react-test-renderer

또는

$ npm install --save-dev typescript @types/jest @types/react @types/react-native @types/react-test-render

tsconfig.json 수정

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "isolatedModules": false,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

jest.config.js 생성

module.exports = {
  preset: 'react-native',
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
};

js 파일 ts, tsx로 변경

다음 파일들을 ts 및 tsx 파일로 변경한다.

index.js -> index.ts

App.js -> App.tsx

프로젝트 실행

iOS

$ react-native run-ios

Android

$ react-native run-android

릴리즈용 번들 만들기

iOS

$ npx react-native bundle --entry-file index.js --bundle-output ./ios/main.jsbundle --platform ios

Android

$ npx react-native bundle --entry-file index.js --bundle-output ./android/main.jsbundle --platform android

참고:

https://reactnative.dev/docs/environment-setup

https://facebook.github.io/react-native/docs/getting-started

https://facebook.github.io/react-native/docs/typescript

https://github.com/microsoft/TypeScript-React-Native-Starter

ESLint란?

다양한 사람들이 하나의 프로젝트를 작업하다 보면 서로 다른 코딩 규칙들로 스트레스를 받는다.

설령 규칙을 모두 정의 했다고 해도 실제 작업시 실수로 인한 오류들이 많이 발생 할 것이다.

자동으로 코딩 규칙을 검사 해 줄 수는 없을까? 이를 해결하고자 나온 것이 바로 ESLint 이다.

설치방법

eslint 설치

$ yarn add eslint --dev

* Webpack을 설치하면 "If ESLint is installed globally, then make sure '@typescript-eslint/eslint-plugin' is installed globally as well."와 같은 오류가 발행 할 수도 있다. 그럴 땐 다음과 같이 설치하여 해결하자.

$ yarn add @typescript-eslint/eslint-plugin --dev

VSCode의 settings.json (* Workspace 내 파일이 아니다. VSCode 앱 설정을 의미) 에 eslint 설정(저장시 자동 수정 기능)을 추가한다.

* 중요* 여기서 기본적으로 제공되는 formatter 기능은 기능을 꺼주도록 하자.

"typescript.format.enable": false,
"editor.formatOnSave": true,

"eslint.alwaysShowStatus": true,
"eslint.autoFixOnSave": true,
"eslint.validate": [
        "javascript",
        "javascriptreact",
    {
        "language": "typescript",
        "autoFix": true
    },
    {
        "language": "typescriptreact",
        "autoFix": true
    }
]

.eslintrc 파일 생성

프로젝트 Root 폴더에서 다음과 같이 실행하면 .eslintrc 라는 파일이 생성된다.

$ npx eslint --init

설정 옵션은 다음과 같다. (본인 옵션에 맞게끔 선택)

* 만약 실행시 다음과 같은 에러가 발생한다면?

"Failed to load plugin '@typescript-eslint' declared in '.eslintrc.jsFailed to load plugin '@typescript-eslint' declared in '.eslintrc.js': Cannot find module 'typescript' Referenced from"와 같은 에러가 발생한다면 타입 스크립트를 로컬로 설치해 주자.

$ yarn add typescript --dev

Code formatting을 위한 prettier 패키지를 설치

$ yarn add --dev prettier eslint-plugin-prettier eslint-config-prettier

* eslint-config-prettier는 prettier 에서 관리 해 줄 수 있는 코드 스타일의 ESLint 규칙을 비활성화 시켜준다. 이것을 사용하게 된다면 ESLint 는 자바스크립트 문법 관련된 것들만 관리하게 되고, 코드스타일 관련 작업은 prettier 가 담당하게 된다.

Visual Studio Code Extension 설치

VSCode Extension인 Eslint 를 설치한다.

Prettier 적용을 위한 .eslintrc 수정

{
    ...
    extends: [
        ...
        "plugin:prettier/recommended",
        "prettier/react", // React 사용시만 추가
        ...
    ],
    ...
}

.prettierrc.js 파일 생성

module.exports = {
	bracketSpacing: true,
	jsxBracketSameLine: true,
	singleQuote: true,
	semi: true,
	trailingComma: 'all',
	useTabs: true,
	tabWidth: 4,
	printWidth: 200,
	eslintIntegration: true,
	formatOnSave: true,
};

추가 옵션은 (이곳)에서 확인하도록 한다.

AirBnB esLint 스타일 적용

여러 esLint 스타일이 있지만 가장 인기있는 airbnb 스타일을 기본으로 구성하고 이를 개조하는편이 빠르다.

$ npx install-peerdeps --dev eslint-config-airbnb

* 서버와 같이 react를 사용하지 않는곳에서는 eslint-config-airbnb-base를 설치하는 편이 보다 가볍다. (귀찮으면 그냥 일반 모듈 설치)

$ npx install-peerdeps --dev eslint-config-airbnb-base

.eslintrc 수정

{
	...
	extends: ['eslint:recommended', 'plugin:@typescript-eslint/eslint-recommended'],
    ...
}

위를 다음과 같이 수정 한다.

react hooks를 사용한다면 airbnb/hooks 또한 같이 추가 해 준다.

{
	...
	extends: ['airbnb', 'airbnb/hooks'],
    ...
}

설정 커스터마이징

airbnb esLint는 꽤나 까다로운 규칙들을 갖고 있다.

이는 팀에 맞게 커스터마이징 하도록 한다.

.eslintrc 파일 수정

rules 부분에 필요한 옵션을 켜거나 끌 수 있다.

{
	...
	"rules": {
		"react/prefer-stateless-function": 0,
		"react/jsx-filename-extension": 0,
		"react/jsx-one-expression-per-line": 0
	}
    ...
},

esLint 검사 무시하기

몇몇 특정 파일(빠른 테스트용 임시 파일)은 굳이 강력한 문법 검사가 필요 없을 때가 있다. 이럴때는 esLint 검사를 꺼두어 편하게 테스트 할 수 있다. 작업 파일 최상단에 다음과 같이 주석을 달아 주면 해당 파일은 esLint 검사를 건너뛰게 된다.

/* eslint-disable */

정적 파일이란?

직접 변화를 주지 않는 파일(CSS, image, js 등)을 말한다.

사용방법

app.use(express.static('public'));

public라는 디렉토리 아래 있는 데이터들은 웹브라우저의 요청에 따라 서비스를 제공 해 줄 수 있다.

즉, localhost:3000/image/test.jpg로 접근한다면 public/image/test.jpg를 검사하여 웹브라우저에 제공 해 준다.

여러개의 정적 폴더 제공

app.use(express.static('public'));
app.use(express.static('files'));

가상의 경로 지정

정적 파일들을 가상의 경로에 묶어서 제공 할 수도 있다.

app.use('/static', express.static('public'));

이는 다음과 같이 "가상 폴더명/정적 파일 경로"로 접근 가능하다.

http://localhost:3000/static/images/logo.png
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js

Client에서 오는 요청은 GET, POST로 나눌 수 있다. GET 방식은 express의 get method의 req.params를 통해 간단히 접근 가능하다.

하지만 POST 방식으로 요청 될 때는 express의 post method의 req.body 안의 데이터를 확인 해야한다.

기본적으로 바로 접근 할 수는 없고 이를 위해 두가지 방식으로 접근 법을 적어보고자 한다.

* 참고: express v4.x 부터는 1번 (기본적으로 제공되는 모듈을 이용한 추출)을 쓰는 편이 여러모로 편하다.

1. Express 내장 모듈을 이용한 추출

사용법

import express from 'express'
const app = express();

// Using json body
app.use(express.json())

// Check posted body
app.post('/profile', (req, res) => {
  console.log(req.body)
})

2. body-parser를 이용한 추출

설치

# yarn add body-parser @types/body-parser --save

사용법

import bodyParser from "body-parser"

// Using body-parser
app.use(bodyParser.urlencoded({ extended: false}));

// Check posted body
app.post('/profile', (req, res) => {
	const title = req.body.title;

	// Do something
	res.send("title: " + title);
}); 

dotEnv란?

일반적으로 포트 번호, secret code, database 주소, googleClientID 등 환경 변수를 json에 보관하여 사용한다.

하지만 이렇게 하면 모든 정보가 노출되기 마련이다.

이러한 환경 변수들을 [.env]라는 파일에 효율적으로 간단히 숨겨주는 기능을 담당한다.

설치방법

$ yarn add dotenv @types/dotenv --save

사용법

.env 파일 생성

$ touch .env

.env 파일에 환경변수 등록

PORT = "3000"
DATABASE = "mongodb://localhost:27017/databaseName"

소스코드 작성

// 환경변수 사용 준비 (메인코드 가장 윗줄에 적어준다.)
const envResult = require('dotenv').config()

if (envResult.error) {
	throw envResult.error;
}

// 변수 사용방법 (progress.env.${.env 추가된 변수이름})
console.log(progress.env.DATABASE);

* 주의사항

github에 노출되지 않도록 주의해야 한다.

git push 하기 전에 gitignore 파일에 .env 를 필히! 포함 시켜야 한다.

React.js .env 사용하기

별도의 설치는 없이 바로 설정 가능하다.

다만 환경변수 앞에 REACT_APP_ 으로 시작을 해야한다. 그 외의 설정은 모두 무시되므로 주의하도록 한다.

예시> REACT_APP_PORT, REACT_APP_GRAPHQL

React Native 에서 .env 사용하기

react-native-config를 이용할 수는 있지만 한동안 업데이트가 되지 않아서 최신 버젼의 React-Native에서는 동작하지 않는다.

별도의 모듈을 직접 만들거나 당분간 config.ts 소스파일을 만들어 기록하는 편이 낫다.

필요한 패키지

express

Node.js 를 이용한 라우팅을 위한 패키지

express-session

express.js 사용시 세션/쿠키 관리를 편하게 하기 위한 패키지

cookie-session으로 대체 할 수 도 있지만 express-session가 보다 사용하기 편리하고 안정성 부분에도 더 낫다.

* 세션: 일반적으로 클라이언트를 식별하기 위해 사용되며, 로그인 이후 로그아웃 하기 전까지 정보 유지 및 관리 하는 것을 세션이라 부른다.

connect-mongodb-session

세션 정보를 MongoDB에 저장하기 위한 패키지

세션은 데이터의 유효성이 필히 보증되어야 만 하는 편이 아니기 때문에 Redis(connect-redis 를 통해)에 저장 할 수도 있지만 관리의 편리함을 위해 MongoDB로 통일 했다.

설치

# yarn add express-session connect-mongodb-session @types/express-session @types/connect-mongodb-session

사용법

import express from "express";
import session from "express-session";
import connectMongoDBSession from "connect-mongodb-session";

const app = express();

const MongoDBStore = connectMongoDBSession(session);
const mongoDBStore = new MongoDBStore({
	uri: "localhost:27017",
	collection: "sessions"
});

mongoDBStore.on("error", () => {
	// Error's here!
});

app.use(
	session({
		secret: "My secret code here!",
		resave: true,
		saveUninitialized: false,
		cookie: { maxAge: 3600000, httpOnly: true },
		store: mongoDBStore,
		rolling: true
	})
);

...

Session의 주요 옵션

secret: (필수 항목) 세션 발급에 필요한 비공개 키

resave: 세션을 저장하고 불러올 때 세션을 다시 저장 할 지 여부

saveUninitialized: 세션에 저장 할 때 초기화 여부

cookie:

- maxAge (쿠키 보관 기간, millisecond)

- httpOnly: 클라이언트에서 쿠키 확인 가능 여부 (true: 확인 불가능)

- secure: http, https 환경에만 사용 가능하게 여부 (true: http, https 환경에만 가능, 타 프로그램 접근 불가)

store: 세션이 저장될 DB Store

rolling: 로그인 상태에서 다른 페이지로 이동 할 때마다 세션값에 변화(maxAge 시간 변경 등)를 줄 것인지 여부

다른 옵션은 이곳을 살펴보자.

Helmet.js 란?

Express.js 사용시 Http 헤더 설정을 자동으로 바꾸어주어 잘 알려진 몇가지 앱의 취약성으로 부터 앱을 보호 할 수 있는 패키지이다.

* Helmet는 다음과 같은 미들웨어로 이루어 져 있다.

csp: Content-Security-Policy 헤더 설정. XSS(Cross-site scripting) 공격 및 기타 교차 사이트 인젝션 예방.
hidePoweredBy: X-Powered-By 헤더 제거.
hpkp: Public Key Pinning 헤더 추가. 위조된 인증서를 이용한 중간자 공격 방지.
hsts: SSL/TLS를 통한 HTTP 연결을 적용하는 Strict-Transport-Security 헤더 설정.
noCache : Cache-Control 및 Pragma 헤더를 설정하여 클라이언트 측에서 캐싱을 사용하지 않도록 함.
frameguard : X-Frame-Options 헤더 설정하여 clickjacking에 대한 보호 제공.
ieNoOpen : (IE8 이상) X-Download-Options 설정.
xssFilter :  X-XSS-Protection 설정. 대부분의 최신 웹 브라우저에서 XSS(Cross-site scripting) 필터를 사용.
noSniff : X-Content-Type-Options 설정하여, 선언된 콘텐츠 유형으로부터 벗어난 응답에 대한 브라우저의 MIME 가로채기를 방지.

설치 방법

# yarn add helmet @types/helmet --save

사용법

import helmet from 'helmet';

app.use(helmet());

* 주의사항

app.use(helmet()); 만 설정 할 경우 기본적인 보안(X-Powered-By 등)만 설정해 주며

csp, expectCt, hpkp, noCache, referrerPplicy는 적용되지 않는다.

이를 적용하려면 다음과 같이 별도로 설정한다. (각 미들웨어 마다 별도로 설정을 해야한다.)

app.use(helmet.noCache());
app.use(helmet.hpkp());

* 부가사항

csp는 url에서 가져온 이미지, 동영상, js, css파일 등을 막는 역할을 한다. 설정 할때  관련 url을 모두 추가 해 줘야한다.

트위터 같은 경우 csp를 다음과 같이 설정 하고 있다.

참고

Express에서 보안성을 높이는 방법

https://wlsdml1103.blog.me/221460233318

Axios란?

간단히 말해서 Node.js에 기본적으로 내장된 fetch 함수의 상위 호환 패키지라고 보면 된다.

다른 모듈로는 매주 1,400만회 이상 다운로드 되는 request가 있지만 request는 자체로 쓰기 보단 편의상 request-promise 모듈을 쓰게되는데 이게 React-Native에 적용 후 실행하게 되면 모듈이 정의 되지 않았다는 오류를 발생한다.

그냥 맘편히 axios를 사용하는 편이 좋다.

설치

# yarn add axios --dev @types/axios

사용법

매우 쉽다. 그냥 공식 Git 페이지를 참고해서 쓰자.

https://github.com/axios/axios

JWT(JSON Web Token) 는 무엇인가?

기존의 Cookie / Session 방식의 인증 처리를 보다 확장성 있게 만든 모델이다.

간단히 말해서 Cookie / Session을 명령형 프로그래밍이라 친다면

JWT는 선언형(함수형) 프로그래밍에 비유 할 수 있겠다.

서버 확장의 유연함에 있어 Cookie / Session 방식에 비해 장점이 매우 크기 때문에 사용하도록 한다.

설치 하기

Passport를 기본으로 사용한다고 가정하고 아래와 같이 설치한다.

# yarn add passport-jwt

사용법

https://itnext.io/implementing-json-web-tokens-passport-js-in-a-javascript-application-with-react-b86b1f313436

Cookie / Session VS JWT 참고

https://velopert.com/2350

JWT 사용법 참고

https://fkkmemi.github.io/nemv/nemv-040-hello-token/

https://velopert.com/3417

설치방법

Update brew

$ brew update

Tab mongodb

$ brew tap mongodb/brew

Install mongodb

$ brew install mongodb-community

DB폴더 생성

OSX Catalina 부터는 root 폴더가 readonly이다. /data/db가 아닌 다른폴더에 만들어 줘야 한다.

$ mkdir ~/data

$ mkdir ~/data/db

DB폴더 권한 변경

~ 폴더에 생성시 기본으로 권한 부여가 되므로 하지 않아도 무방할 듯 하다.

$ sudo chown -R userID ~/data/db

/usr/local/etc/mongod.conf에 dbpath 추가

위에서 생성된 DB 폴더를 dbpath에 추가 해 넣는다. (userid 를 알맞게 변경하자)

$ nano /usr/local/etc/mongod.conf

storage:
	...
	dbPath: /Users/userid/data/db
    ...

실행 방법

데몬으로 실행

$ mongod --config /usr/local/etc/mongod.conf

위 명령어를 Shell-script로 만들어 실행하면 편하다.

$ sh mongod

brew로 실행

$ brew services start mongodb-community

프로세스가 실행 됐는지 확인

$ ps -ef | grep mongo

서비스 종료하기

$ brew services stop mongodb

참고: https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/

https://www.tensorflow.org/js/tutorials/setup

https://7stocks.tistory.com/33?category=658881

기타 참조: https://blog.naver.com/doohwanryu/221189030147

http://blog.naver.com/PostView.nhn?blogId=kangminser88&logNo=221374023587&categoryNo=0&parentCategoryNo=0&viewDate=¤tPage=1&postListTopCurrentPage=1&from=postView

Nodemon 이란?

소스를 변경 할때 마다 알아서 자동으로 재시작 해주는 패키지이다.

Nodemon을 이용하지 않고 PM2의 watch 기능을 이용하여도 되니 참고하여 설치한다.

설치

어디서나 실행 할 수 있도록 글로벌하게 설치한다.

# npm install nodemon -g

패키지 설정 변경

package.json의 start를 nodemon --exec babel-node index.js --delay 2 로 변경한다.

실행하기

# yarn start

직접 실행하기

# nodemon babel-node index.js

공식 사이트: https://github.com/remy/nodemon#nodemon

Express.js 는 Python의 Django, Java의 Sping, Php의 라라벨 같은 node.js용 가장 인기 있는 프레임 워크이다.

설치

# yarn add express --save

기본 사용법 (라우팅)

https://expressjs.com/ko/starter/basic-routing.html

Babel이란?

최신 자바 스크립트를 여러 브라우저에 하위 호환시키기 위한 용도로 많이 쓰인다.

* 하지만 Typescript 기반 프로젝트의 경우 tsconfig.json의 target = 'es5'로 설정 할 경우 코드의 하위 호환이 되므로 굳이 바벨을 써야 할지 의문의 생기기도 한다. 라이트함을 추구하는 나로서는 그냥 Babel를 쓰지 않기로 결심함.

http://babeljs.io 

설치

어디서든 사용 가능하도록 전역으로 설치 한다.

# npm install @babel/node @babel/core -g

로컬로 환경 패키지를 설치한다.

# yarn add @babel/preset-env --save

Babel 설정 파일 추가

Node.js에 설치 후 동작할 폴더에 .babelrc 파일을 다음과 같이 추가한다.

{
	"presets" : ["@babel/preset-env"]
}

패키지 설정 변경

package.json 파일에서 start 설정을 node index.js가 아닌 babel-node index.js로 변경한다.

{
	...
	"scripts": {
		"start": "babel-node index.js"
	},
	...
}

일러두기

프론트앤드 서버는 React.js를 기본으로 두고 있기 때문에 create-react-app의 옵션을 통하여 바로 typescript 버전을 만든다.

만약 React.js의 create-react-app이 아닌 수동으로 만들고 싶다면 아래의 과정을 참조하면 된다.

Typescript를 사용하는 이유?

프로젝트가 커짐에 따라 Javascript로는 소스 관리에 버거움이 있다. Typescript를 통하여 보다 편리하게 함수들의 인터페이스 또는 타입들을 알 수 있고 더불어 실수로 인한 오작동 하는 코드를 방지하는 효과도 얻는다.

설치

글로벌하게 설치

# npm i typescript -g

로컬에만 설치

# yarn add @types/node --save-dev

Typescript 설정 파일 제작

# tsc --init

또는 아래와 같이 수동으로 프로젝트 루트 폴더에 tsconfig.json 파일을 만들어 다음과 같이 작성한다.

{ 
  "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs",
    "esModuleInterop": true,
    "sourceMap": true,
    "allowJs": true,
    "rootDir": "src",
    "outDir": "output"
  }, 
  "include":["src/**/*"], 
  "exclude": [ 
      "node_modules" 
  ] 
}

Visual Studio Code 에서 저장시 JS로 자동 컴파일 하기

TS는 독립적으로 실행될 수 없다. tsc 툴킷을 통하여 JS파일을 생성하고 해당 JS를 Node를 통하여 실행하는 구조이다.

일일히 TS 파일 수정 후 tsc 커맨드를 통해 JS 파일을 생성 할 수도 있으나

이는 매우 번거로우므로 VS Code에서 TS 코드 작성 후 저장시 자동으로 JS 파일을 만들어 주도록 한다.

다음과 같이 진행한다.

1. VS Code에서 프로젝트 폴더를 오픈한다.

2. tsconfig.json 파일이 있는지 확인한다. 없으면 위의 과정대로 생성한다.

3. Windows > Run Build Task (Ctrl+Shift+B) 를 눌러 tsc: watch - tsconfig.json 를 선택 하여 실행하면 앞으로 TS 파일 저장시 자동으로 JS 파일도 함께 만들어져 저장될 것이다.

* 실행시 "src 어쩌구..." 하는 에러가 날 수도 있다. 이는 src 폴더안에 파일이 없어서 오류를 뱉어내는 것이다.

작업할 TS 소스를 src 폴더에 넣어두면 잘 실행 될 것이다.

* tsconfig.json 파일에서 include는 자동으로 컴파일 할 대상 폴더를 의미 한다. outDir는 컴파일 된 JS 파일들이 들어 갈 폴더를 의미한다.

* 자동 저장을 종료하고 싶다면 Commend Palette (Ctrl+Shift+P) 를 눌러 Tasks: Terminate Running Task 를 선택하고 tsc: watch - tsconfig.json 를 선택하면 종료 된다.