valleycho

- Lazy Loading Modules 구성 비교 테스트 - 요약 - [참고 2], [참고 3]의 lazy loading 적용 전 후의 내용을 보면 [참고 2]의 적용전에는 customers 컴포넌트의 내용과 orders의 내용이 main.js의 포함이 되어서 파일용량이 352KB인 것을 확인할 수 있고, [참고 3]은 main.js는 13.4KB 이고, Customers와 Orders를 클릭했을 때 모듈을 로드해서 가져오기 때문에 용량이 차이나고 따로 분리되어있는 것을 확인할 수 있다. 첫 화면 로드시의 main.js의 파일을 불러오는데 이 파일이 큰 경우에 첫 로드 속도가 느려지는 문제가 발생하므로 lazy loading을 적용시켜 모듈을 분리하여야 첫 페이지 로딩 속도가 빨라진다.

- TrackBy 간단한 테스트 코드 작성. - app.component.ts - app.component.html [참고 1, 2] 처럼 테스트 코드를 작성 후 html 파일에서 아래 그림과 같이 Refresh items를 클릭한다. → refresh items를 클릭하면 개발자도구의 Elements의 ul li 부분이 전부 깜빡이는 것을 확인할 수 있다. 이건 렌더링을 새로 한다는 것이므로 성능상 속도를 저하시키는 원인이 될 수 있다. 그럼 어떻게 수정할까? - app.component.ts - app.component.html [참고 4, 5] 처럼 테스트 코드를 작성 후 html 파일에서 아래 그림과 같이 Refresh items를 클릭한다. → refresh items를 클릭하면 개발자도구의 E..

- OnPush 및 ChangeDetectionRef medium.com/sjk5766/angular-change-detection-%EC%84%B1%EB%8A%A5-%ED%96%A5%EC%83%81%EB%B0%A9%EB%B2%95-onpush-changedetectionref-71c9bccf0a42 Angular Change Detection 성능 향상방법 (OnPush, ChangeDetectionRef) Angular는 기본적으로 데이터가 단방향 (부모 -> 자식) 으로 흐르도록 설계되었을 거라 가정합니다. 즉 상위 컴포넌트가 변경한 데이터를 하위 컴포넌트에서는 반영만 하고 변경하지 않을 것이라 medium.com 간단 요약 Angular의 변경 감지는 제일 상위부터 하위로 발생하므로 불 필요한 성..

실제 네이버에서 적용한 사례 - www.youtube.com/watch?v=33yj-Q5v8mQ&feature=youtu.be [네이버 아토믹 디자인 패턴] 아토믹 디자인이란? 요약하면, 디자인을 토대로 하나씩 쪼개고 쪼갠 것을 합쳐서 페이지를 완성하는 것을 말한다. 개념설명 - atomicdesign.bradfrost.com/chapter-2/ Atomic Design Methodology | Atomic Design by Brad Frost Learn how to create and maintain digital design systems, allowing your team to roll out higher quality, more consistent UIs faster than ever before..

전체적인 구조는 다음과 같다. Angular Apollo-Client Apollo-Server Express 참고로 메뉴얼의 Migration Guide를 보면 v1.0 -> v2.0 으로 바뀌면서 Apollo-Angular -> Apollo-Client로 이름이 바뀌었다. 그럼 Angular Apollo-Client 환경 설정을 해보자. 1. Angular 공식문서를 참고하여 Angular를 설치한다. 2. 아래 링크의 setup and options 메뉴얼을 부분을 참조하여 Next Steps 전까지 한다. www.apollographql.com/docs/angular/basics/setup/ Setup and options A guide to using the Apollo GraphQL Client..

graphql을 사용법을 익히는게 주 목적이기 때문에 graphql의 메뉴얼을 보고 연습해보자. 아래 메뉴얼 참고 [graphql 메뉴얼] graphql.org/learn/queries/ GraphQL: A query language for APIs. GraphQL provides a complete description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools. graphql.org - Fields 1. 메뉴얼을 참조하면 [참..

graphql을 지원하는 구성방법으로는 여러가지가 있는데 대표적으로 apollo를 이용하는 방법과 graphql-yoga 등이 있는데 이 챕터에서는 apollo를 이용하여 graphql을 연습할 환경설정을 해보자. 환경설정 구성방법은 아래 메뉴얼을 참고하면 된다. [apollo Manual] www.apollographql.com/docs/apollo-server/getting-started/ Get started with Apollo Server A guide to using Apollo Server www.apollographql.com 1. 아래와 같이 메뉴얼의 구성 내용을 작성하여 node는 실시간 반영이 안되므로 nodemon을 설치해서 nodemon으로 index.js를 실행한다. 2. 홈페이..

express의 prisma를 연동해서 사용해보자. 구조는 아래와 같다. 아래의 파일 내용과 같이 구성 [참고 2]의 내용을 작성하여 ts-node src/server.ts 명령어 실행 후 홈페이지의 localhost:/4000 입력한다. [ {"id": 1,"name": "Alice","email": "alice@prisma.io"} ] 이와 같이 출력되는 것을 확인할 수 있다. 하면서 헷갈렸던 부분도 같이 정리하고자 한다. 처음의 express에서 graphql을 사용하려면 graphql을 지원하는 apollo-server 혹은 apollo-yoga 가 필요한줄 알았다. 그래서 알아보는 도중 prisma 자체로 graphql을 내장해서 지원하는 형식으로 작동하기 때문에 apollo-server, ap..