NGMsoftware

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

    학습


    Web SPA(Single Page Application)를 위한 앵귤러 설치하기.

    페이지 정보

    본문

    안녕하세요. 엔지엠소프트웨어입니다. 앵귤러와 타입스크립트에 대해서는 홈페이지에서 예전에~ 몇번 소개한적이 있습니다. 한동안, 자바 및 C# 프로젝트를 진행해서 웹쪽 업무를 할일이 없었는데요. 최근에 고객사 요청으로 장비에서 발생되는 알람을 차트로 보여주는 페이지가 필요하게 되었습니다. 일반적인 웹프로젝트는 MPA(Multi Page Application)를 주로 사용합니다. 개발자에게 직관적이고 클래식한 방식이기 때문에 접근성이 뛰어나기 때문이죠^^; 하지만, SPA와 MPA는 완전히 다른 개발 방법론 또는 패턴이기 때문에 잘 판단해야 합니다. 자~ 그렇다면 React나 Vue도 있는데 왜 Angular를 사용하느냐라고 물어볼수가 있죠? 별다른 이유가 있는건 아니구요. 회사에서 Angular Framework를 이용해서 프론엔드를 구현했기 때문에 따라가는 겁니다^^;

    piWf3YN.png

     

     

    웹에 대한 전반적인 내용도 같이 알아보고 싶긴한데요. 이 홈페이지는 개발 관련 강좌가 아니다보니 어디서부터 어디까지 설명해야 할지가~ 항상 고민입니다. 그렇다보니 대부분의 글들이 대충 대충 설명하고 넘어가기도 하고요. 아무래도 초보자분들을 위한 내용이라기보다는 제가 공부하고, 학습한 내용들을 기록하기 때문인듯 합니다. 아무튼~ 그렇습니다. 우선, Angular를 설치하기 위해서는 Node.js가 필요합니다. Visual Studio Code도 필요하죠^^; 앵귤러를 사용하기 위한 사전 설치 항목들은 아래 글을 참고해주세요.

    [ 개발 환경 구축하기 ]

     

    Node.js, Type Script, Visual Studio Code가 모두 설치가 되었으면, 앵귤러를 사용할 사전 준비를 마친거에요. VSC를 실행하고 새로운 작업 폴더를 설정하세요. 저는 MyAngularWorkspace 폴더를 만들고, File > Open Folder...로 열었습니다.

    uYExMV7.png

     

     

    하단에 터미널창이 안보인다면~ Ctrl+J 또는 Ctrl+`를 누르고, 아래 명령으로 설치하세요.

    PS D:\MyAngularWorkspace> npm install -g @angular/cli

     

    -g를 붙였기 때문에 글로벌 영역(C:)에 앵귤러가 설치됩니다. 아마도~ 10초 내외로 설치가 완료 될거에요. 이제 프로젝트를 생성해봅시다. 프로젝트 이름은 임의로 하시면 됩니다. 다만, 워크스페이스 폴더를 미리 만들어두고 해당 폴더로 이동한 후 아래 명령을 수행하세요.

    PS D:\MyAngularWorkspace> ng new Angular-Project

     

    새로운 프로젝트가 아닌 경우에는 아래 명령으로 노드만 설치하면 됩니다. 소스위치여야 겠죠^^;

    PS D:\MyAngularWorkspace> npm -i

     

    참고로~~~ 팀단위 프로젝트라면, nx도 설치해주는게 좋습니다. nx는 변경되는 파일을 감지하여 능동적으로 컴파일을 해줍니다. 분산 캐싱을 이용해서 불필요한 컴파일은 배제시키고, 효율을 높여줍니다.

    PS D:\MyAngularWorkspace> npm i -g nx

     

    간혹~ Angular CLI가 설치가 안될수도 있는데요. 이 때에는 npm을 최신 버전으로 업데이트하고 하면 될거예요. 또는 캐시를 삭제(npm cache verify)해도 됩니다. 아무튼~ 설치에 많은 시간이 소요됩니다. 느긋하게 기다리면 아래와 같이 프로젝트가 생성되고, 기본적인 구조를 확인할 수 있습니다.

    uHRF8h0.png

     

     

    한동안 C#하고 Java로 EES 프로젝트만 하다가 다시 앵귤러를 보니 반갑군요-_-; cd <프로젝트명> 으로 폴더를 이동한 후 ng serve로 실행 해보세요.

    fJhCJOm.png

     

     

    컴파일이 성공하면 브라우저를 열고 localhost:4200으로~ 아래와 같이 웹페이지가 정상적으로 뜨는걸 확인할 수 있습니다.

    3uZh9XA.png

     

    개발자에게 후원하기

    MGtdv7r.png

     

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

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

    감사합니다~

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

    댓글목록

    등록된 댓글이 없습니다.