ȸ¿ø°¡ÀԡžÆÀ̵ð/ºñ¹øã±â
ȨÀ¸·Î

À¥»çÀÌÆ® ¼Óµµ °³¼±À» À§ÇÑ ÆÁµé
9³â Àü
°ú°Å¿¡´Â ÇÁ·ÎÁ§Æ® ¸®¼Ò½º(À̹ÌÁö, css µî) À» ÃÖ¼ÒÈ­Çϱâ À§ÇØ ¾öû³­ ½Ã°£À» µé¿´½À´Ï´Ù. ÀÌÁ¦´Â ÀÎÅͳÝÀÌ »¡¶óÁ®¼­ ÈξÀ Å« Ç÷¡½¬ ÆÄÀÏÀ̳ª µ¿¿µ»ó, À̹ÌÁöµéÀ» »ç¿ëÇÒ ¼ö ÀÖ°Ô µÇ¾ú½À´Ï´Ù. ÇÏÁö¸¸ ¸ð¹ÙÀÏÀÌ Áß¿äÇØÁö¸é¼­, ´Ù½Ã °ú°Å·Î µ¹¾Æ°£ ¸ð¾ç»õ ÀÔ´Ï´Ù. ÃÖÀûÈ­¸¦ ÀßÇؼ­ ¹ÝÀÀ¼Óµµ¸¦ ³ôÀÌ´Â ÀÏÀÌ Áß¿äÇØ Á³½À´Ï´Ù.

Images

Àû´çÇÑ »çÀÌÁ »ç¿ëÇϱâ

Á¾Á¾ ÇÑ ÆÄÀÏÀ» À¥»çÀÌÆ® ¿©·¯±ºµ¥¼­ »ç¿ëÇÕ´Ï´Ù. ¿¹¸¦ µé¾î ¼îÇθô¿¡¼­ ¸ðµç Á¦Ç°µéÀº À̹ÌÁö°¡ ÀÖ½À´Ï´Ù. °¢ Á¦Ç°ÀÇ À̹ÌÁö¸¦ º¸¿©ÁÖ´Â ÆäÀÌÁö°¡, Á¦Ç° ¸®½ºÆ® ÆäÀÌÁö, Á¦Ç°ÀÇ »ó¼¼ ¼³¸í ÆäÀÌÁö, ¶Ç´Â Á¦Ç°ÀÇ È®´ë À̹ÌÁö¸¦ º¸´Â ÆäÀÌÁö, 3°³ÀÇ ÆäÀÌÁö°¡ ÀÖ´Ù°í Çغ¾½Ã´Ù.

¸¸¾à ÀÌ ¼¼ ÆäÀÌÁö¿¡¼­ °°Àº À̹ÌÁö ÆÄÀÏÀ» »ç¿ëÇÑ´Ù¸é, ºê¶ó¿ìÀú´Â Á¦Ç° ¸®½ºÆ® ÆäÀÌÁö¿¡¼­µµ ¾ÆÁÖ Å« ÆÄÀÏÀ» ´Ù¿î ¹Þ¾Æ¾ß ÇÒ °Ì´Ï´Ù. ¸¸¾à ¿øº» À̹ÌÁö°¡ 1MB Á¤µµÀÌ°í ÆäÀÌÁö´ç 10°³ÀÇ Á¦Ç°À» º¸¿©Áشٸé, À¯Àú´Â 10MB ÀÇ À̹ÌÁö¸¦ ´Ù¿î¹Þ¾Æ¾ß ÇÕ´Ï´Ù. ÁÁÁö ¾ÊÁÒ. °¡´ÉÇϸé ÇÊ¿ä¿¡ µû¶ó ¿©·¯ À̹ÌÁö¸¦ ¸¸µå´Â°Ô ÁÁ½À´Ï´Ù. ±×¸®°í À¯Àú°¡ »ç¿ëÁßÀÎ ±â±âÀÇ Çػ󵵸¦ ¾Æ´Â °Íµµ µµ¿òÀÌ µË´Ï´Ù. iPhone ¿¡¼­ »çÀÌÆ®¸¦ ¿­¾úÀ» ¶§, ¾öû³ª°Ô Å« Çì´õ À̹ÌÁö¸¦ º¸¿©ÁÙ ÇÊ¿ä°¡ ¾ø½À´Ï´Ù. CSS media queries ¸¦ »ç¿ëÇؼ­ ÀÛÀº À̹ÌÁö ÆÄÀÏÀ» »ç¿ëÇÏ°Ô ÇÒ ¼ö ÀÖ½À´Ï´Ù.

@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.header {
background-image: url(../images/background_400x200.jpg);
}
}

Compression (¾ÐÃà)

Àû´çÇÑ Å©±âÀÇ À̹ÌÁö¸¦ º¸¿©ÁÖ´Â °Í¸¸À¸·Î ÃæºÐÇÏÁö ¾ÊÀ» ¶§°¡ ÀÖ½À´Ï´Ù. ¾î¶² ÆÄÀÏ Æ÷¸ËµéÀº ¼Õ½Ç ¾øÀÌ ¾ÐÃàÀ» ÇÒ ¼ö°¡ ÀÖ½À´Ï´Ù. ¾ÐÃàÇϴµ¥ »ç¿ëÇÒ ¼ö ÀÖ´Â ÅøµéÀÌ ¸¹ÀÌ ÀÖ½À´Ï´Ù. Æ÷Åä¼¥¸¸ Çصµ Save for Web and Devices ±â´ÉÀ» Á¦°øÇÏÁÒ

¡¡

ÀÌ È­¸é¿¡ ¸¹Àº ±â´ÉµéÀÌ ÀÖ½À´Ï´Ù. ÇÏÁö¸¸ °¡Àå Áß¿äÇÑ °ÍÀº Quality ¿É¼ÇÀÔ´Ï´Ù. 80% Á¤µµ·Î ¼³Á¤Çϸé ÆÄÀÏ »çÀÌÁ ¾öû³ª°Ô ÁÙÀÏ ¼ö ÀÖ½À´Ï´Ù.

¹°·Ð ÇÁ·Î±×·¡¹Ö »óÀ¸·Î ¾ÐÃàÀ» ÇÒ ¼öµµ ÀÖÁö¸¸, °³ÀÎÀûÀ¸·Î´Â Æ÷Åä¼¥¿¡¼­ ¾ÐÃàÇÏ´Â °ÍÀ» ¼±È£ÇÕ´Ï´Ù. PHP ·Î ¾ÐÃàÇÏ´Â ¹æ¹ýÀº ´ÙÀ½°ú °°½À´Ï´Ù:

function compressImage($source, $destination, $quality) {
$info = getimagesize($source);
switch($info['mime']) {
case "image/jpeg":
$image = imagecreatefromjpeg($source);
imagejpeg($image, $destination, $quality);
break;
case "image/gif":
$image = imagecreatefromgif($source);
imagegif($image, $destination, $quality);
break;
case "image/png":
$image = imagecreatefrompng($source);
imagepng($image, $destination, $quality);
break;
}
}
compressImage('source.png', 'destination.png', 85);

Sprites

¼­¹ö·ÎÀÇ ¿äû Ƚ¼ö¸¦ ÁÙ¿©¼­ »çÀÌÆ®ÀÇ Ã¼°¨ ¹ÝÀÀ ¼Óµµ¸¦ ³ôÀÏ ¼ö ÀÖ½À´Ï´Ù. À̹ÌÁö Çϳª Çϳª¸¦ ´Ù¿î ¹Þ±â À§ÇØ, ¼­¹ö·Î ¿äûÀ» ÇØ¾ß ÇÕ´Ï´Ù. ¿©·¯°³ÀÇ À̹ÌÁö¸¦ Çϳª·Î ÇÕÄ¥ ¼ö ÀÖÀ¸¸é, ¼­¹ö·Î ÆÄÀÏ ¿äûÀ» Çѹø¸¸ Çصµ µÇ°Ô µË´Ï´Ù. ¿©·¯°³ÀÇ À̹ÌÁö¸¦ ´ãÀº À̹ÌÁö¸¦ sprite(½ºÇÁ¶óÀÌÆ®) One ¶ó°í ºÎ¸¨´Ï´Ù. background-positionCSS ½ºÅ¸ÀÏÀ» ÀÌ¿ëÇؼ­ ½ºÆĶóÀÌÆ®¿¡¼­ ¿øÇÏ´Â À§Ä¡¸¦ º¸¿©ÁÝ´Ï´Ù. Twitter Bootstrap µµ ³»ºÎ ¾ÆÀÌÄÜÀ» Ç¥ÇöÇϱâ À§Çؼ­ ½ºÇÁ¶óÀÌÆ®¸¦ »ç¿ëÇÕ´Ï´Ù:

±×¸®°ï CSS ¿¡¼­ ÀÌ ½ºÇÁ¶óÀÌÆ® ³»ÀÇ Æ¯Á¤ ¿µ¿ªÀ» ´ÙÀ½°ú °°ÀÌ º¸¿©ÁÝ´Ï´Ù:

.icon-edit {
background-image: url("../img/glyphicons-halflings-white.png");
background-position: -96px -72px;
}

Caching

ºê¶ó¿ìÀúÀÇ Ä³½³À» Àß ÀÌ¿ëÇϼ¼¿ä. °³¹ßÁß¿¡´Â ij½³±â´É ¶§¹®¿¡ °ñÅÁÀ» ¸Ô±âµµ ÇÏÁö¸¸¿ä, »çÀÌÆ®ÀÇ ¼Óµµ¸¦ ³ôÀ̴µ¥´Â ¾ÆÁÖ Áß¿äÇÑ ±â´ÉÀÔ´Ï´Ù. ¸ðµç ºê¶ó¿ìÀú´Â À̹ÌÁö, ÀÚ¹Ù½ºÅ©¸³Æ® ±×¸®°í CSS ÆÄÀÏÀ» ij½³ÇÕ´Ï´Ù. ij½³À» ¼³Á¤ÇÏ´Â ¹æ¹ýÀÌ ¿©·¯°¡Áö°¡ Àִµ¥, ÀÚ¼¼ÇÑ ¹æ¹ýÀ» º¸½Ã·Á¸é ÀÌ ¹®¼­ ¸¦ º¸½Ã±â¸¦ ÃßõÇÕ´Ï´Ù. ÀϹÝÀûÀ¸·Î Çì´õ¿¡ ¿øÇÏ´Â °ªÀ» ¼³Á¤Çؼ­ ij½³ ¹æ½ÄÀ» Á¶ÀýÇÒ ¼ö ÀÖ½À´Ï´Ù:

$expire = 60 * 60 * 24 * 1;// seconds, minutes, hours, days
header('Cache-Control: maxage='.$expire);
header('Expires: '.gmdate('D, d M Y H:i:s', time() %2B $expire).' GMT');
header('Last-Modified: '.gmdate('D, d M Y H:i:s').' GMT');

Prefetching (¹Ì¸® ´Ù¿î ¹Þ±â)

HTML5 °¡ Á¡Á¡ Áøº¸ÇÏ°í ÀÖ½À´Ï´Ù.[prefetching][6] ¶ó´Â ±â´ÉÀÌ À־, ºê¶ó¿ìÀú¿¡°Ô ¾î¶² ÆÄÀϵéÀÌ ¾ÕÀ¸·Î °ð ÇÊ¿äÇÏ°Ô µÉÅ×´Ï ´Ù¿î¹ÞÀ¸¶ó°í ¸í·ÉÇÏ´Â ¿ªÈ°À» ÇÕ´Ï´Ù.

Data URI Scheme / Inline Images

¸î³âÀü¿¡ °£´ÜÇÑ web page, ¸¦ ¸¸µé¾ú½À´Ï´Ù. HTML ÆÄÀÏ Çϳª·Î ÆäÀÌÁö¸¦ ¸¸µé¾î¾ß Çß°í, ¸î°³ÀÇ À̹ÌÁö¸¦ ÷ºÎÇÒ ÇÊ¿ä°¡ ÀÖ¾ú½À´Ï´Ù. Data URI scheme ¸¦ ÀÌ¿ëÇؼ­ À̹ÌÁö¸¦ base64 encoding µÈ ½ºÆ®¸µÀ¸·Î º¯È¯Çؼ­ img ÀÇ src ¼Ó¼ºÀ¸·Î ¼³Á¤ÇÏ¿´½À´Ï´Ù:

ÀÌ ¹æ¹ýÀ» ÀÌ¿ëÇϸé, À̹ÌÁö°¡ HTML ¿¡ Æ÷ÇԵǾî, ¼­¹ö·ÎÀÇ HTTP ¿äûÀ» ÇÑ È¸ ÁÙÀÏ ¼ö ÀÖ½À´Ï´Ù. ¹°·Ð À̹ÌÁö°¡ Å©´Ù¸é º¯È¯µÈ ½ºÆ®¸µµµ Á¤¸» ±æ°Ì´Ï´Ù. PHP ·Î À̹ÌÁö¸¦ base64 ½ºÆ®¸µÀ¸·Î º¯È¯ÇÏ·Á¸é ´ÙÀ½°ú °°ÀÌ ÇÒ ¼ö ÀÖ½À´Ï´Ù:

$picture = fread($fp,filesize($file));
fclose($fp);
// base64 encode the binary data, then break it
// into chunks according to RFC 2045 semantics
$base64 = base64_encode($picture);
$tag = '';
$css = 'url(data:image/jpg;base64,'.str_replace("
", "", $base64).'); ';

À§ ¹æ¹ýÀÌ À¯¿ëÇÒ ¶§°¡ Àִµ¥, IE ¿¡¼­´Â Àß ÀÛµ¿ÇÏÁö ¾ÊÀ» ¶§°¡ ÀÖÀ» ¼ö ÀÖÀ¸´Ï Á¶½ÉÇϼ¼¿ä.


CSS

CSS ´Â ÄÚµùÀ̶ó°í »ý°¢ÇÕ´Ï´Ù. ½ºÅ¸ÀϵéÀ» Á¤¸®ÇÏ°í, ¿ªÈ°¿¡ µû¶ó ±¸ºÐÀ» Áþ°í, ±×µé »çÀÌÀÇ °ü°è¸¦ ¼³Á¤ÇØ¾ß ÇÕ´Ï´Ù. Àü CSS Á¤¸®°¡ ¸Å¿ì Áß¿äÇÏ´Ù°í »ý°¢ÇÕ´Ï´Ù. À¥ÀÇ °¢ ºÎºÐµéÀÌ ÀڽŸ¸ÀÇ Àß ºÐ¸®µÈ ½ºÅ¸ÀÏÀ» °®°Ô µË´Ï´Ù. CSS ¸¦ ¿©·¯ ÆÄÀϵé·Î ºÐ¸®ÇÏ´Â °ÍÀº, Á¤¸®Çϴµ¥ µµ¿òÀÌ µÇ±âµµ ÇÏÁö¸¸, ³ª¸§ÀÇ ¹®Á¦Á¡µéµµ ÀÖ½À´Ï´Ù.

¿ì¸®´Â@import ¹®À» »ç¿ëÇÏ´Â °ÍÀÌ ±×´Ú ÁÁÁö ¾Ê´Ù´Â °ÍÀ» ¾Ë°í ÀÖ½À´Ï´Ù. ¿Ö³ª¸é @import Çϳª¸¶´Ù ¼­¹ö·Î ¿äûÀ» Çѹø¾¿ ÇØ¾ß µÇ±â ¶§¹®ÀÔ´Ï´Ù. ±×¸®°í ºê¶ó¿ìÀú´Â ¸ðµç ½ºÅ¸ÀÏ ÆÄÀÏÀ» ´Ù¿î¹Þ±â Àü¿¡´Â À¯Àú¿¡°Ô ¾Æ¹«°Íµµ º¸¿©ÁÖÁö ¾Ê½À´Ï´Ù. CSS ÆÄÀÏÀÌ ¾ø°Å³ª, Å©±â°¡ Å©¸é, À¯Àú°¡ È­¸é¿¡ ¹«¾ùÀΰ¡ º¸±â±îÁö ¿À·£ ½Ã°£À» ±â´Ù·Á¾ß ÇÒ ¼ö ÀÖ½À´Ï´Ù.

Use CSS Preprocessors

CSS preprocessor ¸¦ »ç¿ëÇϸé À§ ¹®Á¦¸¦ ÇØ°áÇÒ ¼ö ÀÖ½À´Ï´Ù. ÆÄÀϵéÀ» ¿©·¯°³·Î ºÐ¸®Çؼ­ ÀÛ¾÷ÇÏ°í, ³ªÁß¿¡ ÇϳªÀÇ CSS ÆÄÀÏ·Î ÇÕÃļ­ À¯Àú¿¡°Ô Àü´ÞÇÒ ¼ö ÀÖ½À´Ï´Ù. CSS preprocessor ´Â º¯¼ö, Áßø ºí¶ô, mixin °ú »ó¼Óµî ´Ù¾çÇÑ ±â´ÉÀ» Á¦°øÇÕ´Ï´Ù. CSS preprocessor ¸¦ »ç¿ëÇصµ ÄÚµùÀº ÀÏ¹Ý CSS ¿Í ¸Å¿ì ºñ½ÁÇÏ°Ô »ý°å½À´Ï´Ù. ÇÏÁö¸¸ ´õ °ü¸®ÇϱⰡ ÆíÇØÁý´Ï´Ù. Sass, LESS, Stylus. µîÀÌ À¯¸íÇÕ´Ï´Ù. ´ÙÀ½Àº LESS ÀÇ ¿¹Á¦ÀÔ´Ï´Ù:

.position(@top: 0, @left: 0) {
position: absolute;
top: @top;
left: @left;
text-align: left;
font-size: 24px;
}
.header {
.position(20px, 30px);
.tips {
.position(10px, -20px);
}
.logo {
.position(10px, 20px);
}
}

´Â ´ÙÀ½°ú °°ÀÌ º¯°æµË´Ï´Ù.

.header {
position: absolute;
top: 20px;
left: 30px;
text-align: left;
font-size: 24px;
}
.header .tips {
position: absolute;
top: 10px;
left: -20px;
text-align: left;
font-size: 24px;
}
.header .logo {
position: absolute;
top: 10px;
left: 20px;
text-align: left;
font-size: 24px;
}

¹öÆ°À» À§ÇÑ ½ºÅ¸ÀÏÀÌ ÀÖÀ¸¸é, ÅؽºÆ® Ä®·¯¸¸ ¹Ù²Û ¹öÆ°À» ¸¸µé¼öµµ ÀÖ½À´Ï´Ù:

.button {
border: solid 1px #000;
padding: 10px;
background: #9f0;
color: #0029FF;
}
.active-button {
.button();
color: #FFF;
}

È¿À²ÀûÀÎ CSS

´ëºÎºÐÀÇ °³¹ßÀÚµéÀº CSS ÀÇ ¼Óµµ(È¿À²¼º) ¿¡ ´ëÇؼ­´Â »ý°¢ÇÏÁö ¾Ê½À´Ï´Ù. CSS ¿¡ µû¶ó ÆäÀÌÁö°¡ º¸¿©Áö´Âµ¥ °É¸®´Â ½Ã°£ÀÌ ´õ °É¸®±âµµ ´ú °É¸®±âµµ ÇÕ´Ï´Ù. Àç¹ÌÀÖ´Â »ç½ÇÁß Çϳª´Â, ºê¶ó¿ìÀú°¡ CSS selector ¸¦ ¿À¸¥ÂÊ¿¡¼­ ¿ÞÂÊÀ¸·Î ÀнÀ´Ï´Ù.

body ul li a {
color: #F000;
text-decoration: none;
}

¡¦ À§ ÄÚµå´Â ¸Å¿ì ´À¸³´Ï´Ù. ¿Ö³Ä¸é ºê¶ó¿ìÀú°¡ <a> ű׸¦ ¸ðµÎ ãÀº ÈÄ ±× ºÎ¸ðµéÀÌ Á¶°Ç¿¡ ¸Â´ÂÁö °Ë»çÇÏ´Â °Ë»çÇÏ´Â ½ÄÀ¸·Î µ¿ÀÛÇϱ⠶§¹®ÀÔ´Ï´Ù. ¶ÇÇÑ ID, class, tag, universal(*) ¼øÀ¸·Î È¿À²¼ºÀÌ ÁÙ¾îµç´Ù´Â °Íµµ ¾Ë¾Æ µÎ½Ã¸é ÁÁ½À´Ï´Ù. tag ·Î ½ºÅ¸ÀÏÀ» Àû¿ëÇÑ ¿ø¼Òµé º¸´Ù, id ·Î ½ºÅ¸ÀÏ Àû¿ëµÈ °ÍµéÀÌ »¡¸® ±×·ÁÁö°Ô µË´Ï´Ù. ¹°·Ð ¸ðµç ¿ø¼Ò¿¡ id ¸¦ Ãß°¡ÇÒ ÇÊ¿ä´Â ¾øÁö¸¸, ÀÌ Áö½ÄÀÌ µµ¿òÀÌ µÉ ¶§°¡ ºÐ¸í ÀÖ½À´Ï´Ù.

ul #navigation li {
background: #ff0232;
}

ul À» Á¦°ÅÇÏ´Â °ÍÀÌ ÁÁ½À´Ï´Ù. ¿Ö³Ä¸é #navigation Àº ÆäÀÌÁö Àüü¿¡ Çϳª¹Û¿¡ ¾ø±â ¶§¹®ÀÔ´Ï´Ù.

body .content p {
font-size: 20px;
}

.content ´Â body ÀÇ ÀÚ½ÄÀ̱⠶§¹®¿¡ body °¡ ±»ÀÌ ÇÊ¿ä ¾ø½À´Ï´Ù.

developers.google.com ¿Í css-tricks.com ¿¡ ÀÌ¿Í ºñ½ÁÇÑ ´õ ¸¹Àº ÆÁµéÀÌ ÀÖ½À´Ï´Ù.

File Size

¸ðµç CSS ¸¦ ´Ù¿î¹Þ±â Àü¿¡´Â À¯Àú°¡ ¾Æ¹«°Íµµ º¼ ¼ö ¾ø±â ¶§¹®¿¡, CSS ¿ë·®Àº ÀÛÀ»¼ö·Ï ÁÁ½À´Ï´Ù. »çÀÌÁ ÁÙÀ̱â À§ÇÑ ÆÁµéÀ» ¼Ò°³ÇÕ´Ï´Ù:

ºñ½ÁÇÑ ½ºÅ¸ÀÏÀ» ÇÕÄ£´Ù:

.header {
font-size: 24px;
}
.content {
font-size: 24px;
}

¡¦ ´ÙÀ½°ú °°ÀÌ º¯°æÇÕ´Ï´Ù:

.header, .content {
font-size: 24px;
}

´ÙÀ½°ú °°Àº ÄÚµå ´ë½Å¿¡:

.header {
background-color: #999999;
background-image: url(../images/header.jpg);
background-position: top right;
}

ª°Ô ¾µ ¼ö ÀÖ½À´Ï´Ù:

.header {
background: #999 url(../images/header.jpg) top right;
}

CSSOptimiser ¿Í Minifycss µîÀÇ ÅøÀ» ÀÌ¿ëÇؼ­ °ø¹éÀ» Á¦°ÅÇÏ¿© ÆÄÀÏ »çÀÌÁ ÁÙÀÏ ¼ö ÀÖ½À´Ï´Ù. ¼­¹ö¿¡¼­ ÆÄÀÏ »çÀÌÁ ÁÙ¿©¼­ À¯Àú¿¡°Ô ÀÛÀº CSS ¸¦ Àü´ÞÇÏ´Â °ÍÀÌ ÁÁ½À´Ï´Ù.

CSS ÆÄÀÏÀ» ¾È¿¡ ³Ö±â

.css ÆÄÀÏÀ» head ¾È¿¡ ³ÖÀ¸¼¼¿ä. ºê¶ó¿ìÀú°¡ ±× ÆÄÀϵéÀ» ¸ÕÀú ´Ù¿î ¹Þ½À´Ï´Ù.


JavaScript

HTTP ¿äû ÁÙÀ̱â

CSS ¿Í µ¿ÀÏÇÕ´Ï´Ù. ¼­¹ö·ÎÀÇ ¿äûÀ» ÁÙÀ̼¼¿ä. ´ëºÎºÐÀÇ °æ¿ì ÀÚ¹Ù½ºÅ©¸³Æ® ÆÄÀÏÀ» ·ÎµùÁßÀ̶ó°í ÆäÀÌÁö ·ÎµùÀÌ ÁߴܵÇÁö´Â ¾Ê½À´Ï´Ù. ÆäÀÌÁöÀÇ ±â´ÉµéÀÌ µ¿ÀÛÀ» ¾ÈÇÒ ¼ö´Â ÀÖÁö¸¸¿ä.

Minify Your Code

ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ Å©±â¸¦ ÁÙ¿©ÁÖ´Â ¶óÀ̺귯¸®µéÀÌ ÀÖ½À´Ï´Ù. ¹°·Ð °³¹ßÁß¿¡´Â »ç¿ëÇÏÁö ¸¶¼¼¿ä. ´ëºÎºÐÀÇ ÅøµéÀº º¯¼öÀ̸§À» ¹Ù²Ù°í, Äڵ带 ÇÑÁÙ·Î ¹Ù²ã¹ö·Á¼­ µð¹ö±ëÇÏ±â ¸Å¿ì ¾î·Æ°Ô µË´Ï´Ù.

CommonJS, AMD, RequireJS

ÀÚ¹Ù½ºÅ©¸³Æ® ÀÚü¿¡´Â ¸ðµâÀ̶ó´Â °³³äÀÌ ¾ø½À´Ï´Ù. À̸¦ ÇØ°áÇϱâ À§ÇÑ ¶óÀ̺귯¸®µéÀÌ ÀÖ½À´Ï´Ù. ´ÙÀ½ ¿¹Á¦´Â ÀÌ ¸µÅ©¿¡¼­ °¡Á®¿Ô½À´Ï´Ù.

<!DOCTYPE html>
<html>
<head>
<title>My Sample Project</title>
<!-- data-main attribute tells require.js to load
             scripts/main.js after require.js loads. -->
<script data-main="scripts/main" src="scripts/require.js"></script>
</head>
<body>
<h1>My Sample Project</h1>
</body>
</html>

Inside of main.js, you can use require() to load any other scripts you need:

require(["helper/util"], function(util) {
//This function is called when scripts/helper/util.js is loaded.
//If util.js calls define(), then this function is not fired until
//util's dependencies have loaded, and the util argument will hold
//the module value for "helper/util".
});

Use Namespaces

ÄÚµùÀ» Á¤¸®ÇÏ´Â ÁÖÁ¦·Î ¾ê±âÇÏÀÚ¸é namespace ¿¡ ´ëÇØ »©³õÀ» ¼ö°¡ ¾ø°ÚÁÒ. ÀÚ¹Ù½ºÅ©¸³Æ® ÀÚü¿¡´Â namespace °³³äÀÌ ¾ø½À´Ï´Ù. ÇÏÁö¸¸ °£´ÜÈ÷ ÇØ°áÇÒ ¼ö ÀÖ½À´Ï´Ù. MVC ¸¦ ±¸ÇöÇϱâ À§ÇØ ´ÙÀ½Ã³·³ Ŭ·¡½º¸¦ ±¸ÇöÇß´Ù°í ÇսôÙ

var model = function() { ... };
var view = function() { ... };
var controller = function() { ... };

À§ ÄÚµå ±×´ë·Î »ç¿ëÇϸé, ÇÁ·ÎÁ§Æ®ÀÇ ´Ù¸¥ ÆÄÀÏ°ú °ãÄ¥ È®·üÀÌ ³ô½À´Ï´Ù. ÇÏÁö¸¸ °´Ã¼(namespace) ¸¦ ¸¸µé¾î¼­ ¸ð¾ÆµÐ´Ù¸é, ±×·² È®·üÀÌ ÁÙ¾îµé °Ì´Ï´Ù.

var MyAwesomeFramework = {
model: function() { ... },
view: function() { ... },
controller: function() { ... }
}

Design Patterns È°¿ëÇϱâ

ÀÌ¹Ì ¸¸µé¾îÁ® ÀÖ´Â °ÍÀ» »õ·Î ¸¸µå·Á°í ÇÏÁö¸¶¼¼¿ä. ÀÚ¹Ù½ºÅ©¸³Æ®´Â ¸Å¿ì ¸¹Àº »ç¶÷µéÀÌ ¾²°í ÀÖ°í, ¸¹Àº °ÍµéÀÌ ¸¸µé¾îÁ® ÀÖ½À´Ï´Ù. µðÀÚÀÎ ÆÐÅÏÀº, ÀÚÁÖ ¹ß»ýÇÏ´Â ¹®Á¦µé¿¡ ´ëÇÑ ¸¹Àº »ç¶÷µéÀÌ ÇØ°áÃ¥À» Á¤¸®ÇØ ³õÀº °ÍÀÔ´Ï´Ù. ³²ÀÌ Á¦½ÃÇÑ ÇØ°áÃ¥À» »ç¿ëÇÏ´Â °ÍÀÌ µµ¿òÀÌ µÉ ¶§°¡ ¸¹ÀÌ ÀÖ½À´Ï´Ù. ¸î°¡Áö ¿¹¸¦ µé¾î º¸°Ú½À´Ï´Ù:

Constructor Pattern

ƯÁ¤ ŸÀÔÀÇ °´Ã¼¸¦ ¸¸µé ¶§ ÀÌ ÆÐÅÏÀ» »ç¿ëÇϼ¼¿ä:

var Class = function(param1, param2) {
this.var1 = param1;
this.var2 = param2;
}
Class.prototype = {
method:function() {
alert(this.var1 %2B "/" %2B this.var2);
}
};

´ÙÀ½ ó·³ ÇÒ ¼öµµ ÀÖ½À´Ï´Ù:

function Class(param1, param2) {
this.var1 = param1;
this.var2 = param2;
this.method = function() {
alert(param1 %2B "/" %2B param2);
};
};

var instance = new Class("value1", "value2");

Module Pattern

¸ðµâ ÆÐÅÏÀº private °ú public ÇÔ¼ö¸¦ ¸¸µé°Ô ÇØÁÝ´Ï´Ù. ¿¹¸¦µé¾î ´ÙÀ½ Äڵ忡¼­ _index ¿Í privateMethod ´Â privateÀÌ°í increment ¿Í getIndex Àº public ÀÔ´Ï´Ù.

var Module = (function() {
var _index = 0;
var privateMethod = function() {
return _index * 10;
}
return {
increment: function() {
_index %2B= 1;
},
getIndex: function() {
return _index;
}
};
})();

Observer Pattern

À̺¥Æ®¸¦ ¹Þ°Å³ª Àü´ÞÇÒ ¶§, ÀÌ ÆÐÅÏÀ» º¸°ÔµË´Ï´Ù. ¿ÉÀú¹öµéÀº ´Ù¸¥ ƯÁ¤ °´Ã¼¿¡ °ü½ÉÀ» °®°í ÀÖ½À´Ï´Ù. À̺¥Æ®°¡ ¹ß»ýÇÏ¸é ¿ÉÀú¹öµéÀÌ À̺¥Æ®¿¡ ´ëÇØ ¾Ë°Ô µË´Ï´Ù. ¾Æ·¡ ¿¹Á¦ ´Â ¾î¶»°Ô Users °´Ã¼¿¡ ¿ÉÀú¹ö¸¦ Ãß°¡ÇÒ ¼ö ÀÖ´ÂÁö º¸¿©ÁÝ´Ï´Ù:

var Users = {
list: [],
listeners: {},
add: function(name) {
this.list.push({name: name});
this.dispatch("user-added");
},
on: function(eventName, listener) {
if(!this.listeners[eventName]) this.listeners[eventName] = [];
this.listeners[eventName].push(listener);
},
dispatch: function(eventName) {
if(this.listeners[eventName]) {
for(var i=0; i<this.listeners[eventName].length; i%2B%2B) {
this.listeners[eventName][i](this);
}
}
},
numOfAddedUsers: function() {
return this.list.length;
}
}

Users.on("user-added", function() {
alert(Users.numOfAddedUsers());
});

Users.add("Krasimir");
Users.add("Tsonev");

Function Chaining Pattern

ÀÌ ÆÐÅÏÀº public ÀÎÅÍÆäÀ̽º¸¦ Á¤¸®Çϴµ¥ µµ¿òÀÌ µÇ´Â ÆÐÅÏÀÔ´Ï´Ù. ÄÚµåÀÇ °¡µ¶¼ºÀ» ³ôÀÏ ¼ö ÀÖ½À´Ï´Ù:

var User = {
profile: {},
name: function(value) {
this.profile.name = value;
return this;
},
job: function(value) {
this.profile.job = value;
return this;
},
getProfile: function() {
return this.profile;
}
};

var profile = User.name("Krasimir Tsonev").job("web developer").getProfile();
console.log(profile);

JavaScript ÀÇ ÆÐÅÏ¿¡ °üÇÑ ¾ÆÁÖ ÁÁÀº Ã¥ À» ÃßõÇÕ´Ï´Ù.


Assets-Pack

±ÛÀÌ ¸·¹ÙÁö¿¡ ´Ù´Ù¸£°í ÀÖ½À´Ï´Ù. ¼­¹ö¿¡¼­ CSS ¿Í JavaScript ¸¦ °ü¸®ÇÏ´Â ¹æ¹ý¿¡ ´ëÇÑ ¾ê±â¸¦ ÇÏ°í ½Í½À´Ï´Ù. ÆÄÀÏÀ» ÇÕÄ¡°í, »çÀÌÁ ÁÙÀÌ°í(minification), ÄÄÆÄÀÏ(preprocessor µî) ÇÏ´Â °ÍÀ» ¼­¹ö ÄÚµåÀÇ ÀϺηΠ±¸ÇöÇÏ´Â °æ¿ì°¡ ¸¹ÀÌ ÀÖ½À´Ï´Ù.

Á¦°¡ ÃÖ±Ù¿¡ ÀÛ¾÷ÇÑ ÇÁ·ÎÁ§Æ®¿¡¼­, assets-pack ¶ó´Â ÅøÀ» »ç¿ëÇß½À´Ï´Ù. ¸Å¿ì À¯¿ëÇÑ °Í °°¾Æ, Á¦°¡ ¾î¶»°Ô ÀÌ ÅøÀ» ÀÌ¿ëÇß´ÂÁö ÀÚ¼¼È÷ ¼³¸íµå¸®°íÀÚ ÇÕ´Ï´Ù. ÀÌ ¶óÀ̺귯¸®´Â °³¹ßÁß¿¡¸¸ »ç¿ëÇϵµ·Ï ¸¸µé¾îÁ³½À´Ï´Ù.

±âº»ÀûÀ¸·Î ¿©·¯ ¸®¼Ò½º ÆÄÀϵé(CSS, JS) ÀÌ º¯°æµÇ¸é, ÀÌ ÅøÀÌ ¾Ë¾Æ¼­, ¸ðµç ÆÄÀÏÀ» ÇϳªÀÇ ÆÄÀÏ·Î ÇÕÃÄÁÝ´Ï´Ù. ÆÄÀÏÀ» Çϳª¸¸ Àü¼ÛÇصµ µÇ´Ï, ¼Óµµ°¡ »¡¶óÁý´Ï´Ù. ÀÌ Åø ÀÌ¿Ü¿¡ ¼­¹ö¿¡ ´Ù¸¥ ±â´ÉÀ» Ãß°¡ÇÒ ÇÊ¿ä°¡ ¾ø±â ¶§¹®¿¡ °³¹ßÇÏ´Â µ¿¾È Æí¸®ÇÏ°Ô »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù.

[assets-pack][23] ¼³Ä¡¹æ¹ýÀÔ´Ï´Ù.

Installation

ÀÌ ÅøÀº Nodejs ¸¦ »ç¿ëÇÕ´Ï´Ù. ¾øÀ¸½Å ºÐµéÀº nodejs.org/download ¿¡¼­ ÆÄÀÏÀ» ¹ÞÀ¸¼¼¿ä. ±×¸®°í ´ÙÀ½°ú °°ÀÌ ÇÕ´Ï´Ù:

npm install -g assetspack

Usage

Command Line

ÀÌ ÅøÀº JSON ¼³Á¤ÆÄÀÏÀ» »ç¿ëÇÕ´Ï´Ù.

assets.json ÆÄÀÏÀ» ¸¸µé°í °°Àº µð·ºÅ丮¿¡¼­ ´ÙÀ½ ¸í·É¾î¸¦ ½ÇÇàÇÕ´Ï´Ù:

assetspack

¼³Á¤ÆÄÀÏÀÇ À̸§ÀÌ ´Ù¸£°Å³ª ´Ù¸¥ µð·ºÅ丮¿¡ ÀÖ´Ù¸é ´ÙÀ½°ú °°ÀÌ Çϼ¼¿ä:

assetspack --config [path to json file]

In Code

var AssetsPack = require("assetspack");
var config = [
{
type: "css",
watch: ["css/src"],
output: "tests/packed/styles.css",
minify: true,
exclude: ["custom.css"]
}
];
var pack = new AssetsPack(config, function() {
console.log("AssetsPack is watching");
});
pack.onPack(function() {
console.log("AssetsPack did the job");
});

Configuration

¼³Á¤ÆÄÀÏÀº ´ÙÀ½°ú °°ÀÌ »ý°å½À´Ï´Ù:

[
(asset object),
(asset object),
(asset object),
...
]

Asset Object

±âº»ÀûÀÎ asset object ´Â ´ÙÀ½°ú °°ÀÌ »ý°å½À´Ï´Ù:

{
type: (file type /string, could be css, js or less for example),
watch: (directory or directories for watching /string or array of strings/),
pack: (directory or directories for packing /string or array of strings/. ),
output: (path to output file /string/),
minify: /boolean/,
exclude: (array of file names)
}

pack property °¡ ¹Ýµå½Ã ÇÊ¿äÇÑ °ÍÀº ¾Æ´Õ´Ï´Ù. »ý·«Çϸé watch ¿Í °°Àº °ªÀ» °®°Ô µË´Ï´Ù. minify ´Â ±âº»°ªÀÌ false ÀÔ´Ï´Ù.

¸î°¡Áö ¿¹ÀÔ´Ï´Ù:

Packing CSS

{
type: "css",
watch: ["tests/data/css", "tests/data/css2"],
pack: ["tests/data/css", "tests/data/css2"],
output: "tests/packed/styles.css",
minify: true,
exclude: ["header.css"]
}

Packing JavaScript

{
type: "js",
watch: "tests/data/js",
pack: ["tests/data/js"],
output: "tests/packed/scripts.js",
minify: true,
exclude: ["A.js"]
}

Packing .less Files

.less ¾ÐÃà(packing)Àº Á¶±Ý ´Ù¸¨´Ï´Ù. less ÆÄÀÏ¿¡ ´ëÇؼ­´Â pack property °¡ ÇʼöÀÔ´Ï´Ù. ´Ù¸¥ ¸ðµç .less ÆÄÀÏÀ» import ÇÏ¿©¾ß ÇÏ°í exclude property ´Â Á¦°øµÇÁö ¾Ê½À´Ï´Ù.

{
type: "less",
watch: ["tests/data/less"],
pack: "tests/data/less/index.less",
output: "tests/packed/styles-less.css",
minify: true
}

¹®Á¦°¡ ÀÖÀ¸¸é Github ÀúÀå¼ÒÀÇ tests/packing-less.spec.js ¸¦ º¸¼¼¿ä.

Packing Other File Formats

assets-pack ÅøÀ» ´Ù¸¥ ÆÄÀÏ Æ÷¸Ë¿¡µµ »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. HTML À» ÇÕÃļ­ Çϳª·Î ¸¸µé ¼öµµ ÀÖ½À´Ï´Ù:

{
type: "html",
watch: ["tests/data/tpl"],
output: "tests/packed/template.html",
exclude: ["admin.html"]
}

´Ù¸¸ ÀÌ °æ¿ì minification Àº Áö¿øµÇÁö ¾Ê½À´Ï´Ù.


Conclusion

ÇÁ·ÐÆ® À¥ °³¹ßÀڷμ­, »ç¿ëÀÚµéÀ» À§ÇØ ¼º´ÉÀ» ³ôÀ̱â À§ÇØ ³ë·ÂÇØ¾ß ÇÕ´Ï´Ù. À§¿¡ ³ª¿­ÇÑ ÆÁµéÀÌ ¿Ïº®ÇÑ ¸®½ºÆ®´Â ¾Æ´ÏÁö¸¸, Á¦°¡ °³ÀÎÀûÀ¸·Î »ç¿ëÇغ» ¹æ¹ýµéÀÔ´Ï´Ù. ¿©·¯ºÐµéÀÌ »ç¿ëÇÏ´Â ´Ù¸¥ ÆÁµéµµ °øÀ¯ ºÎŹÇÕ´Ï´Ù.

ÃßõÃßõ : 454 Ãßõ ¸ñ·Ï
¹øÈ£ Á¦¸ñ
2,885
input ÀÔ·Â ÇÊµå ¾ÕµÚ °ø¹é ½Ç½Ã°£ Á¦°Å
2,884
Placeholder Æ÷Ä¿½º½Ã °¨Ãß±â
2,883
MySQL Áߺ¹µÈ µ¥ÀÌÅ͸¦ »èÁ¦
2,882
MySQL Áߺ¹ µ¥ÀÌÅÍ È®ÀÎ
2,881
sessionStorage.getItem ¿Í sessionStorage.setItem
2,880
Á¦ÀÌÄõ¸® ·£´ýÀ¸·Î ¹è°æ»ö º¯°æ
2,879
preg match¿¡ °üÇÑ Á¤±Ô½Ä
2,878
Stream an audio file with MediaPlayer ¿Àµð¿À ÆÄÀÏ ½ºÆ®¸®¹Ö Çϱâ
2,877
Audio Streaming PHP Code
2,876
PHP $ SERVER ȯ°æ º¯¼ö Á¤¸®
2,875
Vimeo (ºñ¸Þ¿À) API ¸¦ »ç¿ëÇÏ¿© Ç÷¹À̾î ÄÁÆ®·ÑÇϱâ
2,874
iframe »ç¿ë½Ã ÇÏ´Ü¿¡ ¹ß»ýÇÏ´Â °ø¹é Á¦°Å¹æ¹ý
2,873
¾ÆÀÌÇÁ·¹ÀÓ(iframe) Àüüȭ¸é °¡´ÉÇÏ°Ô Çϱâ
2,872
ºÎÆ®½ºÆ®·¦(bootstrapk)¿¡¼­ »ç¿ëÇÏ´Â class¸í Á¤¸®
2,871
ºÎÆ®½ºÆ®·¦ CSS
2,870
Å©·Ò¿¡¼­ ¸¶Áø Á¶Àý
2,869
PHP ÇöÀç ÆäÀÌÁöÀÇ µµ¸ÞÀθíÀ̳ª urlµîÀÇ Á¤º¸ ¾Ë¾Æ¿À±â
2,868
PHP preg match all()
2,867
PHP ·Î À¥ÆäÀÌÁö ±Ü¾î¿À±â ¸ðµç ¹æ¹ý ÃÑÁ¤¸®!
2,866
[PHP] ¿ø°ÝÁö ÆÄÀÏ ÁÖ¼Ò ³ëÃâ ¾ÈÇÏ°í curl·Î ´Ù¿î·Îµå ¹Þ±â
2,865
PHP ÇÔ¼ö Á¤¸®
2,864
¾ÆÀÌÇÁ·¹ÀÓ(iframe) ºñÀ² À¯ÁöÇϸ鼭 Å©±â Á¶ÀýÇÏ´Â ¹æ¹ý
2,863
PHP ¹è¿­¿¡¼­ ¹«ÀÛÀ§·Î Çϳª »Ì¾ÆÁÖ´Â array rand() ÇÔ¼ö
2,862
PHP Á¤±Ô½Ä Á¤¸®
2,861
PHP Á¤±Ô½ÄÀ» È°¿ëÇÑ ÅÂ±× ¹× ƯÁ¤ ¹®ÀÚ¿­ Á¦°Å ¹× ÃßÃâ ¹æ¹ý
2,860
php Å©·Ñ¸µ ¶Ç´Â ÆÄ½Ì ÇÔ¼ö, Á¤±Ô½Ä ¸ðÀ½
2,859
Á¦ÀÌÄõ¸® ±âº» ¸í·É¾î
2,858
À¥ÆäÀÌÁö °¡·Î ¸ðµå¼¼·Î ¸ðµå ÀνÄÇϱâ
2,857
¸ð¹ÙÀÏ À¥ È­¸é °­Á¦ ȸÀü(°¡·Î¸ðµå °íÁ¤)
2,856
[HTML5]¿¡¼­ frameset ´ëü ¹æ¹ý°ú iframe ¼Ó¼º
¸ñ·Ï
¹ÂÁ÷Æ®·ÎÆ® ºÎ»ê±¤¿ª½Ã ºÎ»êÁø±¸ °¡¾ßµ¿ ¤Ó °³ÀÎÁ¤º¸Ãë±Þ¹æħ
Copyright ¨Ï musictrot All rights reserved.