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

초 레거시 JSP 프로젝트를 최신 Next.js 13으로 마이그레이션 하기

초 레거시 JSP 프로젝트를 최신 Next.js 13으로 마이그레이션 하기

2023년 12월 10일 GDG DevFest 송도에서 발표한 자료입니다.

국내 최초 하이브리드 항공사 에어프레미아는 초 레거시 JSP 프로젝트를 최신 Next.js 13 AppRouter 버전으로 마이그레이션을 하고 있습니다. 왜 JSP와 Next.js를 함께 사용하는지 배경과 의사결정 과정을 말씀드리고, 2개의 다른 언어를 어떻게 함께 운영하는지 기술적인 고민을 공유합니다.

Seungmin 마량

December 10, 2023
Tweet

More Decks by Seungmin 마량

Other Decks in Programming

Transcript

  1. (അ) ীয೐ۨ޷ই ەझ ೐ۿ౟ ܻ٘ (അ) GDE Android Korea (੹)

    ߛ௼࢟۞٘ ೐ۿ౟ ݒפ੷ (੹) ٘ۄ݃ঙஹಌפ উ٘۽੉٘ ѐߊ੗ ੉थ޹
  2. ݾର 1. Why Next.js with JSP? - ࢎস ҙ੼੄ ੄ࢎѾ੿

    2. How Next.js with JSP? - ӝࣿ ҙ੼੄ ੄ࢎѾ੿
  3. ޙઁ ౵ঈ 1. ؀ࠗ࠙੄ ۽૒੉ graphql۽ ೐ۿ౟ী ੓যࢲ UI/࠺ૉפझ ۽૒

    ҳ࠙੉ য۵׮ 2. ஭ङച হ੉ ࠂࢎ ࠢৈ֍ӝ ௏٘о ݆ই ઺ࠂ ੘স੉ ݆׮
  4. ޙઁ ౵ঈ 1. ؀ࠗ࠙੄ ۽૒੉ graphql۽ ೐ۿ౟ী ੓যࢲ UI/࠺ૉפझ ۽૒

    ҳ࠙੉ য۵׮ 2. ஭ङച হ੉ ࠂࢎ ࠢৈ֍ӝ ௏٘о ݆ই ઺ࠂ ੘স੉ ݆׮ 3. Source of truth হ੉ ҔҔীࢲ if/else ࠺Үܳ ೞҊ ੓যࢲ ഛ੢ࢿ੉ ծ׮
  5. ޙઁ ౵ঈ 1. ؀ࠗ࠙੄ ۽૒੉ graphql۽ ೐ۿ౟ী ੓যࢲ UI/࠺ૉפझ ۽૒

    ҳ࠙੉ য۵׮ 2. ஭ङച হ੉ ࠂࢎ ࠢৈ֍ӝ ௏٘о ݆ই ઺ࠂ ੘স੉ ݆׮ 3. Source of truth হ੉ ҔҔীࢲ if/else ࠺Үܳ ೞҊ ੓যࢲ ഛ੢ࢿ੉ ծ׮ 4. ؀ࠗ࠙੄ ઺ਃ ߸ࣻ৬ DB ௪ܻܳ Stringਵ۽ ҳഅ೧ पࣻী ஂডೞ׮
  6. ޙઁ ౵ঈ 1. ؀ࠗ࠙੄ ۽૒੉ graphql۽ ೐ۿ౟ী ੓যࢲ UI/࠺ૉפझ ۽૒

    ҳ࠙੉ য۵׮ 2. ஭ङച হ੉ ࠂࢎ ࠢৈ֍ӝ ௏٘о ݆ই ઺ࠂ ੘স੉ ݆׮ 3. Source of truth হ੉ ҔҔীࢲ if/else ࠺Үܳ ೞҊ ੓যࢲ ഛ੢ࢿ੉ ծ׮ 4. ؀ࠗ࠙੄ ઺ਃ ߸ࣻ৬ DB ௪ܻܳ Stringਵ۽ ҳഅ೧ पࣻী ஂডೞ׮ 5. ࢲߡ Session ੷੢ࣗܳ ೐ۿ౟ীࢲ ݆੉ ഝਊ೧ ৔ೱب ৘ஏ੉ ൨ٜ׮
  7. ޙઁ ౵ঈ 1. ؀ࠗ࠙੄ ۽૒੉ graphql۽ ೐ۿ౟ী ੓যࢲ UI/࠺ૉפझ ۽૒

    ҳ࠙੉ য۵׮ 2. ஭ङച হ੉ ࠂࢎ ࠢৈ֍ӝ ௏٘о ݆ই ઺ࠂ ੘স੉ ݆׮ 3. Source of truth হ੉ ҔҔীࢲ if/else ࠺Үܳ ೞҊ ੓যࢲ ഛ੢ࢿ੉ ծ׮ 4. ؀ࠗ࠙੄ ઺ਃ ߸ࣻ৬ DB ௪ܻܳ Stringਵ۽ ҳഅ೧ पࣻী ஂডೞ׮ 5. ࢲߡ Session ੷੢ࣗܳ ೐ۿ౟ীࢲ ݆੉ ഝਊ೧ ৔ೱب ৘ஏ੉ ൨ٜ׮ 6. ֢റച ػ ӝࣿझఖ(JSP)ਵ۽ ଻ਊ੉ য۵׮
  8. അ੤ ҳઑ۽ח ൨ٜ׮ 1. ؀ࠗ࠙੄ ۽૒੉ graphql۽ ೐ۿ౟ী ੓যࢲ UI/࠺ૉפझ

    ۽૒ ҳ࠙੉ য۵׮ 2. ஭ङച হ੉ ࠂࢎ ࠢৈ֍ӝ ௏٘о ݆ই ઺ࠂ ੘স੉ ݆׮ 3. Source of truth হ੉ ҔҔীࢲ if/else ࠺Үܳ ೞҊ ੓যࢲ ഛ੢ࢿ੉ ծ׮ 4. ؀ࠗ࠙੄ ઺ਃ ߸ࣻ৬ DB ௪ܻܳ Stringਵ۽ ҳഅ೧ पࣻী ஂডೞ׮ 5. ࢲߡ Session ੷੢ࣗܳ ೐ۿ౟ীࢲ ݆੉ ഝਊ೧ ৔ೱب ৘ஏ੉ ൨ٜ׮ 6. ֢റച ػ ӝࣿझఖ(JSP)ਵ۽ ଻ਊ੉ য۵׮ ੤ѐߊ Ѿ੿
  9. ߑߨ Ѩష ৮੹ೠ ੤ѐߊ ݽٚ ѐߊ੗о ڪযٜয ੤ѐߊೞҊ ೠߣী ۠஖

    ੼૓੸ ੤ѐߊ ੌࠗח ਬ૑ࠁࣻೞҊ ੌࠗח ചݶ ೞաঀ ੤ѐߊ
  10. ৘ড दझమ 🤓 एਕࠁੋ׮ PSS, GDS, ա࠺పয, Seg/Leg/Journey, OpenJaw… بݫੋ

    ૑ध ౵ঈ ೙ਃ ޅ೧ب 6ѐਘ ੉࢚ ৘࢚ ৮੹ೠ ੤ѐߊ दр
  11. যڌѱ ز੘ೞաਃ? ೞա੄ بݫੋীࢲ path prefix۽ ࠙ӝ a prefix ࠙ӝח

    AWS ALBীࢲ airpremia.com/a/ticket/flight 👉 Next
  12. EKS / Github Action ECS ݈Ҋ EKSח যٸ? Jenkins ݈Ҋ

    Github Action਷ যٸ? р׮! 🚀 ݃੉Ӓۨ੉࣌ ૓೯ ઺
  13. Process Manager Node with Multi Process PM2 const pm2Config =

    { apps: [ { name: “shuka-docker”, // dockerח standalone ࠽٘ ౵ੌ۽ प೯ೠ׮. script: “server.js", instances: 0, exec_mode: "cluster", autorestart: true, listen_timeout: 50000, kill_timeout: 5000, }, ], };
  14. CDN

  15. return { output: isDocker ? “standalone", images: { // prefix

    for public dir loaderFile: useCdn ? “imageLoader.js", }, // prefix for _next/static dir assetPrefix: useCdn ? cdnUrl, }; next.config images assetPrefix
  16. return { output: isDocker ? “standalone", images: { // prefix

    for public dir loaderFile: useCdn ? “imageLoader.js", }, // prefix for _next/static dir assetPrefix: useCdn ? cdnUrl, }; next.config output (for docker) images assetPrefix
  17. Next proxy const rewrites = async () => { return

    [ { source: "/a/cors/:path*", destination: `${BASE_URL}/:path*`, }, ]; }; next.config.js
  18. ੋૐ ҕਬ Session - Cookie Cookieח بݫੋ੉ эਵݶ ҕਬ JSP৬

    Next ೐۽ં౟ח بݫੋ੉ э׮ ੗োझۣѱ ੋૐ ҕਬ 😆
  19. Session-Cookie ੋૐ Session-Cookie ੋૐ ߑध਷ Web, Android, iOS ١ ׮নೠ

    ೒ۖಬ ૑ਗ੉ ൨ٜ׮ ୶റ ష௾ ߑधਵ۽ Ү୓ ҅ദ
  20. graphql ױ੼ ੗ਬب ӓ؀ച ѐߊ ઑ૒੉ ௿ ٸ ੢੼ ߊൃ

    ೐ۿ౟ীࢲ ݺࣁ ౵ঈ য۰਑ ߔূ٘ ҳഅ ࠂ੟ب ࢚थ
  21. graphql ਋ܻח… ੗ਬب ӓ؀ച ѐߊ ઑ૒੉ ௿ ٸ ੢੼ ߊൃ

    ਋ܻח 20ݺ ઑ૒ ழޭפா੉࣌ਵ۽ ࠂ੟ب ઁয оמ
  22. grpc-rest ഒਊ ਋ܻח… Springীࢲ grpc ੸ਊ੉ оמೠо? оמ but ݆਷

    ܻಖష݂ ೙ਃ ੤ѐߊ ೐۽ં౟ח ࣘبب ઺ਃ
  23. Openapi generator झ௼݀౟ const command = "npx @openapitools/openapi-generator-cli generate" +

    `-g typescript-fetch -i ${inputFile} -o ${outputDir}`; exec(command);
  24. Openapi generator Ѿҗ async getLoginStatusRaw(initOverrides?: RequestInit): Promise<ApiResponse<LoginStatusResponse>> { const queryParameters:

    any = {}; const headerParameters: runtime.HTTPHeaders = {}; const response = await this.request({ path: `/api/somepath`, method: 'GET', headers: headerParameters, query: queryParameters, }, initOverrides); return new runtime.JSONApiResponse(response, (jsonValue) => LoginStatusResponseFromJSON(jsonValue)); }
  25. CMS

  26. ࠁా੄ ੉߮౟ ౟ۑఊ ೐ۿ౟ীࢲ ৈ۞ ؘ੉ఠ ೒ۖಬ SDK ࢸ஖ SDKٜ

    ҙܻೞח ݒפ੷ ੘ࢿ ؘ੉ఠ ೒ۖಬ טযզ ٸ݃׮ SDK ୶о ೒ۖಬ݃׮ ઑӘঀ ׮ܲ ݺࣁ ؀਽
  27. ࠁా੄ ੉߮౟ ౟ۑఊ ѐߊ੗ب Ҧ܂Ҋ ѐߊਸ ӝ׮ܻח ࢎসب Ҧ܂Ҋ ೐ۿ౟ীࢲ

    ৈ۞ ؘ੉ఠ ೒ۖಬ SDK ࢸ஖ SDKٜ ҙܻೞח ݒפ੷ ੘ࢿ
  28. CDP

  29. CDP more LA ֢ࢶ 6׳ ղ 3ߣ ੉࢚ ৘ড ->

    redshift ؘ੉ఠ ࢗੑ -> Braze ౟ܻѢ -> Ү޹ ҙ۲ উղ ੹࣠ batch۽ ׮নೠ ࢎਊ੗ ؘ੉ఠ -> ؘ੉ఠ ਝযೞ਋झ -> CRM ੉߮౟ ౟ܻѢ -> ѐੋച ݃ா౴ ON