NGMsoftware

NGMsoftware
로그인 회원가입
  • 매뉴얼
  • 학습
  • 매뉴얼

    학습


    Web 타입 스크립트(Type Script) 개발 환경을 만들고 간단한 테스트 해보기.

    페이지 정보

    본문

    안녕하세요. 엔지엠소프트웨어입니다. 주로~ 서버 프로그래밍(Java)만 하다가 클라이언트 프로그래밍을 할 기회가 왔네요^^; 엔지엠의 경우에도 클라이언트 프로그램입니다. 일반적으로 CS 프로그램이라고 하면 엔지엠과 같이 사용자의 컴퓨터에 클라이언트 프로그램(에디터나 플레이어)이 설치되고, 서버와 통신하는 방식을 말합니다. 주변에서 흔히 볼 수 있는 프로그램들이죠~ 웹(Web)의 경우에도 클라이언트와 서버가 동일하게 존재하지만 사용자의 컴퓨터에 어떤 프로그램을 설치하거나 하지는 않습니다. 모두~ 서버에서 데이타를 내려 받아서 화면(익스플로러나 크롬 또는 파이어폭스, 사파리)에 보여주는 방식입니다. 그래서 Front-end와 Back-end로 구분합니다.

    LYh9TFw.png

     

     

    좀 더 구체적으로 설명하면~ 너무 지루해지고, 이 글의 방향과 맞지 않으므로 이만 줄이고 넘어가야겠네요^^; 자 우선 Visual Studio Code(VSC, 비주얼 스튜디오 코드)를 설치 해줍니다. 아래 링크에서 다운로드 받으세요.

    [ 비주얼 스튜디오 코드 다운로드 ]

    zfWrmJJ.png

     

     

    비주얼 스튜디오 코드는 전세계적으로 가장 사랑 받는 IDE(Integrated Development Environment, 통합 개발 환경)입니다. 아마도~ 머신러닝 또는 딥러닝에 관심있는 분이라면 이미 설치가 되어 있을수도 있겠네요. 홈페이지에 파이썬으로 매크로 만들기에 대한 내용이 있으니, 이 글을 보신분들도 설치가 되어 있을겁니다. 아무튼~ 설치가 완료되고 실행하면 아래와 같은 화면이 표시됩니다.

    KETmn6J.png

     

     

    좀 더 편하게 개발하기 위한 익스텐션(확장) 프로그램들을 설치 해줍니다. 아래 동영상을 참고해서 프리티어(Prettier)를 설치해줍니다. 가장 기본이 되는 확장 프로그램이므로 꼭 설치하시기 바랍니다. 프리티어는 코드를 읽기 쉽고 보기 좋게 만들어주는 기능을 가지고 있습니다. 대부분은 기본 포함되어 있는 기능인데요. VSC에서는 원하는 확장을 선택할 수 있도록 되어 있습니다.

    cd4eH2f.gif

     

     

    EsLint도 설치 해줍니다. 이외에도 수많은 린터들이 존재합니다. 개발 언어 또는 프로그램에 따라 선택할 수 있습니다. 린터는 소스 코드를 분석해서 프로그램의 오류나 버그 및 의심스러운 코드에 플래그를 달아놓기 위한 프로그램을 말합니다.

    rmDVDiT.gif

     

     

    Path Intellisense(패스 인텔리센스)는 로컬 파일을 빠르게 참조할 수 있도록 자동 완성해주는 확장입니다. 이것도 설치해주세요. 그리고, Bracket Pair Colorizer도 설치 해줍니다. 브라켓 패어 컬러라이저는 언어에 따라 필요가 없는 확장이기도 합니다. 괄호를 사용해서 그룹을 나타내는 언어에서 필요한데요. 시각적으로 빠르게 확인할 수 있도록 도와주는 확장 프로그램입니다.

     

    Material Icon Theme(머트리얼 아이콘 테마, 딈)는 프로젝트 파일 아이콘들을 보기좋게 만들어줍니다. 이것도 여러 종류가 있는데요. 취향에 따라 선택하시면 됩니다.

    he3Qr5N.gif

     

     

    마지막으로 Power Mode(파워 모드)는 재미로만 설치 해보세요. 삭제도 간단하니~ 나중에 삭제하면 됩니다.

    fFLC9v8.png

     

     

    파워 모드는 아래와 같이 타이핑할 때 이펙트를 보여줍니다~ 개발 생산성과는 무관하지만... 시각적으로 뭔가 일하고 있다는 느낌은 팍팍 받을 수 있습니다-_-;

    Q6foM7r.gif

     

     

    이외에도 유용한 확장 프로그램이 많이 있으니~ 필요한 것들은 검색해서 설치하면 됩니다. 이제 타입 스크립트를 설치해야겠죠? 아래 링크에서 설치를 진행합니다. Install Locally를 클릭하세요.

    [ 타입 스크립트 설치 ]

    IuLbCa6.png

     

     

    NPM(Node Package Manager)을 통해서 설치할 수 있습니다. NPM은 NodeJS의 한 부분입니다. 자꾸 새로운것들이 나와서 옆길로 새고 있는데요. 아무튼 NodeJS는 서버 사이드 자바 스크립트라고 생각하면 됩니다. Non-blocking I/O와 단일 스레드 이벤트 루핑에 강점이 있어서 많이 사용하고 있는 언어입니다. 또한, 내장 HTTP 서버를 탑재하고 있어서 웹서버에서 아파치와 같은 별도의 프로그램 없이 동작이 가능합니다. 아직도 스프링이 강세이긴 하지만~ 노드도 빠르게 시장을 따라잡고 있습니다. 이말은 배워두면 좋다는 말입니다^^;

    a8hK4KC.png

     

     

    NodeJS를 설치해야겠죠? [ 여기 ]로 이동한 후 최신 버전의 노드를 설치해줍니다.

    TpREIZ2.png

     

     

    다운로드 받은 파일을 더블 클릭해서 설치를 진행하세요.

    9fnOy3X.png

     

     

    약관에 동의한 후...

    wEDrLIH.png

     

     

    기본 위치로 설치 해줍니다.

    MiOlX7o.png

     

     

    다음...

    pB8uDZR.png

     

     

    체크하면 노드 설치가 완료된 후 자동으로 필요한 툴들을 설치할 수 있는 팝업을 표시해줍니다. 가능하면 체크하지 않고 진행하시는게 좋습니다. 필요한 부분만 개별적으로 설치하는게 좋거든요. 하지만, 만사 다 귀찮다면~ 체크하고 진행하시면 됩니다.

    KPhPwih.png

     

     

    설정이 다 되었다면 설치를 진행하세요.

    Xxmgm38.png

     

     

    설치가 완료되었습니다.

    Oxktx1w.png

     

     

    위에서 체크박스에 체크한 경우 아래와 같은 창이 표시됩니다. 엔터를 눌러서 진행하시면 됩니다. 컴퓨터가 리부팅될수도 있으니 완료되었다는 메시지가 나올때까지 기다려야 합니다. 만약, 이 창이 표시되지 않는다면 노드가 설치된 폴더에 가서 직접 "install_tools.bat" 파일을 관리자 권한으로 실행해도 됩니다.

    m3uJqAS.png

     

     

    설치가 완료되었으면~ VSC로 돌아와서 "npm install -g typescript"를 입력하고 엔터를 쳐보세요. 타입 스크립트 컴파일러가 다운로드 되고 설치됩니다.

    PS C:\Users\ngmas> npm install -g typescript
    npm notice 
    npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.4.0
    npm notice Run npm install -g npm@7.4.0 to update!
    npm notice
    
    added 1 package, and audited 2 packages in 2s
    
    found 0 vulnerabilities
    PS C:\Users\ngmas>

     

    새로운 프로젝트를 하나 만들어보겠습니다. 먼저~ 작업 공간을 만들어야 하는데요. 저는 D드라이브에 MyWorkspace 폴더를 생성했습니다.

    7xqIGYT.png

     

     

    VSC에서 File > Open Folder...를 선택한 후 위에서 만든 MyWorkspace 폴더를 선택하세요.

    70Ryw92.png

     

     

    이제 타입스크립트를 만들어볼까요? ①New File을 클릭하고 이름은 "helloTypeScript.ts"로 입력합니다.

    kmSjUUf.png

     

     

    아래와 같이 함수를 하나 만듭니다.

    function hello(name: string) {
        alert(name + "님 안녕하세요.");
    }
    
    hello("NGM");

     

    tsc helloTypeScript.ts를 입력하고 엔터를 치면 ②helloTypeScript.js 파일이 만들어집니다. tsc는 type script compiler입니다.

    r0kDWaP.png

     

     

    테스트를 위해 index.html 파일도 하나 추가해줍니다. 파일 추가는 위에서 타입 스크립트를 추가한것과 동일합니다.

    <meta charset="utf-8">
    <script src="helloTypeScript.js"></script>

    284Fvqf.png

     

     

    Alt+B를 눌러서 브라우저 보기를 해보세요. 만약, 브라우저가 실행되지 않는다면~ Open in browser 확장을 추가로 설치하세요.

    nToXxBB.png

     

     

    기본적인 내용은 학습을 완료했으니 이제~ 본격적으로 개발을 시작하면 되겠군요^^;

     

    개발자에게 후원하기

    MGtdv7r.png

     

    추천, 구독, 홍보 꼭~ 부탁드립니다.

    여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

    감사합니다~

    • 네이버 공유하기
    • 페이스북 공유하기
    • 트위터 공유하기
    • 카카오스토리 공유하기
    추천0 비추천0

    댓글목록

    등록된 댓글이 없습니다.