SlideShare una empresa de Scribd logo
1 de 58
Descargar para leer sin conexión
React Everywhere
Leonardo YongUk Kim

Feeling Sunday
contents
1. 리액트

2. 웹팩, 핫 모듈 대체, 유니버설 렌더링

3. 리액트 네이티브, 일렉트론

4. 다음은?
1.

리액트
1.1 왜 React인가요?
1.1 왜 React인가요?
https://twitter.com/sebmarkbage/status/632257978003951616
페이스북이 만든 View 라이브러리
페이스북과 인스타그램에 직접 사용.
심지어 베타 버전으로 개밥 복용.
1.2 Hello, world!
패키지를 먼저 설치합시다.

npm install babel-core --save

npm install react --save

npm install react-dom --save(0.14가 정식 버전이 되면)
1.2 Hello, world!
나는 최신 버전(현재로서는 0.14.0-RC 버전)을 사용하고 싶어요.

npm install babel-core --save

npm install react@0.14.0-rc1 --save

npm install react-dom@0.14.0-rc1 —―save

0.14.0 이상 버전도 react-dom 모듈도 script 태그로 포함시키는 것을 잊지 마세요.
React 라이브러리
Babel Browser (브라우저 번역기)
번역될 영역에 text/babel 표시
렌더링 메서드
그려질 내용
그려질 위치
[141] react everywhere
1.3 JSX
1. 자바스크립트 안에 HTML이에요? HTML과 유사한 문법을 가진 JSX입니다.

2. 어떻게 실행되는 거에요?text/babel 영역을 바벨이 번역해서 자바스크립트로 만들어요.

3. 실행시간에 번역하면 느리지 않나요? 프로덕션에선 번역된 코드를 씁니다.

4. 튜토리얼에서는 바벨을 안쓰던데 text/jsx쓰던데? 그 방법 0.14에서 폐기됩니다. (곧)
1.3 JSX
Babel에 의한 번역



(0.14는 자바스크립트를 쓰지 않는

인라인버전도 있음)
1.4 Hello, class
HelloClass란 이름으로 컴포넌트 생성.

클래스명은 대문자로 시작.
JSX를 리턴하는 함수를 render에
작성한 HelloClass 객체를 화면에 표시.

React.render에 사용할 클래스는 하나만.
[141] react everywhere
1.5 Hello, prop
프로퍼티 조회는 this.props에서

프로퍼티는 사용 시점에 정의되며

읽기 전용.
someone 프로퍼티 설정
[141] react everywhere
1.6 Count, state
1.6 Count, state
state의 초기값은 getInitialState에
서

props.number 의 값으로 설정한다.
click 이벤트 처리할 콜백.

상태 값 변경은 this.setState에서
onClick 처리 this.handleClick에서

this.state.number로 설정된 상태 사
용.
1.6 Count, state
this.props.number의 값을 2015로

설정한다.



값을 제대로 전달하기 위해 {2015}로

설정하였다. “2015”로 전달하면 문자
열로 전달된다.
문구를 클릭하면 숫자가 증가
1.7 Multiple Components
AvatarRender
ProfilePic
ProfileLink
1.7 Multiple Components
AvatarRender
ProfilePic
ProfileLink
Avatar
ProfilePic
ProfileLink
1.7 Multiple Components
atar
ProfilePic
ProfileLink
1.7 Multiple Components
ar
ProfilePic
ProfileLink
1.7 Multiple Components
[141] react everywhere
1.8 Virtual DOM
Virtual DOM (Javascript 영역) HTML DOM
상태(state)가 바뀌면 항상 Virtual DOM은 그려진다.

Virtual DOM이 변경되어도 실질적인 변경이 있을 때만 DOM에 적용된다.

개발자도 상태를 신경쓸 필요가 거의 없고 성능의 감소도 적다.
비교조정(Reconciliation)
1.8 Virtual DOM
비교조정은 아직 효율적인 알고리즘을 발견하지 못했다. O(n^3)

http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf

React는 휴리스틱을 동원하여 현실적인 효율을 높인다.
1.8 Virtual DOM
동일 레벨 비교Before After
1.8 Virtual DOM
div들 컴포넌트
같은 콤퍼넌트에 대해서 재사용을 시도하고 다른 콤포넌트는 지우고 생성한다.

다른 콤퍼넌트는 다른 트리를 만들어 낼 것으로 예상한다.
1.8 Virtual DOM
키가 없는 경우
리스트의 경우 키(key)가 없는 콤퍼넌트는 첫번째 요소부터 재사용을 한다.

이 경우 state의 값은 날라가고 소유주(상위 클래스)가 값을 되살릴 의무가 있다.

키가 있는 경우에는 재사용에 앞서 순서를 조절하여 활용한다.
1 2 3 4
1 2 3 5 4
키가 있는 경우
1.8 Virtual DOM
http://calendar.perfplanet.com/2013/diff/
https://facebook.github.io/react/docs/reconciliation-ko-KR.html
1.9 Life Cycle
componentWillMount
componentDidMount
componentWillReceiveProps
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount
DOM에 붙을 예정
DOM에 붙었음
프로퍼티 받을 것임
업데이트 해야하나?
컴포넌트 업데이트 예정
컴포넌트 업데이트
DOM에서 떨어질 예정
2.

웹팩,핫 모듈 대체, 유니버설
렌더링
2.1 Webpack이 뭐에요?
2.1 Webpack이 뭐에요?
의존성을 타고 로더를 적용해 스태틱 에셋으로 변환.

- CommonJs 모델과 AMD모두 지원

다양한 로더를 통해 확장성을 지원.

- Babel을 통한 ES6, 7의 지원. SCSS, Less 등의 지원. 인라인 파일.

- 핫 모듈 대체를 이용하여 실시간으로 기능을 갱신.
http://webpack.github.io/
2.2 웹팩, 스태틱 버전 패키지 설치
npm install webpack -g

npm install babel-core —―save-dev

npm install babel-loader —―save-dev

npm install react —―save
웹팩
바벨 번역기 (이제 dev에서만 필요합니다.)
바벨 로더 (웹팩에서 바벨을 수행하기 위함)
리액트
2.3 웹팩, 설정 파일(webpack.config.js)
entry의 hello.jsx 파일을 타고 들어갑니다.
출력될 파일은 현재디렉토리/build/hello.js
.jsx? 로 끝나는 파일을 찾아

/node_modules/이 포함된 것은 빼고

babel 로더(jsx 처리, ES6)를

적용합니다.
2.4 웹팩, hello.jsx
별도의 JSX 파일에서는 CommonJs의 방식으로

react를 참조해야 합니다.
document를 참조할 때는 HTML에서 head가

아닌 body에서 참조해야한다.
2.3 웹팩, 수행
2.3 hello.jsx (ES6)
2.3 hello.jsx (ES6)
ES6 import
상속기반의 인터페이스
2.4 Hot Module Replacement
동적으로 코드 모듈을 교체하는 기법.
Hot Module Replacement를 지원하는 모듈은 업데이트를 가지고 있다.

- 업데이트 메니페스트 (json)

- 하나 이상의 업데이트 청크(chunks) (js)
2.4 Hot Module Replacement
청크 1, 3, 4를 갱신하는

업데이트 메인 0
2.4 Hot Module Replacement
모듈 4를 교체하는 청크 1
2.4 Hot Module Replacement
모듈 9를 교체하고 12를

추가하는 청크 3
청크 4는 모듈 10과 11을

제거했다.
2.4 Hot Module Replacement
- 모듈 단위로 라이브리로드가 가능.

- 프로덕션 레벨에서 사용 가능 (이라고 설명하고 있지만 WebpackDevServer에서만 봤음.)

- 코드 스플리팅을 통해 필요한 부분만 다운로드.

- 부분적으로 적용이 가능하고 HMR 코드를 비활성화하면 관련 코드 제거.
이미 만들어진 HMR을 씁시다. (eg. React HMR, Redux HMR)
제작에 관심이 있는 분:
- example: http://webpack.github.io/example-app/

- API: http://webpack.github.io/docs/hot-module-replacement.html
2.4 Hot Module Replacement
Thanks, Dan Abramov
2.4 Hot Module Replacement
npm start
2.5 Universal Rendering
Angular.js 1.x
Frontend
Express.js
Backend
VS
Frontend
Express.js
Backend
React or

Anguar.js 2.x
Traditional Model Isomorphic /

Universal rendering
2.5 Universal Rendering
Virtual

DOM
renderToString
render
HTML String
DOM
3.

리액트 네이티브,

일렉트론 (데모)
4

다음은?
4.1 react.careers
4.2 react.rocks
4.3 참고
• React 한글 버전 문서:

http://reactkr.github.io/react/docs/getting-started-ko-KR.html
• Flux 한글 버전 문서:

http://haruair.github.io/flux/docs/overview.html#content
• Redux 한글버전 문서:

http://dobbit.github.io/redux/
• 페이스북 그룹 React Korea와 Reactist
4.3 참고
• Unidirectional User Interface Architectures

http://staltz.com/unidirectional-user-interface-architectures.html
• React Router

https://rackt.github.io/react-router/
Q&A
Thank You

Más contenido relacionado

La actualidad más candente

[123] electron 김성훈
[123] electron 김성훈[123] electron 김성훈
[123] electron 김성훈NAVER D2
 
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!pyrasis
 
Envoy 를 이용한 코드 배포 자동화
Envoy 를 이용한 코드 배포 자동화Envoy 를 이용한 코드 배포 자동화
Envoy 를 이용한 코드 배포 자동화Juwon Kim
 
Rancher Simple User Guide
Rancher Simple User GuideRancher Simple User Guide
Rancher Simple User GuideSANG WON PARK
 
Python server-101
Python server-101Python server-101
Python server-101Huey Park
 
Devfair kubernetes 101
Devfair kubernetes 101Devfair kubernetes 101
Devfair kubernetes 101Daegwon Kim
 
Mesos + Marathon + Docker
Mesos + Marathon + DockerMesos + Marathon + Docker
Mesos + Marathon + Dockerbighouse
 
스마트폰 앱 백-엔드 솔루션 개발을 위한 Node.js 실전 가이드
스마트폰 앱 백-엔드 솔루션 개발을 위한 Node.js 실전 가이드스마트폰 앱 백-엔드 솔루션 개발을 위한 Node.js 실전 가이드
스마트폰 앱 백-엔드 솔루션 개발을 위한 Node.js 실전 가이드Jeongsang Baek
 
[133] 브라우저는 vsync를 어떻게 활용하고 있을까
[133] 브라우저는 vsync를 어떻게 활용하고 있을까[133] 브라우저는 vsync를 어떻게 활용하고 있을까
[133] 브라우저는 vsync를 어떻게 활용하고 있을까NAVER D2
 
Docker 로 Linux 없이 Linux 환경에서 개발하기
Docker 로 Linux 없이 Linux 환경에서 개발하기Docker 로 Linux 없이 Linux 환경에서 개발하기
Docker 로 Linux 없이 Linux 환경에서 개발하기iFunFactory Inc.
 
Ryan Dahl의 Node.js 소개 동영상 해설 by doortts
Ryan Dahl의 Node.js 소개 동영상 해설 by doorttsRyan Dahl의 Node.js 소개 동영상 해설 by doortts
Ryan Dahl의 Node.js 소개 동영상 해설 by doorttsSuwon Chae
 
[1A7]Ansible의이해와활용
[1A7]Ansible의이해와활용[1A7]Ansible의이해와활용
[1A7]Ansible의이해와활용NAVER D2
 
Docker (Compose) 활용 - 개발 환경 구성하기
Docker (Compose) 활용 - 개발 환경 구성하기Docker (Compose) 활용 - 개발 환경 구성하기
Docker (Compose) 활용 - 개발 환경 구성하기raccoony
 
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기KTH, 케이티하이텔
 
[214] data science with apache zeppelin
[214] data science with apache zeppelin[214] data science with apache zeppelin
[214] data science with apache zeppelinNAVER D2
 
[1A4]자바스크립트 라이브러리 개발 운영 경험기
[1A4]자바스크립트 라이브러리 개발 운영 경험기[1A4]자바스크립트 라이브러리 개발 운영 경험기
[1A4]자바스크립트 라이브러리 개발 운영 경험기NAVER D2
 

La actualidad más candente (18)

[123] electron 김성훈
[123] electron 김성훈[123] electron 김성훈
[123] electron 김성훈
 
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
도커 무작정 따라하기: 도커가 처음인 사람도 60분이면 웹 서버를 올릴 수 있습니다!
 
Envoy 를 이용한 코드 배포 자동화
Envoy 를 이용한 코드 배포 자동화Envoy 를 이용한 코드 배포 자동화
Envoy 를 이용한 코드 배포 자동화
 
Rancher Simple User Guide
Rancher Simple User GuideRancher Simple User Guide
Rancher Simple User Guide
 
Python server-101
Python server-101Python server-101
Python server-101
 
AWS + Docker in Vingle
AWS + Docker in VingleAWS + Docker in Vingle
AWS + Docker in Vingle
 
Devfair kubernetes 101
Devfair kubernetes 101Devfair kubernetes 101
Devfair kubernetes 101
 
Mesos + Marathon + Docker
Mesos + Marathon + DockerMesos + Marathon + Docker
Mesos + Marathon + Docker
 
스마트폰 앱 백-엔드 솔루션 개발을 위한 Node.js 실전 가이드
스마트폰 앱 백-엔드 솔루션 개발을 위한 Node.js 실전 가이드스마트폰 앱 백-엔드 솔루션 개발을 위한 Node.js 실전 가이드
스마트폰 앱 백-엔드 솔루션 개발을 위한 Node.js 실전 가이드
 
[133] 브라우저는 vsync를 어떻게 활용하고 있을까
[133] 브라우저는 vsync를 어떻게 활용하고 있을까[133] 브라우저는 vsync를 어떻게 활용하고 있을까
[133] 브라우저는 vsync를 어떻게 활용하고 있을까
 
Docker 로 Linux 없이 Linux 환경에서 개발하기
Docker 로 Linux 없이 Linux 환경에서 개발하기Docker 로 Linux 없이 Linux 환경에서 개발하기
Docker 로 Linux 없이 Linux 환경에서 개발하기
 
Ryan Dahl의 Node.js 소개 동영상 해설 by doortts
Ryan Dahl의 Node.js 소개 동영상 해설 by doorttsRyan Dahl의 Node.js 소개 동영상 해설 by doortts
Ryan Dahl의 Node.js 소개 동영상 해설 by doortts
 
Node.js 기본
Node.js 기본Node.js 기본
Node.js 기본
 
[1A7]Ansible의이해와활용
[1A7]Ansible의이해와활용[1A7]Ansible의이해와활용
[1A7]Ansible의이해와활용
 
Docker (Compose) 활용 - 개발 환경 구성하기
Docker (Compose) 활용 - 개발 환경 구성하기Docker (Compose) 활용 - 개발 환경 구성하기
Docker (Compose) 활용 - 개발 환경 구성하기
 
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
[H3 2012] 내컴에선 잘되던데? - vagrant로 서버와 동일한 개발환경 꾸미기
 
[214] data science with apache zeppelin
[214] data science with apache zeppelin[214] data science with apache zeppelin
[214] data science with apache zeppelin
 
[1A4]자바스크립트 라이브러리 개발 운영 경험기
[1A4]자바스크립트 라이브러리 개발 운영 경험기[1A4]자바스크립트 라이브러리 개발 운영 경험기
[1A4]자바스크립트 라이브러리 개발 운영 경험기
 

Destacado

[142] how riot works
[142] how riot works[142] how riot works
[142] how riot worksNAVER D2
 
[153] apache reef
[153] apache reef[153] apache reef
[153] apache reefNAVER D2
 
[143] 모바일 혈액진단기기 개발 삽질기
[143] 모바일 혈액진단기기 개발 삽질기[143] 모바일 혈액진단기기 개발 삽질기
[143] 모바일 혈액진단기기 개발 삽질기NAVER D2
 
[144]mobile앱에서 효율적인 storage 접근 방법
[144]mobile앱에서 효율적인 storage 접근 방법[144]mobile앱에서 효율적인 storage 접근 방법
[144]mobile앱에서 효율적인 storage 접근 방법NAVER D2
 
[134] immersive sound vr
[134] immersive sound vr[134] immersive sound vr
[134] immersive sound vrNAVER D2
 
[151] 영상 인식을 통한 오프라인 고객분석 솔루션과 딥러닝
[151] 영상 인식을 통한 오프라인 고객분석 솔루션과 딥러닝[151] 영상 인식을 통한 오프라인 고객분석 솔루션과 딥러닝
[151] 영상 인식을 통한 오프라인 고객분석 솔루션과 딥러닝NAVER D2
 
[113] lessons from realm
[113] lessons from realm[113] lessons from realm
[113] lessons from realmNAVER D2
 
[131] packetbeat과 elasticsearch
[131] packetbeat과 elasticsearch[131] packetbeat과 elasticsearch
[131] packetbeat과 elasticsearchNAVER D2
 
[112] 실전 스위프트 프로그래밍
[112] 실전 스위프트 프로그래밍[112] 실전 스위프트 프로그래밍
[112] 실전 스위프트 프로그래밍NAVER D2
 
[161] 데이터사이언스팀 빌딩
[161] 데이터사이언스팀 빌딩[161] 데이터사이언스팀 빌딩
[161] 데이터사이언스팀 빌딩NAVER D2
 
[162] jpa와 모던 자바 데이터 저장 기술
[162] jpa와 모던 자바 데이터 저장 기술[162] jpa와 모던 자바 데이터 저장 기술
[162] jpa와 모던 자바 데이터 저장 기술NAVER D2
 
[124] mit cheetah 로봇의 탄생
[124] mit cheetah 로봇의 탄생[124] mit cheetah 로봇의 탄생
[124] mit cheetah 로봇의 탄생NAVER D2
 
[114] DRC hubo technical review
[114] DRC hubo technical review[114] DRC hubo technical review
[114] DRC hubo technical reviewNAVER D2
 
[132] rust
[132] rust[132] rust
[132] rustNAVER D2
 
[164] pinpoint
[164] pinpoint[164] pinpoint
[164] pinpointNAVER D2
 
[122] line on apple watch
[122] line on apple watch[122] line on apple watch
[122] line on apple watchNAVER D2
 
[111] 네이버효과툰어떻게만들어졌나
[111] 네이버효과툰어떻게만들어졌나[111] 네이버효과툰어떻게만들어졌나
[111] 네이버효과툰어떻게만들어졌나NAVER D2
 
[154] 데이터 센터의 오픈 소스 open compute project (ocp)
[154] 데이터 센터의 오픈 소스 open compute project (ocp)[154] 데이터 센터의 오픈 소스 open compute project (ocp)
[154] 데이터 센터의 오픈 소스 open compute project (ocp)NAVER D2
 
[123] quality without qa
[123] quality without qa[123] quality without qa
[123] quality without qaNAVER D2
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Kim Hunmin
 

Destacado (20)

[142] how riot works
[142] how riot works[142] how riot works
[142] how riot works
 
[153] apache reef
[153] apache reef[153] apache reef
[153] apache reef
 
[143] 모바일 혈액진단기기 개발 삽질기
[143] 모바일 혈액진단기기 개발 삽질기[143] 모바일 혈액진단기기 개발 삽질기
[143] 모바일 혈액진단기기 개발 삽질기
 
[144]mobile앱에서 효율적인 storage 접근 방법
[144]mobile앱에서 효율적인 storage 접근 방법[144]mobile앱에서 효율적인 storage 접근 방법
[144]mobile앱에서 효율적인 storage 접근 방법
 
[134] immersive sound vr
[134] immersive sound vr[134] immersive sound vr
[134] immersive sound vr
 
[151] 영상 인식을 통한 오프라인 고객분석 솔루션과 딥러닝
[151] 영상 인식을 통한 오프라인 고객분석 솔루션과 딥러닝[151] 영상 인식을 통한 오프라인 고객분석 솔루션과 딥러닝
[151] 영상 인식을 통한 오프라인 고객분석 솔루션과 딥러닝
 
[113] lessons from realm
[113] lessons from realm[113] lessons from realm
[113] lessons from realm
 
[131] packetbeat과 elasticsearch
[131] packetbeat과 elasticsearch[131] packetbeat과 elasticsearch
[131] packetbeat과 elasticsearch
 
[112] 실전 스위프트 프로그래밍
[112] 실전 스위프트 프로그래밍[112] 실전 스위프트 프로그래밍
[112] 실전 스위프트 프로그래밍
 
[161] 데이터사이언스팀 빌딩
[161] 데이터사이언스팀 빌딩[161] 데이터사이언스팀 빌딩
[161] 데이터사이언스팀 빌딩
 
[162] jpa와 모던 자바 데이터 저장 기술
[162] jpa와 모던 자바 데이터 저장 기술[162] jpa와 모던 자바 데이터 저장 기술
[162] jpa와 모던 자바 데이터 저장 기술
 
[124] mit cheetah 로봇의 탄생
[124] mit cheetah 로봇의 탄생[124] mit cheetah 로봇의 탄생
[124] mit cheetah 로봇의 탄생
 
[114] DRC hubo technical review
[114] DRC hubo technical review[114] DRC hubo technical review
[114] DRC hubo technical review
 
[132] rust
[132] rust[132] rust
[132] rust
 
[164] pinpoint
[164] pinpoint[164] pinpoint
[164] pinpoint
 
[122] line on apple watch
[122] line on apple watch[122] line on apple watch
[122] line on apple watch
 
[111] 네이버효과툰어떻게만들어졌나
[111] 네이버효과툰어떻게만들어졌나[111] 네이버효과툰어떻게만들어졌나
[111] 네이버효과툰어떻게만들어졌나
 
[154] 데이터 센터의 오픈 소스 open compute project (ocp)
[154] 데이터 센터의 오픈 소스 open compute project (ocp)[154] 데이터 센터의 오픈 소스 open compute project (ocp)
[154] 데이터 센터의 오픈 소스 open compute project (ocp)
 
[123] quality without qa
[123] quality without qa[123] quality without qa
[123] quality without qa
 
Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까? Facebook은 React를 왜 만들었을까?
Facebook은 React를 왜 만들었을까?
 

Similar a [141] react everywhere

Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCodeSpring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCodedpTablo
 
React 튜토리얼 2차시
React 튜토리얼 2차시React 튜토리얼 2차시
React 튜토리얼 2차시태현 김
 
[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함
[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함
[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함Ji-Woong Choi
 
Sonatype nexus 로 docker registry 관리하기
Sonatype nexus 로 docker registry 관리하기Sonatype nexus 로 docker registry 관리하기
Sonatype nexus 로 docker registry 관리하기KwangSeob Jeong
 
ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기Taegon Kim
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기WebFrameworks
 
[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱NAVER D2
 
[141] 오픈소스를 쓰려는 자, 리베이스의 무게를 견뎌라
[141] 오픈소스를 쓰려는 자, 리베이스의 무게를 견뎌라[141] 오픈소스를 쓰려는 자, 리베이스의 무게를 견뎌라
[141] 오픈소스를 쓰려는 자, 리베이스의 무게를 견뎌라NAVER D2
 
가계부 리펙토링.pdf
가계부 리펙토링.pdf가계부 리펙토링.pdf
가계부 리펙토링.pdf동준 김
 
Git from google techtalks by Randal
Git from google techtalks by RandalGit from google techtalks by Randal
Git from google techtalks by Randalyagurchoi
 
141 deview 2013 발표자료(박준형) v1.1(track4-session1)
141 deview 2013 발표자료(박준형) v1.1(track4-session1)141 deview 2013 발표자료(박준형) v1.1(track4-session1)
141 deview 2013 발표자료(박준형) v1.1(track4-session1)NAVER D2
 
바닐라에서 React까지
바닐라에서 React까지바닐라에서 React까지
바닐라에서 React까지Wonjun Hwang
 
Internship backend
Internship backendInternship backend
Internship backendYein Sim
 
Gradle & IntelliJ & Vert.x
Gradle & IntelliJ & Vert.xGradle & IntelliJ & Vert.x
Gradle & IntelliJ & Vert.xKwnaghwan Cho
 
[1A6]Docker로 보는 서버 운영의 미래
[1A6]Docker로 보는 서버 운영의 미래[1A6]Docker로 보는 서버 운영의 미래
[1A6]Docker로 보는 서버 운영의 미래NAVER D2
 
[17.01.19] docker introduction (Korean Version)
[17.01.19] docker introduction (Korean Version)[17.01.19] docker introduction (Korean Version)
[17.01.19] docker introduction (Korean Version)Ildoo Kim
 

Similar a [141] react everywhere (20)

Spring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCodeSpring Boot + React + Gradle in VSCode
Spring Boot + React + Gradle in VSCode
 
React 튜토리얼 2차시
React 튜토리얼 2차시React 튜토리얼 2차시
React 튜토리얼 2차시
 
[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함
[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함
[오픈소스컨설팅]Subversion vs git - 참을 수 없는 간단함
 
Sonatype nexus 로 docker registry 관리하기
Sonatype nexus 로 docker registry 관리하기Sonatype nexus 로 docker registry 관리하기
Sonatype nexus 로 docker registry 관리하기
 
ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기ReactJS로 시작하는 멀티플랫폼 개발하기
ReactJS로 시작하는 멀티플랫폼 개발하기
 
React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기React를 이용하여 멀티플랫폼에서 개발하기
React를 이용하여 멀티플랫폼에서 개발하기
 
[Codelab 2017] ReactJS 기초
[Codelab 2017] ReactJS 기초[Codelab 2017] ReactJS 기초
[Codelab 2017] ReactJS 기초
 
[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱[114]angularvs react 김훈민손찬욱
[114]angularvs react 김훈민손찬욱
 
[141] 오픈소스를 쓰려는 자, 리베이스의 무게를 견뎌라
[141] 오픈소스를 쓰려는 자, 리베이스의 무게를 견뎌라[141] 오픈소스를 쓰려는 자, 리베이스의 무게를 견뎌라
[141] 오픈소스를 쓰려는 자, 리베이스의 무게를 견뎌라
 
가계부 리펙토링.pdf
가계부 리펙토링.pdf가계부 리펙토링.pdf
가계부 리펙토링.pdf
 
Git from google techtalks by Randal
Git from google techtalks by RandalGit from google techtalks by Randal
Git from google techtalks by Randal
 
141 deview 2013 발표자료(박준형) v1.1(track4-session1)
141 deview 2013 발표자료(박준형) v1.1(track4-session1)141 deview 2013 발표자료(박준형) v1.1(track4-session1)
141 deview 2013 발표자료(박준형) v1.1(track4-session1)
 
바닐라에서 React까지
바닐라에서 React까지바닐라에서 React까지
바닐라에서 React까지
 
Internship backend
Internship backendInternship backend
Internship backend
 
Gradle & IntelliJ & Vert.x
Gradle & IntelliJ & Vert.xGradle & IntelliJ & Vert.x
Gradle & IntelliJ & Vert.x
 
[1A6]Docker로 보는 서버 운영의 미래
[1A6]Docker로 보는 서버 운영의 미래[1A6]Docker로 보는 서버 운영의 미래
[1A6]Docker로 보는 서버 운영의 미래
 
deview2014
deview2014deview2014
deview2014
 
[17.01.19] docker introduction (Korean Version)
[17.01.19] docker introduction (Korean Version)[17.01.19] docker introduction (Korean Version)
[17.01.19] docker introduction (Korean Version)
 
Atom package part1
Atom package part1Atom package part1
Atom package part1
 
Git
Git Git
Git
 

Más de NAVER D2

[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다NAVER D2
 
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...NAVER D2
 
[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기NAVER D2
 
[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발NAVER D2
 
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈NAVER D2
 
[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&A[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&ANAVER D2
 
[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기NAVER D2
 
[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep Learning[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep LearningNAVER D2
 
[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applications[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applicationsNAVER D2
 
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load BalancingOld version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load BalancingNAVER D2
 
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지NAVER D2
 
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기NAVER D2
 
[224]네이버 검색과 개인화
[224]네이버 검색과 개인화[224]네이버 검색과 개인화
[224]네이버 검색과 개인화NAVER D2
 
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)NAVER D2
 
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기NAVER D2
 
[213] Fashion Visual Search
[213] Fashion Visual Search[213] Fashion Visual Search
[213] Fashion Visual SearchNAVER D2
 
[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화NAVER D2
 
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지NAVER D2
 
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터NAVER D2
 
[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?NAVER D2
 

Más de NAVER D2 (20)

[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다[211] 인공지능이 인공지능 챗봇을 만든다
[211] 인공지능이 인공지능 챗봇을 만든다
 
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
[233] 대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing: Maglev Hashing Scheduler i...
 
[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기[215] Druid로 쉽고 빠르게 데이터 분석하기
[215] Druid로 쉽고 빠르게 데이터 분석하기
 
[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발[245]Papago Internals: 모델분석과 응용기술 개발
[245]Papago Internals: 모델분석과 응용기술 개발
 
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
[236] 스트림 저장소 최적화 이야기: 아파치 드루이드로부터 얻은 교훈
 
[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&A[235]Wikipedia-scale Q&A
[235]Wikipedia-scale Q&A
 
[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기[244]로봇이 현실 세계에 대해 학습하도록 만들기
[244]로봇이 현실 세계에 대해 학습하도록 만들기
 
[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep Learning[243] Deep Learning to help student’s Deep Learning
[243] Deep Learning to help student’s Deep Learning
 
[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applications[234]Fast & Accurate Data Annotation Pipeline for AI applications
[234]Fast & Accurate Data Annotation Pipeline for AI applications
 
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load BalancingOld version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
Old version: [233]대형 컨테이너 클러스터에서의 고가용성 Network Load Balancing
 
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
[226]NAVER 광고 deep click prediction: 모델링부터 서빙까지
 
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
[225]NSML: 머신러닝 플랫폼 서비스하기 & 모델 튜닝 자동화하기
 
[224]네이버 검색과 개인화
[224]네이버 검색과 개인화[224]네이버 검색과 개인화
[224]네이버 검색과 개인화
 
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
[216]Search Reliability Engineering (부제: 지진에도 흔들리지 않는 네이버 검색시스템)
 
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
[214] Ai Serving Platform: 하루 수 억 건의 인퍼런스를 처리하기 위한 고군분투기
 
[213] Fashion Visual Search
[213] Fashion Visual Search[213] Fashion Visual Search
[213] Fashion Visual Search
 
[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화[232] TensorRT를 활용한 딥러닝 Inference 최적화
[232] TensorRT를 활용한 딥러닝 Inference 최적화
 
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
[242]컴퓨터 비전을 이용한 실내 지도 자동 업데이트 방법: 딥러닝을 통한 POI 변화 탐지
 
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
[212]C3, 데이터 처리에서 서빙까지 가능한 하둡 클러스터
 
[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?[223]기계독해 QA: 검색인가, NLP인가?
[223]기계독해 QA: 검색인가, NLP인가?
 

[141] react everywhere