패러다임 전환 - FrontEnd Dev.

ੋध੄੹ജ paradaim shift

@yamoo9 SPEAKER

ಁ۞׮੐द೐౟

пद؀݃׮ࢎۈٜ੉ࠁҊוԕ؍Ѫٜ Ӓۧ׮Ҋ޺঻؍Ѫٜ  ૊ ੋध੄୓҅ 4ZTUFN ܳ੄޷ೞחѐ֛ਸ݈೤פ׮

-PWFBOE1BJODN.VODI.VTFVN 0TMP

7BNQJSFDN.VODI.VTFVN 0TMP

*/45"/5(3"5*'*$"5*0/

%*35:8)*5&53"4) 8*5)(6--4

য૵ݶ਋ܻоӒۧ׮Ҋ޺Ҋ੓חѪٜ਷Ҋ੿ػ૓प੉ইקࣻ੓णפ׮  द؀੄׮ࣻоੋधೣਵ۽ઓ੤ೞחѪ੉Ҋ ঱ઁա߄Չоמࢿ੉੓חѪੑפ׮

development   paradaim ѐߊਸ߄ۄࠁח׼न੄Ѽ೧ ӝળ ࢎҊߑध੉ಁ۞׮੐ੑפ׮

ѐߊীҙೠಁ۞׮੐द೐౟

'SPOU&OE%FWFMPQ

'SPOU&OE%FWFMPQ ೐ۿ౟ূ٘ѐߊী؀ೠ׼न੄ੋध਷যځೠоਃ

tԇؘӝইջ u  ҃۱੉݆਷ѐߊ੗оӒ۞؊ҵਃ  t঴ҷ݃׸੉૑u

tԇؘӝоޤ ޙઁ੓য u  ҃۱੉݆਷ѐߊ੗о׹೤פ׮  t঴ҷ݃׸੉ۄח݈ীަӒܻ޹хೞѱ߈਽೧ u

ԇؘӝ ױࣽೠؗѐ   ࢎۈٜ੄ੌ߈੸ੋੋध਷যځೡөਃ

঴ҷ݃׸   ࢎۈٜ੄ੌ߈੸ੋੋध਷যځೡөਃ

ԇؘӝ ঴ҷ݃׸   ੌ߈੸ੋੋध਷Ӓܻજ਷੄޷חইצѪэणפ׮

ԇؘӝী؀ೠಁ۞׮੐द೐౟о೙ਃ೤פ׮  ઁಿ٣੗ੋਸ৘۽ٜযࠅөਃ

"MHPSJTN%BUB4USVDUVSF  ঌҊ્ܻ ؘ੉ఠҳઑоѐߊীࢲ઺ਃೠ  ࢸ҅ %FTJHO ੉٠

7JTVBM$PODFQU-BZPVU4ZTUFN  ࠺઱঴ஶࣆ ۨ੉ইਓژೠ٣੗ੋীࢲ  ઺ਃೠࢸ҅ %FTJHO ੑפ׮

੗زର٣੗ੋ ࢸ҅ ਷@@

੗زରܳ਑૒੉חز۱दझమਸ ѐߊೞ૑ޅೞݶର୓ח਑૒੉૑ঋणפ׮

੗زର੄࠺઱঴ ۨ੉ইਓदझమਸ ѐߊೞ૑ޅೞݶର୓ח౹ܻ૑ঋणפ׮

ઁಿҗ݃ଲо૑۽ࢲ࠺झژೠӒ۞೤פ׮  ҃৔೟ࢳࢎ.#"җ੿ীࢲഥ੗غח޹౟੉ঠӝu৘ٜܳযࠅөਃ

DKMPPLUJTUPSZDPN

TVOHNPPODIPDPNNJOU

XIPPJOHDPN[EH

Ҋ੿ҙ֛੄ౣਸӵҊ ࢤпਸ߄Բݶ  ݽٚѪ੉࢜۽਍੄޷৬оמࢿਵ۽׮о২פ׮

ߔূ٘ѐߊ਷  ࠂ੟ೞҊҕࠗೡѪ੉݆਷য۰਍࠙ঠੑפ׮

೐ۿ౟ূ٘ѐߊژೠ  ࠂ੟ೞҊҕࠗೡѪ੉݆਷য۰਍࠙ঠੑפ׮

ࢲ࠺झ੄Ҿӓ੸ݾ಴חੜجইоҊ ੜ౹ܻחѪੑפ׮ যוೞաо਋ਘೞҊ׮ܲೞաо੷әೠӒ۠Ѫ੉ইפۄ п࠙ঠ੄੹ޙࢿਸੋ੿ೞҊழޭפா੉࣌ೡࣻ੓যঠ Ҋಿ૕੄ࢲ࠺झٜܳ݅যյࣻ੓णפ׮

౱਷׳ࢿ೧ঠೡݾ಴ ੉ܳਤೠ੽Ӕߑधਸҕਬೞৈঠ೤פ׮ ઱য૓ݾ಴׳ࢿਸਤ೧ো؀଼੐ਸ૕ࣻ੓חࠁ৮੸ੋӝࣿਸы୸ࣗӏݽ੄૘೤୓ੑפ׮ ੄Ѽীӈӝ਎੉ҊѤࢸ੸ਵ۽߈਽ೞݴ о஖ҙ੉૘ডػ౱ਕ௼оઓ੤೧ঠ೤פ׮ Ӓࢿҗחҕز੘সࢿҗীٮܲҕز੄ӝৈоನೣؾפ׮

Front-End Dev.   paradaim ೐ۿ౟ূ٘ѐߊಁ۞׮੐੄੹ജ

ѐߊನੋ౟ಁ۞׮੐द೐౟

ӝࣿীҙೠҊ଴

ࢎۈҗࢲ࠺झীҙೠҊ଴ Standard ಴ળ Usability ࢎਊࢿ Accessibility ੽Ӕࢿ Performance ࢿמ

ਢগ೒ܻா੉࣌ѐߊಁ۞׮੐द೐౟

ؘ੉ఠ߬੉झоߔূ٘۽ؘ੉ఠܳࠁմ׮ ߔূ٘ীࢲؘ੉ఠ੍ܳয)5.-ਸࢤࢿೠറ ղࠁմ׮ )5.-੉࠳ۄ਋੷۽੹׳غҊ
࠳ۄ਋੷חӒѪਸ%0.ਵ۽୊ܻ಴दೠ׮ ੹ా੸ੋਢগ೒ܻா੉࣌ҳࢿب

ؘ੉ఠ߬੉झоߔূ٘۽ؘ੉ఠܳࠁմ׮ ߔূ٘ীࢲؘ੉ఠ੍ܳয)5.-ਸࢤࢿೠറ ղࠁմ׮ ؘ੉ఠо೐ۿ౟ূ٘ী੹׳غҊ
೐ۿ౟ূ٘חӒѪਸ)5.-۽݅ٚറ %0.ਵ۽୊ܻ಴दೠ׮ ݽ؍ਢগ೒ܻா੉࣌ҳࢿب

઱য૓ஶబஎী؀೧)5.-੹୓ܳ੹׳ೞחѪࠁ׮ ؘ੉ఠ݅ਸ੹׳ೞחѪ੉؊ࡅܰ׮ ௿ۄ੉঱౟ח࠳ۄ਋੷ܳ࢜۽Ҋஜೞ૑ঋҊب ஶబஎܳࡅܰѱ߸҃ೡࣻ੓׮ 4JOHMF1BHF"QQ ݽ؍ਢগ೒ܻா੉࣌ҳࢿبn੢੼ 41" "+"9

ؘ੉ఠܳ)5.-۽߸҃uೞח௏٘੄ؕ஖оԨழ૕ࣻ੓ӝٸޙীୡӝ۽٬੉؊ӡয૓׮ ੉ઁ׼न਷௿ۄ੉঱౟ীࢲبؘ੉ఠܳ੷੢ೞҊҙܻೞחҕр੉೙ਃೞ׮ ݽ؍ਢগ೒ܻா੉࣌ҳࢿبnױ੼ 41" "+"9 ؘ੉ఠܳநयೞѢաѨࢎೡ҃਋о೙ਃೞӝٸޙ੉׮ 4UPSBHF

ݽ؍ਢগ೒ܻா੉࣌ҳࢿبnѾۿ 41" "+"9 4UPSBHF ࢲߡࢎ੉٘झఖ݅ఀ੉ա   ࠂ੟ೠ௿ۄ੉঱౟ࢎ੉٘झఖ

ਢ೐ۨ੐ਕ௼೙ਃࢿীҙೠಁ۞׮੐द೐౟

Framework Library Native

೐ۨ੐ਕ௼ח೐۽Ӓېݠٜ੉গ೒ܻா੉࣌ীࣁࠗ੸ੋࢎ೦ਸઁ৻ೠҕాٜࠗ࠙੄  ѐߊী٘חदрਸ઴੉Ҋࣁࠗਃҳࢎ೦ҳഅী૘઺ೡࣻ੓ب۾ೞחѪਸݾ಴۽ೠ׮ ৘ٜܳয ਷೯ਢࢎ੉౟ҳ୷दਢগ೒ܻா੉࣌೐ۨ੐ਕ௼ܳࢎਊೠ׮ݶ ѐߊ౱਷  ਷೯সޖ৬ҙ۲ػౠ੿ӝמѐߊী݅઱۱ೡࣻ੓חѪ੉׮ PROS

೐ۨ੐ਕ௼ղ੄"1*оࠂ੟ೞѱ঵ഃ੓যࢲ೐ۨ੐ਕ௼ࢎਊद௏٘о࠺؀ചغҊ   ೐ۨ੐ਕ௼੄ୡӝ೟णदр੉݆੉ࣗਃػ׮ח࠺౸ب੓׮ ژೠ೐ۨ੐ਕ௼חࢲ۽׮ܲ೒ۖಬઁಿ੉աౠ੿ҕәস୓৬ߡ੹ী  ੄ઓ੸੉ؼਤ೷੉੓׮ٮۄࢲୡӝীࣗ೐౟ਝযѐߊী೙ਃೠ੸੺ೠ  ೐ۨ੐ਕ௼ܳࢶఖೞҊ୭؀ೠ߸҃߂੹ജೡਤ೷ਸ઴੉חѪ੉೙ਃೞ׮ CONS

41"ۄ਋౴ 3&45࠺زӝాन  %0.੉߮౟೩ٜ݂ ࢚కҙܻ ݽ؍ਢগ೒ܻா੉࣌ҳࢿبn7VF೐ۨ੐ਕ௼

%0.ಁ۞׮੐द೐౟

Actual DOM 실제 — 문서객체모델 모델(데이터 구조) — 렌더링 프로세스
→ 문서객체모델 ݽ؛ .PEFM ޙࢲё୓ݽ؛ %0.

사용자의 UI 인터랙션을 통해 데이터가 변경될 경우, UI는 이를 반영하여
  화면을 업데이트 해야 합니다. 변경사항에 따라 문서 트리 전체를 다시   그리는 것은 비용이 많이 들기에 변경 부분만 반영할 필요가 있습니다. ݽ؛ .PEFM ޙࢲё୓ݽ؛ %0. Actual DOM 실제 — 문서객체모델 모델(데이터 구조) 변경 — 렌더링 프로세스 → 문서객체모델 ࢚క߸҃ ࠭সؘ੉౟

Server Side Rendering 서버에서 다시 그려주는 — 문서객체모델 ݽ؛ .PEFM
ޙࢲё୓ݽ؛ %0. ޙࢲё୓ݽ؛ %0. 과거 웹 애플리케이션은 클라이언트에서 데이터 변경을 요청하면 서버에서 이를 처리하여 새로운 DOM을 생성한 후, 응답해주는 프로세스가 사용 되었습니다.    하지만 이 방법은 매우 느렸고, 오늘 날 이 부분을 프론트엔드에서 관리/처리 해야 할 필요가 생겼습니다. ࢚క߸҃ ࠭সؘ੉౟

1st, Framework 초창기 — 프론트엔드 프레임워크 ݽ؛ .PEFM ޙࢲё୓ݽ؛ %0.
이러한 프레임 워크는 모델에서 UI 코드를 분리하기위한 아키텍처를 제공 했지만, 두 모델 간의 동기화는 여전히 남아있었습니다. 변경이 발생할 때 어떤 종류의 이벤트를 얻을 수 있지만 다시 렌더링 할 대상과 이동 방법을   파악하는 것은 개발자의 몫이었습니다. 모델(데이터 구조) 변경 — 렌더링 프로세스 → 문서객체모델 ੉߮౟ FWFOU زӝച 4ZOD Backbone, Ext JS, Dojo 와 같은 초창기 프레임워크는   모델 데이터 상태 관리를 웹 브라우저에서 하는 방법을 도입했습니다 상태 변경이 발생하면 이를 바로 UI에 반영하여 업데이트 합니다 ࢚క߸҃

Ember, Framework 엠버 — 프론트엔드 프레임워크 ݽ؛ .PEFM ޙࢲё୓ݽ؛ %0.
Backbone과 마찬가지로 Ember는 변경이 발생할 때 데이터 모델에서   이벤트를 보냅니다. 차이점은 Ember 프레임워크가 이벤트 수신을 위한   기능을 제공하는 것입니다. 즉, UI에 첨부 된 업데이트 이벤트에 대한   리스너가 있음을 의미합니다. 모델(데이터 구조) 변경 — 렌더링 프로세스 → 문서객체모델 সؘ੉౟߄ੋ٬  #JOEJOH6QEBUF ࢚క߸҃

Angular, Framework 앵귤러 — 프론트엔드 프레임워크 ޙࢲё୓ݽ؛ %0. Angular 템플릿에서
데이터를 참조 할 때, 예를 들어 {{foo.x}} 와 같은   표현식에서 데이터를 렌더링 할뿐만 아니라 특정 값에 대한 관찰자도   만듭니다. 그 후 앱에서 어떤 일이 발생하면 Angular는 해당 감시자의 값이 마지막으로 변경 되었는지 여부를 확인합니다. 있는 경우 UI의 값을 다시 렌 더링합니다. 이러한 감시자를 실행하는 프로세스가 더티 체크입니다. 모델(데이터 구조) 변경 — 렌더링 프로세스 → 문서객체모델 ҙ଴੗ 8BUDIFST 1 ݽ؛ .PEFM

React, Framework 리엑트 — 프론트엔드 프레임워크 React가하는 일은 효과적으로 우리가
상태 변화에 신경 쓰지 않았던 좋은 오래된 서버 측 렌더링 일로   되돌아갑니다. 변경 사항이있을 때마다 전체 UI를 처음부터 렌더링 합니다. 이렇게하면 UI 코드가 크게 단순해질 수 있습니다.     React 구성 요소의 상태를 유지하는 것에 신경 쓰지 않습니다. 서버 측 렌더링과 마찬가지로 한 번   렌더링 하면 완료됩니다. 변경된 구성 요소가 필요할 때 다시 렌더링 됩니다. 구성 요소의 초기 렌더링과 변경된 데이터에 대한 업데이트는 차이가 없습니다. 모델(데이터 구조) 변경 — 가상 DOM — 렌더링 프로세스 → 문서객체모델

ݽ؛ .PEFM о࢚ޙࢲё୓ݽ؛ 7JSUVBM%0. ޙࢲё୓ݽ؛ %0. ۪؊ 3FOEFS React, Framework
리엑트 — 프론트엔드 프레임워크 모델(데이터 구조) 변경 — 가상 DOM — 렌더링 프로세스 → 문서객체모델 ୡӝے؊݂

React, Framework 리엑트 — 프론트엔드 프레임워크 ݽ؛ .PEFM ޙࢲё୓ݽ؛ %0.
߸҃ഛੋ %JGG ಁ஖ 1BUDI ੉੹ীࢤࢿػ 0ME   7JSUVBM%0. ߸҃ػࠗ࠙݅  पઁ%0.ী߈৔ೞৈಁ஖ ࢜܂ѱࢤࢿػ /FX   7JSUVBM%0. 모델(데이터 구조) 변경 — 가상 DOM — 렌더링 프로세스 → 문서객체모델 ߸҃ߊࢤद   ׮दے؊݂

ஹನք౟ಁ۞׮੐द೐౟ 7VF+4

ஶࣆ $PODFQU

M. V.VM ݽ؛ ࠭ ࠭ ݽ؛ ੗߄झ௼݀౟ ё୓  (Plain JavaScript
Objects) 아키텍쳐

7JFX 6* UFNQMBUF %JSFDUJWFT .PEFM  EBUB

7JFX 6* UFNQMBUF %JSFDUJWFT .PEFM  EBUB 7JFX createElement h diff
patch 7JSUVBM%0. 7VFח؀׮ࣻ੄҃਋ మ೒݁ਸࢎਊೞৈ  )5.-ਸ੘ࢿೡѪਸӂ੢೤פ׮ 7VFమ೒݁ஹ౵ੌҳઑ

.PEFM  EBUB UFNQMBUF 7JFX %JSFDUJWFT 6* createElement h diff patch
7JSUVBM%0. 7JSUVBM%0.  IKT DSFBUF&MFNFOUKTݽٕҗਬࢎ 7VFо࢚%0.۪؊݂ೣࣻ

createElement h diff patch 7JSUVBM%0. h )5.-ਃࣗ]ஹನք౟ 7/PEF]75FYU ࣘࢿ ؘ੉ఠ
ё୓ 7VFо࢚%0.۪؊݂ೣࣻ

createElement h diff patch 7JSUVBM%0. h 7VFо࢚%0.۪؊݂ೣࣻ IUUQTLSWVFKTPSHWHVJEFSFOEFSGVODUJPOIUNM+49

IUUQTLSWVFKTPSHWHVJEFSFBDUJWJUZIUNM Reactivity System ஹನք౟   ۪؊ ೣࣻ о࢚ DOM ౟ܻ
ਕ୛ ঌܿ (Notify) ੄ઓࢿ ࣻ૘  (Collect as Dependency) ׮द ۪؊݂ (Re Rendering) ۪؊݂  (Rendering) ؘ੉ఠ 반응형 시스템

Reactivity System 반응형 시스템 EBUB  \j^ %0. ݽ؛ ࠭ ੗ز
সؘ੉౟ ߸҃ Reactivity ࢚కо ߸҃غݶ

࠺Ү $PNQBSJOH

// Data let data = { 'message': 'Hello Vue!' };
// Markup (Will Change DOM) <div class="demo"> <input type="text"> <p>ࢎਊ੗о ੑ۱ೠ ؘ੉ఠ ч਷ <span class="user-input"></span> ੑפ׮.</p> </div> // Data binding

// DOM API + Vanilla JavaScript[#] var input = document.querySelector('.demo
input'); var user_input = document.querySelector('.demo .user-input’); user_input.textContent = data.message;   input.setAttribute('value', data.message); input.addEventListener('keyup', function(e) { var user_input_data = e.target.value; data.message = user_input_data; user_input.textContent = data.message; });

// jQuery Library var $input = $('.demo input'); var $user_input
= $('.demo .user-input');   $user_input.text(data.message);   $input .val(data.message) .on('keyup', function(e) { var user_input = e.target.value; data.message = user_input; $user_input.text(data.message); });

// Vue JS Framework new Vue({ 'el': '.demo', 'data': data
}); // Markup (Will Change DOM) <div class="demo"> <input type="text" v-model="message" > <p>ࢎਊ੗о ੑ۱ೠ ؘ੉ఠ ч਷ {{ message }} ੑפ׮.</p> </div> // Data let data = { 'message': 'Hello Vue!' };

.PEFM 7JFX  .PEFM 7JFX MVVM   Architecture ۪؊݂ ੑ۱ ॳӝ
੍ӝ

IUUQTLSWVFKTPSHWHVJEFJOTUBODFIUNMࢤࢿ੗ new Vue( ) 뷰 생성자 Vue { } 뷰
인스턴스 ࠗ౟झ౟ېೝ

झாಫ٬ 4DBGGPMEJOH

IUUQTHJUIVCDPNWVFKTLSWVFDMJ ੹৉ࢸ஖

IUUQTHJUIVCDPNZBNPPWVFGVMM

*.vue IUUQTLSWVFKTPSHWHVJEFTJOHMFGJMFDPNQPOFOUTIUNM

੤ࢎਊ ஭ङച ٣ߡӦ పझ౴ ഈস

మ೒݁ ஹನք౟ݽٕ  7VFੋझఢझ झఋੌद౟

৻ࠗ۽ܻ࠙оמ

গ೒ܻா੉࣌ݫੋ࠭౵ੌ গ೒ܻா੉࣌  ஹನք౟࠭౵ੌ

ந۞ࣄஹನք౟ ݽ׳ਦب਋ஹನք౟ చݫ׏ஹನք౟

৔࢚ъ੄

HPPHM4R;-

ಁ۞׮੐द೐౟

ૣ਷दр ߸ചܳ੉Ցযյࣻ੓חदр੉غ঻׮ݶ೯ࠂೡѢэणפ׮  ૑ӘೞҊ੓חѪٜী؀೧׮दࢤп೧ࠁࣁਃ  ࢜۽਍੄޷৬оמࢿਵ۽׮оৢ૑ب

хࢎ೤פ׮

패러다임 전환 - FrontEnd Dev.

패러다임 전환 - FrontEnd Dev.

More Decks by yamoo9

Featured

Transcript