2010³â °æ ¸ð¹ÙÀÏ ¾ÛÀ» óÀ½ ¸¸µé¾î ºÃ´Ù. ´ç½Ã¸¸ ÇØµµ ´ë¼¼´Â ³×ÀÌÆ¼ºê ¾ÛÀ̾ú´Âµ¥ ¸ð¹ÙÀÏ À¥°ú Áߺ¹À¸·Î °³¹ßÇØ¾ß ÇÏ´Â »ý»ê¼º ¹®Á¦ ¶§¹®¿¡ Æù°¸ µîÀÇ ÇÏÀ̺긮µå ¾ÛÀÌ µîÀåÇÏ¿´´Ù.
10³âÀÌ Áö³ ÈÄ ¸ð¹ÙÀÏ °³¹ß »ýŰè´Â ÃáÃßÀü±¹½Ã´ë°¡ µÇ¾î¹ö·È´Ù. ¾Èµå·ÎÀ̵å Áø¿µ¿¡´Â ÄÚÆ²¸°ÀÌ ³×ÀÌÆ¼ºê °³¹ßÀ» ´ëüÇÏ´Â Ãß¼¼À̰í, º» µµ¼¿¡¼ ¼Ò°³ÇÏ´Â PWA°¡ ³ª¸§ÀÇ ÇÑ ÃàÀ» À̲ø¾î °¡°í ÀÖÀ¸¸ç, ±¸±ÛÀÇ Ç÷¯Å͵µ ÇÑ ÃàÀ» ´ã´çÇϰí ÀÖ´Ù.
¾ÆÁ÷ ¾î´À°Í Çϳª°¡ ¶Ñ·ÇÇÏ°Ô ´ë¼¼¸¦ ²ø°í ÀÖ´Â Çü±¹Àº ¾Æ´Ï±â¿¡ °³¹ß ¸ñÀû¿¡ Á¦ÀÏ ºÎÇÕÇÏ´Â ¹æ½Ä...
´õº¸±â
2010³â °æ ¸ð¹ÙÀÏ ¾ÛÀ» óÀ½ ¸¸µé¾î ºÃ´Ù. ´ç½Ã¸¸ ÇØµµ ´ë¼¼´Â ³×ÀÌÆ¼ºê ¾ÛÀ̾ú´Âµ¥ ¸ð¹ÙÀÏ À¥°ú Áߺ¹À¸·Î °³¹ßÇØ¾ß ÇÏ´Â »ý»ê¼º ¹®Á¦ ¶§¹®¿¡ Æù°¸ µîÀÇ ÇÏÀ̺긮µå ¾ÛÀÌ µîÀåÇÏ¿´´Ù.
10³âÀÌ Áö³ ÈÄ ¸ð¹ÙÀÏ °³¹ß »ýŰè´Â ÃáÃßÀü±¹½Ã´ë°¡ µÇ¾î¹ö·È´Ù. ¾Èµå·ÎÀ̵å Áø¿µ¿¡´Â ÄÚÆ²¸°ÀÌ ³×ÀÌÆ¼ºê °³¹ßÀ» ´ëüÇÏ´Â Ãß¼¼À̰í, º» µµ¼¿¡¼ ¼Ò°³ÇÏ´Â PWA°¡ ³ª¸§ÀÇ ÇÑ ÃàÀ» À̲ø¾î °¡°í ÀÖÀ¸¸ç, ±¸±ÛÀÇ Ç÷¯Å͵µ ÇÑ ÃàÀ» ´ã´çÇϰí ÀÖ´Ù.
¾ÆÁ÷ ¾î´À°Í Çϳª°¡ ¶Ñ·ÇÇÏ°Ô ´ë¼¼¸¦ ²ø°í ÀÖ´Â Çü±¹Àº ¾Æ´Ï±â¿¡ °³¹ß ¸ñÀû¿¡ Á¦ÀÏ ºÎÇÕÇÏ´Â ¹æ½ÄÀ» ã´Â À¶Å뼺ÀÌ ÇÊ¿äÇÑ ½ÃÁ¡ÀÌ ¾Æ´Ò±î ÇÑ´Ù.
ÀÌ Ã¥Àº ±×·± Ãø¸é¿¡¼ PWAÀÇ Àå´ÜÁ¡À» ½±°Ô ÆÄ¾ÇÇϰí
ÄîºÏ
ÇüÅ·Πºü¸£°Ô ±¸Çö ¹æ¹ýÀ» ÀÍÈú ¼ö ÀÖ´Ù´Â Á¡ÀÌ ÀåÁ¡ÀÌ´Ù.
PWA´Â À¥ ¾ÛÀÓ¿¡µµ ³×ÀÌÆ¼ºê ¾Û¿¡¼ Á¦°øÇÏ´Â ±â´ÉÀ» ±¸ÇöÇÒ ¼ö ÀÖ´Ù´Â Á¡ÀÌ ÀåÁ¡À̸ç, ÀÚ¹Ù½ºÅ©¸³Æ® Çϳª¸¸À¸·Î ¼¹ö »çÀÌµå ±îÁö ¾Æ¿ì¸¦ ¼ö ÀÖ´Ù´Â ½ÉÇÃÇÔÀÌ ÀÖ´Ù. °³ÀÎÀûÀ¸·Î´Â ¾ÖÇà Áø¿µ¿¡¼ ÀÌ ±â¼úÀ» ¾îµð±îÁö ¿ëÀÎÇÏ´À³Ä°¡ ´ë¼¼ ¿©ºÎ¿¡ ÁöÀåÀ» ÁÙ º¯¼ö¶ó°í º»´Ù.
PWA¸¦ »ç¿ëÇϸé
Node.js
¸¦ ÅëÇØ ÀÚ¹Ù½ºÅ©¸³Æ® ¹®¹ýÀ¸·Î ³×ÀÌÆ¼ºê ±â´ÉµéÀ» ÄÁÆ®·Ñ ÇÒ ¼ö ÀÖ°í, ¿ÀÇÁ¶óÀÎ »óÅ¿¡¼µµ Ȱ¿ëÀÌ °¡´ÉÇϸç,
¼ºñ½º ¿öÄ¿
¸¦ ÅëÇØ ¹é±×¶ó¿îµå¿¡¼µµ µ¥ÀÌÅ͸¦ µ¿±âÈ ÇÒ ¼ö ÀÖ´Ù. ½ÉÁö¾î ±×µ¿¾È À¥ ¾Û¿¡¼´Â ±¸ÇöÀÌ ºÒ°¡´ÉÇß´ø
Push
±â´ÉÀÇ ±¸Çöµµ °¡´ÉÇØÁø´Ù.
º» µµ¼´Â Paper¶ó´Â °£´ÜÇÑ ¿¹Á¦¿¡ PWAÀÇ ±â´ÉµéÀ» ÀÔÇô°¡¸ç °³¼±ÇÏ´Â °úÁ¤À» ÅëÇØ PWA¸¦ ÇнÀÇÒ ¼ö ÀÖ°Ô µµ¿ÍÁØ´Ù.
ÇϳªÀÇ ¾Û¿¡¸¸ ÁýÁß
Çϱ⠶§¹®¿¡ ±º´õ´õ±â ¾øÀÌ ÅëÀϼºÀÖ°Ô PWA¸¦ ¹è¿ï ¼ö ÀÖ´Ù´Â ÀåÁ¡ÀÌ ÀÖÀ¸¸ç, ÀúÀÚ Æ¯À¯ÀÇ ¹®Ã¼ ´öºÐ¿¡
°¡µ¶¼º
ÀÌ ÁÁ¾Æ ±×¸¸Å ÇнÀ ´É·ü¿¡ µµ¿òÀÌ µÈ´Ù.
PWAÀÇ ÇÙ½É ±â´ÉÀÎ ¼ºñ½º ¿öÄ¿¸¦ ¾Ë±â ½±°Ô Ç®¾î³ª°¡´Â Á¡µµ Ã¥ÀÇ ¸Å·ÂÀ̶ó ÇÒ ¼ö ÀÖ´Ù. ±âº»ÀûÀ¸·Î ÀÚ¹Ù½ºÅ©¸³Æ®´Â ½Ì±Û ½º·¹µå ±â¹ÝÀ¸·Î ¿òÁ÷À̱⠶§¹®¿¡ ÀÌ Á¦¾àÀ» ÇÇÇϱâ À§ÇØ ¹é±×¶ó¿îµåÀÇ ±â¼úÀÌ Áß¿äÇØ Áø´Ù. ÀÌ´Â Node.js¿¡¼µµ ¸¶Âù°¡ÁöÀÌ´Ù.
¼ºñ½º ¿öÄ¿¸¦ Ȱ¿ëÇÏ¸é ´ëÇ¥ÀûÀ¸·Î ¾Æ·¡¿Í °°Àº 3°¡Áö ±â´ÉÀ» Ȱ¿ëÇÒ ¼ö ÀÖ°Ô µÇ´Âµ¥ Ã¥ÀÇ ¿¹Á¦¸¦ ÅëÇØ ÇÑ ´Ü°è¾¿ ±¸ÇöÇÏ´Ùº¸¸é ½±°Ô ÀÍÈú ¼ö ÀÖ´Ù.
Fetch(ºê¶ó¿ìÀú ¿äû)
Sync(¹é±×¶ó¿îµå µ¿±âÈ)
Push(Ǫ½Ã ¾Ë¸² ¼ö½Å)
±× ¿Ü ij½Ã½ºÅ丮Áö, IndexedDB, À¥ ¾Û ¸Å´ÏÆä½ºÆ® µîÀÇ ÀÚÁÖ È°¿ëÇÏ´Â ºÎ°¡±â´ÉÀÌ ¼Ò°³µÈ´Ù.
ij½Ã ½ºÅ丮Áö
¶õ ºê¶ó¿ìÀú¿¡ ¸®¼Ò½º¸¦ Á÷Á¢ ÀúÀåÇÏ°í °ü¸®ÇÒ ¼ö ÀÖ´Â °ø°£À¸·Î API¸¦ ÅëÇØ Ȱ¿ëÇÒ ¼ö ÀÖ´Ù. ´öºÐ¿¡ ¿ÀÇÁ¶óÀο¡¼µµ PWA¸¦ Ȱ¿ëÇÒ ¼ö ÀÖ°Ô µÈ´Ù.
IndexedDB
¶õ ¸»±×´ë·Î DBÀÌ´Ù. Paper ¿¹Á¦¿¡¼ CRUD¸¦ ÅëÇØ IndexedDB¸¦ Ȱ¿ëÇÏ´Â ¿¹Á¦¸¦ µû¶óÇÏ´Ùº¸¸é ¾î¶² °³³äÀÎÁö ½±°Ô ÆÄ¾ÇÇÒ ¼ö ÀÖ´Ù. ´öºÐ¿¡ Mysql°ú °°Àº DB·ÎºÎÅÍ µ¶¸³ÀûÀÎ ¼³°è°¡ °¡´ÉÇØÁø´Ù.
À¥ ¾Û ¸Å´ÏÆä½ºÆ®
´Â À¥ ¾ÛÀ» ÀϹÝÀûÀÎ ¾Ûó·³ ¼³Ä¡ÇÒ ¼ö ÀÖ°Ô ÇØÁÖ´Â ±â´ÉÀÌ´Ù. À¥ ¾ÛÀÇ À̸§À̳ª ½ÃÀÛÆäÀÌÁö, ¾ÆÀÌÄÜ µîÀÇ Á¤º¸°¡ ´ã°ÜÀÖ´Ù.
´ÙÀ½À¸·Î ¾Õ¼ ¼³¸íÇß´ø ¼ºñ½º ¿öÄ¿ÀÇ ½ÉȰúÁ¤ÀÎ
¹é±×¶ó¿îµå µ¿±âÈ
¸¦ ´Ù·é´Ù. ¸ð¹ÙÀÏÀÌ ¿Â¶óÀο¡¼ ¿ÀÇÁ¶óÀÎÀ¸·Î ¹Ù²î¾úÀ» ¶§ ȤÀº ±× ¹Ý´ëÀÇ ÄÉÀ̽º°¡ ±¸Ã¼ÀûÀ¸·Î ¾î¶² ¸ÅÄ¿´ÏÁòÀ¸·Î µ¿ÀÛÇÏ´ÂÁö ±Ã±ÝÇߴµ¥ ÀÌ Ã¥ ´öºÐ¿¡ »ó¼¼È÷ ¾Ë ¼ö ÀÖ¾î ÁÁ¾Ò´Ù.
ÁÖ·Î ¼ºñ½º ¿öÄ¿¿¡ µ¿±âÈ ÀÛ¾÷À» µî·ÏÇÏ¿© ó¸®Çϸç Ŭ¶óÀÌ¾ðÆ®¿ÍÀÇ
¸Þ½ÃÁö Àü´Þ
±â¹ýÀ» ÅëÇØ ¹®Á¦Á¡µéÀ» º¸¿ÏÇÑ´Ù. À̸¦ ÅëÇØ »èÁ¦ÇÑ À̹ÌÁö µîÀÌ Ä³½Ã¿¡ ÀÜÁ¸ÇÏ´Â ¹®Á¦ ȤÀº µ¿±âÈ ÀÛ¾÷ ÈÄ¿¡µµ ÀÛ¾÷ ¸ñ·ÏÀÌ °»½ÅµÇÁö ¾Ê´Â ¹®Á¦¿¡ ´ëÇÑ Ã³¸®°¡ °¡´ÉÇØÁø´Ù.
¸¶Áö¸·À¸·Î Paper ¾Û¿¡ Push ±â´ÉÀ» ±¸ÇöÇÏ¸ç ´ë´Ü¿øÀ» ¸¶¹«¸®ÇÑ´Ù. ¾Û Ǫ½Ã ¾ÆÅ°ÅØÃ³¿¡ ´ëÇØ ÀÍÈù ÈÄ ¾Ë¸² API¸¦ Ȱ¿ëÇÏ¸ç ±¸±ÛÀÇ FCMÀ̶ó´Â Ǫ½Ã¼ºñ½º ¿¬µ¿À» ÅëÇØ ¾Ë¸² ±â´ÉÀ» ±¸ÇöÇÑ´Ù. ºÎ°¡ÀûÀ¸·Î
BABEL
À» Ȱ¿ëÇØ ±¸¹öÀüÀÇ ºê¶ó¿ìÀú¿¡ ´ëÇÑ ´ëÀÀ ¹æ¹ýÀ» ´Ù·ç¸ç ºÎ·Ï¿¡¼´Â ºñµ¿±â¿Í ÄÝ¹é ¸ÅÄ¿´ÏÁòÀ» À§ÁÖ·Î »ìÆìº¸´Âµ¥ Ãʺ¸Àڵ鿡°Ô´Â ¸¹Àº µµ¿òÀÌ µÉ °Í °°´Ù.
Àü¹ÝÀûÀ¸·Î Paper¶ó´Â ¾Û Çϳª¸¦ ¼±Á¤ÇÏ¿© PWAÀÇ ÁÖ¿ä ±â´ÉÀ» Çϳª¾¿ ±¸ÇöÇØ³ª°¡´Â °úÁ¤ÀÌ ÅëÀϼºÀ» ºÎ¿©ÇÏ¿© ÁýÁß·ÂÀ» ³ô¿©ÁÖ´Â ±¸¼ºÀÌ ¹é¹ÌÀÌ´Ù. ´õºÒ¾î PWAÀÇ ÁÖ¿ä ±â´ÉµéÀ» µðÅ×ÀÏÇÏ°Ô ´Ù·ç°í Àֱ⿡ Ãʺ¸ÀÚµµ ½±°Ô µû¶óÇØº¸¸ç ±â´É°ú °³³äÀ» ÀÍÈú ¼ö ÀÖ´Ù´Â Á¡ÀÌ ÀåÁ¡ÀÌ´Ù. ´õºÒ¾î °¡µ¶¼ºÀÌ ÁÁ¾Æ ¸Å²ô·´°Ô ÀÐÈù´Ù.
PWA¿¡ °ü½ÉÀÌ Àְųª ¾Û °³¹ßÀ» óÀ½ ½ÃÀÛÇÏ´Â ºÐÀ̶ó¸é º» µµ¼·Î ½ÃÀÛÇÒ °ÍÀ» ÃßõÇÏ°í ½Í´Ù.
Ã¥¼Ò°³ - SNS ¾Û ¿¹Á¦·Î ¹è¿ì´Â ÇÁ·Î±×·¹½Ãºê À¥ ¾Û
´Ý±â