Decorator 반복적으로 선행되어야 할 로직을 한줄로 쉽게 호출하는 방법이다. 이는 이미 Angular에 내포되어 있을 수도 있고, 개발자가 직접 구현을 할 수도 있다. (Java, Kotlin의 Annotation과 유사한 개념이다.) @Decorator와 같이 앞에 @을 붙여서 호출하며 Class, Function, Parameter, Variables 에 적용할 수 있다. 하지만, 이 Decorator가 어디에 붙느냐(Class, Function, Parameter, Variables)에 따라서 사용할 수 있는 방법이 다르기에 개발자는 이를 유의해야한다. Class Decorator Class 명 상단에 작성한다. 생성자(constructor)를 인수로 갖는다. Class의 생성자, 함수에 접근..

React.js는 단방향 데이터 바인딩만 지원하고 있고, Angular.js는 양방향 데이터 바인딩을 지원하기에 두개가 어떤 차이가 있을까 조사하던 도중, Angular.js 양방향 데이터 바인딩의 원리에 대해 조금 더 살펴보고자 한다. ([Javascript] Data Binding 참고) Angular.js는 Angular Context가 존재한다. Angular Context 내에는 *Digest Loop가 존재한다. (*Digest Loop: Watch List 루프를 돌며 $watch를 통해 Model의 변경을 체크하고 변경되었을 경우 View를 업데이트한다.) Scope 내에서 watch가 Model을 View에 반영하는 코드가 되고, 이 watch들을 실행시켜주는 과정이 주기적으로 실행되기 ..

개발을 하다보면, Phase를 나눠야하는 상황이 반드시 존재한다. (*Phase ? → Application Deploy Version) Alpha, Beta, Production으로 나눠서 설명하겠다. Alpha : 개발자가 개발을 진행하고, 실제 기기에 올려서 테스트를 할 때 사용되는 Phase. Beta : 업체의 요청, 혹은 개발이 완료된 버전을 올려서 QA를 진행할 때 사용되는 Phase. Production : 실제 운영중인 버전 위처럼 Phase를 나누게 되면, Alpha로 실행을 했을 때에는 개발 서버로 API를 호출해야하는데, 그거에 대한 관리를 진행하는 방법이다. (개발하고, 테스트중인 버전이 실운영서버로 호출하게 되면 큰 문제가 발생하니..) ng new temp-project 위 명..

이전 프로젝트를 진행하면서 이 부분에서 시간 소모가 많이 컸다. Angular에서 외부 Library를 Import해서, 그 외부 Library에 있는 변수를 사용해야 했는데, 그게 말처럼 쉽지 않았다. (JS에서는 Import 시키고, 그냥 new Kakao(); 해서 사용하면 될텐데.. Angular에서 TypeScript로 개발하다보니 해당 부분에서 계속 오류가 발생했다.) 먼저 Angular에서 외부 Library를 Import할라면 index.html에 import를 진행해줘야 한다. 1 2 cs index.html에다가 위 script tag를 이용해서 import를 진행한다. (여기서 src="//..." 를 보면 protocol Type이 정해져 있지 않은데 '//' 를 이용할 경우 htt..

이전 프로젝트를 진행하면서 겪었던 증상이다. Front : Angular Back : Kotlin/SpringBoot 위 개발 스펙으로 개발을 진행하고 있었고, Front에서 카드 결제 로직을 호출해야 했었다. (카드 결제 로직은 자체개발이 아닌, 특정 업체에서 제공한 Library를 Import해서 처리하는 방식으로 사용하고 있었다.) 특정 업체에서 제공한 Library를 Import는 잘 했고, 안에 있는 함수까지 잘 호출했는데 해당 Library에서 결제가 끝난 후에 Response를 줄 때 우리한테 Redirect Code를 전달하는 것이 문제였다. (Http Status Code 302) Angular에서는 새로고침이 될 경우 모든 변수가 초기화가 되는데, 결제가 완료되도 로그인 세션을 유지하고..