BaeBox

1. AngularAngular는 Google이 개발한 프론트엔드 프레임워크이다. 자바스크립트를 기반으로 웹 애플리케이션을 개발하기 위한 도구와 기능을 제공한다. Angular는 풀스택 개발에 적합하며, 큰 규모의 애플리케이션을 구축하는 데 적합한 강력한 기능을 가지고 있다. 그러나 학습 곡선이 높고 초기 설정이 복잡할 수 있다는 단점이 있다.2. ReactReact는 Facebook에서 개발한 라이브러리로, 웹 애플리케이션의 사용자 인터페이스를 구축하기 위해 사용된다. React는 컴포넌트 기반 아키텍처를 사용하여 재사용 가능하고 유지보수가 용이한 코드를 작성할 수 있다는 장점이 있다. 또한 React는 가상 돔(Virtual DOM)을 사용하여 성능을 향상시키고, 다른 프레임워크와 쉽게 통합할 수 있..

Angular가 사용하는 모듈 번들러는 Webpack이다. Webpack 4.0.0 부터는 프로젝트를 번들링하기 위한 구성 파일이 필요치 않다. 그래서 난 앵귤러를 쓰면서도 얘들이 모듈 번들러를 뭐 쓰는지도 몰랐다. 그러다 Module bundler에 대해 정리하다보니 궁금해져서 찾아봤는데, 생각보다 잘 안나와서 애먹었다. 그러다 찾은 것이 ... 이걸 찾는데 왜 이리 오래 걸렸는지.... 어쨌든, 찾다보니 굉장히 신박한게 하나 있어서 들고왔다. 숨겨진 설정파일 대신 사용자가 명시적으로 지정한 Webpack 설정파일을 적용하여 번들링을 할 수 있는 기능이다. 그렇다한들!!! 앞으로 귀찮다고 안 볼 것 같으니 링크나 걸어둔다. 쓸 일이 있어야지. okta 인증은 좀 재밌어 보이니, 내용이 궁금하신 분들은 ..

Angular component에 json 파일을 import하여 사용하려고하면 allowSyntheticDefaultImports 뭐시기뭐시기하면서 오류가 난다. 즉, json 파일을 import 하여 사용하는 것이 SyntheticDefaultImports에 해당한다는 뜻이다. tsconfig.json 의 compilerOptions에 아래 옵션들을 추가하여주면 된다. https://mariusschulz.com/blog/importing-json-modules-in-typescript Importing JSON Modules in TypeScript TypeScript 2.9 introduced a new --resolveJsonModule compiler option that lets us imp..

많은 방법이 있겠지만, 내가 소개하는 방법은 기본적으로 html2canvas를 이용하는 것이다. html2cavnas : selector로 집어온 html을 base64 포맷의 이미지로 만들어주는 기능을 제공한다. base64화된 이미지를 그대로 PDF, PPT, Word로 export해주는 툴에 붙여 넣으면 된다. 참 쉽죠? 이미지에 한해서는 이런 방식으로 해결이 가능하다. 사실 이미지 넣는게 가장 어려웠는데... ㅎㅎ;; 그 외의 것들은 공식문서에 다 친절히 나와있더라. 아래 소스코드의 canvas.toDataURL('image/png') 라는 코드는 base64를 반환한다. 생각보다는 내용이 간단하게 끝났다. 다행이다. 이주가량 붙잡고 있던 내용인데 헣... 뭔가 기분이 묘하다. 이 글을 보는 누군..

Angular 초심자인 나로서 앵귤러를 활용하면서 두번째로 크게 막혔던 것은 컴포넌트를 실행중에 동적으로 생성하는 것이었다. 분명 이런 기능은 제공할거라는걸 알긴 하는데 그걸 뭐라고 부르는지 몰라서 고생했다 사용법은 간단한다. 하단 링크에 있는 공식문서를 간단히 따라하면 된다. 요는, ComponentFactoryResolver 클래스가 제공하는 resolveComponentFactory 함수를 이용하는 것이다. ComponentFactoryResolver 의 resolveComponentFactory 함수가 컴포넌트를 resolve 하고 createComponent 함수를 이용하여 컴포넌트를 생성한다. 생성까지는 어렵지 않았을거라고 생각한다. 여기서부터는 굳이 안 봐도 상관은 없지만, 개인적으로 흥미로..

Angular 내 컴포넌트간의 데이터 공유. 생각컨대, 나같은 초심자가 처음으로 막히는 부분이 아닐까 한다. 인터넷을 조금 뒤적거리다보니 여러 방법이 나오는데 크게 아래 세 가지 방법으로 귀결되더라. @Input @Output Bidirectional-Service (양방향 서비스) 위의 두 가지 방법인 @Input 태그와 @Output 태그를 이용하면, 부모-자식(parent-child)의 관계에 있는 컴포넌트끼리 데이터 공유가 가능하고, Bidirectional-Service, 쉽게 말해 중간다리인데, 이 방법을 이용하면 굳이 부모-자식 관계에 있지 않은 컴포넌트 끼리도 데이터 공유가 가능하다. 개인적으로는 이 방법이 제일 나은 것 같다고 생각한다. 내가 구구절절하게 설명할 필요 없이 아래 링크의 예..

컴포넌트 : 화면의 일부를 조작하는 구성 요소. 컴포넌트 메타데이터 : 클래스를 컴포넌트로 등록하는 메타데이터 selector : 컴포넌트 인스턴스가 DOM 트리의 어떤 자리에 위치할지 CSS 셀렉터로 지정. templateUrl : 컴포넌트 HTML 템플릿을 외부 파일에 정의할 때, 이 템플릿 파일의 위치를 지정. styleUrls : css 를 외부 파일에 정의할 때 , css 파일의 위치를 지정. providers: 컴포넌트가 생성될 때 의존성으로 주입되는 서비스의 프로바이더를 지정. 위의 예시 이미지에는 없음 provider는 module 에서도 선언 가능하며 module에서 선언했다면 그 범위는 모듈 내로, component 에서 지정했다면 해당 컴포넌트가 생성될 때마다 서비스 인스턴스도 새로이..

Angular: 프론트엔드 프레임워크의 한 종류이다. Java 진영의 Spring 프레임워크처럼 프론트엔드 측의 프레임워크 중의 하나로, 소위 React 와 Vue를 위시해 프론트엔드 3대장이라고 불리운다. 리액트와 유사하게 flux 패턴에서 영감을 받아 NgRx라는 리액트의 Redux 와 유사한 데이터 처리 방식을 가지기도 한다. 단, 권장/선택사항이므로 반드시 이를 차용할 필요는 없다. 그렇지만 rxjs 는 기본으로 깔려있다. https://angular.kr/ Angular 가이드 Angular 가이드 angular.kr https://ngrx.io/ NgRx Docs ngrx.io