NGMsoftware

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

    학습


    Web 빠르게 웹페이지를 만들어 보자! (Node.js & TypeScript & Angular & NG-ZORRO)

    페이지 정보

    본문

    안녕하세요. 엔지엠소프트웨어입니다. SPA(Single Page Application)를 할일이 생겨서~ 예전에 하던 프로젝트를 다시 복습하는 차원에서 작성합니다. 일반적인 홈페이지를 만들때 사용하는 기술은 아닙니다만, 구글과 같은 경우 SPA를 적극 활용하는 대표적인 회사입니다. 그리고, 전통적인 CS 솔루션에서 요즘은 웹으로 많이 넘어왔기 때문에 저와 같은 솔루션 회사들도 SPA를 많이 사용하고 있습니다. 아무튼, 이 내용을 따라하려면 Node.js, TypeScript, Angular가 설치되어 있어야 합니다.

    [ 개발 환경 구축하기 ]

     

    자~ 개발 환경이 구축되었으면 NG-ZORRO를 설치하면 되는데요. 서버가 실행중이라면 터미널에서 Ctrl+C를 눌러서 서버를 중지하세요. 그리고, 아래와 같이 설치를 진행합니다.

    PS D:\MyAngularWorkspace\Angular-Project> ng add ng-zorro-antd

     

    물론, npm이나 yarn을 이용해서 설치해도 됩니다. 이상하게 얀(yarn)은 설치가 실패하는군요. 회사 동료는 정상적으로 되는거보니... 제 컴퓨터 문제인가봅니다-_-;

    $ npm install ng-zorro-antd
    $ yarn install ng-zorro-antd

     

    설치중에 몇가지 물어보는데요. 아래와 같이~ 선택하면 됩니다.

    ? Enable icon dynamic loading [ Detail: https://ng.ant.design/components/icon/en ] Yes
    ? Set up custom theme file [ Detail: https://ng.ant.design/docs/customize-theme/en ] Yes
    ? Choose your locale code: ko_KR
    ? Choose template to create project: sidemenu

     

    서버를 실행하고, 확인 해볼까요?

    PS D:\MyAngularWorkspace\Angular-Project> ng serve

     

    브라우저에서 localhost:4200으로 이동해보세요. 어떤가요? 여러분도 아래와 같이 잘 실행이 되었나요?

    StsTQcw.png

     

     

    다음에는 간단하게 NG-ZORRO를 어떻게 사용하는지도 알아볼께요^^ 엔지 조로 사이트는 아래 링크를 클릭하세요.

    [ NG-ZORRO ]

     

    개발자에게 후원하기

    MGtdv7r.png

     

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

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

    감사합니다~

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

    댓글목록

    등록된 댓글이 없습니다.