웹 카카오톡의 상태 관리: 바닐라 상태 관리 모듈과 리액트의 조화

#front-end #vanillajs

웹카카오톡은 복잡한 비즈니스 로직은 vanilla JS 로, 화면을 구성하는 영역은 React 로 분리하여 개발하고 있습니다
프론트엔드 프로젝트의 비즈니스 영역을 vanilla JS 로 개발하게 된 이유와 개발을 진행하면서 마주했던 경험 및 장단점에 대해 공유합니다

발표자 : felix.lee
카카오에서 프론트엔드 개발을 하고있습니다.

Transcript

2. ਢ
   ஠஠য়సী
   ؀ೞৈ ਢస੄
   ࢚కҙܻ
   ҳઑ ܻঘ౟
   ߆੄
   ۽૒ਸ
   োѾೞӝ ੸ਊ
   दաܻয় Ѿۿ
3. ਢ
   ஠஠য়సী
   ؀ೞৈ ਢస੄
   ࢚కҙܻ
   ҳઑ ܻঘ౟
   ߆੄
   ۽૒ਸ
   োѾೞӝ ੸ਊ
   दաܻয় Ѿۿ
4. ਢ
   ஠஠য়స  ࢎਊоמೠ
   ݽٚ
   ਤ஖ীࢲ
   ઁҕоמ  ৈ۞
   ఋੑ੄
   ଻౴ߑ
   ૑ਗ  ӝఋ
   জ
   ௿ۄ੉঱౟੄
   ӝמ
   ઁҕ
   ݾ಴
5. ਢస
   ѐߊ
   द੘
   ׼द ਢస
   ѐߊਸ
   ೧ঠ೧ਃ ӝദ੉ی
   ٣੗ੋ੉
   ੓աਃ ইַ Ӓۢ
   ੷ח
   ޤ೧ਃ
6. ,BLBP5BML "1*
7. QSPUPUZQF TUBUF QSPEVDU
8. TUBUF QSPEVDU QSPUPUZQF
9. ਢ
   ஠஠য়సী
   ؀ೞৈ ਢస੄
   ࢚కҙܻ
   ҳઑ ܻঘ౟
   ߆੄
   ۽૒ਸ
   োѾೞӝ ੸ਊ
   दաܻয় Ѿۿ
10. ਢస੄
    ਃ୒
    ୊ܻ
    ࣽࢲ 1SPWJEFS -PHJDT 4UBUF&NJUUFS "QQMJDBUJPO #VTJOFTT
    .PEVMF
11. ਢస੄
    ਃ୒
    ୊ܻ
    ࣽࢲ 1SPWJEFS -PHJDT 4UBUF&NJUUFS "QQMJDBUJPO #VTJOFTT
    .PEVMF  ࢲߡ
    ਃ୒੄
    ࣻन
    ߂
    ੹౵
12. ਢస੄
    ਃ୒
    ୊ܻ
    ࣽࢲ 1SPWJEFS -PHJDT 4UBUF&NJUUFS "QQMJDBUJPO #VTJOFTT
    .PEVMF  ࢲߡ
    ਃ୒੄
    ࣻन
    ߂
    ੹౵  ੉߮౟
    ࠙ܨ
    Ѩૐ
    ߂
    ੹୊ܻ
    ١੄
    ۽૒
    ࣻ೯
13. ਢస੄
    ਃ୒
    ୊ܻ
    ࣽࢲ 1SPWJEFS -PHJDT 4UBUF&NJUUFS "QQMJDBUJPO #VTJOFTT
    .PEVMF  ࢲߡ
    ਃ୒੄
    ࣻन
    ߂
    ੹౵  ੉߮౟
    ࠙ܨ
    Ѩૐ
    ߂
    ੹୊ܻ
    ١੄
    ۽૒
    ࣻ೯  ୭ઙ
    ࢚క
    ࢤࢿ
    ߂
    ߈৔
14. ਢస੄
    ਃ୒
    ୊ܻ
    ࣽࢲ 1SPWJEFS -PHJDT 4UBUF&NJUUFS "QQMJDBUJPO #VTJOFTT
    .PEVMF  ࢲߡ
    ਃ୒੄
    ࣻन
    ߂
    ੹౵  ੉߮౟
    ࠙ܨ
    Ѩૐ
    ߂
    ੹୊ܻ
    ١੄
    ۽૒
    ࣻ೯  ୭ઙ
    ࢚క
    ࢤࢿ
    ߂
    ߈৔  ৻ࠗ
    ݫࢲ٘
    ੿੄
    ߂
    ؘ੉ఠ
    ҳة
    ઁয
15. ਢస੄
    ਃ୒
    ୊ܻ
    ࣽࢲ 1SPWJEFS -PHJDT 4UBUF&NJUUFS "QQMJDBUJPO #VTJOFTT
    .PEVMF
16.  ӝמ
    ୶оী
    ٮܲ
    ೙ਃ
    ё୓
    ࣻ
    ૐо  ё୓
    р
    ҙ҅੄
    ૐо  ࠙ӝ߹
    ࣗాೞח
    ё୓੄
    ஂࢎࢶఖ
    ೙ਃ  ё୓੄
    ࢤઓ
    ઱ӝ
    ҙܻ ё୓
    ҙܻ੄
    ࠗ׸
    ª
    ё୓੄
    ҙܻ
    ߑߨ
    بੑ
    ೙ਃ
17. ё୓
    р
    ҙ҅
    ഋࢿ   
18. ੄ઓࢿ
    ઱ੑ  *OWFSTJGZ+4  ё୓
    ղ
    ࢤࢿ
    ଼੐
    ઁѢ  ੄ઓࢿ੄
    ҳഅ୓ী
    ੄ઓೞ૑
    ঋ਺
19. ੄ઓࢿ
    ઱ੑ  ё୓
    ١۾
    റ
    ஶప੉ցী
    ੄ઓࢿҙܻ
    ਤ੐  ؘ௏ۨ੉ఠ
    ӝ߈੄
    ੄ઓࢿ
    ୓௼
    ߂
    ઑ݀
20. ੄ઓࢿ
    ઱ੑ .FTTBHF3FQPTJUPSZ 6TFS4FSWJDF /JDLOBNF$POWFUFS $PNQMFY4FSWJDF $POUBJOFS DSFBUF DSFBUF DBDIFE JOKFDU       SFTPMWF
    
21. ਢ
    ஠஠য়సী
    ؀ೞৈ ਢస੄
    ࢚కҙܻ
    ҳઑ ܻঘ౟
    ߆੄
    ۽૒ਸ
    োѾೞӝ ੸ਊ
    दաܻয় Ѿۿ
22. NPEVMF TUBUF WJFX ߄קۄ
    ࢚కҙܻ
    ݽٕ
23.  3FBDU
    
    ੄
    زदࢿ
    ۪؊݂  ਬ੷
    ੑ۱١੄
    Ҋ਋ࢶࣽਤ
    ਃ୒ਸ
    ۪؊݂
    ઺
    ୊ܻ 
    ۪؊݂
    ઺
    ࢚క߸ച۽
    ஹನք౟р
    زӝച
    ੉ग UFBSJOH
24. VTF4ZOD&YUFSOBM4UPSF 
    TVCTDSJCF
    
    झషয੄
    ߸ചܳ
    ঌܿ 
    HFU4OBQTIPU
    
    झషয
    ࢚కܳ
    ઁҕ
    XJUI
    0CKFDUJT
    
25. ӝઓ
    ࢚కҙܻبҳ੄
    ࢚క
    оઉয়ӝ
26. ࢚ࠗ࠙క
    ઑഥ
    ൑ղղӝ
27. ࢚ࠗ࠙క
    ઑഥ
    ൑ղղӝ SPPU4UBUF $PNQPOFOU QBSUJBM4UBUF
28. 4FMFDUPS
    1BUUFSO
29. VTF4ZOD&YUFSOBM4UPSF8JUI4FMFDUPS
30. VTF4ZOD&YUFSOBM4UPSF8JUI4FMFDUPS
31. VTF4ZOD&YUFSOBM4UPSF8JUI4FMFDUPS
32. ਢ
    ஠஠য়సী
    ؀ೞৈ ਢస੄
    ࢚కҙܻ
    ҳઑ ܻঘ౟
    ߆੄
    ۽૒ਸ
    োѾೞӝ ੸ਊ
    दաܻয় Ѿۿ
33.  VTF4ZOD&YUFSOBM4UPSF
    ۽
    ࠺ૉפझ
    ݽٕী
    োѾ  ࢲߡীࢲ
    ࢜۽਍
    ݫद૑
    ࣻन  ݫद૑ী
    ؀ೠ
    ੹୊ܻ
    ࣻ೯  ୭ઙ࢚కী
    ࣻनػ
    ݫद૑
    ੿ࠁܳ
    ߈৔  VTF4ZOD&YUFSOBM4UPSF
    ലਸ
    ా೧
    ܻঘ౟
    ౟ܻী
    ߈৔ ৘ઁ
    दաܻয়
34. ৘ઁ
    दաܻয়  ੹߈੸ੋ
    ҳઑ
    ࢸݺ 1SPWJEFS VTF4ZOD&YUFSOBM4UPSF -PHJDT 4UBUF&NJUUFS "QQMJDBUJPO 7JFX #VTJOFTT
    .PEVMF $PNQPOFOU $PNQPOFOU
35. ৘ઁ
    दաܻয়  ੹߈੸ੋ
    ҳઑ
    ࢸݺ 1SPWJEFS VTF4ZOD&YUFSOBM4UPSF -PHJDT 4UBUF&NJUUFS "QQMJDBUJPO 7JFX #VTJOFTT
    .PEVMF $PNQPOFOU $PNQPOFOU
36. ৘ઁ
    दաܻয়  ੹߈੸ੋ
    ҳઑ
    ࢸݺ 1SPWJEFS VTF4ZOD&YUFSOBM4UPSF -PHJDT 4UBUF&NJUUFS "QQMJDBUJPO 7JFX #VTJOFTT
    .PEVMF $PNQPOFOU $PNQPOFOU
37. ৘ઁ
    दաܻয় 1SPWJEFS -PHJDT 4UBUF&NJUUFS "QQMJDBUJPO  ࢲߡ
    ਽׹
    ؀ӝ
    ੉߮౟
    ࣻन
38. ৘ઁ
    दաܻয় 1SPWJEFS -PHJDT 4UBUF&NJUUFS "QQMJDBUJPO  ࣻनػ
    ݫद૑
    ୊ܻ
    ࢚క
    јन
    ߂
    ੹౵ਃ୒
39. ৘ઁ
    दաܻয় 1SPWJEFS -PHJDT 4UBUF&NJUUFS "QQMJDBUJPO  ୭ઙ࢚క
    ࢤࢿ
    ߂
    ੹౵
40. ৘ઁ
    दաܻয় 1SPWJEFS -PHJDT 4UBUF&NJUUFS "QQMJDBUJPO  ৻ࠗ
    ઁҕ
41. ৘ઁ
    दաܻয় TVCTDSJCF DBMMCBDL HFU4OBQTIPU 
    4UBUF DBMMCBDL VTF4ZOD&YUFSOBM4UPSF "QQMJDBUJPO
42. ਢ
    ஠஠য়సী
    ؀ೞৈ ਢస੄
    ࢚కҙܻ
    ҳઑ ܻঘ౟
    ߆੄
    ۽૒ਸ
    োѾೞӝ ੸ਊ
    दաܻয় Ѿۿ
43.  ࠭
    ৔৉җ
    ܻ࠙ػ
    ࠺ૉפझ۽૒
    ਋ࢶ
    ѐߊਸ
    ਤೠ
    ߄קۄ
    ݽٕ
    ҳഅ  ܻঘ౟
    ৔৉ী
    ৻ࠗ
    झషযܳ
    ੸ਊೞӝ
    ਤೠ
    ലੋ
    VTF4ZOD&YUFSOBM4UPSF  ࢚ࠗ࠙క
    ҳةਸ
    ਤೠ
    VTF4ZOD&YUFSOBM4UPSF8JUI4FMFDUPS Ѿۿ
44.  ҳઑ
    ࢸ҅ী
    ؀ೠ
    ۞׬ழ࠳  ࠛ߸ࢿ
    ё୓
    ҙܻ  ё୓р
    ੄ઓࢿ
    ҙܻ
    ੿଼  ࠭
    ۽૒
    ܻ࠙ܳ
    ాೠ
    ਬোೠ
    ҳઑ
    ߸҃
    ؀਽оמ റӝ
45. 2"
46. &0%