[Angular] 모델, 값이 바뀌었는데 화면 template 이 업데이트 되지 않을 때 조치 팁

안녕하세요. 명동섞어찌개입니다. Angular 로 화면을 만들다 보면 종종 서버에서 값을 읽어와서 비동기로 화면이 업데이트 되는 상황에서, 화면에 바뀐 값이 반영되지 않는 경우가 생깁니다. 분명 ts (typescript) 의 값은 바뀌었고, 서버에도 문제가 없는데 html template 화면만 값이 제대로 표시되지 않는 경우가 있습니다. 이럴 때 사용할 수 있는 간단한 방법을 공유하려고 합니다. 1. ngIf = "flag == true" 를 씁니다. data.html 1 2 3 4 5 < div * ngIf = "data.length > 1" > < span * ngFor = "let item of data; let idx=index" > < span >{{ item }}</ span > </ span > </ div > data.ts 1 2 3 4 5 6 7 8 9 10 11 12 13 14 data = null ; . . . getData () { this . dataService . getDatas (). subscribe ( data => { this . data = data . result ; }, ( { error } ) => { } ) } 비동기로 서버에서 값을 읽어올 때, 값이 들어온 시점에 (data.length > 1) 정확히 데이터를 들고 화면을 그려주기 위해 template 쪽에 ngIf 문을 이용해서 그려줍니다. 저런식으로 화면 일부가 데이터가 계속 바뀜에 따라 지속적으로 업데이트 되어야 하는데, 값은 잘 들어오지만 template 은 새로 그려지지 않을

[Angular] history back 기능 구현 : 상세 화면 뒤로가기하여 목록 화면으로 이동 시 검색조건 그대로 보여주기

이미지
안녕하세요, 명동섞어찌개입니다. 오늘은 관리자 화면에서 검색 조건을 선택해서 검색 후, 필터링 된 결과물 상세보기를 한 다음 뒤로 돌아갔을 때 기존 검색조건이 그대로 남아있도록 하는 방법에 대해 알아보겠습니다. 말로 하니까 어려운데요;; 아래 화면을 보시면 !! 저 빨간 박스 부분에서 검색 조건을 선택하고, 아래에 필터링 된 결과물 목록 중 하나를 클릭해서 상세 페이지로 갔다가, 다시 목록 페이지로 돌아오면 기존에 선택한 검색 결과가 저장되지 않고 사라지는데요. 그걸 보존하는(?!) 방법을 알아보겠습니다. 구현 방법은.. 저같은 초짜는 localStorage 를 쓸까 cookie 를 쓸까 (.....;;;;) 별 생각을 다 하지만 가장 간단하고 흔하고 안전한 방법은 route 를 이용하는 겁니다 주소창에 뒤에 조건식을 ? 다음에 & 로 구분해서 보존하는 거요. 아래처럼요. https://devcloud.ipatioplatform.com/admin/cdn/list?inputKey=originalFileName&inputValue=&deletedYn=N&organizationId=1234995959595&taskSystemId=&templateId=&from=2015-04-06&to=2020-04-06&periodKey=created&sortBy= 1. 먼저 저희 쪽 목록 화면이 어떻게 구현되어있는지 간단하게 살펴보겠습니다. cdn-list.component.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 < mat - form - field class = "customSelector" > < mat - label > 이용기관 </ mat - label > < mat - select [( valu

Static에 대해 알아보자

안녕하세요 델리만쥬입니다~! 프로그래밍을 할수록, 기본이 얼마나 중요한지 느끼고 있습니다. static에 대한 예약어를 보다가 순간 static이 정확히 뭐였지? 라는 생각이 들어서  정리해보자 합니다. 프로그래밍은 정말 기본이 탄탄해야 한다고 느끼는 요즘입니다^^.. Static의 특징 프로그램이 종료되지 않는 한 메모리가 소멸되지 않는다. 특별히 초기값을을 지정하지 않아도 자동으로 0을 가진다 초기화는 딱 한번만 수행된다 static은 변수나 메소드에 예약어로 사용 static을 사용한 변수나 메소드는 클래스가 메모리에 로딩될때 자동으로 생성 객체의 생성없이 바로 사용이 가능 -> 편리하고 속도가 빠르다 static 키워드를 사용하는 이유는 무엇일까요? 공통적으로 쓰여지는 변수 또는 메소드에 대해 매번 메모리에 로딩하는 것보다 전역변수처럼 쓰여지게 하여 효율성을 높인다 객체의 생성없이 바로 사용가능하여 프로그램내에서 공통으로 사용되는 데이터들을 관리할때 이용할수 있다 공통으로 사용되는 변수에 대해 예제 코드를 보겠습니다 public   class  CommonStatic {      static   String  carName  =   "람보르기니" ;           public   static   void  main( String [] args) {         CommonStatic user1  =   new  CommonStatic();         CommonStatic user2  =   new  CommonStatic();                   System . out . println ( "user1의 소유 차 : " + user1.carName);          System . out . println ( "user2의 소유 차 : " + user1.ca

REST란?

안녕하세요. 남산돈가스입니다. 오늘은 REST 란 무엇인가에 대해서 알아보려고 합니다. REST란 Represendtational State Transfer의 약자로 소프트웨어 아키텍처의 한 형식으로 정의되어있습니다. 이 용어는 2000년 로이 필딩(Roy Fielding)의 박사학위 논문에서 처음으로 소개되었습니다. 당시 로이 필딩은 웹(HTTP)이 설계의 우수성에 비해 제대로 사용 되어지지 못하는 모습에 안타까워하며 웹의 장점을 최대한 활용할 수 있는 아키텍처로써 REST를 발표 하였습니다. 그렇다면, REST 하다는 것은 어떤 것을 의미할까요? 제가 이해하기 쉽게 정의한 "REST하다" 는 것은 웹에서 제공하는 모든 자원들에 각자 고유한 URI를 정의해 그 URI만 보더라도 해당 자원들의 명세를 표현하고 이해할 수 있게하는 디자인 방식(?) 방법론(?) 이라고 생각합니다. 따라서 RESTful API는 REST의 설계방식을 반영한 API를 제공한다는 것을 의미할 수 있습니다. 여기서 말한 REST의 구성은 어떤 것이 있는지 알아보겠습니다. REST의 구성 자원의 식별 (Resource) 요청 내에 기술된 개별 자원을 식별할 수 있어야 한다. 웹 기반의 REST 시스템에서의  URI 의 사용을 예로 들 수 있다. 자원 그 자체는 클라이언트가 받는 문서와는 개념적으로 분리되어 있다. 예를 들어, 서버는 데이터베이스 내부의 자료를 직접 전송하는 대신, 데이터베이스 레코드를 HTML, XML이나 JSON 등의 형식으로 전송한다. 메시지를 통한 리소스의 조작  (Verb)  클라이언트가 어떤 자원을 지칭하는 메시지와 특정 메타데이터만 가지고 있다면 이것으로 서버 상의 해당 자원을 변경·삭제할 수 있는 충분한 정보를 가지고 있는 것이다. 자기서술적 메시지  (Representations) 각 메시지는 자신을 어떻게 처리해야 하는지에 대한 충분한 정보를 포함해야 한다. 예를 들어 MIME type과 같은

[NCP] 탄력적 서버 확장을 위한 오토스케일링 구성하기 (2) - Auto Scaling Group 이벤트 및 정책 설정

이미지
안녕하세요 남산도서관 입니다. 지난 포스팅에 이어서 Auto Scaling 이벤트 및 정책을 설정해 보도록 하겠습니다. 지난포스팅 - [NCP] 탄력적 서버 확장을 위한 오토스케일링 구성하기 (1) 1. Auto Scaling Group 설정 우선  Auto Scaling 메뉴에서 Auto Scaling Group 을 선택하여 설정 화면에 진입한 후 [Auto Scaling Group 생성] 버튼을 선택합니다 Launch Configuration 선택 화면이 표시됩니다. 지난 포스팅에서 생성했던 항목을 선택하고 [다음] 버튼을 클릭합니다. 다음은 그룹설정 단계 입니다. Auto Scaling Group 이름을 설정한 후 항목을 입력해 줍니다. <필수>  - Auto Scaling Group 이름 : 원하는 이름을 입력합니다.  - 최소용량 : 트래픽 감소에 따른 서버 축소 시 최소 인스턴스 유지 수량입니다.    (최소용량 이하로는 인스턴스가 줄어 들지 않습니다)  - 최대용량 : 트래픽 증가에 따라 서버 증설 시 최대 인스턴스 수량입니다.    (트래픽이 아무리 늘어나도 최대용량 이상 서버가 생성되지 않습니다.) <선택>  - 기대용량 : 그룹 생성 시 최초로 만들어질 인스턴스 수량입니다.    (이후에는 정책에 따라 자동 관리 됩니다)  정보 입력이 완료 되면 [다음] 버튼을 선택합니다. 다음은 서버가 증가/감소 할 수 있도록 정책을 설정합니다. [정책설정] 항목을 선택하면 설정 화면으로 진입합니다. 이벤트 설정은 이후 프로세스에서 별도로 진행 하게 됩니다. 여기서는 이벤트 발생 시 서버를 몇 대 증가/감소 시킬지에 대한 정책만 설정합니다. 항목 입력이 완료 되면 [다음] 을 선택합니다. 이제 Auto Scaling 정책이 실행되서 서버가 생성되거나 반납되는 경우에 알림을 통보할 대상을 지정합니다. 통보대상 등록이 되어있지 않은 경