angular4 전체적으로 사용되는 shared [뒤로가기] 버튼 제작 앵귤러에선 directive 라는게 있는데, directive란 html의 확장 기능으로, 앵귤러에서 특정 요소를 선택하고 해당 요소의 동작을 조작하기 위해 사용됩니다. 디렉티브는 html 요소에 앵귤러의 특별한 동작을 부여하는 역할을 하고, 디렉티브를 사용하여 웹 페이지의 동적인 부분을 생성하고 관리가 가능합니다. 내장 디렉티브 종류로는 ngFor 나, ngIf 가 있습니다. (vue.js 같은 경우엔 v-if 나 v-for 같은 디렉티브와 같은 움직임을 해요.) 이런 걸 나만의 라이브러리로 조금씩 만들면 어떨가 싶어서 만들어 보고 있는데, 첫번재로 뒤로가기 버튼 어디서든 이용할 수 있게 끔 뒤로가기 directive를 만들었습니다. import { Location } from '@angular/com.. 2023. 9. 14. 웹에서 안드로이드 운영체제 뒤로가기 버튼 제어 드디어 해결했습니다.. ㅠㅠ 말 그대로 웹에서 안드로이드 운영체제 기반의 기기에만 있는 뒤로가기 버튼을 제어했습니다. 대충 설명 하자면, 웹에서 안드로이드 운영체제 뒤로가기 버튼을 막는건 안됩니다. 원래는.. 그래서 구글링과 여러 사이트를 찾으면서 고안한 결과, 웹 뒤로가기 버튼을 감지하고 그걸 제어하는 거죠. 여러 방법들을 이용해 봤습니다. 1. 데코레이터를 이용(@HostListener('popstate')) 2. window.onpopstate 3. window.addListener 각 자 프로젝트마다 적용되는 게 다르겠지만, 저는 window.addListener를 이용했습니다. 1. 우선 함수를 선언합니다. // angular.js 를 이용해서 작업했기 때문에, angular 식으로 쓸게요. /.. 2023. 9. 13. Angular Guard에 대하여 Angular에서 Guard란.. 라우팅 시점에서 실행되는 중간 역할을 하는 기능 특정 조건을 검사하여 사용자가 특정 라우트로 진입할 수 있는지 없는지를 결정함 ex) 사용자의 권한, 인증상태, 데이터 로딩 등 Guard 사용법 1. Guard 클래스 생성 ng generate guard {guard-name} ng generate guard {guard-name} 2. CanActivate 인터페이스 구현 CanActivate 메서드는 라우팅을 허용할 지 여부를 결정하는 논리를 작성하는 곳 3. Guard 등록 Guard 클래스를 모듈에 등록하고, Guard 클래스를 사용하려는 라우터 또는 라우터 그룹에 등록해야 함. 일반적으로 RouterModule.forRoot() 또는 RouterModule.fo.. 2023. 5. 30. Angular js 장단점 및 개발 전 환경설정 회사를 들어오면서 Angular js를 이용하게 되었다. 입사 전 회사 기술에 대해 혼자 공부하게 되었는데 공부 내용을 끄적여 보겠음 Angular js 장점 컴파일 속도가 빠르다 MVC 패턴 개발이 가능하여 서버의 작업을 줄인다. 데이터 바인딩 기능으로 동적 웹 페이지를 손쉽게 구성한다 (옛말이고, React.js 나 Vue.js 보다 복잡하고 어려움..) UI 화면들을 재 사용할 수 있어 작업 생산성이 올라감 양방향 데이터 바인딩으로 유지보수 용이 프레임워크로 짜여진 틀이 있음 Angular cli 설치하기 npm install -g @angular/cli 개발 단계 들어가기 ng new my-app 클라이언트 서버 확인하기 cd my-app ng serve --open 이렇게 하면 angular 가.. 2023. 3. 27. 이전 1 다음