°ú°Å¿¡´Â ÇÁ·ÎÁ§Æ® ¸®¼Ò½º(À̹ÌÁö, 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-position CSS ½ºÅ¸ÀÏÀ» ÀÌ¿ëÇØ¼ ½ºÆÄ¶óÀÌÆ®¿¡¼ ¿øÇÏ´Â À§Ä¡¸¦ º¸¿©ÁÝ´Ï´Ù.
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
ÀÚ¹Ù½ºÅ©¸³Æ®ÀÇ Å©±â¸¦ ÁÙ¿©ÁÖ´Â ¶óÀ̺귯¸®µéÀÌ ÀÖ½À´Ï´Ù. ¹°·Ð °³¹ßÁß¿¡´Â »ç¿ëÇÏÁö ¸¶¼¼¿ä. ´ëºÎºÐÀÇ ÅøµéÀº º¯¼öÀ̸§À» ¹Ù²Ù°í, Äڵ带 ÇÑÁÙ·Î
¹Ù²ã¹ö·Á¼ µð¹ö±ëÇÏ±â ¸Å¿ì ¾î·Æ°Ô µË´Ï´Ù.
ÀÚ¹Ù½ºÅ©¸³Æ® ÀÚü¿¡´Â ¸ðµâÀ̶ó´Â °³³äÀÌ ¾ø½À´Ï´Ù. À̸¦ ÇØ°áÇϱâ À§ÇÑ ¶óÀ̺귯¸®µéÀÌ ÀÖ½À´Ï´Ù. ´ÙÀ½ ¿¹Á¦´Â
ÀÌ ¸µÅ©¿¡¼ °¡Á®¿Ô½À´Ï´Ù.
<!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
ÇÁ·ÐÆ® À¥ °³¹ßÀڷμ, »ç¿ëÀÚµéÀ» À§ÇØ ¼º´ÉÀ» ³ôÀ̱â À§ÇØ ³ë·ÂÇØ¾ß ÇÕ´Ï´Ù. À§¿¡ ³ª¿ÇÑ ÆÁµéÀÌ ¿Ïº®ÇÑ ¸®½ºÆ®´Â ¾Æ´ÏÁö¸¸, Á¦°¡ °³ÀÎÀûÀ¸·Î
»ç¿ëÇØº» ¹æ¹ýµéÀÔ´Ï´Ù. ¿©·¯ºÐµéÀÌ »ç¿ëÇÏ´Â ´Ù¸¥ ÆÁµéµµ °øÀ¯ ºÎŹÇÕ´Ï´Ù.
|