Content Switcheroo Update! -- Polycasts #24YouTube↗  IA↗(long shot)
Science & Technology  12.2K views 145 likes 3 dislikes   26 Aug 2015
Google for Developers 2.7M subscribers United States YouTube↗


Please select the problem
You must specify your email and describe the problem in detail
Describe your problem in detail if it's not obvious

Click to Play Video Click to Play Video
ROB DODSON : Salut, ça va ? Ici Rob Dodson.
여러분 안녕하세요 롭 도드슨입니다
Aujourd'hui dans Polycasts on va revoir
오늘 폴리캐스트에서는
notre ancien exemple de <i>core-pages</i>.
우리의 예전 코어 페이지 예제를 다시 볼 겁니다
On va le réviser pour qu'il utilise le nouvel élément <i>iron-pages</i>.
이걸 수정하여 새로운 iron 페이지 요소를 사용할 것입니다
Voyons voir ça.
알아봅시다
Bon, voici ce que nous allons créer aujourd'hui.
네, 이게 우리가 오늘 만들 건데요
C'est un chat-alogue. Vous voyez le jeu de mots ? Ouais ? Ouais.
이건 캣탈로그예요 아시겠죠? 네, 네
C'est en résumé un genre de petit carrousel d'images.
이건 기본적인 작은 이미지 캐러젤입니다
On voit qu'il a des boutons Suivant et Précédent.
이런 다음, 이전 버튼이 있는 게 보이죠
Et quand je clique dessus, on affiche diverses photos de chats.
그걸 클릭하면, 고양이의 다른 사진으로 넘어갑니다
Et on voit ici qu'on a un champ de saisie,
여기 텍스트 필드가 있는게 보이죠
et si je change son index, ça va aussi changer
제가 인덱스를 바꾸면 이것도
la photo de chat qu'on a sous les yeux.
현재 보고 있는 고양이의 것으로 업데이트됩니다
Pour créer tout ça,
이 모든 것을 구축하기 위해
on utilisera le nouvel élément<i> iron-pages</i>.
새 iron 페이지 요소를 사용할 겁니다
Alors, voyons le code source de notre fichier "index".
이제 index 파일의 소스를 봅시다
On voit que j'ai déjà mis en place mes polyfills
폴리필 웹 구성요소를
du fichier webcomponents,
이미 갖고 있는 게 보이죠
j'ai aussi déjà importé mon élément <i>cat-alogue</i>
미리 진행했고 제 캣탈로그 요소를 불러왔어요
et je l'ai même déjà inséré dans le corps de ma page.
이걸 여기 페이지에도 추가했어요
Donc on est déjà quasiment prêts à attaquer.
꽤 진행할 준비를 잘 한 것 같네요
J'aimerais faire remarquer que j'ai un répertoire "images" juste ici,
이제 제가 알려드릴 것은 여기 이미지 디렉토리와
et dedans, j'ai quelques photos de chats.
그 안의 고양이 사진 부분입니다
Ce sont des photos du petit félin et compagnon d'un des membres
이것들은 Polymer Eng 팀의
de l'équipe d'ingénierie Polymer
멤버 중 고양이를 좋아하는 친구가 준
pour notre exemple, c'est plutôt cool.
멋진 예제입니다
Dans la définition de l'élément <i>cat-alogue</i>,
이제, 캣탈로그에서 요소 정의,
on voit que le code a tout l'air d'un élément Polymer typique.
이것이 전형적인 폴리머 요소로 보이죠
Tout en haut, on importe "polymer.html"
최상위에 폴리머 HTML을 불러와
pour s'assurer que cette dépendance soit chargée et parée.
종속 부분이 로드되어 사용 가능하게 합니다
Notre élément as un identifiant <i>id</i> valant "cat-alogue",
그건 캣탈로그의 ID를 갖고 있어요
qui correspond à la propriété <i>is</i> qu'on a plus bas
이건 여기 아래 Polymer constructor에 있는
dans le constructeur Polymer.
속성과 일치합니다
Et ma première action,
그리고 가장 먼저
c'est juste d'ajouter un style à notre élément pour styliser "host".
호스트 스타일링을 위해 우리 요소에 스타일을 더할게요
Donc on va styliser la balise elle-même,
우린 태그 자체를 스타일링합니다
je débute avec « display: block; ».
그리고 이걸 display: block에 보내죠
Je fais ceci traditionnellement pour beaucoup de mes éléments
전 많은 요소들에 대해 이렇게 합니다
parce que, par défaut, les éléments personnalisés sont affichés en ligne
기본적으로 개인화된 요소들은 직렬로 표현되고
et d'habitude, je veux avoir soit des blocs, soit des blocs en ligne.
전 이것들을 block이나 직렬 block에 표현하고 싶기 때문이죠
Donc je débute toujours par ceci pour éviter des bizarreries de style
라인 아래에 이상한 스타일을 막기 위해서 항상 이걸 먼저 합니다
potentielles. Ceci étant fait, je suis prêt à importer <i>iron-pages</i>.
이제, 그걸 놓았으니, 계속 진행하여 iron 페이지를
Je l'ai déjà installé avec Bower,
불러오면 됩니다 이미 Bower를 이용해 설치했거든요
donc je vais juste l'extraire de mon répertoire
이걸 Bower 구성요소 디렉토리를 통해 당겨와서
"bower_components" et l'insérer à mon élément.
여기 제 요소에 넣겠습니다
J'utilise ensuite cet extrait de code bien pratique de <i>iron-pages</i> pour
그리고 이 간편한 iron 페이지 정보를 통해 iron 페이지를
insérer un texte standard pour <i>iron-pages</i>.
낱낱히 알 수 있습니다
Cet extrait de code, au fait, fait partie de mon package <i>snippets</i>,
이 정보는 제 정보 패키지에 들어있어요
donc j'ai des extraits de code à la fois pour Sublime, disponibles ici
Sublime에 대한 정보도 여기 있고요
et pour Atom, disponibles par ici.
Atom에 대한 정보도 여기서 얻을 수 있어요
Ils sont très très pratiques et ils sont configurés pour
이것들은 정말 정말 유용하고 iron 요소와 paper요소를
prendre en charge les éléments Iron et Paper,
지원하기 위해 설정된 것입니다
donc ça facilite les choses pour taper du code.
그래서 이렇게 코드 쓰기를 간편하게 만들죠
On voit ici que l'élément <i>iron-pages</i>
iron 페이지를 이렇게 볼 것인데
ressemble beaucoup à l'ancien élément <i>core-pages</i>.
이전의 core 페이지 요소와 비슷하죠
Il a un attribut <i>selected</i>, qui
이건 선택된 속성을 가지며
définit laquelle de ces sections
이 속성은 어떤 섹션이 어떤 점에서
s'affichera à tout moment.
표현될지를 정해줍니다
par défaut, sa valeur est "0"
지금은 0으로 설정되어 있죠
donc on affichera cette première section,
그래서 첫 번째 섹션이 나타납니다
et je vais rajouter un peu de contenu à ce truc.
여기에 컨텐츠를 약간 첨가할게요
Je vais juste insérer des balises d'images,
이미지 태그 몇 개를 추가합니다
et elles renverront sur nos photos de chats.
이것들은 우리 고양이 사진과 연결됩니다
Je précise leurs attributs <i>alt</i> pour l'accessibilité,
접근성을 위해 여기에 alt 속성을 줍니다
et je veux aussi leur donner une hauteur explicite de 375 pixels.
그리고 고정 높이 375픽셀을 줍니다
Donc je leur donne une classe <i>pic</i> pour pouvoir les styliser.
이것들에 pic class를 줘서
Ensuite je leur donne une hauteur
스타일링할 겁니다 그리고 높이를 주는데요
dans l'intérêt de la démo, pour éviter d'avoir des images
이 데모를 위해서요
toutes bancales et différentes.
모두 이상하게 다른 사이즈가
On peut enfin prévisualiser cette page
되지 않게 하기 위해서요 이제 이것을 미리 볼 수 있어요
et comme <i>iron-pages</i> est paramétré pour afficher le premier
iron 페이지가 첫 번째 섹션에 표시되기 때문에
élément <i>section</i>, on voit notre toute première photo de chat
우리 첫 번째 고양이 사진은
s'afficher à l'écran, ça déchire.
멋지게도 바로 화면에 나타납니다
Ensuite, je vais
이제 다음으로 할 것은
créer les boutons qui permettent d'aller et venir
이 버튼들을 만들어 앞으로 뒤로 토글하여
d'une photo de chat à l'autre.
다른 고양이 토글할 건데요
Pour ce faire, je vais créer un <i>div</i> sous mon <i>iron-pages</i>,
그렇게 하기 위해, 제 iron 아래에 div를 생성하고
et je vais l'appeler "controls".
이를 controls라 부를 겁니다
Dedans, je vais juste insérer
이 안에, 바닐라 약간,
des boutons conventionnels, en bon vieux HTML.
이전 일반적 HTML 버튼을 넣습니다
Mais le point différent ici
그런데 다른 점은
est que je vais leur donner des liaisons d'événement déclaratives ou gestionnaires, je devrais dire.
이들에게 선언형 이벤트 바인딩이나 이벤트 핸들러를 줄 거라는 거죠
Ils sont vraiment utiles,
이건 매우 유용합니다
ce sont des fonctions de Polymer pour définir
폴리머가 추가한 이 기능들은
des détecteurs d'événements.
이벤트 리스너를 만듭니다
Le truc sympa avec, c'est qu'en plus de paramétrer
이것은 이벤트 리스너를 만드는 것뿐 아니라
le détecteur d'événement, elles s'occupent aussi de
요소가 돔으로부터 제거될 때
son retrait quand l'élément est retiré
이벤트 리스너를 삭제해줍니다
du DOM, ce qui est très pratique pour empêcher des choses
이건 메모리 누출을 막는 데
comme les fuites de mémoire.
매우 유용합니다
Alors pour l'instant, je ne sais pas trop
이제 이 메소드로 무엇을 할지
ce que je ferai de ces méthodes, mais
모르겠지만
je vais poursuivre et les écraser dans mon prototype.
계속해서 제 프로토타입에서 그걸 찾아보겠습니다
Alors je vais déjà créer
계속해서 찾아보겠습니다
<i>goPrev</i> ainsi que <i>goNext</i>.
Go Previous와 Go Next
Si je ne sais pas encore ce que je ferai de ces fonctions,
이것들을 어떻게 할지 모르겠는데요
c'est parce que je n'ai pas encore creusé la documentation de <i>iron-pages</i>.
그건 아직 iron 페이지 문서를 제대로 보지 않아서예요
Donc je ne sais pas trop comment lui dire d'avancer ou de reculer.
다음으로, 뒤로 가게 하는 법을 모르겠어요
Pour ce faire, on va passer dans le catalogue d'éléments
그렇게 하려면 elements.polymer-project.org
de "elements.polymer-project.org", creuser l'élément Iron,
요소 카탈로그로 가서 iron 요소를 찾아봅니다
faire défiler la page jusqu'à trouver <i>iron-pages</i>
iron pages를 찾을 때까지 내립니다
qui se trouve juste ici, en bas.
바로 여기 아래에 있네요
Je vais agrandir un peu le texte,
그리고 이걸 조금 더 확장합니다
pour que vous puissiez mieux voir la page
이 페이지를 더 잘 볼 수 있게요
car il y a quelques points que j'aimerais souligner.
제가 여기서 강조하고 싶은 게
D'abord, ce bouton Source.
있거든요 먼저 이 소스 버튼입니다
C'est une chose qu'on vient juste d'ajouter au catalogue.
이건 우리가 이미 카탈로그에
Comme son nom l'indique, ce que ça fait,
추가한 것인데요 이것은 이름의 의미하듯
c'est vous permettre d'aller sur le référentiel GitHub
당신이 관심있는
pour l'élément qui vous intéresse.
실제 GitHub repo로 가게 해줘요
Vous pouvez vous rendre ici, et si vous voulez souligner un problème,
여기로 가서 어떤 의견을 내고 싶으면
c'est l'endroit où le faire.
여기서 하면 됩니다
On va sur la source de l'élément, sur son référentiel,
요소 소스로 가서 이것의 repo로 가서
et on souligne un problème spécifique à cette balise.
그 태그에 대한 문제를 올립니다
Sinon, l'autre chose qu'on peut faire ici,
여기서 다른 것도 할 수 있는데요
évidemment, est de lire la source pour l'élément,
가서 이 요소에 대한 글을 읽는 겁니다
et c'est super pratique quand on essaie
이건 매우 간편해요
de comprendre le fonctionnement interne d'un élément.
요소 안에서 어떤 일이 일어나는지 알기 위해서 말이죠
Autre chose que j'aimerais souligner et
제가 강조하고픈 다른 건
que certains ont raté est ce petit volet Comportements ici, en bas.
몇몇이 그리워할 behaviors 패널에 대한 것입니다
En ce moment, on voit donc <i>iron-pages</i>,
여기 있는 거요 이제 iron 페이지를 보면
et on voit qu'il a cette unique propriété qui
이것이 정의하고 있는 하나의 속성이 보입니다
est dit le définir, mais… en réalité,
하지만 사실
on sait qu'il y a aussi ces deux comportements
우리는 여기에 두 개의 behavior가 있고
qu'il permet d'appliquer, ce qui veut dire, si on se souvient
이건 behavior를 다룬 우리 에피소드 중 하나를
d'un précédent épisode sur les comportements,
떠올려 볼 때
on sait qu'ils <i>rajoutent</i>, en réalité, d'autres propriétés
이건 추가적인 속성과 실제로 우리가 접근해야 할 메소드를
et méthodes auxquelles on devrait avoir accès.
섞어놓은 것이라는 걸 압니다
Donc, si on descend et qu'on clique sur le comportement <i>ironSelectable</i>,
아래로 가서 iron Selectable Behavior를 클릭하면
on voit qu'il existe plusieurs propriétés implémentées
우리는 요소가 실행하고 있는 속성을 볼 수 있어요
par notre élément, et qu'en fait, on a aussi
실제로 여기 아래의
quelques méthodes un peu plus bas.
메소드도 얻죠
On a des méthodes pour sélectionner une valeur précise,
우리는 특정 값을 고르기 위해 메소드를 사용합니다
<i>selectNext</i>, <i>selectPrevious</i>, etc…
Next, Previous 등을요
Donc c'est en réalité ce que je vais
이건 실제로 제가 만든
utiliser dans ces méthodes écrasées que j'avais créées.
메소드에서 사용할 것입니다
J'utiliserai ces méthodes, "selectNext" et "selectPrevious".
이 Select Next Previous 메소드를 사용하죠
De retour dans la définition de mon élément,
제 요소 정의에서는
je vais donner un identifiant <i>id</i> à <i>iron-pages</i>
iron 페이지에 ID를 줍니다
juste pour pouvoir le sélectionner plus facilement avec
이건 폴리머 자동 노드 검색을 통해 더 쉽게 선택할 수 있게 해주고
le moteur Automatic Node de Polymer, pour ne pas avoir à faire
선택을 요청하거나 그런 것을 하지 않게 해줍니다
une requête SELECT ou autre. J'ai nommé mon <i>iron-pages</i> "pages".
이걸 Pages라고 부를게요
Et maintenant dans "goPrev", je peux dire
이제 go prev 안에
« this.$.pages » pour cibler l'élément, appeler <i>selectPrevious</i>,
.$ 페이지가 Select Previous를 선택할 겁니다
puis dans "goNext", je vais faire pareil, mais cette fois,
다음으로 next도요 이번에도 같은 것을 할텐데요
en appelant <i>selectNext</i>.
Select Next를 호출합니다
Je peux enfin retourner dans Chrome
이제 크롬으로 전환하여
j'ai des boutons Suivant et Précédent
Next, Previous 버튼을 봅니다
et notre carrousel d'images, notre « cat-alogue »
우리의 캣탈로그 이미지 캐루젤이
qui est maintenant un peu plus interactif, et on peut
이제 좀 상호작용하고 이 아름다운 사진들을
parcourir toutes ces superbes photos de chat.
넘길 수 있게 하네요
Maintenant, je veux ajouter le petit champ de saisie
이제 다음으로 할 것은 어떤 고양이 사진을 보고 있는지
au milieu pour savoir laquelle de mes photos
알려주는 작은 텍스트를 가운데 넣는 겁니다
de chat j'ai sous les yeux. Pour ce faire, je retourne dans la définition de mon élément
그렇게 하기 위해 요소 정의로 다시 돌아와
et je vais insérer un classique, bon vieil élément « input type="text" ».
일반적 input type을 text 요소라고 할 겁니다
Le détail intéressant ici est que
여기서 흥미로운 점은
je vais créer une liaison dans sa valeur
이 값의 바인딩을 만드는 것이고
et je vais appeler ma variable de portée "selected",
scope variable를 선택되게 하는 겁니다
donc ce sera le nom partagé de cette valeur liée.
그러면 묶여진 값에 대해 이름을 공유하거든요
Mais remarquez aussi que j'ajoute
여기서 제가 이 뒤에
deux signes deux-points après et le mot "input".
두 개의 콜론과 input을 타이핑합니다
Alors que se passe-t-il ?
이게 무슨 일일까요?
Eh bien, le système de liaison de données de Polymer
폴리머 데이터 바인딩 시스템은
est entièrement basé sur les événements, en fait.
모두 비밀스레 이벤트에 기반하고 있어요
Donc quand on a une propriété dans un élément,
요소의 속성을 갖고 있을 때
par exemple une propriété nommée "age"… Bon, regardez.
예를 들어, age라는 것이 있다면요
On a une propriété nommée "age", ok ?
age라 불리는 속성이 있죠?
Quand cette propriété change, si vous avez défini <i>notify</i> à "true",
이 속성이 바뀌면 이 값을 참으로 설정했을 때
elle va en fait déclencher un événement nommé <i>age-changed</i>.
이건 age가 변화된 이벤트를 실행합니다
Et Polymer détecte ces événements
폴리머는 이런 이벤트를 듣습니다
pour savoir quand mettre à jour ses liaisons de données.
데이터 바인딩을 언제 업데이트할지 알기 위해서요
Mais dans le cas des éléments natifs,
하지만 기존 요소들은
ils émettent leurs propres événements en cas de changement.
그들이 변화하면 자신들의 이벤트를 실행합니다
L'élément <i>input</i> de texte émet l'événement <i>input</i> chaque fois
텍스트 입력 요소는 이게 바뀔 때마다 입력 이벤트를 바꾸고
qu'il change, et donc il faut informer Polymer de cet événement.
우리는 폴리머에게 이를 가르쳐줘야 하죠
Il faut lui enseigner que voilà, on veut
우리는 이렇게 가르쳐야 해요
que telle liaison soit mise à jour chaque fois qu'on
이봐, 이 이벤트가 시작되는 걸 들을 때마다
détecte l'émission de cet événement-ci.
이 바인딩을 업데이트해줘
Voilà ce qu'on fait avec cette syntaxe un peu spéciale,
그래서 이 특별한 구문을 여기서 사용합니다
c'est comme ça qu'on établit le lien avec les éléments HTML natifs.
이렇게 기존 HTML 요소를 바인딩합니다
Bien, ceci étant établi, je peux retourner dans mon élément
좋아요, 이 설정으로 다시 iron 페이지로 돌아갑니다
<i>iron-pages</i>, et remplacer sa valeur "selected" codée en dur
이 hard-coded 선택값을
par la même variable de portée.
같은 scope 변수로 바꿉니다
Je n'ai plus qu'à définir une propriété de mon élément,
그리고 제 요소의 속성을
pour "selected".
selected로 바꿔요
Elle sera de <i>type</i> nombre, avec pour valeur par défaut "0".
이걸 숫자로 하면 기본 값 0입니다
Du coup, si on va prévisualiser notre carrousel,
이제 계속해서 이걸 미리보면
on a cette valeur de "0" ici en bas
여기 아래 0값이 보이죠
et on voit qu'elle change quand on clique sur Suivant et Précédent.
우리가 Next와 Previous 버튼을 누를 때 바뀌는 게 보이죠
On peut aussi taper la valeur dans le champ,
text input에도 입력할 수 있고
et comme le champ émet l'événement <i>input</i>,
이건 입력 이벤트를 불러오기 때문에
on sait qu'on doit mettre à jour
그것 또한 변화될 때
nos liaisons avec ces changements.
우리 바인딩을 업데이트 합니다
Maintenant, ce que j'aimerais faire,
이제 우리가 할 것은
c'est disposer ces commandes un peu mieux et, dans Polymer 0.5,
controls 레이아웃을 더 좋게 만드는 것인데
on parlait tout le temps des attributs de disposition,
폴리머 0.5에서 레이아웃 속성을 다뤘죠
je les utilisais dans presque toutes mes démos.
매번 제 데모에서 사용했습니다
Dans Polymer 1.0, ils ont été déplacés
폴리머 1.0에는 그것은 그들의
dans leur propre référentiel nommé Iron Flex Layout.
repo로 옮겨졌고 이는 Flex Layout이라 불립니다
Je vais déjà importer Iron Flex Layout,
Iron Flex Layout을 불러옵니다
et on voit qu'il a un chemin spécial
여기 제가 사용하는 특별한 경로가 보이죠
comme je l'écris ici. C'est "iron-flex-layout/classes/ iron-flex-layout.html".
iron-flex-layout /classes/iron-flex-layout.html
Ça va en fait charger un groupe de classes CSS
그건 실제로 제가 Flexbox에 사용할
que je pourrai utiliser pour Flexbox.
CSS 클래스 묶음을 불러옵니다
Donc on est passé des attributs aux classes,
이제 속성에서 클래스로 바뀌었죠
mais c'est grosso modo pareil que dans le domaine de Polymer 0.5.
이건 기본적으로 폴리머 0.5에서와 같습니다
Avec tous les raccourcis Flexbox qu'on connaît et apprécie.
이건 여러분이 알고 좋아하는 Flexbox 지름길입니다
Alors à mon <i>div</i> "controls", j'ajoute
제 컨트롤 div에서
"layout", "horizontal" et "justified", et maintenant
수평 조정된 레이아웃을 추가합니다
la dispositions des objets devient plus sympa et on peut
이건 레이아웃이 참 잘 되었고
toujours naviguer avec.
토글할 수 있어요
Alors c'est super utile,
이건 매우 유용합니다
la plupart se demandait
많은 분들이 궁금하시죠
où étaient passés les attributs<i> layout</i>, donc voilà,
레이아웃 속성이 어디로 갔는지요
ils se trouvent dans Iron Flex Layout.
지금 Iron Flex Layout에 꺼져있어요
Et pour chaque élément, si on veut utiliser ces classes,
모든 요소에 이 클래스를 사용하고 싶다면
il vous faudra les importer pour qu'elles
그들을 불러와서 그 스코프 내에
s'appliquent dans ce cadre.
작동하도록 해야 합니다
Donc, c'est important à remarquer.
기억할 중요한 것이죠
Sur ce, une dernière chose à révéler,
이제 마지막으로 보여드릴 것은
c'est une fonction qui était très populaire dans Polymer 0.5,
폴리머 0.5에서 매우 유명한 기능인데
à savoir… Eh bien, des fois on ne voulait pas avoir un index "selected" numérique.
사람들이 숫자 선택 인덱스를 원하지 않았어요
Donc on utilisait une propriété spéciale,
그래서 그들은 매우 특별한 속성이나
l'attribut spécial appelé<i> valueattr</i>, l'attribut de valeur.
값 더하기, 값 속성을 사용했어요
On ajoutait ça à l'élément <i>core-pages</i>
그들은 코어 페이지 요소에 그걸 첨가해
et ensuite on spécifiait un attribut
이런 것을 업데이트할 때
à chacune des sections qu'il faudrait chercher quand
봐야 하는 모든 섹션에 그것을
on essayait de mettre à jour l'élément.
추가해야 했죠
Il a été remplacé dans Polymer 1.0 et <i>iron-pages</i>,
이건 폴리머 1.0에서 iron 페이지로 대체되었습니다
il s'appelle désormais<i> attr-for-selected</i>.
이건 adder for selected라 불리죠
On va donc utiliser ceci à la place de l'ancien <i>valueattr</i>
이것을 이전의 값 더하기 대신 사용하죠
pour dire qu'on veut créer un attribut nommé <i>data-cat</i>
data cat이라는 속성을 만들기 위해서요
qui n'est qu'un attribut créé de toutes pièces.
이건 만들어낸 속성이에요
je vais l'ajouter à chacune de mes sections,
이것을 모든 섹션에 추가할게요
et je vais lui donner une valeur qui en gros représente
그 섹션에 무엇이 있는지 정형화하는 값을 줄게요
le contenu de ma section. Donc ici, puisqu'on a un joli chat,
이건 예쁜 고양이이니까
la valeur de son <i>data-cat</i> sera "pretty".
이 데이터 값은 pretty입니다
Ici un chat en vacances, donc "vacation", et
이건 휴가 고양이이니 vacation
le chat pirate aura "hacker".
해커 고양이는 hacker
Ce qui va se passer, c'est qu'en cas de changement
이제 발생할 일은 선택된 값이 구문을 바꾸고
de la valeur "selected" en une chaîne, <i>iron-pages</i>
iron 페이지가
va parcourir ces différentes sections,
다른 섹션에서 보는 것입니다
mettons que ma chaîne vaut "hacker",
구문이 hacker라고 합시다
<i>iron-pages</i> va examiner les différentes sections
다른 섹션에서 봅니다
et chercher « qui a un <i>data-cat</i> valant "hacker" ?
어떤 게 hacker 고양이인가요?
Ah, celle-ci, juste ici ! »
아, 이 녀석이죠
Et il va faire de cette section l'objet sélectionné.
이것이 선택된 아이템이 됩니다
Alors, si je descends changer ma propriété <i>selected</i>
아래로 가서 구문의 선택 속성을 바꾸어
en chaîne et que je mets "hacker" par défaut,
hacker로 준다면
quand on va en prévisualisation,
이렇게 미리보기하면
on voit que mon <i>input</i> vaut "hacker"
문자 입력이 hacker죠
et quand on passe d'une section à l'autre,
이렇게 다른 섹션으로 넘기면
on affiche les diverses valeurs de <i>data-cat</i>.
다른 data cat 값으로 바뀝니다
Si on tape un nouveau nom ici,
다른 것도 여기 입력하죠
ça va disparaître un instant
이건 일 초만에 사라집니다
parce que ça ne correspond à rien, mais on peut entrer d'autres noms
아무것도 없기 때문이지만, 하나를 입력하여
et afficher les autres chats.
다른 고양이도 볼 수 있어요
Et voilà !
여기 되었습니다
Simple et sympa, avec ces petites mises à jour,
좋고 간단해요 약간의 작은 업데이트로
nous revoici dans la course.
이렇게 다시 나아가는군요
C'est tout pour cette semaine !
이번 주는 이게 전부였고요
N'hésitez pas à cliquer sur <i>S'abonner</i>.
그 작은 구독 버튼 누르시고
Si vous avez des questions, posez-les
질문이 있다면 아래 댓글에
en commentaire ci-dessous.
남겨주세요
Comme toujours, merci de votre attention,
항상 그렇듯 봐주셔서 정말 감사합니다
et à la prochaine fois. [MUSIQUE]
다음 시간에 뵐게요
Similar videos:

Polymer 0.8: First Look -- Polycasts #13
Google for Developers
25.7K views 253 likes 7 dislikes 06 Apr 201566% match

Optimize for production with Vulcanize -- Polycasts #39
Chrome for Developers
13.7K views 318 likes 3 dislikes 14 Jan 201658% match

Iron Icons -- Polycasts #20 (100 Days of Google Dev)
Google for Developers
22.3K views 137 likes 1 dislikes 09 Jul 201546% match


Content Switcheroo with Core-Pages -- Polycasts #09
Google for Developers
21.5K views 222 likes 2 dislikes 09 Feb 201545% match


Theming Elements -- Polycasts #17
Google for Developers
28.1K views 233 likes 2 dislikes 02 Jun 201543% match

Extending Native Elements -- Polycasts #15
Google for Developers
18.6K views 164 likes 3 dislikes 04 May 201543% match

Routing 101 -- Polycasts #10
Google for Developers
29.6K views 367 likes 4 dislikes 23 Feb 201542% match

Scrolling at 60 frames with core-list -- Polycasts #12
Google for Developers
24.6K views 247 likes 4 dislikes 23 Mar 201541% match

Behaviors -- Polycasts #21
Google for Developers
25.5K views 273 likes 4 dislikes 15 Jul 201541% match

Moar routing with... more-routing -- Polycasts #11
Google for Developers
22.9K views 206 likes 4 dislikes 09 Mar 201540% match

Go Offline -- Polycasts #19
Google for Developers
26.4K views 354 likes 8 dislikes 29 Jun 201540% match

Polymer Starter Kit -- Polycasts #18
Google for Developers
45.6K views 428 likes 6 dislikes 15 Jun 201540% match

Give your element an API -- Polycasts #16
Google for Developers
22.9K views 242 likes 1 dislikes 18 May 201538% match

Polymer: Creating responsive UIs
Google for Developers
42.9K views 323 likes 14 dislikes 25 Jun 201434% match

Google Developers Channel - Trailer
Google for Developers
181.5K views 116 likes 21 dislikes 03 Sep 201534% match

What is App Engine?
Google for Developers
89K views 453 likes 33 dislikes 03 Feb 201432% match

Core Toolbar -- Polycasts #03
Google for Developers
34K views 265 likes 7 dislikes 20 Oct 201431% match

Google I/O 2016 Highlights
Google for Developers
46.6K views 649 likes 15 dislikes 26 May 201630% match

VR at Google - Google I/O 2016
Google for Developers
73K views 484 likes 16 dislikes 19 May 201630% match

Core Icons -- Polycasts #01
Google for Developers
58K views 380 likes 5 dislikes 22 Sep 201429% match

VR & Cinema - Google I/O 2016
Google for Developers
76.6K views 683 likes 47 dislikes 19 May 201629% match

Getting started with Firebase and Android - Firecasts #1
Google for Developers
113.8K views 1.1K likes 19 dislikes 16 Feb 201628% match

An Introduction to Android Wear
Google for Developers
251.3K views 1.3K likes 86 dislikes 18 Jun 201428% match

An Introduction to Brillo, the OS for IoT
Google for Developers
64.4K views 215 likes 4 dislikes 27 Oct 201527% match

The Awesome Power of Auto-Binding Templates -- Polycasts #08
Google for Developers
29.8K views 276 likes 5 dislikes 28 Jan 201527% match


DevBytes: Chrome DevTools Device Mode
Google for Developers
73.4K views 340 likes 26 dislikes 10 Oct 201427% match

Google I/O 2014 - Unlock the next era of UI development with Polymer
Google for Developers
100.5K views 971 likes 26 dislikes 26 Jun 201427% match

TensorFlow: Machine Learning for Everyone
Google for Developers
537.8K views 2.8K likes 59 dislikes 15 Feb 201727% match

Google Play Services 5.0
Google for Developers
30.9K views 109 likes 18 dislikes 25 Jun 201427% match


DevBytes - Your App, At Scale with Google App Engine
Google for Developers
103.5K views 237 likes 4 dislikes 24 Mar 201427% match


Settings Privacy About Contact Donate