TypeScript Deep Dive
  • README
  • 시작하기
    • 왜 타입스크립트인가
  • 자바스크립트
    • 비교 연산자
    • 참조 연산자
    • Null vs. Undefined
    • this
    • 클로저
    • Number
    • Truthy
  • 미래의 자바스크립트
    • 클래스
      • 즉시실행함수
    • 화살표 함수
    • 나머지 연산자
    • let
    • const
    • 비구조화 할당
    • 전개 연산자
    • for...of
    • 이터레이터
    • 템플릿 리터럴
    • 프로미스
    • 제네레이터
    • Async Await
  • 프로젝트
    • 컴파일러 제어
      • tsconfig.json
      • 파일 경로 지정
    • 선언
    • 모듈화
      • 파일을 이용한 모듈화
      • globals.d.ts
    • 네임스페이스
    • 동적 표현식 가져오기
  • Node.js 시작하기
  • Browser 시작하기
  • 타입스크립트 타입 시스템
    • 자바스크립트 마이그레이션 가이드
    • @types
    • 주변 선언
      • 파일 선언
      • 변수
    • 인터페이스
    • 열거형(Enums)
    • lib.d.ts
    • 함수
    • 콜러블(Callable)
    • 타입 표명(Type Assertion)
    • 신선도(Freshness)
    • 타입 가드
    • 리터럴(Literal)
    • 읽기 전용(readonly)
    • 제네릭
    • 타입 인터페이스
    • 타입 호환성
    • Never 타입
    • 구별된 유니온
    • 인덱스 서명(Index Signature)
    • 타입 이동하기
    • 예외 처리
    • 믹스인(Mixin)
  • JSX
    • React
    • Non React JSX
  • Options
    • noImplicitAny
    • strictNullChecks
  • 타입스크립트 에러
    • 에러 메세지
    • 공통 에러
  • NPM
  • 테스트
    • Jest
    • Cypress
  • Tools
    • Prettier
    • Husky
    • ESLint
    • Changelog
  • 팁
    • 문자열 Enums
    • 타입 단언
    • 상태 저장 함수
    • 커링
    • 제네릭 타입 예시
    • 객체 타입 설정
    • 유용한 클래스
    • Import / Export
    • 속성 Setters
    • outFile 주의사항
    • 제이쿼리 팁
    • 정적 생성자
    • 싱글톤 패턴
    • 함수 파라미터
    • 토글 생성
    • Import 여러개 하기
    • 배열 생성
    • 생성자에서 타입정의
  • 스타일 가이드
  • 타입스크립트 컴파일러 구조
    • Program
    • AST
      • TIP: Visit Children
      • TIP: SyntaxKind enum
      • Trivia
    • Scanner
    • Parser
      • Parser Functions
    • Binder
      • Binder Functions
      • Binder Declarations
      • Binder Container
      • Binder SymbolTable
      • Binder Error Reporting
    • Checker
      • Checker Diagnostics
      • Checker Error Reporting
    • Emitter
      • Emitter Functions
      • Emitter SourceMaps
    • Contributing
Powered by GitBook
On this page
  • TypeScript in the browser
  • 일반적인 프로그램 설정
  • 빠르게 프로젝트를 구성
  • 프로젝트를 구성하는 자세한 방법
  • 당신은 놀라운 애플리케이션 개발을 할 수 있습니다.

Was this helpful?

Browser 시작하기

PreviousNode.js 시작하기Next타입스크립트 타입 시스템

Last updated 3 years ago

Was this helpful?

TypeScript in the browser

만약 당신이 웹 애플리케이션을 만들기 위해 타입스크립트를 사용한다면 타입스크립트 + 리액트 (나의 UI 프레임워크 선택) 프로젝트 구성을 다음과 같이 할 수 있습니다.

일반적인 프로그램 설정

  • 설치

  • 설치

빠르게 프로젝트를 구성

다음을 기본으로 구성하십시요

git clone https://github.com/basarat/react-typescript.git
cd react-typescript
npm install

이걸 기본으로 하여 하세요.

프로젝트를 구성하는 자세한 방법

이 프로젝트가 어떤 식으로 만들어졌는지 자세한 내용을 알고 싶다면 (그냥 기반으로 사용하는 것이 아니라), 다음에 나온대로 처음부터 만들어 볼 수 있습니다:

  • 프로젝트 폴더를 생성

mkdir your-project
cd your-project
  • Create tsconfig.json:

{
    "compilerOptions": {
        "sourceMap": true,
        "module": "commonjs",
        "esModuleInterop": true,
        "resolveJsonModule": true,
        "experimentalDecorators": true,
        "target": "es5",
        "jsx": "react",
        "lib": ["dom", "es6"]
    },
    "include": ["src"],
    "compileOnSave": false
}
  • Create package.json.

{
    "name": "react-typescript",
    "version": "0.0.0",
    "license": "MIT",
    "repository": {
        "type": "git",
        "url": "https://github.com/basarat/react-typescript.git"
    },
    "scripts": {
        "build": "webpack -p",
        "start": "webpack-dev-server -d --content-base ./public"
    },
    "dependencies": {
        "@types/react": "16.4.10",
        "@types/react-dom": "16.0.7",
        "clean-webpack-plugin": "0.1.19",
        "html-webpack-plugin": "3.2.0",
        "react": "16.4.2",
        "react-dom": "16.4.2",
        "ts-loader": "4.4.2",
        "typescript": "3.0.1",
        "webpack": "4.16.5",
        "webpack-cli": "3.1.0",
        "webpack-dev-server": "3.1.5"
    }
}
  • webpack.config.js는 당신의 모듈을 번들해서 모든 리소스가 담긴 하나의 app.js 파일을 생성할 것 입니다.

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app/app.tsx',
  plugins: [
    new CleanWebpackPlugin({
      cleanAfterEveryBuildPatterns: ['public/build']
    }),
    new HtmlWebpackPlugin({
      template: 'src/templates/index.html'
    }),
  ],
  output: {
    path: __dirname + '/public',
    filename: 'build/[name].[contenthash].js'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: 'ts-loader' }
    ]
  }
}
  • src/templates/index.html 파일은 웹팩을 사용하면 index.html 이 생성됩니다. 이 파일은 웹 서버내에 public 폴더에 생성됩니다.

<html>
    <body>
        <div id="root"></div>
    </body>
</html>
  • src/app/app.tsx 파일은 당신의 프론트 애플리케이션의 시작 지점입니다.

import * as React from 'react'
import * as ReactDOM from 'react-dom'

const Hello: React.FunctionComponent<{
    compiler: string,
    framework: string
}> = props => {
    return (
        <div>
            <div>{props.compiler}</div>
            <div>{props.framework}</div>
        </div>
    )
}

ReactDOM.render(
    <Hello compiler="TypeScript" framework="React" />,
    document.getElementById('root')
)

당신은 놀라운 애플리케이션 개발을 할 수 있습니다.

당신은 최신 패키지를 사용할 수 있습니다. npm install typescript@latest react@latest react-dom@latest @types/react@latest @types/react-dom@latest webpack@latest webpack-dev-server@latest webpack-cli@latest ts-loader@latest clean-webpack-plugin@latest html-webpack-plugin@latest --save-exact

  • npm start를 실행하십시요.

  • src/app/app.tsx 이 파일을 수정하면 애플리케이션이 실시간으로 새로고침 됩니다.

  • src/templates/index.html 이 파일을 수정하면 웹서버에서 실시간으로 새로고침 됩니다.

  • 제품을 빌드하려면 npm run build 을 실행하십시요.

  • 빌드가 끝나면 public 폴더를 서버에 제공하십시요.

이 url에 접속하십시요.

http://localhost:8080
Node.js
Git
https://github.com/basarat/react-typescript
멋진 애플리케이션을 개발
DesignTSX