Programming/React, Angular, GraphQL (5) 썸네일형 리스트형 Angular Component Lifecycle 컴포넌트의 lifecycle은 컴포넌트의 생성부터 제거되기까지 발생하는 일련의 단계를 뜻한다. 각 단계는 Angular의 컴포넌트 렌더링의 각 부분들을 나타내며 시간에 따른 업데이트를 확인한다. Angular는 애플리케이션 트리를 top에서 bottom 경로로 돌면서 변경되어야 할 템플릿 바인딩이 있는지 확인한다. Angular가 이런 트리 순회를 하는 동안 lifecycle hook이 실행된다. 이 트리 순회는 각 컴포넌트를 1번씩 방문하기때문에 프로세스 중간에 state 변경이 일어나지않도록 대비해야한다. 이 글은 Angular 공식문서의 LifeCycle 항목을 읽고 번역해본 내용이다. 참고로 Version 17 기준이다.공식 문서 바로보기: https://angular.dev/guide/compo.. GraphQL Apollo Client - 캐싱 전략 (1편) 해당 글은 GraphQL - Apollo Client의 캐싱 전략에 대한 글이다. 모든 ApolloClient 인스턴스에서 InMemoryCache를 사용한다. Apollo Client는 GraphQL query의 결과들을 로컬, 정규화된(normalized), in-memory cache에 저장한다. 네트워크 요청을 전송하지 않고도 이미 캐시된 데이터를 사용하여 즉각 응답한다. InMemoryCache는 오브젝트들이 서로 참조가능하도록 flat lookup table형태로 데이터를 저장한다. 동일한 객체의 다른 필드를 가져오는 경우 하나의 캐시된 객체에는 다수의 쿼리 결과 필드를 포함할 수도 있다. 캐시는 flat한 구조지만, GraphQL query로부터 반환되는 객체는 flat하지 않다. InMem.. Apollo GraphQL custom plugin - 나만의 로그 만들기 import { ApolloServer } from '@apollo/server';const server = new ApolloServer({ typeDefs, resolvers, // 여기! plugins: [loggerPlugin, errorHandlingPlugin],});클라이언트로부터 받는 모든 GraphQL 요청들에 대해서 로그를 남겨 모니터링해야하는 일이 있었다. 현재 Apollo GraphQL을 사용하고 있는데 공식 문서를 찾아보던중 custom plugin을 직접 만들어서 GraphQL의 라이프 사이클의 각 단계마다 원하는 동작을 추가할 수 있다는 것을 알게 되었다. 그래서 이번 글에서는 Apollo GraphQL custom plugin에 대한 글이다. Plugin의 기본 구조P.. Angular 시작하기! Angular는 다른 프레임워크 (React, Vue)와는 다르게 정보가 많이 없는 것 같다. 그래서 시간날 때마다 하나씩 써보려고한다. 그 첫번째 글은 Angular 시작하기!이다. Angular 설치하기 Angular 공식문서 Angular angular.io 공식문서를 그대로 따라해도 좋고, 이 글을 참고해도 좋다. 현재 이 글 작성일 기준, Angular의 버전은 v10.0.7 (stable)이다. 터미널을 열어서 Angular CLI 설치하자. npm install -g @angular/cli 프로젝트를 시작할 폴더를 만들고 Application을 설치해보자. ng new 라는 명령어와, 프로젝트 폴더명 angular-playground 라고 입력해보자. 이때 폴더명은 본인 마음대로 바꿔도 된다.. Angular CLI로 프로젝트 시작하기 Angular로 프로젝트를 진행해보게 되었다. React만 해봤던 나로서 Angular는 완전히 새로운 프레임워크처럼 느껴졌다. 앞으로 프로젝트를 진행하면서 내가 공부한 것들을 적어보려고 한다. 매우 기초부터 시작하는 글이므로 초보자들이 읽기 좋을 것 같다. [참고한 책]: 앵귤러 마스터 북 http://www.yes24.com/Product/Goods/58054234 따라 하며 배우는 앵귤러 마스터 북 단계별 예제를 만들면서 배우는, 앵귤러 마스터를 위한 완벽 가이드!앵귤러는 다양하고 풍부한 기능으로 무장한 프레임워크다. 하지만 이는 모든 요소를 빠짐없이 이해하기가 만만치 않다는 뜻이기도 하다. 이 책에서는 각종 도구의 설치를 비롯해 컴포넌트 작성, 폼 사용, 페이지 간 라우팅, API 호출 등 앵귤러.. 이전 1 다음
