최근 인프라스트럭처 쪽에서는 플랫폼 엔지니어링이라는 말이 관심을 받고 있습니다. 최근 2년 동안 당근마켓에서 배포 시스템을 포함한 사내 개발자 플랫폼을 만들면서 플랫폼 엔지니어링에 관해 알게 되고 이를 잘 적용하기 위해 많은 고민을 했습니다. 그 결과 플랫폼 엔지니어링은 갑자기 새로 나왔다기 보다 DevOps부터 이어진 개발과 운영의 사일로 문제와 피드백 루프 문제를 해결하고 이 문제를 소프트웨어로 해결하는 SRE에서 이어진 개념이라고 생각하고 있습니다.
이 발표에서는 그동안 공부하고 고민하면서 알게된 플랫폼 엔지니어링이 무엇인지를 설명하고 왜 필요한지, 어떻게 적용해 볼 수 있는지에 관해 공유합니다.
https://inflearn.com/conf/infcon-2023/session-detail?id=782
Disaster Recovery using AWS -Architecture blueprintsHarish Ganesan
This presentation explores various ways of architecting Disaster Recovery using Amazon Web services (AWS) Cloud The sample architecture element contains Managed DNS servers , Load Balancers and Data replicators , Amazon EC2 , MySQL M-M , AWS EBS ,AWS Elastic Load Balancing, AWS Auto Scaling , AWS CloudWatch and AWS S3
디지털, 모바일 First의 시대를 맞아 교보생명그룹은 ‘문화와 금융을 리드하는 선도기업’이라는 슬로건 아래, 그룹 각 계열사들은 전사적인 디지털 전환을 전제로 비즈니스 혁신을 진행 중입니다. 이러한 그룹사의 디지털 혁신을 리딩하고 있는 교보정보통신에서 수행한 클라우드 마이그레이션 사례들을 통해 AWS 서비스를 활용하여 금융.보험 분야에서 어떻게 서비스 혁신을 추진하고 있는 알아봅니다.
Building serverless integration solutions with Microsoft AzureBizTalk360
With this talk Steef-Jan will go through various end to end solutions leveraging Azure Services like Event Grid, Service Bus, Logic Apps, and so on. In the session I will discuss architecture, non-functionals, costs and operations.
최근 인프라스트럭처 쪽에서는 플랫폼 엔지니어링이라는 말이 관심을 받고 있습니다. 최근 2년 동안 당근마켓에서 배포 시스템을 포함한 사내 개발자 플랫폼을 만들면서 플랫폼 엔지니어링에 관해 알게 되고 이를 잘 적용하기 위해 많은 고민을 했습니다. 그 결과 플랫폼 엔지니어링은 갑자기 새로 나왔다기 보다 DevOps부터 이어진 개발과 운영의 사일로 문제와 피드백 루프 문제를 해결하고 이 문제를 소프트웨어로 해결하는 SRE에서 이어진 개념이라고 생각하고 있습니다.
이 발표에서는 그동안 공부하고 고민하면서 알게된 플랫폼 엔지니어링이 무엇인지를 설명하고 왜 필요한지, 어떻게 적용해 볼 수 있는지에 관해 공유합니다.
https://inflearn.com/conf/infcon-2023/session-detail?id=782
Disaster Recovery using AWS -Architecture blueprintsHarish Ganesan
This presentation explores various ways of architecting Disaster Recovery using Amazon Web services (AWS) Cloud The sample architecture element contains Managed DNS servers , Load Balancers and Data replicators , Amazon EC2 , MySQL M-M , AWS EBS ,AWS Elastic Load Balancing, AWS Auto Scaling , AWS CloudWatch and AWS S3
디지털, 모바일 First의 시대를 맞아 교보생명그룹은 ‘문화와 금융을 리드하는 선도기업’이라는 슬로건 아래, 그룹 각 계열사들은 전사적인 디지털 전환을 전제로 비즈니스 혁신을 진행 중입니다. 이러한 그룹사의 디지털 혁신을 리딩하고 있는 교보정보통신에서 수행한 클라우드 마이그레이션 사례들을 통해 AWS 서비스를 활용하여 금융.보험 분야에서 어떻게 서비스 혁신을 추진하고 있는 알아봅니다.
Building serverless integration solutions with Microsoft AzureBizTalk360
With this talk Steef-Jan will go through various end to end solutions leveraging Azure Services like Event Grid, Service Bus, Logic Apps, and so on. In the session I will discuss architecture, non-functionals, costs and operations.
Amazon SageMaker 모델 학습 방법 소개::최영준, 솔루션즈 아키텍트 AI/ML 엑스퍼트, AWS::AWS AIML 스페셜 웨비나Amazon Web Services Korea
Amazon SageMaker Training과 Processing에 처음 입문 하고자 하는 분을 위해 동작 방식을 설명하고, 실행할 수 있는 가이드를 제공합니다.사용자는 Amazon SageMaker 노트북을 생성한 다음, 직접 정의한 별도의 GPU 또는 고성능 CPU로 구성된 학습 클러스터에서 학습 코드를 실행하여, 효율적으로 모델 학습과 데이터 전처리, 추론 결과 후처리 또는 모델 평가 등을 할 수 있도록 합니다. 추가적으로 Amazon SageMaker Experiments를 이용하여 학습 실험에 대한 구조화와 평가 메트릭 간의 비교를 체계적으로 관리하는 방법을 소개합니다.
기존 데이타 센타 내 온프레미스 시스템을 Lift and shift 방식으로 안전하고 신속하게 마이그레이션하고자 하기 위해서는 발견(Discovery) 도구 및 마이그레이션 도구를 필요로 합니다. 이 세션에서는 AWS Application Discovery Service를 사용하여 기존 IT 인프라를 신속하게 발견하고 분석하는 방법을 보여줍니다. 또한 기존 인프라 디스커버리 및 마이그레이션 실행 자동화에 대한 모범 사례에 대해서도 설명합니다. 마지막으로, AWS DataSync와 같은 데이타 마이그레이션 서비스, 전체 어플리케이션의 마이그레이션 상황을 추적하도록 지원하고 가시화하는 AWS Migration Hub 서비스, 안전하고 확장성 있는 AWS 기본 환경인 AWS Landing Zone에 대해 소개합니다.
핵심 미래 분석 기술! 시계열 분석을 활용한 수요예측과 재고관리 최적화 사례 – 김형일 AWS 솔루션즈 아키텍트, 이환기 신세계아이앤씨 A...Amazon Web Services Korea
리테일을 포함한 많은 기업들이 디지털 전환의 핵심 기술로 AI와 머신러닝 활용을 고려하고 있습니다. 본 세션에서는 리테일 비즈니스 최적화를 위한 수요 예측과 재고관리에 시계열 분석을 도입하기 위한 분석도구로 Amazon Forecast와 Amazon SageMaker를 활용하는 방안에 대해 알아보고, 국내 대형유통업체가 AWS 서비스를 활용하여 어떻게 재고를 최적화했는지 성공사례를 공유해 드립니다.
[보험사를 위한 AWS Data Analytics Day] 4_신한금융그룹의 데이터 댐_Do...AWS Korea 금융산업팀
신한금융그룹은 빅테크와의 경쟁, 미래에 대한 불확실성에 빠르게 적응하기 위해 고객, 회사, 사회 등을 보다 깊이 바라봐야 하는 상황이라고 판단했습니다. 이를 위해 은행의 고객 자산정보, 카드의 고객 소비행태와 가맹점 정보, 금융투자의 고객 투자성향, 라이프의 고객 미래 준비 상황을 한 곳으로 모아 양적으로 데이터를 확대하고, 이를 분석할 수 있는 인프라를 만들게 되었습니다. 또한 공공 데이터 및 데이터 제휴를 통해 데이터의 양적/질적 가치를 지속적으로 제고하여 새로운 고객 가치를 만들어가고 있습니다.
Amazon AWS | What is Amazon AWS | AWS Tutorial | AWS Training | EdurekaEdureka!
This Amazon AWS Training tutorial ( Amazon AWS Blog Series: https://goo.gl/qQwZLz ) will give you an introduction to AWS, its domains and AWS services. Then, using these domains, we will try to solve a real life problem. We will also be looking at AWS Pricing and the Free Tier! It also talks about the various certifications offered by AWS. Below are the topics covered in this tutorial:
1. What is AWS?
2. Different Domains in AWS
3. Use Case
4. AWS Free Tier
5. AWS Certifications
6. AWS Solution Architect
7. AWS Competitors
#amazonaws #awstraining #cloudcomputing #awstutorial
데이터 분석플랫폼을 위한 데이터 전처리부터 시각화까지 한번에 보기 - 노인철 AWS 솔루션즈 아키텍트 :: AWS Summit Seoul ...Amazon Web Services Korea
기업의 비즈니스 혁신의 기반인 데이터 분석 플랫폼은 쉽고 빠르게 구축할 수 있는 방법이 요구됩니다. 이를 위해 본 강연에서는 데이터 전처리를 코드없이 사용자 친화적 유저 인터페이스(GUI)로 수행할 수 있는 AWS Glue DataBrew , 데이터 추출, 변환 및 저장(ETL)을 위한 서버리스 서비스인 AWS Glue Studio, 데이터 카탈로그에 대한 권한통제 방법, 데이터웨어하우스 구축을 위한 Amazon Redshift 의 기술을 소개하고 대규모 데이터웨어하우스(DW) 클러스터간 데이터 공유 방법과 코드없이 기계 학습을 수행할 수 있는 기능들을 알려드립니다.
AWS Community Day 2022 에서 진행된 [AWS 기반 마이크로 프론트엔드 아키텍처 구축하기] 세션의 발표자료입니다.
발표 영상: https://lnkd.in/g6xqYcyC
이번 세션에서는 마이크로 프론트엔드가 무엇인지, 어떤 문제를 해결하고자 하고 장단점은 어떤 것들이 있는지 얘기하면서 개념을 소개합니다.
그리고 마이크로 프론트엔드의 여러 구현 방식들을 소개합니다. 이번 세션에서는 여러 구현 방식들 중 Javascript 코드가 실행되는 시점에 애플리케이션이 조합되는 Runtime-composition을 다루고, 그 중에서도 브라우저에서 애플리케이션이 조합되는 Client-side composition에 대해 소개합니다. 그리하여 Webpack 5에 도입된 Module Federation 플러그인을 활용하여 Client-side composition을 어떻게 구현할 수 있는지 알려드립니다.
마지막으로 아키텍처 다이어그램과 실제로 동작하는 데모 프로젝트를 살펴보면서 AWS에 마이크로 프론트엔드 아키텍처를 어떻게 구축할 수 있는지 보여드립니다. 나아가 마이크로 프론트엔드가 제품 개발 영역 뿐만 아니라 조직 구조 관점에서 미치는 긍정적인 영향에 대해서도 소개합니다.
발표에서 보여드린 데모 프로젝트의 소스코드는 Github에 공개되어 있습니다.
Github: https://github.com/eunsukimme/micro-frontend-on-aws
This AWS Lambda tutorial shall give you a clear understanding as to how a serverless compute service works. Towards the end, we will also create a full fledged project using AWS Lambda. Below are the topics covered in this tutorial:
1. AWS Compute Domain
2. Why AWS Lambda?
3. What is AWS Lambda?
4. AWS SDKs
5. Using AWS Lambda with Eclipse IDE
Amazon SageMaker 모델 학습 방법 소개::최영준, 솔루션즈 아키텍트 AI/ML 엑스퍼트, AWS::AWS AIML 스페셜 웨비나Amazon Web Services Korea
Amazon SageMaker Training과 Processing에 처음 입문 하고자 하는 분을 위해 동작 방식을 설명하고, 실행할 수 있는 가이드를 제공합니다.사용자는 Amazon SageMaker 노트북을 생성한 다음, 직접 정의한 별도의 GPU 또는 고성능 CPU로 구성된 학습 클러스터에서 학습 코드를 실행하여, 효율적으로 모델 학습과 데이터 전처리, 추론 결과 후처리 또는 모델 평가 등을 할 수 있도록 합니다. 추가적으로 Amazon SageMaker Experiments를 이용하여 학습 실험에 대한 구조화와 평가 메트릭 간의 비교를 체계적으로 관리하는 방법을 소개합니다.
기존 데이타 센타 내 온프레미스 시스템을 Lift and shift 방식으로 안전하고 신속하게 마이그레이션하고자 하기 위해서는 발견(Discovery) 도구 및 마이그레이션 도구를 필요로 합니다. 이 세션에서는 AWS Application Discovery Service를 사용하여 기존 IT 인프라를 신속하게 발견하고 분석하는 방법을 보여줍니다. 또한 기존 인프라 디스커버리 및 마이그레이션 실행 자동화에 대한 모범 사례에 대해서도 설명합니다. 마지막으로, AWS DataSync와 같은 데이타 마이그레이션 서비스, 전체 어플리케이션의 마이그레이션 상황을 추적하도록 지원하고 가시화하는 AWS Migration Hub 서비스, 안전하고 확장성 있는 AWS 기본 환경인 AWS Landing Zone에 대해 소개합니다.
핵심 미래 분석 기술! 시계열 분석을 활용한 수요예측과 재고관리 최적화 사례 – 김형일 AWS 솔루션즈 아키텍트, 이환기 신세계아이앤씨 A...Amazon Web Services Korea
리테일을 포함한 많은 기업들이 디지털 전환의 핵심 기술로 AI와 머신러닝 활용을 고려하고 있습니다. 본 세션에서는 리테일 비즈니스 최적화를 위한 수요 예측과 재고관리에 시계열 분석을 도입하기 위한 분석도구로 Amazon Forecast와 Amazon SageMaker를 활용하는 방안에 대해 알아보고, 국내 대형유통업체가 AWS 서비스를 활용하여 어떻게 재고를 최적화했는지 성공사례를 공유해 드립니다.
[보험사를 위한 AWS Data Analytics Day] 4_신한금융그룹의 데이터 댐_Do...AWS Korea 금융산업팀
신한금융그룹은 빅테크와의 경쟁, 미래에 대한 불확실성에 빠르게 적응하기 위해 고객, 회사, 사회 등을 보다 깊이 바라봐야 하는 상황이라고 판단했습니다. 이를 위해 은행의 고객 자산정보, 카드의 고객 소비행태와 가맹점 정보, 금융투자의 고객 투자성향, 라이프의 고객 미래 준비 상황을 한 곳으로 모아 양적으로 데이터를 확대하고, 이를 분석할 수 있는 인프라를 만들게 되었습니다. 또한 공공 데이터 및 데이터 제휴를 통해 데이터의 양적/질적 가치를 지속적으로 제고하여 새로운 고객 가치를 만들어가고 있습니다.
Amazon AWS | What is Amazon AWS | AWS Tutorial | AWS Training | EdurekaEdureka!
This Amazon AWS Training tutorial ( Amazon AWS Blog Series: https://goo.gl/qQwZLz ) will give you an introduction to AWS, its domains and AWS services. Then, using these domains, we will try to solve a real life problem. We will also be looking at AWS Pricing and the Free Tier! It also talks about the various certifications offered by AWS. Below are the topics covered in this tutorial:
1. What is AWS?
2. Different Domains in AWS
3. Use Case
4. AWS Free Tier
5. AWS Certifications
6. AWS Solution Architect
7. AWS Competitors
#amazonaws #awstraining #cloudcomputing #awstutorial
데이터 분석플랫폼을 위한 데이터 전처리부터 시각화까지 한번에 보기 - 노인철 AWS 솔루션즈 아키텍트 :: AWS Summit Seoul ...Amazon Web Services Korea
기업의 비즈니스 혁신의 기반인 데이터 분석 플랫폼은 쉽고 빠르게 구축할 수 있는 방법이 요구됩니다. 이를 위해 본 강연에서는 데이터 전처리를 코드없이 사용자 친화적 유저 인터페이스(GUI)로 수행할 수 있는 AWS Glue DataBrew , 데이터 추출, 변환 및 저장(ETL)을 위한 서버리스 서비스인 AWS Glue Studio, 데이터 카탈로그에 대한 권한통제 방법, 데이터웨어하우스 구축을 위한 Amazon Redshift 의 기술을 소개하고 대규모 데이터웨어하우스(DW) 클러스터간 데이터 공유 방법과 코드없이 기계 학습을 수행할 수 있는 기능들을 알려드립니다.
AWS Community Day 2022 에서 진행된 [AWS 기반 마이크로 프론트엔드 아키텍처 구축하기] 세션의 발표자료입니다.
발표 영상: https://lnkd.in/g6xqYcyC
이번 세션에서는 마이크로 프론트엔드가 무엇인지, 어떤 문제를 해결하고자 하고 장단점은 어떤 것들이 있는지 얘기하면서 개념을 소개합니다.
그리고 마이크로 프론트엔드의 여러 구현 방식들을 소개합니다. 이번 세션에서는 여러 구현 방식들 중 Javascript 코드가 실행되는 시점에 애플리케이션이 조합되는 Runtime-composition을 다루고, 그 중에서도 브라우저에서 애플리케이션이 조합되는 Client-side composition에 대해 소개합니다. 그리하여 Webpack 5에 도입된 Module Federation 플러그인을 활용하여 Client-side composition을 어떻게 구현할 수 있는지 알려드립니다.
마지막으로 아키텍처 다이어그램과 실제로 동작하는 데모 프로젝트를 살펴보면서 AWS에 마이크로 프론트엔드 아키텍처를 어떻게 구축할 수 있는지 보여드립니다. 나아가 마이크로 프론트엔드가 제품 개발 영역 뿐만 아니라 조직 구조 관점에서 미치는 긍정적인 영향에 대해서도 소개합니다.
발표에서 보여드린 데모 프로젝트의 소스코드는 Github에 공개되어 있습니다.
Github: https://github.com/eunsukimme/micro-frontend-on-aws
This AWS Lambda tutorial shall give you a clear understanding as to how a serverless compute service works. Towards the end, we will also create a full fledged project using AWS Lambda. Below are the topics covered in this tutorial:
1. AWS Compute Domain
2. Why AWS Lambda?
3. What is AWS Lambda?
4. AWS SDKs
5. Using AWS Lambda with Eclipse IDE
UNIST 프로그래밍 동아리 HeXA (http://www.hexa.pro) 내부 React 강의 프레젠테이션 자료의 공개버전
내용
- HTML, Javascript 속성 튜토리얼
- React 소개
- Node.js 설치
https://github.com/kimxogus/react-tutorial
SK Planet에서 주최한 TechPlanet 2012에서 발표했던 자료입니다. 소셜 큐레이션 서비스에 대한 간략한 소개와 관련 기술, 향후 전망 등을 담고 있습니다.
! 정정합니다. 32페이지의 pypi install ... 은 pip install 이 올바른 코드입니다.
17. jQuery UI 탭 패널을 위해 필요한 HTML 코드
<div id="tabs">
<ul>
<li><a href="#fragment-1">One</a></li>
<li><a href="#fragment-2">Two</a></li>
<li><a href="#fragment-3">Three</a></li>
</ul>
<div id="fragment-1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
웹은 이
많은 컴
조합입
HTML
태그는 충분한가요?
18. 웹은 이
많은 컴
조합입
HTMLjQuery UI 탭 패널을 만들 때 필요한 HTML 코드
<div id="tabs">
<ul>
<li><a href="#fragment-1">One</a></li>
<li><a href="#fragment-2">Two</a></li>
<li><a href="#fragment-3">Three</a></li>
</ul>
<div id="fragment-1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
19. 웹은 이
많은 컴
조합입
HTML
<div id="tabs">
<ul>
<li><a href="#fragment-1">One</a></li>
<li><a href="#fragment-2">Two</a></li>
<li><a href="#fragment-3">Three</a></li>
</ul>
<div id="fragment-1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<li><
ListItem이지만 사실은 탭
<div
Division이지만 사실은 탭 패널
의미가 맞지 않는 태그를 컴포넌트로 사용심지어 기능을 정의/사용하는 코드(JS)는 별도 파일에 작성
20. 웹은 이
많은 컴
조합입
HTML
<div id="tabs">
<ul>
<li><a href="#fragment-1">One</a></li>
<li><a href="#fragment-2">Two</a></li>
<li><a href="#fragment-3">Three</a></li>
</ul>
<div id="fragment-1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<li><
ListItem이지만 사실은 탭
<div
Division이지만 사실은 탭 패널
의미가 맞지 않는 태그를 컴포넌트로 사용
심지어 기능을 정의/사용하는 코드(JS)는 별도 파일에 작성
21. 웹은 이
많은 컴
조합입
HTML
<div id="tabs">
<ul>
<li><a href="#fragment-1">One</a></li>
<li><a href="#fragment-2">Two</a></li>
<li><a href="#fragment-3">Three</a></li>
</ul>
<div id="fragment-1">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<script>
jQuery(function($) {
$( "#tabs" ).tabs({
active: 1
});
});
</script>
의미가 더 명확한 쪽은?
<Tabs selectedIndex={1}>
<TabList>
<Tab>One</Tab>
<Tab>Two</Tab>
<Tab>Three</Tab>
</TabList>
<TabPanel>
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
</TabPanel>
<TabPanel>
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
</TabPanel>
<TabPanel>
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
</TabPanel>
</Tabs>
24. 가상 DOM JSX 문법 단방향 데이터 흐름
- 스토얀 스테파노프, Yahoo YSlow 아키텍트
“자바스크립트에서 DOM 접근은 가능한 최소화하라”
25. 가상 DOM JSX 문법 단방향 데이터 흐름
• 메모리에 가상의 DOM 트리를 구축
26. 가상 DOM JSX 문법 단방향 데이터 흐름
• 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교
• 메모리에 가상의 DOM 트리를 구축
Before After
27. 가상 DOM JSX 문법 단방향 데이터 흐름
• 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교
• 메모리에 가상의 DOM 트리를 구축
• 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영
Before After
28. 가상 DOM JSX 문법 단방향 데이터 흐름
• 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교
• 메모리에 가상의 DOM 트리를 구축
• 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영
• 임의의 두 트리를 비교하는 최소 횟수는 O(n^3),
React에서는 같은 레벨의 트리만 비교하여 O(n)으로 최적화
Before After
29. 가상 DOM JSX 문법 단방향 데이터 흐름
• 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교
• 메모리에 가상의 DOM 트리를 구축
• 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영
• 임의의 두 트리를 비교하는 최소 횟수는 O(n^3),
React에서는 같은 레벨의 트리만 비교하여 O(n)으로 최적화
• 그 밖에도 목록 항목의 키 비교, 컴포넌트 비교, 배치 잡,
자동 이벤트 위임, 선택적 하위 트리 렌더링 등을 통해
노력 대비 꽤 나은 성능 보장
Before After
30. 가상 DOM JSX 문법 단방향 데이터 흐름
• 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교
• 메모리에 가상의 DOM 트리를 구축
• 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영
• 임의의 두 트리를 비교하는 최소 횟수는 O(n^3),
React에서는 같은 레벨의 트리만 비교하여 O(n)으로 최적화
• 그 밖에도 목록 항목의 키 비교, 컴포넌트 비교, 배치 잡,
자동 이벤트 위임, 선택적 하위 트리 렌더링 등을 통해
노력 대비 꽤 나은 성능 보장
React.js Conf 2015 - Hype! | http://youtu.be/z5e7kWSHWTg?t=4m10s
Angular ReactEmber
31. 가상 DOM JSX 문법 단방향 데이터 흐름
• 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교
• 메모리에 가상의 DOM 트리를 구축
• 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영
• 임의의 두 트리를 비교하는 최소 횟수는 O(n^3),
React에서는 같은 레벨의 트리만 비교하여 O(n)으로 최적화
• 그 밖에도 목록 항목의 키 비교, 컴포넌트 비교, 배치 잡,
자동 이벤트 위임, 선택적 하위 트리 렌더링 등을 통해
노력 대비 꽤 나은 성능 보장
• Google은 2015년 7월에 Incremental DOM이라는
Virtual DOM 라이브러리 발표
• Ember는 Glimmer라는 Virtual DOM 기술 적용
Virtual DOM != Silver Bullet
Angular 2 alpha 버전은 Virtual DOM 없이 더 나은 성능을 구현
그래도 꽤 나은 선택
http://goo.gl/k4pYbH
32. 가상 DOM JSX 문법 단방향 데이터 흐름
• 값이 변경될 때마다 새로 렌더링 후 이전 트리와 비교
• 메모리에 가상의 DOM 트리를 구축
• 비교 후 실제 변경 사항이 있을 때 변경된 부분만 DOM에 반영
• 임의의 두 트리를 비교하는 최소 횟수는 O(n^3),
React에서는 같은 레벨의 트리만 비교하여 O(n)으로 최적화
• 그 밖에도 목록 항목의 키 비교, 컴포넌트 비교, 배치 잡,
자동 이벤트 위임, 선택적 하위 트리 렌더링 등을 통해
노력 대비 꽤 나은 성능 보장
33. 가상 DOM JSX 문법 단방향 데이터 흐름
• 자바스크립트 안에 XML을 표현하는 문법
var app = <Nav color="blur" />;
• 자바스크립트 코드로 변환해서 사용
var app = React.createElement(Nav, {color:"blue"});
• 속성 표현을 통해 문자열은 물론 자바스크립트 값을 그대로 전달
var app = <Nav color="blur" checked={true} name={name||"!"} />;
• 필수는 아니지만 거의 모든 React 프로젝트가 사용 중
34. 가상 DOM JSX 문법 단방향 데이터 흐름
• 데이터는 상위 컴포넌트에서 하위 컴포넌트로만 흐름
• 상위에서 전달받은 값(props)은 수정 불가(immutable)
• 상위 컴포넌트는 하위 컴포넌트의 이벤트를 전달받아 업데이트
• 컴포넌트 내부의 상태는 스테이트(state)에 저장
• Flux: 애플리케이션 수준에서 적용한 단방향 데이터 흐름
57. 성능
페이지 로딩 + 자바스크립트 로딩 + 렌더링 =
초기 구동 속도가 느리다
검색 엔진 최적화
자바스크립트를 실행하지 못하는 크롤러는
페이지의 콘텐츠를 수집하지 못한다
클라이언트 렌더링의
성능
매번 전체 페이지를 다시 읽는 것보다 빠름
사용자 경험
자연스럽게 연결되는 사용자 경험 가능
코드의 일관성
렌더링 책임은 한 쪽에만 주는 편이 일관성 유지가 쉬움
장점 단점
58. 성능
페이지 로딩 + JS 로딩 + 렌더링 (+ 데이터 로딩)=
초기 구동 속도가 느림
검색 엔진 최적화
자바스크립트를 실행하지 못하는 크롤러는
페이지의 콘텐츠를 수집하지 못함
단점클라이언트 렌더링의
65. import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return <h1>Hello, world!</h1>;
}
}
ReactDOM.render(
<App list={[1, 2, 3]} />,
document.getElementById('example')
);
앞서 살펴 본 클라이언트 코드
66. import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return <h1>Hello, world!</h1>;
}
}
ReactDOM.render(
<App list={[1, 2, 3]} />,
document.getElementById('example')
);
ReactDOM은 브라우저 환경에만 해당
import ReactDOM from 'react-dom';
ReactDOM.render
67. import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return <h1>Hello, world!</h1>;
}
}
ReactDOM.render(
<App list={[1, 2, 3]} />,
document.getElementById('example')
);
DOM 관련 부분만 별도 파일로 분리
import ReactDOM from 'react-dom';
ReactDOM.render
import React, { Component } from 'react';
ReactDOM.render(
<App list={[1, 2, 3]} />,
document.getElementById('example')
);
class App extends Component {
render() {
return <h1>Hello, world!</h1>;
}
}
68. import ReactDOM from 'react-dom';
DOM 관련 부분만 별도 파일로 분리
import React, { Component } from 'react';
ReactDOM.render(
<App list={[1, 2, 3]} />,
document.getElementById('example')
);
export default App;
import App from './App';
browser.js
App.js
class App extends Component {
render() {
return <h1>Hello, world!</h1>;
}
}
69. import ReactDOM from 'react-dom';
DOM 관련 부분만 별도 파일로 분리
import React, { Component } from 'react';
class App extends Component {
render() {
return <h1>Hello, world!</h1>;
}
}
ReactDOM.render(
<App list={[1, 2, 3]} />,
document.getElementById('example')
);
export default App;
import App from './App';
browser.js
App.js
70. import ReactServer from 'react-dom/server';
서버 렌더링은 react-dom/server 사용
import React, { Component } from 'react';
class App extends Component {
render() {
return <h1>Hello, world!</h1>;
}
}
var result = ReactServer.renderToString(
<App list={[1, 2, 3]} />
);
export default App;
import App from './App';
server.js
App.js
71. import ReactServer from 'react-dom/server';
결과물을 HTML 페이지에 출력
<body>
<div id="example">
{{result}}
</div>
</body>
var result = ReactServer.renderToString(
<App list={[1, 2, 3]} />
);
import App from './App';
server.js
index.html
72. import ReactServer from 'react-dom/server';
결과물을 HTML 페이지에 출력
<body>
<div id="example">
{{result}}
</div>
</body>
var result = ReactServer.renderToString(
<App list={[1, 2, 3]} />
);
import App from './App';
server.js
index.html
{{result}}
result
87. 네이티브 컴포넌트
비동기 실행
Flexbox 레이아웃
폴리필(Polyfill)
간편한 네이티브 확장
• 자바스크립트는 네이티브보다 훨씬 느리기 때문에 동기 실행시
네이티브 UI와 자바스크립트 간의 병목 현상 발생
• 네이티브와 자바스크립트 사이에 메시지 큐를 두어 비동기 실행
JS VM Native
Java/C++/ObjC/Switft
88. 비동기 실행
Flexbox 레이아웃
폴리필(Polyfill)
간편한 네이티브 확장
• CSS와 구조가 비슷한 StyleSheet 객체 사용
• CSS3 Flexbox와 비슷한 방식으로 레이아웃 스타일링
var ReactNative = React.createClass({
render: function() {
return (
<View style={styles.row}>
<View style={styles.text}>
<Text style={styles.title}>React Native</Text>
<Text style={styles.subtitle}>Build mobile apps using React</Text>
</View>
</View>
);
},
});
var styles = StyleSheet.create({
row: { flexDirection: 'row', margin: 40 },
text: { flex: 1, justifyContent: 'center'},
title: { fontSize: 11, fontWeight: 'bold' },
subtitle: { fontSize: 10 },
});
89. xbox 레이아웃
폴리필(Polyfill)
간편한 네이티브 확장
• XHR, requestAnimationFrame, navigator.geolocation 등
익숙한 자바스크립트 기능 제공
var GeoInfo = React.createClass({
getInitialState: function() {
return { position: 'unknown' };
},
componentDidMount: function() {
navigator.geolocation.getCurrentPosition(
(position) => this.setState({position}),
(error) => console.error(error)
);
},
render: function() {
return (
<Text>
Position: {JSON.stringify(this.state.position)}
</Text>
);
},
});
90. 리필(Polyfill)
간편한 네이티브 확장
• Java(Android), ObjectiveC/Swift (iOS)로 작성된
네이티브 모듈을 손쉽게 자바스크립트 모듈로 바인딩
// Java
public class MyCustomModule extends ReactContextBaseJavaModule {
// Available as NativeModules.MyCustomModule.processString
@ReactMethod
public void processString(String input, Callback callback) {
callback.invoke(input.replace("Goodbye", "Hello"));
}
}
// JavaScript
...
componentDidMount() {
NativeModules.MyCustomModule.processString(this.state.text, (text) => {
this.setState({text});
});
},
...
92. $ brew install node watchman
$ node install -g react-native-cli
필요한 패키지 설치 (Xcode 및 안드로이드 SDK 필수)
프로젝트 생성
$ react-native init HelloWorld
프로젝트 오픈 후 컴파일
$ cd HellWorld
$ open ios/HelloWorld.xcodeproj (iOS)
$ react-native run-android (Android)
코드는 index.{ios, android}.js 파일 수정
114. 그래도 네이티브가 더 좋다면?
image from 이말년씨리즈
데스크톱 웹 앱 좋은 거 알겠는데
115. 데스크톱 네이티브? 원한다면 주도록 하지
잘 찾아봐. GitHub에 두고 왔으니…
image from 원피스
116. React Native를
포크한 프로젝트라
사용법도 비슷합니다
예제 실행방법
$ git clone https://github.com/ptmt/react-native-desktop
$ cd react-native-desktop && npm install
Examples 아래의 원하는 폴더로 가서 .xcodeproj 파일을 XCode에서 열고 컴파일
117. Hello World 앱 크기 비교
React Native Desktop
3.5MB
105.3MB
(OS X 빌드 기준)
125. Credits
Twitter and Wordpress icons are made by Freepik from www.flaticon.com
All images without any notes are published under Creative Commons zero.
All videos are published under Creative Commons zero.