Upgrade to Pro — share decks privately, control downloads, hide ads and more …

선물하기 프론트엔드 성능 개선기

kakao
November 01, 2024

선물하기 프론트엔드 성능 개선기

#front-end #angular #웹 성능

선물하기 프론트엔드 성능을 개선하면서 고민 했던 것들 그리고 적용한 기술들에 대해 공유하고자 합니다.

발표자 : fleek.moon
선물하기 서비스에서 프론트엔드 개발을 하고 있는 플릭입니다. 유저에게 더 나은 서비스 경험을 선사하기 위해 늘 노력합니다.

kakao

November 01, 2024
Tweet

More Decks by kakao

Other Decks in Programming

Transcript

  1. ӝসٜ੄ࢿמѐࢶ੉റѾҗ ࢿמѐࢶ੉റ ؀ӝदр੉хࣗೞҊ 4&0౟ې೗੉ૐо೮ਵݴ оੑ੹ജਯ੉ૐо೮׮ 
 1JOUFSFTU ಕ੉૑۽٘दр੉ୡ ѐࢶؼٸ݃׮੹ജਯ੉ ୭؀ૐо೮׮

    NTѐࢶؼٸ݃׮ ࣻ੊੉୭؀ૐо೮׮ 
 8BMNBSU $PSF8FC7JUBMTীై੗റ ߑޙ੗׼ࣻ੊੉ ੹ജਯ੉ૐо೮׮ 3BLVUFO     1JOUFSFTU&OHJOFFSJOH t%SJWJOH6TFS(SPXUIXJUI1FSGPSNBODF*NQSPWFNFOUTu ֙ਘੌ IUUQT NFEJVNDPNQJOUFSFTU - FOHJOFFSJOHESJWJOH - VTFS - HSPXUI - XJUI - QFSGPSNBODF - JNQSPWFNFOUT - DGDEBGBEE  4MJEFTIBSF t8BMNBSU1BHF4QFFE4MJEFu ֙ਘੌ IUUQT XXXTMJEFTIBSFOFUEFWPOBVFSTXBMEXBMNBSU - QBHFTQFFETMJEF  8FCEFW t3BLVUFO$BTF4UVEZu ֙ਘੌ IUUQT XFCEFWDBTF - TUVEJFTSBLVUFOPQUJNJ[F@JNBHFT
  2. "4 - *4 50 - #& '"45(ӝળ ୡ '"45(ӝળ ୡ

    ѐ੄੉޷૑ .# ѐ੄੉޷૑ .#
  3. ࢲߡ ࢎղ$%/ ೐ۿ౟ূ٘ "1*ਃ୒ ੉޷૑63-਽׹ 
 1/( +1( (*' ܻࢎ੉૚ػ੉޷૑߂

    ઑѤ୽઒द8FC1ನݘ਽׹ ܻࢎ੉૚߂ઑѤীٮۄ 8FC1߸ജਃ୒
  4. 80''ನݘਸ ݫੋಪ౟۽ೡद 
 ѐ੄ಪ౟౵ੌ୨.# .# "4 - *4 50 -

    #& 80''ನݘਸ ݫੋಪ౟۽ೡद 
 ѐ੄ಪ౟౵ੌ୨.# ಪ౟ನݘ୭੸ച੸ਊदѾҗ
  5. "4 - *4 50 - #& ಪ౟ನݘ୭੸ച੸ਊदѾҗ௏٘ /* css file

    */ @font-face{ font-family:'Roboto'; src: local("Roboto Regular"), local("Roboto-Regular"), url(Roboto-Regular.woff) format("woff"), url(Roboto-Regular.woff2) format(“woff2") } /* css file */ @font-face{ font-family:'Roboto'; src: local("Roboto Regular"), local("Roboto-Regular"), url(Roboto-Regular.woff2) format("woff2"), url(Roboto-Regular.woff) format("woff") }
  6. JOEFYIUNMীࢲౠ੿"1*ഐ୹޷ܻೞӝ$0%& 50 - #& /* in index.html */ fetch(API) .then(function

    (response) { return response.json(); }) .then(function (data) { window[API_KEY] = data; }); /* in framework */ const cacheResponse = get(window, API_KEY); if (cacheResponse) { set(window, API_KEY, null); return cacheResponse; } return await fetch(API);
  7. const yarnLockDependencies = { 'lodash' : ['4.17.21'], 'locate-path' : ['6.0.0'],

    'lottie-web' : ['5.12.2', '5.9.6'], '@sentry/browser' : ['6.18.1', '5.30.0'] } ZBSOMPDL ୶୹ const targetDuplicationDependencies = {
  8. ZBSOMPDL ୶୹ $-*ହ୭ઙѾҗ֢୹ const yarnLockDependencies = { 'lodash' : ['4.17.21'],

    'locate-path' : ['6.0.0'], 'lottie-web' : ['5.12.2', '5.9.6'], '@sentry/browser' : ['6.18.1', '5.30.0'] } const targetDuplicationDependencies = { 'lottie-web': ['5.12.2', '5.9.6'], '@sentry/browser': ['6.18.1', '5.30.0'] } %JSFDU%FQFOEFODZ ୶୹
  9. ZBSOMPDL ୶୹ $-*ହ୭ઙѾҗ֢୹ const targetDuplicationDependencies = { 'lottie-web': ['5.12.2', '5.9.6'],

    '@sentry/browser': ['6.18.1', '5.30.0'] } %JSFDU%FQFOEFODZ ୶୹ const yarnLockDependencies = {
  10. ௏٘झ೒ܻ౴Ҋبചࢎղটӑ۞ۄ੉࠳۞ܻ50 - #& 3PPU "1BHF *OUFSTFDUJPO #1BHF DBSPVTFM - JUFN

    ۄ੉࠳۞ܻ য೒ܻா੉࣌ ࠽٘ TSD DPNNPO DPNNPOJOUFSTFDUJPO DPNNPODBSPVTFM - JUFN OH - QBDLBHSXJUITFDPOEBSZ - FOUSZQPJOU
  11. ૑ਗೞח࠳ۄ਋੷ജ҃ী؀ೠಫܻ೙୶୹ೞӝ import 'core-js'; import "core-js/modules/es.symbol.description.js"; import "core-js/modules/es.symbol.async-iterator.js"; import "core-js/modules/es.symbol.match-all.js"; import

    "core-js/modules/es.error.cause.js"; import "core-js/modules/es.aggregate-error.js"; import "core-js/modules/es.aggregate-error.cause.js"; import "core-js/modules/es.array.at.js"; import "core-js/modules/es.array.find-last.js"; import "core-js/modules/es.array.find-last-index.js"; "4 - *4 50 - #&
  12. ૑ਗೞח࠳ۄ਋੷ജ҃ী؀ೠಫܻ೙୶୹ೞӝ import "core-js/stable"; import "regenerator-runtime/runtime"; import "core-js/modules/es.symbol.description.js"; import "core-js/modules/es.symbol.async-iterator.js"; import

    "core-js/modules/es.symbol.match-all.js"; import "core-js/modules/es.error.cause.js"; import "core-js/modules/es.aggregate-error.js"; import "core-js/modules/es.aggregate-error.cause.js"; import "core-js/modules/es.array.at.js"; import "core-js/modules/es.array.find-last.js"; import "core-js/modules/es.array.find-last-index.js"; */165 ౟ےझ౵ੌ 065165 CSPXTFSMJTUSD VTF#VJMU*OTtFOUSZuJO#BCFM
  13. 4FSWFS DPSF - KT - DPNQBU VTFSBHFOU ୶୹ػDPSF - KTMJTUܳా೧

    ݒடغחझ௼݀౟௏٘ࢤࢿ ࠳ۄ਋੷ী੹׳
  14. 5*1  ਬ੷੄৔৉߹ੋఠۑ࣌ FY௿ܼ ా҅ܳ੉ਊೞৈ౸ױ 
 ௿ܼ੹ജ੉ծѢաझ௼݀౟௼ӝо੸੺ೞ׮ݶ૑ো۽٬଻ఖҊ۰ 
 ௿ܼ੹ജ੉֫Ҋझ௼݀౟௼ӝо௼׮ݶ߈਽ࢿ଻ఖҊ۰ 

    4MPX(ജ҃ীࢲ੄ز੘ਸଵҊ  ӝળ௼܁ѐߊ੗بҳ֎౟ਕ௼చ  ׮਍۽٘ࣘب.CQT  .CQTחড,#੄౵ੌਸୡী׮਍۽٘ ੸ਊ؀࢚ ծ਷௿ܼ੹ജਯ
  15. 5*1  ਬ੷੄৔৉߹ੋఠۑ࣌ FY௿ܼ ా҅ܳ੉ਊೞৈ౸ױ 
 ௿ܼ੹ജ੉ծѢաझ௼݀౟௼ӝо੸੺ೞ׮ݶ૑ো۽٬଻ఖҊ۰ 
 ௿ܼ੹ജ੉֫Ҋझ௼݀౟௼ӝо௼׮ݶ߈਽ࢿ଻ఖҊ۰ 

    4MPX(ജ҃ীࢲ੄ز੘ਸଵҊ  ӝળ௼܁ѐߊ੗بҳ֎౟ਕ௼చ  ׮਍۽٘ࣘب.CQT  .CQTחড,#੄౵ੌਸୡী׮਍۽٘ ੸ਊ؀࢚ ,#
  16. TFD TFD TFD "4 - *4 50 - #& TFD

    TFD ࢿמѐࢶѾҗ-$1ӝળ  8FCEFW #SZBO.D2VBEF t%F fi OJOH$PSF8FC7JUBMT5ISFTIPMETu ֙ਘੌ IUUQT XFCEFWBSUJDMFTEF fi OJOH - DPSF - XFC - WJUBMT - UISFTIPMET 
  17. TFD TFD TFD "4 - *4 50 - #& $PSF8FC7JUBMTীై੗റ

    ߑޙ੗׼ࣻ੊੉ ੹ജਯ੉ૐо೮׮ 3BLVUFO   8FCEFW t3BLVUFO$BTF4UVEZu ֙ਘੌ IUUQT XFCEFWDBTF - TUVEJFTSBLVUFOPQUJNJ[F@JNBHFT
  18. 2"