gguldiary

보통 회사들에서 git branch전략으로 git flow를 사용하는데 자세한 정보는 많으니 git flow에 대한 얘기는 패스하고 우리 팀에선 git flow를 기반으로 좀 더 깔끔하게 브랜치 관리를 하기위해 노력하는데 거기에 대해 얘기해볼까 한다 보통 팀들의 브랜치는 요런식으로 관리될 것이다 여러 브랜치들이 여기저기 머지되어있고 커밋히스토리도 - xx이슈 수정 - 오타수정 - pr리뷰 반영 - Merge branch 'feat/~~' into develop 등등 불필요한 커밋 내역들이 그대로 남아있다 우리팀에선 rebase와 squash 머지 전략을 적절히 사용하여 브랜치를 깔끔하게 사용하고 있다 github pr에서 머지를 할 때 3개의 옵션이 있다 1. 머지커밋 만들기 2. 스쿼시 머지하기 3. ..

constructor는 ES6 클래스 문법의 표준으로 클래스에서 객체를 생성하는 시점에 호출되는 메서드 ngOnInit은 Angular가 컴포넌트를 생성할 때 호출되는 lifecycle constructor가 호출될 때는 앵귤러가 초기화 작업을 수행하기 전이므로 컴포넌트의 속성 가운데 템플릿과 바인딩한 속성이나 부모 컴포넌트로부터 전달받은 속성 등의 초기화를 보장하지 않음 constructor에는 순수하게 객체의 생성 시점에 필요한 간단한 초기화 로직만 넣는 것을 추천 (실제 로직은 수행하지 말아야함) API호출이나 그 밖에 앵귤러가 제공하는 기능은 반드시 onOnInit 호출 이후부터 이용할 수 있다. 출처: 앵귤러 첫걸음 Constructor: DI, 클래스 필드 초기화 등을 설정 ngOnInit: ..

웹의 대표적인 요소 URL 웹 자원이 인터넷상 어느 위치에 존재하고 있는지를 알려주는 방법 https://cdn.webfrontend.org/wp-content/uploads/2020/06/book2.png https:// 프로토콜 cdn 서브도메인 webfrontend.org 톱레벨 도메인 wp-content/uploads/2020/06 디렉토리 book2.png 최종경로 네트워크 프로토콜 URL을 통해 알게 된 웹의 자원 위치에 접근하는 방식 HTTP는 정보를 주고받는 헤더 부분과 실제 데이터를 주고받는 페이로드(바디) 부분으로 나뉘어짐 HTTP 프로토콜은 웹에서 클라이언트와 서버 사이에 필요한 정보는 헤더로 주고받고, HTML이나 이미지 같은 실제 데이터는 페이로드 부분에 받음 HTML 해당하는 콘..

CDN(Content Delivery Network, 콘텐츠 전송 네트워크) 웹 캐시 서버들을 전 세계에 분산 배치하고 원본 서버의 콘텐츠들을 웹 캐시 서버에서 캐시해 사용자들에게 서비스함으로써 사용자 기기나 브라우저가 웹 콘텐츠를 보다 빠르게 다운로드 할 수 있도록 하는 기술 CDN 이점 성능 및 안정성 보장 CDN 서비스 업체들은 일반 호스팅 업체에 비해 많은 수의 PoP(Point of Presence, 상호 접속 위치, 데이터를 캐시함)를 보유하고 있어 인터넷 병목 구간을 피할 수 있어 더 빠르게 콘텐츠 전송이 가능하며 몇 개의 PoP에 장애가 나도 다른 PoP에서 서비스 할 수 있기때문에 끊김 없는 서비스 제공이 가능하다. 아키텍처 단순화 CDN을 사용하면 아키텍처를 특별히 변경하지 않아도 된다..

Entity는 무엇이고 왜 사용할까? Ngrx Entity는 데이터들을 이상적인 엔티티 상태 형식(id배열과 entity map)으로 유지하는 데 도움이 되는 라이브러리이다. NgRx에서는 store에 여러 타입의 상태들을 저장하고 있다. 데이터들은 일반적으로 비지니스 데이터나 UI상태값이다. 예를 들어 Course와 Lesson 데이터를 관리한다면 { courses: [ { id: 0, description: "Angular Ngrx Course", category: 'BEGINNER', seqNo: 1 }, { id: 1, description: "Angular for Beginners", category: 'BEGINNER', seqNo: 2 }, { id: 2, description: 'Angul..

npm은 자바스크립트 라이브러리 저장소(npm레지스트리)와, 프로젝트가 의존하고 있는 라이브러리들의 버전을 지정하는 방법(package.json)을 제공한다. dependencies 현재 프로젝트를 실행하는 데(런타임시) 필수적인 라이브러리들이 포함 프로젝트를 npm에 공개하여 다른 사용자가 해당 프로젝트를 설치하면 dependencies에 들어 있는 라이브러리도 함께 설치됨(전이 의존성) $ npm install react devDependencies 개발, 테스트 시엔 필요하지만 런타임에는 필요 없는 라이브러리들이 포함 (ex. 테스트프레임워크, prettier, eslint) 프로젝트를 npm에 공개하여 다른 사용자가 해당 프로젝트를 설치하면 devDependencies에 포함된 라이브러리들은 제외..

https://medium.com/geekculture/10-tricks-to-optimizing-the-performance-of-angular-app-d998d48ca634 를 해석한 글입니다. 10 Tricks to Optimizing the Performance of Angular app — Keep learning, keep building and keep growing :) medium.com 1. ChangeDetectionStrategy.OnPush Change detection은 JS와 관련 프레임워크에서 가장 기본적인 기능 중 하나이며 데이터가 변경되었을 때 DOM을 업데이트하여 변경사항을 반영하는 기능이다. 앵귤러는 Zone.js를 사용하여 각 비동기 이벤트를 monkey-patch하..

ElementRef, TemplateRef, ViewRef, ComponentRef and ViewContainerRef을 통해 dom을 조작하는 방법에 대해 알아보자 @ViewChild component/directive class 안에서 추상화에 접근하기 위해선 Angular에서 제공하는 @ViewChild, @ViewChildren이라는 DOM쿼리라는 매커니즘을 사용한다. @ViewChild는 하나, @ViewChildren은 여러개의 쿼리를 반환한다. // 기본 사용 형태 @ViewChild([reference from template], {read: [reference type]}); // example @Component({ selector: 'sample', template: ` I am s..

새로운 observable 구독하기 switchMap vs concatMap vs mergeMap vs exhaustMap switchMap: Cancles the current subscription/request and can cause race condition, use for get requests of cancelable requests like searches 새로운 Observable이 방출되면 구독중이던 Observable을 취소하고 새로운 Observable을 구독함 concatMap: Runs subscriptions/requests in order and is less performant, use for get, post and put requests when order is impo..

해당 포스팅은 https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3 를 해석하고 개인적으로 찾아본 내용을 추가한 글입니다. Angular 9으로 업데이트 되면서 가장 큰 변화는 Ivy 컴파일러를 기본 렌더링엔진으로 변경되었다. Ivy는 사이즈감소, 속도 증가, 유연성 증가에 초점을 두어 개발되었다는데, 이를 위해 모든 컴포넌트가 돔트리를 구성하는 지시자를 컴파일하는 증가형 돔을 사용하였다. Virtual DOM과 Incremental DOM에 대한 내용은 아래 두 블로그에 자세히 나와있어 링크 참조 바랍니다. https://alexband.tistory.com/58 https://blog..