우아한 자바스크립트 개발

਋ইೠ੗߄झ௼݀౟ѐߊ ௏٘झ௪٘ ਮ૑ࣻ

௏٘झ௪٘݃झఠૉ௏झ੄ੌ࢚ 13$PEF3FWJFX

const msnia = Array.from && Array.from({length: 40}, (v,i)=>++i) || Array.apply(null,{length:40}).map(Function.call,
Number).map((v)=> ++v); ੒எ࠭਋౭೒j

֙੹ IUUQTXXXTMJEFTIBSFOFUKJTVZPVODMFBOGSPOUFOEEFWFMPQNFOU

਋ইೣ੉ۆޖ঺ੋо ׼੢جইр׮

௿ܽ ܻ؊࠶_ ޥ૑ঌѢ э਷ ੗Բ х࢚ೞҊ र਷ ױࣽೞӝ Ӓ૑হח ৘࢚غח
ಬ੟૑ ঋח ಴ળࢎی ߓ۰ೞח

ಿ૕ઓ઺ղ ౱ ੄૑ੌ੿ৈਬ ѐߊ਋ইೠ

ӒۢীبࠛҳೞҊ ਋ইೠ੗߄झ௼݀౟ѐߊ

௿ܽ௏٘оޤীਃ Ӓրա઺ীೞݶऔѱೡѢэ਷ӒѪ

ই ੉ ӵ Ֆ ೧ ӵՖೠѪ੉જ૑݅ ӒѪ਷ই઱ੌࠗ࠙ ޤ੉۠Ѣ

߸҃ਸਤೠ௏٬ 6*חખ؊बೠ٠

ஹೊఠо੉೧ೞח௏٘ ׼੢ߡӒহח௏٘ ѱ׮оࢎۈ੉औѱ੉೧ೞח௏٘$ খਵ۽بߡӒহח௏٘

Ѿۿ ਽

оةࢿGJSTU

Ӓۢ ࢿמ਷न҃উॳջ ࠂ੟ೠޙઁоইפۄݶ ରରೞחѦ۽ ೙ਃೡٸೞחѦ۽j оةࢿGJSTU

௿ܽ௏٘੹ۚ ঱ઁө૑ਬ૑ೞחࢲ࠺झীਃ যڃӝמ੉୶оؼ৘੿੉ભ ࢎਊ੗חযڃࢎۈٜ੉ભ যڃജ҃ীࢲز੘ೞભ ־о઱۽ਬ૑ࠁࣻೠؘਃ
դউೠ׮

Ӓ੹ী ௿ܽࢸ҅ ׯ௏ইפ৓ջ

ࢎਊೞחଃ௏٘ܳݢ੷ҳഅೞӝ const modal = new Modal({..}); const slider = new
Slider({..}); const service = new ServiceMain(); service.addPlugin(modal, slider); service.on({//do something}); য࢝ೞ૑ঋਸٸө૑ೠ׮ ੿݈ ௾ੌೠѢ׮

ࢸ҅ѐߊ਷ೠ؀ Ӓ۠࠺ਯ਷হ׮ ࢎҊ੄൒ܴীݏ୾٣੗ੋೞӝ рױೞҊ ݺഛೠҳઑоաৢٸө૑҅ࣘࢸ҅

ೣࣻࣻળ੄ࢸ҅ ੉ܴ݅ੜ૑ਵݶ઺р਷рࢸ҅ ࢸ҅оউજਵݶજ਷੉ܴ੉աৢࣻহ਺ ౵ۄ޷ఠ৬߈ജী૘઺ ҳഅറীחࢸ҅ഥҊ جইࠁפ੉ܴҗ߈ജ੉׳ۄj

GPP ઃ੢ ־о੉ܴખ૑য઻

WTDPEFীࢎ੹೒۞Ӓੋ੉೙ਃೞ׮

ҳ୓੸ੋ੄޷ NFBOJOH ܳࠗৈೞ੗ time => currentTime data => addressData

ҳ୓੸ੋ੄޷ NFBOJOH ܳࠗৈೞ੗ const splitted = input.split('$')[0]; const studentName =
input.split('$')[0];

ೣࣻ sޖ঺ਸೞ׮s calculate => calculateNextValue

HFU999 HFU਷ޤӡযঠ઴ ৘࢚ೡࣻ੓חߧਤীࢲز੘ೞب۾

৘ডযইצ৘ডযب৘ডয׮ async function async() { const int = 3; var
array = await resolveAfter2Seconds(); console.log(array); }

circle = 3.14 * r * r; d = _erx
* 999; ੄޷হחं੗חઁߊj

//ೣࣻࢶ঱ function execSomething({ width, height }) { console.log(width, height); }
//ࠗܰӝ execSomething({ width: 20, height: 400, maxNumber: 300, minNumber: 100 }); PCKFDUMJUFSBMܳ੉ਊೠݒѐ߸ࣻ੹׳

ಞউೠ௏٘ ೠ׀਷хҊ੍ח׮

ӛ੿਋ࢶ௏٘դӛ੿੸ੋੋр if(! (typeof data === “string”)) else … )

ઑѤޙ਷ೣࣻܳજই೧ਃ if( n % 1 === 0 ) {  console.log(“੿ࣻ׮
੔”)  } if( isInt(n) ) {  console.log(“੿ࣻ׮ ੔”)  } +

ࠛ೙ਃೠݒೝহগӝ var todo = { "todo" : “todo", "done" :
“done”,  , :- }

਋ܻ݅੄࠺޻ methodA(obj.methodA()[3], obj.methodB()[2]);

ա־ݶӝࢄ੉ߓоظਃ const data = []; [1,2,3,4,5].forEach((v,i) => { if(v%2) {
data.push(v); console.log(`${v} is added`); } }); [1,2,3,4,5].filter(v => v%2).forEach(v=>console.log(`${v} is added`)); ߹۽ જই

੸੺ೠ ܻ࠙૑ա஘ܻ࠙ݽইفӝ ঴݃աܻ࠙೧ঠೡө

э਷ੑ۱ূ טэ਷୹۱ਵ۽߈ജ 3FGFSFOUJBMUSBOTQBSFODZ average([10,20,30,40]); //25 పझ౟оएਕ૓Ѥؒ

࢚కܳऔѱ৘࢚ೞӝ оә੸JNNVUBCMF let arr = [5,1,23,52,2]; const sortedArr = [...arr].sort((a,b)
=> a-b); console.log(arr, sortedArr);

ࢎҊ੄൒ܴਵ۽ز੘ೞחѤ׮જ׮ DIBJOJOH DPNQPTJUJPO const ArrayParser = str => { return
pipe(splited, _map(trimed), _map(removeBracket), resultToObj)(str) }

୭Ӕ಴ળਵ۽؊উ੹ೞҊಞউೠ௏٘ܳ DPOTUҗMFUਵ۽ਤ೷઴੉ӝ EFGBVMUQBSBNFUFS۽r]]s؀୓ೞӝ BSSPXGVODUJPOਵ۽рױ൤Ҋରೣࣻ಴അೞӝ &4

addEventListener('fetch', event => { event.respondWith(async function() { const cache =
await caches.open(‘v1'); const cachedResponse = await cache.match(event.request); if (cachedResponse) { return cachedResponse;} const fetchedResponse = await fetch(event.request); const fetchObj = await cache.put(event.request, fetchedResponse.clone()); return fetchedResponse; }()); }); self.addEventListener('fetch', function(event) { event.respondWith( caches.open('v1').then(function(cache) { return cache.match(event.request).then(function (response) { return response || fetch(event.request).then(function(response) { cache.put(event.request, response.clone()); return response; }); }); }) ); }); ҡଳই ؊જই 0 оә੸؊աইࠁ੉חޙߨࢎਊ

௏٘ࣻ੿੉য۵׮ݶ tӒې਋ܻীѲ઱ࢳ੉੓য” ঌӝয۰਍۽૒ਸ಴അ ೐۽Ӓ۔൒ܴ಴അ Ҋ޹Ѣܻ৬ೠ҅١х੿ਸ׸ӝ ׮ܲѐߊ੗ীѱ੹׳೧઱חݒ׏঴੉੗઱੄ࢎ೦

ࠂ੟ೞפफఠۄ ੌࠗ۞੉ۧѱ૞Ҋщա

function run(arg) {  if(arg !== 10) return;  //do something…  }
ইצѤ ࡈܻ߈ജೞӝ ߈ࠂޙীࢲחࡈܻDPOUJOVF FMTFޙب೙ਃহ׮

for (let i = range - 1; i < d.length;
i++) { let sum = 0; for (let j = (i - range + 1); j <= (i); j++) { sum += d[j]; } result.push(sum); } for(var i=0; i<range; i++) { sum += d[i]; } for(var j=i-1; j<d.length; j++) { if(j === (range-1)) { console.log(j + "ө૑੄ "+ range + "ѐ੄ ೤਷ : ", sum); continue; } let start = j-(range); sum += d[j] - d[start]; console.log(j + 1 + "ө૑੄" + range + "ѐ੄ ೤਷ : ", sum); } …. ઺୏ Ӓրշف૑݈ӝ ߹۽ જই ଵҊߓৌ<j/>ө૑઺ ୭Ӕ.Ѥ੄ಣӐਸҳೞח೐۽Ӓ۔઺

ࠂ੟ೞݶ ա־ࣁਃ return Array.from && Array.from({length: 40}, (v,i)=>++i) || Array.apply(null,{length:
40}).map(Function.call, Number).map((v)=> ++v); ٣ߡӦ੉एਕ૑חѤؒ

ࠂ੟ೠ֗ࢳਸऀѹߡܻӝ const checking =/^(([^<>()\[\]\\.,;:\s@“]+(\.[^<>()\ [\]\\.,;:\s@“]+)*)|(“.+”))@((\[[0-9]{1,3}\.[0-9]{1,3}\. [0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z] {2,}))$/.test(str); ੤ࢎਊ਷غחѤؒ const validEmail
= isValidEmail(eMail); ݌ࣗࢎ

attr = (el, ...attr) =>(attr.some((k, i)=>{ eif(i % 2) return;
econst v = attr[i + 1]; eif(typeof el[k] == 'function') el[k](...(Array.isArray(v)? v :[v])); eelse if(k[0] == '@') el.style[k.substr(1)] = v; eelse el[k] = v; }), el); //ࢎਊ attr(sel(`#btn1`), e'@background', 'red', //झఋੌ e'innerHTML', 'write', //ࣘࢿ e'addEventListener', ['click', _=>post()] //੉߮౟੿੄ ); য٣ࢲࠌ؊ۄ ࠂ੟ೠ֗ࢳਸऀѹߡܻӝ

ё୓ҙ҅ܳాೠઑѤޙহগӝ const moveCharacter = ({character, cmd, step}) => { //actionsਸ
ҙ҅۽ ࢸ੿೧فӝ. const Actions = { run(character,step) { return `${character} run ${step} meter`; }, jump(character, step) { return `${character} jump ${step} meter`; }, swim(character,step) { return ` ${character} swim ${step} meter`; } }; return Actions[cmd] && Actions[cmd](character, step); } moveCharacter({character:"crong", cmd:"jump", step:300}); moveCharacter({character:"codesquad", cmd:"run", step:10}); moveCharacter({character:"crong", cmd:"swim", step:1000});

ੌҙؽ ցоযڌѱૢ૑դ׮৘࢚੉ػ׮פө

୭ࣗೠ੄௏٬ஶ߮࣌ਬ૑ೞӝ য٣ী؀ޙ੗ܳॶ૑ @৬ח঱ઁॶ૑ &4 &4
jӝఋ١١ OBNJOHSVMF݅ੜٜযبޤ

߈ࠂ୊ܻܳ݃ҳ߈ࠂೞ૑݈੗ tGPSGPS&BDISFEVDFNBQGJMUFSGPSPGXIJMFju ޖ঺ਸ঱ઁॶѪੋо DIBJOJOHਵ۽಴അೡѪੋо Ҋରೣࣻࢶ঱਷য٣ীࢲೡѪੋо

फযب౱ਸਤ೧ ݏ୶ۄ

001 ୶࢚ച ஭ङച ࢚ࣘ ׮ഋࢿjޖࢲߡ

40-*% ੜݽܰѷਵݶ ߸҃ীੜ؀਽ೞח௏ٜ٘ܳ݅যࠁ੗

௿ېझҳઑܳױࣽೞѱਬ૑ ࠂ੟ೠ࢚ࣘj੗ஞݎೠ׮ JNBHFIUUQNPOLFZTJNBHJOBSZSFBMJUJFTDPNJNBHFTGG+BWBHJG

ٸۿ ࢚ࣘ؀न NJYJO੉ա೤ࢿ DPNQPTJUJPO //Super class const Character =
class { constructor(name) { this.name = name; } } //methods function walk() { console.log(this.name, "is walking")} function run() { console.log(this.name, "is running")} function jump() { console.log(this.name, "is jumping")} function swim() { console.log(this.name, "is swimming:")} function fly() { console.log(this.name, "is flying")} let man = new Character("caly"); walker = Object.assign(man, {walk, run}); let spyderMan = new Character("robert"); walker = Object.assign(spyderMan, {walk, run, jump}); let ironMan = new Character("caly"); walker = Object.assign(walker, {walking}, {running}, {jumping}, {fly}); spyderMan.run();

ࢲ࠳ӝמ੉߄Ոٜ ݫੋӝמ਷Ӓ؀۽׮ ੄ઓࢿਸ઱ੑೞҊ ࠺तೠز੘਷ੌҙػ"1*۽ز੘ %* 0$1 MPDBMTUPSBHF JOEFYFE%# const A
= class { … getDage(data) { //ࢲ࠳ӝמ ݽف getDataܳ ࢎਊ  return this.repo.getData();  }  } const a = new A(new idxDBStrorage());

೙ࣻоইפݶ ২࣌ਵ۽ઁҕ var options = { tooltip: { grouped: true,
template: function(category, items, categoryTimestamp) { var head = '<div>' + category + '</div>', body = tui.util.map(items, function(item) { return '<div>' + item.value + ':' + item.legend + '</div>' }),join(''); return head + body; } } }; tui.chart.lineChart(container, data, options); DPEFIUUQTHJUIVCDPNOIOFOUUVJDIBSUCMPCQSPEVDUJPOEPDTXJLJGFBUVSFTUPPMUJQNEFYBNQMF

௿ېझী উ੹੢஖݃۲ೞӝ const privateMethods = { privateMethod () { console.log(this.say);
} } export default class Service { constructor () { this.say = "Hello"; } publicMethod () { privateMethods.privateMethod.call(this); } } DPEFIUUQTNFEJVNDPN!EBWJESIZTXIJUFQSJWBUFNFNCFSTJOFTECDDEB 4ZNCPMTਸ੉ਊೡࣻب੓׮ೣ

ী۞୊ܻ ѐߊ੗ٜীѱо੉٘ܳ೧ࠁ੗

ী۞୊ܻڙڙೠݒ׏঴

੤ࢎਊۄ੉࠳۞ۄݶ DVTUPNFSSPSبݧ૗ class MyError extends Error { constructor(message) { super(message);
this.message = message; this.name = '[FOO Service Error]'; } } class FooTypeError extends MyError { constructor(message) { super(message); this.message = message; this.name = '[FOO Service Type Error]'; if (Error.captureStackTrace) { Error.captureStackTrace(this, FooTypeError)} } } function setName(name) { if(typeof name !== "string") throw new FooTypeError("setName() : string ఋੑ݅ ೲਊ೤פ׮"); //do something } function run() { try { setName(12345); }catch (e) { if(e instanceof MyError) { console.log(` ${e.stack}`); } else { console.log(e); } } } run(); VM922:28 [FOO Service Type Error]: setName() : string ఋੑ݅ ೲਊ೤פ׮

੤Ѥ୷ ܻಂష݂਷ই౵౟੤Ѥ୷җ׮ܰ׮

ࠂ੟ೠ௏٘оաয়ӝ੹ী ૣ਷઱ӝ੄ܻಂష݂ ࢸ҅ ѐߊ ܻಂష݂ ࢸ҅ ѐߊ ܻಂష݂ ࢸ҅ ѐߊ
ܻಂష݂ ࢸ҅ ѐߊ ಂష݂

ܻಂష݂੄द੘਷઺ࠂਸহগחѪࠗఠ JNBHFIUUQXXXTFFEPGUPNPSSPXDPNXQDPOUFOUVQMPBETDMPOFKQH ❌ ❌ ❌

௼ӝ݅઴ৈաоب੺߈੄ࢿҕ✌ ௿ېझ ೣࣻ

੄৻۽ੜޅೞח ੋ੗ݒѐ߸ࣻੜॳӝ ё୓ ֎੐झಕ੉झ ௿ېझࢎਊ ੹৉߸ࣻઁѢ

ղࠗܳࠁഐೞۄ const _ = (function CodeSquadUtil() { let innerValue =
""; const print = function(msg) {console.log(msg)} const min = function() { return 'min'}; const sumBy = function() {}; const round = function() {}; return {min, sumBy, round} })(); console.log(_.min());

ݯߡ߸ࣻח੹৉߸ࣻ৬ޤо׮ܲо class Todo { constructor(id, task){ this.id = id; this.task
= task; this.state = ‘todo; this.time = {}; this.Seconds = 1000; this.resultList = 1000; this.lastTime = 1000; this.buffer = 1000; } update(state){ this.state = state; } …

ۄ੉࠳۞ܻо੉٘

WBOJMMB"1* হחѪ૒੽ٜ݅যࠁӝ ۄ੉࠳۞ܻॳӝ

class smartCollection extend Array { exec() { …} } Ѥ٧ࣻ੓׮Ҋ
Ѥ٘۰ঠೞחѤইפ׮ OBUJWF"1*ա ۄ੉࠳۞ܻחખ؊উ੹ೞѱഛ੢ೞӝ

೐ۨ੐ਕ௼о਋ܻ௏٘ܳ௿ܽೞѱ೧઱૓ঋ؊ۄ MJGFDZDMF੄߸ചܳળ3FBDU MJGFDZMFਸٜ݅঻ਵա ੄بೠѪ୊ۢੜॳ૓ޅೞ؊ۄj

જ਷بҳبॳӝաܴ੉׮ 'SBNFXPSLח୭ࣗೠ੄ࣻળਸਬ૑೧ળ׮ ࠺زӝ୊ܻחযוद੼ীೡѪੋо যڌѱUFNQMBUJOH੘সਸೡѪੋо ੉ܴਸযڌѱ૑ਸѪੋо ஹನք౟੄௼ӝחযו੿ب۽ೡѪੋо
ؘ੉ఠ୊ܻחযڃݫࢲ٘ܳॳݶࢲ୊ܻೡѪੋо ஹನք౟р੄ؘ੉ఠ੹׳਷যڌѱೡѪੋо ೐ۨ੐ਕ௼о਋ܻ௏٘ܳ௿ܽೞѱ೧઱૓ঋ؊ۄ

݃૑݄ਵ۽

௿ܽ௏٘חթਸߓ۰ೞח௏٘׮ Ӓؘ۠ ѾҴ աܳߓ۰ೞח௏٘੉ӝبೞ׮

t௿ܽ௏٘חѐߊޙച੄Ѿҗޛ Ր੐হ੉ࢸٙೞۄ աܳਤ೧ u ܻ࠭ޙച ಕয೐۽Ӓې߁ ೣԋࢿ੢ೞӝ ಿ૕਋ࢶ

݆੉ଵҊ೮Ҋ ഴܯೠ੗ܐٜ IUUQTHJUIVCDPNSZBONDEFSNPUUDMFBODPEFKBWBTDSJQU IUUQTHJUIVCDPNBJSCOCKBWBTDSJQU

хࢎ೤פ׮ ௏٘झ௪٘ ਮ૑ࣻ DSPOH!DPEFTRVBELS

우아한 자바스크립트 개발

우아한 자바스크립트 개발

Transcript

Other Decks in Technology

Featured