희운의 일상 블로그

Angular에서 뒤로가기 시 스크롤 위치 복원스크롤이 많은 페이지에서 아이템별 상세 페이지를 확인한 후 뒤로가기 했을 때, 기본적으로 처음부터 다시 로드되는 경우가 많습니다. 일부 사용자는 이 방식을 선호할 수도 있지만, 대부분의 경우 이는 불편할 수 있습니다. 예를 들어, 사용자가 아이템을 클릭한 위치에 연관된 다른 아이템들이 있을 때, 또는 클릭한 아이템이 내가 찾던 것인지 확인해야 할 때, 이미 여러 번 스크롤을 했던 페이지가 초기화되면 다시 스크롤을 내려야 하는 번거로움이 발생합니다. 따라서, 사용자 경험을 개선하기 위해서는 뒤로가기 했을 때 이전에 클릭한 위치로 돌아가도록 하는 편이 사용자에게는 유리합니다.* 스크롤 이벤트는 아래 링크 참조angular Infinite Scroll을 이용한 페..

angular  Infinite Scroll  페이징 처리일반적으로 게시판처럼 데이터를 계속 누적해서 보여줘야 할 때, 페이징을 통해 데이터를 나누어 보여줍니다. 보통 페이징은 "이전, 다음, 첫 페이지, 끝 페이지, 1, 2, 3, 4, ..."와 같은 형태로 구성됩니다. 그러나 데이터 양이 많고, 특히 화면이 작은 모바일 환경에서는 이러한 방식이 불편할 수 있습니다. 이 문제를 해결하기 위해, 스크롤 이벤트를 감지하여 자동으로 페이징을 처리하는 방식이 많이 사용됩니다. 사용자가 스크롤을 내릴 때마다 다음 페이지의 데이터를 자동으로 로드하여, 번호를 누르지 않아도 계속해서 데이터를 볼 수 있게 합니다. 다음은 Angular에서 디렉티브(directive)를 사용하여 스크롤 이벤트를 감지하고, 페이징을 ..

rxjs 비동기 처리 예제* 라우터 이동 혹은 5분에 한 번씩 api를 다시 조회const REFRESH_INTERVAL = 60000 * 5; // 5분public data$ = new Observable();private cache1$: Observable | undefined;get SyncData(): any { if (!this.cache1$) { const timer$ = timer(0, REFRESH_INTERVAL); const router$ = this.router.events.pipe(filter(e => e instanceof NavigationEnd)); this.cache1$ = merge(router$, timer$).pipe( dis..

angular 설치용 라이브러리 만들기(npx 기준)1. 라이브러리 작성과 상관없이 메인이 되는 Angular Project를 생성해야 함  npx -p @angular/cli@11.1.0 ng new 프로젝트명 --no-create-application2. 생성된 프로젝트 폴더 이동  cd 프로젝트명3. 생성된 프로젝트 폴더에서 라이브러리 생성   npm run ng generate library [library-name]4. 로컬용 라이브러리 배포 파일 생성: package.json 파일의 scripts에 아래 문구 추가"build_lib": "ng build --prod 라이브러리명(폴더명)","npm_pack": "cd dist/라이브러리명 && npm pack","package": "npm ru..

카카오맵 api 연동우선  angular 기반의 카카오맵을 연동하기 전에 아래의 경로를 통해 카카오  api 키를 발급받아야 합니다.카카오 API: https://developers.kakao.com/* 회원가입 하고 내 애플리케이션 추가하기를 한후 앱 설정 > 앱 키 의 Javascript 키를 복사해 둡니다.(angular는 자바스크립트 기반이므로 당연히 javascript 앱 키가 필요합니다.)* 카카오맵 연동 페이지 컴포넌트 생성한후에 아래와 같이 셋팅한후에 원하는데로 사용 하시면 되며, 참조된 맵 api 샘플 가이드를토대로 커스텀하게 수정해서 사용하면 됩니다.* 카카오 지도, 마커, 마커 인포 윈도우 표시 (주석 및 내용참고 :  https://apis.map.kakao.com)    impor..

우선 동기와 비동기에 대해서 먼저 알아보자면  동기(sync) 란 말 그대로 동시에 이벤트 발생하는 것으로 여러가지 결과를 수행할때 선행되는 이벤트의 요청후 결과 응답을 받은 뒤에 다음 이벤트(동작)이 이루어지는 것으로 순차적이고 직렬적인 작업에 사용하며, 비동기(async)는 선행되는 다른 이벤트의 결과 응답 여부와 무관하게 다른 이벤트(동작)이 이루어지는 것으로 순서 상관없이 병렬적인 작업에 사용합니다.* 예) 자바스크립트의 대표적인 비동기 구문인 setTimeout 을 이용한 소스 코드console.log('code start');setTimeout(()=>{console.log('5초 뒤에 실행');},5000);console.log('code end');setTimeout(()=>{console..

angular tree 기능 구현 Angular에서 라이브러리를 사용하지 않고 트리를 구현하려면 여러 가지 방법이 있지만, 가장 간단하고 기본적인 방법은 컴포넌트와 재귀 함수를 사용하는 것입니다. 1. 트리 노드를 나타내는 컴포넌트 생성하기 가장 먼저, 트리 노드를 나타내는 컴포넌트를 생성해야 합니다. import { Component, Input } from '@angular/core'; @Component({ selector: 'app-tree-node', template: ` {{ node.name }} `, styles: [ ` .tree-node { padding-left: 20px; border-left: 1px solid #ccc; } .node-label { font-weight: bold..

Angular에서 이미지 로딩 속도를 개선하기 위한 방법 일반적으로 사용되는 몇 가지 방법입니다. 1. Lazy Loading Lazy Loading은 필요한 컴포넌트만 로딩하여, 초기 로딩 속도를 개선하는 방법입니다. 이미지도 마찬가지로 필요할 때 로딩하여, 초기 로딩 속도를 개선할 수 있습니다. 예를 들어 Angular에서 이미지를 Lazy Loading으로 처리하려면, img 태그를 사용하는 대신 아래와 같이 ng-template과 ng-container 디렉티브를 사용하여 이미지를 렌더링 할수 있습니다. 1) ng-template 디렉티브를 사용하여 이미지 템플릿을 생성 2) ng-container 디렉티브를 사용하여 이미지를 렌더링합니다. 위 코드에서 isVisible 변수 값이 true일 때,..

Angular ExpressionChangedAfterItHasBeenCheckedError 오류 Angular는 변경 감지 사이클을 통해 표현식을 바인딩하는데 때때로 ExpressionChangedAfterItHasBeenCheckedError와 같은 바인딩 오류가 발생합니다. 일반적으로 다음과 같은 경우에 많이 발생합니다. 1. Angular의 뷰 라이프사이클 후킹 메소드 안에서 모델 데이터를 변경한 경우 2. Angular의 Change Detection이 실행된 후에 모델 데이터를 변경한 경우 3. 자식 컴포넌트에서 이벤트를 트리거하여 부모 컴포넌트의 속성을 변경한 경우 이 오류를 해결하기 위해 Angular는 몇 가지 방법을 제공합니다. 1. ChangeDetectionStrategy 설정 컴포..

Angular로 웹페이지를 최적화하기 위해서는 다음과 같은 요소들을 고려해야 합니다. 1. Change Detection 최소화 Angular에서는 Change Detection이 매우 중요한 역할을 합니다. 그러나 매번 Change Detection이 실행될 때마다 전체 DOM을 검색하는 것은 성능에 악영향을 미칩니다. 이를 방지하기 위해서는 Change Detection 최소화를 위해, OnPush Change Detection Strategy를 적용하거나, ngZone을 이용하여 비동기 처리를 할 때 Change Detection을 수동으로 실행하는 방법이 있습니다. 2.HTTP Request 최적화 HTTP Request는 웹페이지의 성능을 크게 저하시키는 요소 중 하나입니다. 따라서, 가능한한 ..