Session 4 - 최효석 React Hooks 마법. 그리고 깔끔한 사용기
2019년 9월 6일 네이버 쇼핑 개발자 meet up 행사인 'SHOWROOM' 에 발표된 자료입니다.
보다 자세한 내용은 http://nshop-developer.github.io 을 참고해주세요.
(2019년 9월 30일 오후 오픈 예정)
더 많은 샘플코드는 아래 주소에서 보실 수 있습니다.
https://github.com/KennethanCeyer/pycon-kr-2017/blob/master/README-KR.md
파이썬으로 개발을 진행할 때
메모리가 넘쳐흐르거나 프로세스 진행 순서가 엉망인 경험 없으세요?
리액티브 프로그래밍은 복잡한 데이터 흐름을 새로운 관점에서 쉽게 정의하고 재활용 할 수 있도록 도와줍니다.
또한 제너레이터와 코루틴은 거대한 데이터 스트림을 가볍게 하이파이브하며 여러분이 원하는대로 처리해줄 수 있게 설계되어 있습니다. 물론 처리시간도 늘어나지 않으면서요!
다가오는 파이콘 한국 2017, 13일 일요일 점심에 여러분에게 앞서 말한 기능을 이용하여 여러분의 코드를 조금 더 효율적으로 짜실 수 있는 노하우를 공유드리고자 합니다.
Session 4 - 최효석 React Hooks 마법. 그리고 깔끔한 사용기
2019년 9월 6일 네이버 쇼핑 개발자 meet up 행사인 'SHOWROOM' 에 발표된 자료입니다.
보다 자세한 내용은 http://nshop-developer.github.io 을 참고해주세요.
(2019년 9월 30일 오후 오픈 예정)
더 많은 샘플코드는 아래 주소에서 보실 수 있습니다.
https://github.com/KennethanCeyer/pycon-kr-2017/blob/master/README-KR.md
파이썬으로 개발을 진행할 때
메모리가 넘쳐흐르거나 프로세스 진행 순서가 엉망인 경험 없으세요?
리액티브 프로그래밍은 복잡한 데이터 흐름을 새로운 관점에서 쉽게 정의하고 재활용 할 수 있도록 도와줍니다.
또한 제너레이터와 코루틴은 거대한 데이터 스트림을 가볍게 하이파이브하며 여러분이 원하는대로 처리해줄 수 있게 설계되어 있습니다. 물론 처리시간도 늘어나지 않으면서요!
다가오는 파이콘 한국 2017, 13일 일요일 점심에 여러분에게 앞서 말한 기능을 이용하여 여러분의 코드를 조금 더 효율적으로 짜실 수 있는 노하우를 공유드리고자 합니다.
Sorry. for koreans only. I'll add english short description. or just visit http://wtfjs.com
아오 썅.
정정사항입니다.
객체 동일비교는 항상 valueOf 결과물로 나온 비교로 하는 데다가,
객체와 배열은 valueOf 해봐야 객체로 나오기 때문에
객체와 배열은 == 하나 === 하나 같은 비용으로 비교합니다.
[1,2,3]==[1,2,3] 은 false가 되므로
[1,,,2]==[1,undefined,undefuned,2] 는 무조건 false로 나옵니다.
리덕스를 도입할 때 주저하게 만드는 장벽들
○ 개요
몹엑스, 아폴로, 컨텍스트 API 등 리덕스를 도입하기도 전에 이미 선택적인 고민을 하게 만듭니다. 리덕스를 도입한 후에도 사가, 펜더, 옵져버블등의 미들웨어의 도입에서도 선택 장애가 발생하는 문제들이 리덕스 선택을 주저하게 만듭니다.
2020년 리덕스는 좋은 선택지 일까요? 리덕스는 언제 그리고 어떻게 사용해야 활용도를 높일 수 있을까요? 에어비앤비 결제 시스템과 3차원 시각화 시스템에 적용한 리덕스 활용 사례를 살펴보며 리덕스의 효용 가치를 같이 살펴보고자 합니다.
○ 목차
- 형상관리를 어렵게 하는 요소들
- MobX vs Redux
- 단방향 데이터 흐름(Flux)
- 미들웨어 살펴보기
- 리덕스와 미들웨어 활용 데모
- Typescript와 GraphQL 도입 사례
Sorry. for koreans only. I'll add english short description. or just visit http://wtfjs.com
아오 썅.
정정사항입니다.
객체 동일비교는 항상 valueOf 결과물로 나온 비교로 하는 데다가,
객체와 배열은 valueOf 해봐야 객체로 나오기 때문에
객체와 배열은 == 하나 === 하나 같은 비용으로 비교합니다.
[1,2,3]==[1,2,3] 은 false가 되므로
[1,,,2]==[1,undefined,undefuned,2] 는 무조건 false로 나옵니다.
리덕스를 도입할 때 주저하게 만드는 장벽들
○ 개요
몹엑스, 아폴로, 컨텍스트 API 등 리덕스를 도입하기도 전에 이미 선택적인 고민을 하게 만듭니다. 리덕스를 도입한 후에도 사가, 펜더, 옵져버블등의 미들웨어의 도입에서도 선택 장애가 발생하는 문제들이 리덕스 선택을 주저하게 만듭니다.
2020년 리덕스는 좋은 선택지 일까요? 리덕스는 언제 그리고 어떻게 사용해야 활용도를 높일 수 있을까요? 에어비앤비 결제 시스템과 3차원 시각화 시스템에 적용한 리덕스 활용 사례를 살펴보며 리덕스의 효용 가치를 같이 살펴보고자 합니다.
○ 목차
- 형상관리를 어렵게 하는 요소들
- MobX vs Redux
- 단방향 데이터 흐름(Flux)
- 미들웨어 살펴보기
- 리덕스와 미들웨어 활용 데모
- Typescript와 GraphQL 도입 사례
boost라이브러리 중에서 가장 많이 사용하는 기능인 BOOST_FOREACH()와 shared_ptr의 내부 구조를 분석합니다. 그리고 boost의 내부 구현에 사용된 이 기능을 프로그래밍에 응용하는 방법을 제시합니다.
* BOOST_FOREACH 구조 분석 및 응용
* shared_ptr 구조 분석 및 응용
탑크리에듀(www.topcredu.co.kr), 송석원 교수의 IT기술칼럼#2
자바스크립트는 ES6버전에서 class 키워드를 도입했습니다. 자바스크립트는 객체지향 언어였지만 다른 객체지향언어처럼 사용하기에는 많은 불편함이 있었습니다. 심지어 자바스크립트는 객체지향언어라고 볼 수 없다고 하는 분들도 있었을 정도였죠. 최근에 선풍적인 인기를 얻고 있는 React, Angular 같은 기술은 클래스 문법을 채택했습니다. 따라서, 클래스 문법에 대한 이해가 깊다면 새로운 기술을 습득할 때 많은 도움이 될 것 입니다.
다른 객체지향 언어와 자바스크립트의 차이를 이해하지 못하고 사용하게 되면 많은 문제점이 발생합니다. 안타깝지만 자바스크립트를 사용하고 있는 개발자들 중에서도 제대로 이해하고 사용하시는분은 많지 않은 듯 합니다.
이를 해소하기 위해서 새로 도입한 문법이 class 키워드로 대표되는 클래스 문법입니다. 객체지향 개발방법의 익숙한 개발자들을 위해서 자바스크립트가 새로운 문법을 도입한 것 입니다. 개인적으로 “JavaScript: The Good Parts”의 저자이신 Douglas Crockford 님께서 이를 어떻게 생각하는지 궁금합니다. 자바스크립트를 자바처럼 사용하는 것에 우려를 표하셨었는데, 그 사이 많은 시간이 지났으므로 입장이 바뀌었을지 궁금하군요. 선도적인 개발자들은 ES6에서 도입한 클래스 문법이 좋은 것인가 나쁜 것인가를 갖고 토론을 하기도 합니다.
3. Generator는무엇인가?
Generator function 으로반환된값을 Generator Object 라고 하고
이 Generator Obejct 는 iterator 프로토콜을따르고 있다. 즉
[Symbol.iterator] 가 프로퍼티에추가되어있다는것이다. Generator
function 안에서는 yield 라는키워드를사용해서함수내부에작성된코
드를전부실행하지않는다. 제너레이터함수는 yield 를기준으로실행을나
누어서진행한다. iterator 프로토콜을따르고 있기 때문에순차적으로실
행할수있는것이다.
cf> Generator function 를 제너레이터 함수 로, Generator
Object 를 제너레이터 오브젝트 로 표기.
12. 예제 코드를 살펴보자.
function* calc(prev, post) {
let result = 0;
console.log(`Initial result: ${result}`);
result = yield prev + post;
console.log(`Middle result: ${result}`);
result = yield;
console.log(`Last result: ${result}`);
}
let generator = calc(10, 20);
위에서언급한규칙에대한내용을모두담고 있는예제코드이다.
console.log() 에는어떠한값이찍히게 될까? 코드를통해하나씩살펴보
자.
13. console.log(generator.next());
// Initial result: 0
// { value: 30, done: false }
next() 메소드를실행시키면첫번째yield까지실행한다.
초기 result 변수에대한값이출력되고,
expression 으로계산된값인 30 이 value 이출력된다.
아직 yield 가 남았으니 done 은 false 가 되겠다.
15. console.log(generator.next(20));
// Last result: 20
// { value: undefined, done: true }
남은yield가 없으므로brace까지실행한다.
next() 메소드의파라미터로넘겨진 20 이 result 변수에할당된것을
확인할수있다.
더이상 yield 키워드가 없으므로 done 은 true 가 된다.