angular

  • Web Programming/Angular

    Angular Router 적용

    안녕하세요, 씨앤텍 시스템즈 임재원 연구원입니다 이번 포스트는 Angular에 기본적인 Router를 사용하는 방법에 대해 작성하려 합니다. * 버전 정보 Node version -20.9.0 Angular CLI -17.0.3 Angular Router 란 ? Angular 애플리케이션에서 내비게이션을 관리하기 위한 라이브러리입니다. 단일 페이지 애플리케이션(SPA)에서 페이지간의 전환 및 라우팅을 담당합니다 SPA는 페이지를 새로 로드하지 않고도 동적으로 내용을 갱신할 수 있는 웹 애플리케이션을 의미합니다. 와 의 차이점 ? *SPA의 장점 중 하나인 동적 로딩을 구현할 수 있습니다 *페이지 전환 시 새로고침이 발생하지 않습니다 *자원소비 감소 *전체 페이지를 다시 로드하게 되어 브라우저가 서버로부터..

  • Web Programming

    NodeJS 와 Angular, React 앱 연동

    안녕하세요, 씨앤텍시스템즈 황순호 연구원입니다. 이번 포스트는 Angular와 React로 빌드된 페이지를 NodeJS에서 사용자에게 제공할 수 있는 방법에 대해 작성하도록 하겠습니다. ※ 사전에 NodeJS가 설치되어 있어야 합니다. NodeJS를 설치하면 npm도 같이 설치되며 명령어를 이용한 Angular와 React 프로젝트 생성이 가능해집니다. 1. Angular 또는 React 프로젝트 생성 먼저 Angular 프로젝트부터 생성을 해보겠습니다. 저는 바탕화면에 프로젝트들을 담을 project 폴더를 생성하고 windows cmd창을 이용해 해당 폴더로 이동 후 진행하겠습니다. 프로젝트 생성을 위해 angular-cli 패키지를 설치합니다. npm i -g @angular/cli 다음 명령어를 ..

  • Web Programming/Angular

    Angular Ngrx 활용하기 - Part1. Ngrx란?

    안녕하세요 씨앤텍 시스템즈의 김준형 입니다. 이번 포스트는 Ngrx란?에 대해서 정리해 보았습니다. ngrx.io/docs 문서를 참고하여 작성하였습니다. 1. Ngrx 란? Ngrx는 Angular에서 반응형 애플리케이션을 구축하기 위한 프레임 워크입니다. 페이지를 이동할때 변수를 그대로 가져가서 사용하고 싶을때 사용하거나, Java와의 Rest통신 후 결과값을 저장할 때 많이 사용합니다. 예를들어, 밑에 그림과 같이 Store에 값을 저장해 놓고 다른 페이지에서 가져다 쓸 수 있는 편리한 기능입니다. 이러한 과정을 상태관리라고 합니다. Angular 1버전인 AngularJS에서는 State를 이용하여 상태관리를 하였으나, Angular의 버전이 높아지면서 상태관리를 더 편하게 할 수 있는 Ngrx를..

  • Web Programming/Angular

    Angular 기초 이론

    안녕하세요 씨앤텍시스템즈 홍정화 연구원입니다. 이번 포스트에서는 Angular의 이론과 TypeScript에 대하여 정리해 보았습니다. 1. Angular 2. TypeScript 1. Angular Angular는 종합 프레임워크입니다. 하나의 애플리케이션을 구축할 때, 모든 애플리케이션의 공통적인 개발 환경을 제공해주며, 개발에 필요한 화면구성, DB연동과 같은 개발환경들에 공통적인 부분을 제공함으로써 개발 시간 단축과 리소스 비용 절감 등 생산성을 크게 높여주는 역활을 합니다. 프레임워크 : 프로그래밍에서 특정 운영 체제를 위한 응용 프로그램 표준 구조를 구현하는 클래스와 라이브러리 Angular는 Google에서 만든 SPA(singule page application) 방식의 프론트엔드 개발을 ..

  • Web Programming/Angular

    Angular란?

    안녕하세요 씨앤텍 시스템즈의 김준형입니다. 이번 포스트는 Angular에 대해서 정리해 보았습니다. 오늘날 JAVA를 이용한 시스템 개발에 많이 사용되는 프레임워크인 Angular는 2009년 Google의 직원인 Miskio Hevery의 개인 프로젝트에서 출발했습니다. 개인 차원에서 시작한 프로젝트였지만 초기 아이디어에 대한 반응이 좋아서 현재는 구글의 공식 지원 프로젝트가 되었습니다. 그렇다면 Angular의 인기는 어떻게 될까요?? 확실히 Vue.js와 React와는 차이가 있는 모습입니다. Vue.js, React, Angular 중 개발 난이도는 어떻게 될까요? Vue.js

  • Web Programming/Angular

    TypeScript란?

    안녕하세요 씨앤텍 시스템즈의 김준형 입니다. 이번 포스트는 TypeScript에 대해서 정리해 보았습니다. TypeScript는 Microsoft에서 개발하고 유지/관리하는 Apache 라이선스가 부여된 오픈 소스 입니다. 동적 타이핑, 정적 타이핑을 지원하며 ES6의 클래스, 모듈 등과 ES7의 Decorator 등을 지원합니다. Angular의 TypeScript 정식 채용으로 Typescript에 관심이 커져가고 있습니다. 구글은 사내 표준 언어로 TypeScript의 사용을 승인 구글 애널리틱스, 파이어베이스, 구글 클라우드 플랫폼 등 대규모 프로젝트에 사용 중입니다. TypeScript의 장점 1. 정적 타입 코드상으로는 어떤 타입의 인수를 전달하여야 하는지, 어떤 타입의 반환값을 리턴해야 하는..