ÁÖ½Äȸ»ç ÀÎÇÁ·¦

[ÀÎÇÁ·±] ÇÁ·ÐÆ®¿£µå °³¹ßÀÚ

¸ðÁýºÎ¹® ¹× ÀÚ°Ý¿ä°Ç

¸ðÁýºÎ¹® ´ã´ç¾÷¹«

ÇÁ·ÐÆ®¿£µå
°³¹ßÀÚ

ÀÎÇÁ·± ¼­ºñ½ºÀÇ ÇÙ½ÉÀÎ ÇÁ·ÐÆ®¿£µå ½Ã½ºÅÛ °³¹ß ¾÷¹«¸¦ ´ã´çÇÕ´Ï´Ù.

TypeScript / React / Next.js ±â¹ÝÀÇ À¥ ÇÁ·ÐÆ®¿£µå¿Í React Native ±â¹ÝÀÇ ¸ð¹ÙÀÏ ¾ÛÀ» ºü¸£°í ¾ÈÁ¤ÀûÀ¸·Î ±¸ÃàÇϸç, ±â¼úÀû ¿Ï¼ºµµ»Ó ¾Æ´Ï¶ó ºñÁî´Ï½º ÀÓÆÑÆ®¿Í »ç¿ëÀÚ °æÇèÀ» ÇÔ²² °í¹ÎÇÏ´Â ÇÁ·ÐÆ®¿£µå ¿£Áö´Ï¾î¸¦ ã½À´Ï´Ù.

[´ã´ç¾÷¹«]

- TypeScript, React, Next.js(Pages Router) ±â¹ÝÀ¸·Î ÀÎÇÁ·± ¼­ºñ½ºÀÇ À¥ ÇÁ·ÐÆ®¿£µå¸¦ °³¹ßÇÏ°í ¹èÆ÷ÇÕ´Ï´Ù.

- React Native ±â¹ÝÀ¸·Î ÀÎÇÁ·± Android/iOS ¸ð¹ÙÀÏ ¾ÛÀ» °³¹ßÇÏ°í ¹èÆ÷ÇÕ´Ï´Ù.

- pnpm + Turborepo ¸ð³ë·¹Æ÷ ȯ°æ¿¡¼­ À¥°ú ¸ð¹ÙÀÏÀÌ ÇÔ²² »ç¿ëÇÏ´Â °ø¿ë ÆÐŰÁö¿Í ¼­ºñ½º Äڵ带 °ü¸®ÇÕ´Ï´Ù.

- Module Federation(Micro Frontend)À» Ȱ¿ëÇØ µ¶¸³ÀûÀ¸·Î °³¹ß¡¤¹èÆ÷ °¡´ÉÇÑ ÇÁ·ÐÆ®¿£µå ¾ÆÅ°ÅØÃ³¸¦ ¿î¿µÇÕ´Ï´Ù.

-TanStack Query¸¦ Ȱ¿ëÇÑ ¼­¹ö »óÅ °ü¸®¿Í SSR/CSRÀ» »óȲ¿¡ ¸Â°Ô ÀûÀýÈ÷ ¼±ÅÃÇÏ¿© ÃÖÀûÀÇ »ç¿ëÀÚ °æÇèÀ» Á¦°øÇÕ´Ï´Ù.

- »óȲ¿¡ ¸Â°Ô ³×ÀÌÆ¼ºê ±¸Çö°ú WebView ±¸ÇöÀ» ÀûÀýÈ÷ ³ª´² ÁøÇàÇÕ´Ï´Ù.

- Mantine ±â¹Ý ÀÚü µðÀÚÀÎ ½Ã½ºÅÛÀ» Ȱ¿ëÇØ ÀϰüµÈ UI¸¦ ±¸ÇöÇϰí, Àç»ç¿ë °¡´ÉÇÑ ÄÄÆ÷³ÍÆ®¸¦ °³¹ßÇÕ´Ï´Ù.

- Mixpanel, GTM µîÀ» Ȱ¿ëÇÑ »ç¿ëÀÚ Çൿ ºÐ¼®°ú HackleÀ» ÅëÇÑ A/B Å×½ºÆ®·Î µ¥ÀÌÅÍ ±â¹ÝÀÇ Á¦Ç° °³¼±¿¡ Âü¿©ÇÕ´Ï´Ù.

- i18next, locize¸¦ Ȱ¿ëÇØ Çѱ¹¾î, ¿µ¾î, ÀϺ»¾î, º£Æ®³²¾î µî ´Ù±¹¾î ¼­ºñ½º¸¦ Áö¿øÇÕ´Ï´Ù.
- DatadogÀ» ÅëÇØ À¥/¸ð¹ÙÀÏ ¿¡·¯ ÃßÀû, ÆäÀÌÁö ·Îµå ½Ã°£, API ÀÀ´ä ¼Óµµ µîÀ» ½Ç½Ã°£À¸·Î ¸ð´ÏÅ͸µÇÏ¸ç ¼º´É º´¸ñ ÁöÁ¡À» ¹ß°ßÇÏ°í °³¼±ÇÕ´Ï´Ù.
- Äڵ帮ºä(¿Â¶óÀÎ PR, ¿ÀÇÁ¶óÀÎ Æä¾îÇÁ·Î±×·¡¹Ö)¸¦ ÅëÇØ ÇÔ²² ¼ºÀåÇÏ´Â ¹®È­¸¦ ¸¸µé¾î °©´Ï´Ù.



ÀÚ°Ý¿ä°Ç

¾Æ·¡ °³¹ßÆÀÀÇ ¹Ì¼Ç°ú °¡Ä¡¿¡ µ¿ÀÇÇϽô ºÐÀ̾î¾ß ÇÕ´Ï´Ù. 
https://tech.inflab.com/20231117-devteam-value/


- TypeScript¿¡ ´ëÇÑ ÀÌÇØ°¡ ÀÖÀ¸¸ç, Á¤Àû ŸÀÔ ±â¹ÝÀÇ ¾ÈÁ¤ÀûÀÎ °³¹ßÀ» ÁöÇâÇϽô ºÐ
- React ±â¹Ý ÇÁ·ÐÆ®¿£µå °³¹ß °æÇèÀÌ ÀÖÀ¸½Å ºÐ
- HTML, CSS µî ¸¶Å©¾÷¿¡ ´ëÇÑ ÃæºÐÇÑ ÀÌÇØµµ°¡ ÀÖÀ¸½Å ºÐ
- SSR, CSR¿¡ ´ëÇÑ ±âº»ÀûÀÎ ÀÌÇØ°¡ ÀÖÀ¸½Å ºÐ
- HTTP Åë½Å¿¡ ´ëÇÑ ±âº»ÀûÀÎ ÀÌÇØ, RESTful API¿¡ ´ëÇÑ ¼³°è³ª °³¹ß °æÇèÀÌ ÀÖÀ¸½Å ºÐ
- ¹ÝÀÀÇü À¥ °³¹ß¿¡ ´ëÇÑ ÀÌÇØ°¡ ÀÖÀ¸½Å ºÐ
- Git°ú Github¿¡ ´ëÇÑ ±âº»ÀûÀÎ »ç¿ë¹ýÀ» ¾Ë°í ÀÖ°í, Git Flow¸¦ ÀÌÇØÇÏ°í °è½Å ºÐ 


¿ì´ë»çÇ×  ¾Æ·¡ ±â¼ú °æÇèÀÌ ²À ÀÖ¾î¾ß¸¸ ÇÏÁø ¾Ê½À´Ï´Ù. 🙂

- Next.js ±â¹ÝÀÇ SSR/SSG ÇÁ·ÎÁ§Æ® °æÇèÀÌ ÀÖÀ¸½Å ºÐ

- ¸ð³ë·¹Æ÷(pnpm, Turborepo µî) ȯ°æ¿¡¼­ °³¹ßÇØº» °æÇèÀÌ ÀÖÀ¸½Å ºÐ

- Micro Frontend(Module Federation) ¾ÆÅ°ÅØÃ³¸¦ ´Ù·ïº» °æÇèÀÌ ÀÖÀ¸½Å ºÐ

- TanStack Query µî ¼­¹ö »óÅ °ü¸® ¶óÀ̺귯¸®¸¦ ½Ç¹«¿¡¼­ Ȱ¿ëÇØº» °æÇèÀÌ ÀÖÀ¸½Å ºÐ

- Webpack, Vite µî ¹øµé·¯¸¦ Á÷Á¢ ±¸¼ºÇϰųª, ºôµå °ü·Ã ¹®Á¦¸¦ ÇØ°áÇØº» °æÇèÀÌ ÀÖÀ¸½Å ºÐ

- À¥Ç¥ÁØ, À¥Á¢±Ù¼º¿¡ ´ëÇÑ ÀÌÇØ ¶Ç´Â ½Ç¹« °æÇèÀÌ ÀÖÀ¸½Å ºÐ

- i18n(´Ù±¹¾î) ¼­ºñ½º °³¹ß °æÇèÀÌ ÀÖÀ¸½Å ºÐ

- A/B Å×½ºÆ®, ±â´É Ç÷¡±× µî ½ÇÇè ±â¹Ý °³¹ß °æÇèÀÌ ÀÖÀ¸½Å ºÐ

- React Native¸¦ Ȱ¿ëÇÑ ¸ð¹ÙÀÏ ¾Û °³¹ß ¹× ¹èÆ÷ °æÇèÀÌ ÀÖÀ¸½Å ºÐ

- Android/iOS ´Ù¾çÇÑ È¯°æ°ú µð¹ÙÀ̽º¿¡ ÀûÇÕÇÑ UI/UX¿¡ ´ëÇÑ ÀÌÇØ°¡ ÀÖÀ¸½Å ºÐ

- ¸ð¹ÙÀÏ ¾Û¿¡¼­ÀÇ ³×ÀÌÆ¼ºê ¸ðµâ ¿¬µ¿ µî È¿À²ÀûÀÎ ¹èÆ÷ °ü¸® °æÇèÀÌ ÀÖÀ¸½Å ºÐ

- ¸ð¹ÙÀÏ OSº° ´Ù¾çÇÑ Æ®·¯ºí ½´ÆÃ(WebView, ¿µ»ó Ç÷¹À̾î, OAuth µî) °æÇèÀÌ ÀÖÀ¸½Å ºÐ

- ¿ÀǼҽº¿¡ ±â¿©Çغ» °æÇèÀÌ ÀÖÀ¸½Å ºÐ

- (ÁִϾîºÐµéÀ̶ó¸é) À§ ¾ð±ÞµÇ¾î ÀÖ´Â °³³äµéÀ» ¸ô¶óµµ ºü¸£°Ô ³» °ÍÀ¸·Î ¸¸µé ¼ö ÀÖ´Â ³ª¸¸ÀÇ ÇнÀ¹ýÀ» °¡Áö°í °è½Å ºÐ

- (°æ·Â¹«°ü) ¿î¿µ/±âȹ ÆÄÆ® µî °³¹ßÀÚ°¡ ¾Æ´Ñ ºÐµé²² »óȲÀ» ¼³¸íÇÒ ¶§ ±×µéÀÇ ÀÔÀå¿¡¼­, ±×µéÀÇ ¾ð¾î·Î À̾߱âÇÏ´Â °Ô ´ç¿¬ÇϽŠºÐ

- (°æ·Â¹«°ü) ´ëÈ­º¸´Ù ÇϳªÀÇ ¹®¼­¸¦ ÀÛ¼ºÇÏ°í °øÀ¯Çϱæ ÁÁ¾ÆÇϽô ºÐ


À§ ±â¼úÀû °æÇè ¿Ü¿¡ ÆÀ¿øÀ¸·Î¼­ ´ÙÀ½°ú °°Àº ºÐµé°ú ÇÔ²²ÇÏ°í ½Í¾î¿ä.


¼ÒÅë°ú Åõ¸í¼º

ÀÛ¾÷ ÁøÇà »óȲ, À̽´, ¿Ï·á ¿¹Á¤ÀÏÀ» ¸ÕÀú °øÀ¯ÇÏ¿© µ¿·á(PM, BE, PD)°¡ ´ÙÀ½ ´Ü°è¸¦ ¿¹ÃøÇÒ ¼ö ÀÖ°Ô ¸¸µå½Ã´Â ºÐ
- "¾È µÅ¿ä"°¡ ¾Æ´Ï¶ó, ¾î¶² ½Ãµµ¸¦ Çß°í ¿øÀÎÀÌ ¹«¾ùÀÎÁö ¸Æ¶ôÀ» ÇÔ²² Àü´ÞÇØÁֽô ºÐ
- Ÿ Á÷±º¿¡°Ô ±â¼úÀû Á¦¾àÀ» ¼³¸íÇÒ ¶§, ±×µéÀÇ ¾ð¾î·Î ÀÌÇØÇϱ⠽±°Ô Ç®¾î¼­ À̾߱âÇϽô ºÐ
- ¹®¼­È­(±â´É¸í¼¼¼­, ¿î¿µ ¸Å´º¾ó, ÀμöÀÎ°è ¹®¼­ µî)¸¦ ÅëÇØ Áö½ÄÀ» ÆÀ¿¡ °øÀ¯ÇϽô ºÐ


¸»º¸´Ù ½Ã°¢È­·Î Áõ¸íÇϴ ŵµ
- ¾ÆÀ̵ð¾î Á¦¾È ½Ã ºü¸£°Ô ÇÁ·ÎÅäŸÀÔÀ» ¸¸µé¾î ´«À¸·Î º¸¿©Áֽô ºÐ
- ±â¼ú µµÀÔ Àü POC(Proof of Concept)¸¦ ÅëÇØ °ËÁõÇÑ µÚ ÆÀ¿¡ Á¦¾ÈÇϽô ºÐ
- º»ÀÎÀÌ ¸¸µç ¼­ºñ½º¸¦ ½ÇÁ¦ ¿î¿µ±îÁö ÇØº¸½Å ºÐ


ºñÁî´Ï½º ÀÓÆÑÆ®¸¦ ¿ì¼±ÇÏ´Â °üÁ¡
"¿Ö ÀÌ ±â´ÉÀ» ¸¸µå´Â°¡?"¸¦ ¸ÕÀú ¹¯°í, ±âȹ Àǵµ¿¡ ¸ÂÃç ±â¼úÀû ´ë¾ÈÀ» Á¦½ÃÇϽô ºÐ
- È­·ÁÇÑ ±â¼ú ½ºÅú¸´Ù ¼­ºñ½ºÀÇ ¾ÈÁ¤¼º°ú »ç¿ëÀÚ ÆíÀǸ¦ ÃÖ¿ì¼±À¸·Î µÎ½Ã´Â ºÐ
- ±âȹ¼­¸¦ º¸°í ±â¼úÀûÀ¸·Î ¹®Á¦°¡ µÉ ºÎºÐÀ» ¹Ì¸® ÆÄ¾ÇÇØ °øÀ¯ÇϽô ºÐ
- »ç¿ëÀÚ Çൿ µ¥ÀÌÅ͸¦ ±â¹ÝÀ¸·Î Á¦Ç° °³¼±¿¡ Âü¿©ÇϽаæÇèÀÌ ÀÖÀ¸½Å ºÐ


ÆÀÀÇ ÁüÀ» ´ú¾îÁÖ´Â ¿Ï°á¼º
Å×½ºÆ®ÄÚµå ÀÛ¼º, Storybook ¹®¼­È­ µî ÀÚü °ËÁõ ü°è¸¦ °®Ãß°í °è½Å ºÐ
- ÆÀÀÇ ºñÈ¿À²(¹Ýº¹ ÀÛ¾÷, ¹®¼­È­ ºÎÀç)À» ½º½º·Î ã¾Æ °³¼±Çϰí ÀÚµ¿È­Çغ» °æÇèÀÌ ÀÖÀ¸½Å ºÐ
- µðÀÚÀÎ ½Ã½ºÅÛ, UI ¶óÀ̺귯¸® ±¸Ãà µî ÆÀ ÀüüÀÇ »ý»ê¼º Çâ»ó¿¡ ±â¿©Çغ» °æÇèÀÌ ÀÖÀ¸½Å ºÐ
- À¥ ¼­ºñ½º ¼º´É °³¼±(Lighthouse, code splitting, ¹øµé ÃÖÀûÈ­ µî)À» ÁøÇàÇØº» °æÇèÀÌ ÀÖÀ¸½Å ºÐ
- Datadog µî ¸ð´ÏÅ͸µ µµ±¸¸¦ Ȱ¿ëÇØ ¿¡·¯¸¦ ÃßÀûÇϰí Àå¾Ö¸¦ ÇØ°áÇØº» °æÇèÀÌ ÀÖÀ¸½Å ºÐ
- µ¿ÀÏ Àå¾Ö Àç¹ß ¹æÁö¸¦ À§ÇØ ½Ã½ºÅÛ/ÇÁ·Î¼¼½º °³¼±À» ÇØº¸½Å ºÐ




0 ¸í

±Ù¹«Á¶°Ç

  • °í¿ëÇüÅÂ: Á¤±ÔÁ÷(¼ö½À±â°£3°³¿ù)
  • ±Þ¿©Á¶°Ç: ȸ»ç³»±Ô

ÀüÇü´Ü°è ¹× Á¦Ãâ¼­·ù

  • ÀüÇü´Ü°è: ¼­·ùÀüÇü > ½ÃÇèÁøÇà > ¸éÁ¢ÁøÇà > 2Â÷¸éÁ¢ÁøÇà > ÃÖÁ¾ÇÕ°Ý
  • Ãß°¡ Á¦Ãâ¼­·ù
    À̷¼­, ÀÚ±â¼Ò°³¼­

Á¢¼ö¹æ¹ý

  • Á¢¼ö¹æ¹ý: ÀÚ»ç ȨÆäÀÌÁö

±âŸ À¯ÀÇ»çÇ×

  • ÀÔ»çÁö¿ø¼­ ¹× Á¦Ãâ¼­·ù¿¡ ÇãÀ§»ç½ÇÀÌ ÀÖÀ» °æ¿ì ä¿ëÀÌ Ãë¼ÒµÉ ¼ö ÀÖ½À´Ï´Ù.

00