GoGo GoGo

Material에서 Tree 기능은 아래와 같다. Material에서 제공하는 Tree 예제 코드 {{node.icon}} {{node.displayName}} {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} {{node.displayName}} tree를 사용하려고 예제 코드를 실행시켰는데, 특수 문자(코드에서는

지금까지 다양한 언어를 사용해서 개발을 해왔지만, 실제로 테스트 코드를 짜본적은 거의 없다. 1-2년 전에 API 서버를 만들 때, local 환경에서 JUnit 테스트를 해본 적이 있었는데 이 또한 제대로 테스트를 한거라고 볼 순 없었다. 말이 테스트지 local DB에 테스트용 데이터를 넣어야할 때, JUnit 코드에서 랜덤 함수가 들어간 로직을 돌린 적도 있었다. 아무튼 이번에 Front에서 테스트 코드를 짜볼 수 있는 기회가 생겼는데, 크루의 추천을 받아 Cypress를 이용해서 테스트 코드를 작성해 봤다. Test 종류 테스트에는 단위테스트, 통합테스트, 그리고 E2E 테스트로 나눌 수 있다. 먼저 단위/통합 테스트는 개발자의 관점에서 테스트를 하는 경우를 뜻한다. 서비스 로직을 실행했을 때, ..

NGXS는 Angular 상태 관리 패턴이자 라이브러리이다. React에서 상태 관리를 하기 위해 Redux를 사용했다면, Angular에서는 NGXS를 사용한다고 생각하면 좀 쉽다. NGXS는 Redux에서 사용되는 CQRS 패턴을 기반으로 모델링되었지만, 클래스 및 데코레이터와 같은 최신 TypeScript 기능을 사용하여 상용구를 줄였다. NGXS에서 주요 개념은 Store, Actions, State, Selects가 있다. 이 4가지 개념들의 흐름은 아래 그림과 같다. React에서 Redux를 공부할 때 봤던 그림과 비슷한데, 이 그림만 보면 완전히 이해가 잘 되지 않았다. documents 페이지에서는 다 영어로 되어있어서, 제대로 이해하기 힘들었다(ㅠㅠ) 그래서 ngxs에서 제공하는 샘플 ..

Angular tutorial 프로젝트를 따라하면서 Observable를 사용했는데, Observable, Observer 두 단어로 설명하다보니 잘 이해가 되지 않았다. 두 용어에 대해 찾아보다가 PoeimaWeb에 아주 좋은 예시가 나와있어 정리해본다. 1. Observable ? Observer? TV 방송국과 TV의 관계를 예로 들어보자. 방송국에서는 영상 정보를 계속해서 방출(emit)해야하고, TV는 방송국에서 방출하는 영상 정보를 가져와야한다. TV에서 방송국의 영상 정보를 가져오기 위해서는 방송국에 요청을 해야하는데, 이 과정을 구독(subscribe)라고 한다. (이 방식은 Push-scenario라고 하며, Pull-scenario 방식은 글 하단 URL에서 확인할 수 있다.) 방금 전..

Angular Tutorial을 따라하면서 기존 JQuery와는 조금 다른 데이터 바인딩 방법에 대해 알게 되었다. Data binding은 View와 Model을 하나로 연결하는 것을 의미한다. 1. JQuery에서의 Data binding 기존 JQuery에서는 DOM에 직접 접근해서 데이터를 조작하는 코드를 작성해야 했다. 아래 예제 코드를 보면, HTML 파일에서 h1 요소가 p 요소로 변경되면, Javascript에서도 $('h1')을 $('p')로 바꿔줘야 한다. 이처럼 Javascript는 DOM을 직접 조작하는 방식이기 때문에, View가 변경되면 로직도 변경될 가능성이 매우 높다. 하지만 Angular의 경우, DOM에 직접 접근하지 않고, Component 클래스 파일에서 Templat..

Angular 애플리케이션을 구성하는 기본 요소와 그 구조를 알아보자. 1. 모듈(Module) Angular 애플리케이션을 실습하다보면 가장 익숙한 것은 NgModule 이다. NgModule은 비슷한 기능을 하나로 묶어 관리하기 쉽도록 만든 모듈이다. 그렇다면 Angular에서 NgModule은 어떻게 이루어져 있을까? 아래 파일은 Angular에서 최상위 모듈을 뜻하는 AppModule이다. 여기서는 Angular 애플리케이션에서 사용하는 컴포넌트, 모듈 등을 선언한다. declarations와 imports에 포함된 컴포넌트와 모듈들은 튜토리얼을 따라하면서 추가된 것으로, 실제로 초기에는 이렇게 많지 않다 ^^; AppModule에서 다른 모듈을 사용한 것처럼, NgModule에서도 다른 NgMo..

Angular-CLI는 간단한 명령어를 사용하여 Angular 프로젝트 스캐폴딩(scaffolding)을 생성, 실행, 빌드할 수 있으며 Angular의 다양한 구성 요소를 선별적으로 추가할 수 있는 커맨드-라인 인터페이스(command line interface)이다. 개발용 서버를 내장하고 있어서 간단히 프로젝트를 실행시켜서 동작을 확인할 수 있다. Angular CLI는 Angular 프로젝트 스캐폴딩을 간단한 명령어로 생성해 주어 개발환경 구축에 소요되는 시간을 최소화할 뿐 아니라 표준 스타일 가이드를 제공한다. Angular CLI가 지원하는 기능은 아래와 같다. Angular 프로젝트 생성 Angular 프로젝트에 컴포넌트, 디렉티브, 파이프, 서비스, 클래스, 인터페이스 등의 구성 요소 추가..

프로젝트를 만들어보기 위해 npm 패키지를 설치하려고 했는데 아래와 같은 에러가 발생했다. internal/modules/cjs/loader.js:583 throw err; ^ Error: Cannot find module '../lib/utils/unsupported.js' at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15) at Function.Module._load (internal/modules/cjs/loader.js:507:25) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:..