반응형 Angular5 🐏 Angular ng-content 😀 ng-content? vue에서는 slot(슬롯)이 있다면 angular에서는 ng-content가 있다. 사실 angular가 먼저 세상에 나왔기때문에 vue가 따라 했다고 보면 될것같다. ng-content는 보통 css는 같으나, 안의 내용물(텍스트)가 다를때 사용된다. 그리고 재활용성이 높다. 🙄 ng-content는 어떤경우에 사용되는가? 화면마다 컴퍼넌트 구조는 동일하나, 안의 내용이 다를 경우 사용되는것으로 보인다. 😏 ng-content으로 header,main, footer 만들어보기 이번에는 간단하게 header, main, footer을 ng-content으로 간단하게 작성을 시작해보자. 구상은 아래와 같다. 코드(app-content.component.html) 위 코드 처럼 추.. 2022. 10. 26. 😓ngrx를 이용하여 에러난 파일처리 🪜 문제상황 지난 프로젝트 유지보수 진행중 전송되지 않는 파일이 존재하여, 응시완료가 되지 않는 경우가 발생하였다. 그리하여 ngrx를 활용하여 에러난 파일을 store담아서 처리 해보기로 하였다. 문제상황 및 해결 방식은 아래와 같다. 위처럼 "3번"에서 에러가 날 경우 멈추는 것이 아닌 Store에 담는다. 👨💼 500 에러 날 경우 Store에 담기 🦧 1번 상황에서 에러가 발생할려면 actions에 addFileAction를 등록한다. //file.actions.ts import { createAction, props } from '@ngrx/store'; import { File } from './file'; // File 모델을 만들어야 한다. export const addFileAction.. 2022. 7. 30. Ngrx 도입 🦧 Ngrx? ngrx는 Angular에서 사용되는 상태관리 라이브러리이다. 옛날에 기억으로는 Redux에 감명을 받았다는 것을 본적이 있다. 🐅 Ngrx 구조 구조는 위와 같으며 Component에서 Action을 호출하면 Reducer(연산처리 같은)으로 store에 저장한다. 그리고 selector를 통해 component에 보여줄수 있다. Effects는 API를 사용할 경우 필요한 것이며, Actions을 호출할때 Effects에 등록된 Action을 호출하여 API를 호출하는 형식이다. 🚢 Ngrx 세팅 1-1. ☔ tsconfing.json에서 alias 설정 store의 경로를 alias로 설정한다. { . . . . . "compilerOptions": { "paths": { "@stor.. 2022. 6. 16. Rxjs? 😢 RXjs? 자바스크립에서 리액트 프로그래밍은 자바스크립트에서는 "동기"로 처리하는 방식(map,array,... 등등) 과 "비동기"로 처리하는 방식(Ajax , 사용자 이벤트 등..) 각각 처리하는 방식이 다르며 순서의 흐름을 찾기가 힘들다. 그리하여 동기,비동기를 하나의 데이터 흐름으로 처리하는게 자바스크립트에서 리액티브 프로그래밍이라고 생각합니다. 🤩 Rxjs 작동원리 Rxjs에서는 데이터를 방출하는 Observable 과 Obserable를 구독하는 Observer가 존재합니다. Observable 이 데이터를 방출하면, Observable를 구독하는Observer는 데이터 변화에따라 반응한다라고 생각하면 될것 같습니다. 😢 Angular 에서 Rxjs 사용해보기 이번에는 코드를 통해 Obse.. 2022. 2. 19. 이전 1 2 다음 반응형
