Angular.js16 [Angular.js] 삼성인터넷 scrollIntoView() 개요: 웹개발 중, 삼성인터넷에서 scrollIntoView 함수가 동작하지 않는걸 확인문제점 먼저 얘기하자면, 브라우저 별로 이벤트, 애니메이션 동작, 정책들이 조금씩 다르다.삼성인터넷에선 angular 스크롤 에니메이션이 잘 안먹힘. 그래서 따로 scss로 에니메이션을 만들어줘야한다. angular에선 @ViewChild라는 데코레이터를 사용하여 html 요소에 직접 닿을 수 있는데, 그중 scrollIntoView() 함수가 있음. export class MainPageComponent { // ViewChild를 활용해, html 요소를 직접 다룸 @ViewChild('topElement', { static: false }) topElement: ElementRef; eventFu.. 2025. 2. 11. [angular.js] @HostBinding()을 이용해, 컴포넌트에 직접 class binding 하기 개요: 컴포넌트 전체에 직접 클래스 바인딩 해서 디자인을 변경하는 상황이 생김angular에선 @HostBinding() 데코레이터를 이용하여, 해당 컴포넌트(host 요소)에 직접 클래스를 바인딩 할 수 있다. 사용법 1. 아래와 같이 HostBinding 을 이용해 해당 컴포넌트에 class를 변수를 통해 추가하거나 제거할 수 있다.(isExpanded가 true면 expanded 라는 클래스 추가, false면 expanded 클래스 제거)// 예시// 아래 코드는, isExpanded 라는 변수가 true가 될때, expanded가 클래스가 추가가 되는 코드. @HostBinding('class.expanded') get activeClass() { return this.isExpanded.. 2025. 2. 3. 바인딩 된 변수가 변화를 감지하지 못할때 개요: 부모 컴포넌트에서 자식 컴포넌트에 변수를 바인딩 하였는데, 부모 컴포넌트에서 변화가 되어도 자식 컴포넌트에서 변화를 인지하지 못함단순히 변수가 재할당 되거나, 값이 변화하는건 자식 컴포넌트에서도 변화를 인지함.switchData() { // i를 재할당 했을 시, 변화된 값이 lf-app 컴포넌트에 들어감 this.i = 4;}// 아래 html은 바인딩 하는 예시) 그런데 변화될 변수를 전체 재할당 하는게 아니라, 요소만 변화하게 된다면 그 변화를 인지하지 못함 (angular만 그러는진 모르겠음 다른 프레임워크 이용하는 분들 해보시고 알려주셈)switchData() { // someObject의 어느 한 요소만 변경했을 시, lf-app 컴포넌트에선 someObject의 전체 변화가 있는.. 2024. 9. 10. [angular.js] 화면에서 div가 안보일때 동작하는 directive 기능 제작 개요: 화면상, 어떠한 버튼이 사라지면, 아래에 fixed 되어 나오는 버튼을 제작하다가 종종 쓰이겠다 싶어서 directive로 제작IntersectionObserver란?js에서 제공하는 인터페이스대상 요소와 상위 요소, 또는 대상 요소와 최상위 문서의 뷰포트가 서로 교차하는 영역이 달라지는 경우 이를 비동기적으로 감지할 수 있는 수단 쉽게 얘기하면, 내 화면에 IntersectionObserver가 감지하고 있는 html 태그가 보이냐 마냐를 판단하는 인터페이스임 이걸 directive로 제작하여, 태그에 편리하게 달아줄 수 있을거 같다!(directive로 제작하면, 매 함수 불러다 쓸 필요없이 html에 직접적으로 표현할 수 있음!) import { Directive, ElementRef, Ev.. 2024. 6. 26. [Angular.js] base64데이터를 blob으로 변환 후, xlsx 파일로 다운로드 받기 개요: 고객데이터를 xlsx로 뽑는 기능을 제작하기 위해 공부 로직: 1. 클라이언트에서 api 요청하며, json 형태로 고객 데이터를 전달2. 백엔드에서 받은 데이터를 정제 후, base64(string)으로 인코딩3. 응답받은 클라이언트는 base64를 blob형태로 디코딩4. createObjectURL() 함수로, url을 생성한 뒤, a태그를 만들어 클릭시켜 다운로드 받게함5. 사용된 a태그는 document에서 지움 // component.ts downloadXlsx() { // 요청 및 응답 this.apiService.makeConsultingXlsxData(this.users as Policyholder[]).subscribe((res) => { // s.. 2024. 6. 26. [Angular.js] MVVM 패턴 개요: 플러터를 사용하는 개발 준비생이 mvvm 패턴으로 프로젝트 디자인을 한다는데, mvvm 패턴을 인지하고 angular.js 를 이용한 적이 없없어서 이번기회에 한번 공부함우선 플러터를 이용해서 프로젝트를 진행중인 개발 준비생 친구에겐, mvvm 패턴을 추천하지 않고 mvc패턴에 대해서 추천했다. 왜냐면 가장 클래식한 디자인 패턴이기도 하고, mvvm은 데이터 바인딩이 중요한데, 플러터에는 양방향 바인딩 처리가 안되기 때문이다. 우선 mvvm 패턴이란모델, 뷰, 뷰모델 세가지 구성 요소로 나누어 설계가 되는 패턴mvc 패턴과 유사하지만, controller 대신 viewmodel이라는 새로운 개념이 도입되었다. model이란데이터와 데이터를 처리하는 부분view란사용자에게 보여지는 부분 (html).. 2024. 6. 5. 이전 1 2 3 다음