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

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

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

Transcript

1. ୡ ۨѢद JSP ೐۽ં౟ܳ ୭न Next.js 13ਵ۽ ݃੉Ӓۨ੉࣌ ೞӝ Incheon/Songdo
2. (അ) ীয೐ۨ޷ই ەझ ೐ۿ౟ ܻ٘ (അ) GDE Android Korea (੹) ߛ௼࢟۞٘ ೐ۿ౟ ݒפ੷ (੹) ٘ۄ݃ঙஹಌפ উ٘۽੉٘ ѐߊ੗ ੉थ޹
3. ݾର 1. Why Next.js with JSP? - ࢎস ҙ੼੄ ੄ࢎѾ੿ 2. How Next.js with JSP? - ӝࣿ ҙ੼੄ ੄ࢎѾ੿
4. Incheon/Songdo 1. Why Next.js with JSP? - ࢎস ҙ੼੄ ੄ࢎѾ੿
5. ীয೐ۨ޷ইۆ?
6. 2019֙ ݶೲ ߊә 2020֙ ࠺೯द੘ ীয೐ۨ޷ই োഄ
7. 2019֙ ݶೲ ߊә 2020֙ ࠺೯द੘ ௏۽ա ীয೐ۨ޷ই োഄ
8. ௏۽ա दӝ… ITҊ ޤҊ ࢤઓ੉ 1ࣽਤ׮! ׼੢ ೙ਃೠ ਢࢎ੉౟݅ ࡅܰѱ ৻઱ JSP, Spring Boot ݽ֢ۨನ ఍ࢤ
9. RESPECT 2020֙ࠗఠ 3֙ ࢎসਸ ߡలળ JSP Ҋ݃ਕ! Ӓٸח ݏও׮ Legacy Respect
10. ೠऀ جܻҊ աפ ࠁ੉ח അपٜ ഛ੢੉ ցޖ וܻ׮ दр੉ ൗ۞…
11. ഛ੢੉ ցޖ וܻ׮ IT ઁ؀۽ ೧ࠁ੗ ীয೐ۨ޷ই ەझ ఍ࢤ
12. ޙઁ ౵ঈ 🧐
13. ޙઁ ౵ঈ 1. ؀ࠗ࠙੄ ۽૒੉ graphql۽ ೐ۿ౟ী ੓যࢲ UI/࠺ૉפझ ۽૒ ҳ࠙੉ য۵׮
14. ޙઁ ౵ঈ 1. ؀ࠗ࠙੄ ۽૒੉ graphql۽ ೐ۿ౟ী ੓যࢲ UI/࠺ૉפझ ۽૒ ҳ࠙੉ য۵׮ 2. ஭ङച হ੉ ࠂࢎ ࠢৈ֍ӝ ௏٘о ݆ই ઺ࠂ ੘স੉ ݆׮
15. ޙઁ ౵ঈ 1. ؀ࠗ࠙੄ ۽૒੉ graphql۽ ೐ۿ౟ী ੓যࢲ UI/࠺ૉפझ ۽૒ ҳ࠙੉ য۵׮ 2. ஭ङച হ੉ ࠂࢎ ࠢৈ֍ӝ ௏٘о ݆ই ઺ࠂ ੘স੉ ݆׮ 3. Source of truth হ੉ ҔҔীࢲ if/else ࠺Үܳ ೞҊ ੓যࢲ ഛ੢ࢿ੉ ծ׮
16. ޙઁ ౵ঈ 1. ؀ࠗ࠙੄ ۽૒੉ graphql۽ ೐ۿ౟ী ੓যࢲ UI/࠺ૉפझ ۽૒ ҳ࠙੉ য۵׮ 2. ஭ङച হ੉ ࠂࢎ ࠢৈ֍ӝ ௏٘о ݆ই ઺ࠂ ੘স੉ ݆׮ 3. Source of truth হ੉ ҔҔীࢲ if/else ࠺Үܳ ೞҊ ੓যࢲ ഛ੢ࢿ੉ ծ׮ 4. ؀ࠗ࠙੄ ઺ਃ ߸ࣻ৬ DB ௪ܻܳ Stringਵ۽ ҳഅ೧ पࣻী ஂডೞ׮
17. ޙઁ ౵ঈ 1. ؀ࠗ࠙੄ ۽૒੉ graphql۽ ೐ۿ౟ী ੓যࢲ UI/࠺ૉפझ ۽૒ ҳ࠙੉ য۵׮ 2. ஭ङച হ੉ ࠂࢎ ࠢৈ֍ӝ ௏٘о ݆ই ઺ࠂ ੘স੉ ݆׮ 3. Source of truth হ੉ ҔҔীࢲ if/else ࠺Үܳ ೞҊ ੓যࢲ ഛ੢ࢿ੉ ծ׮ 4. ؀ࠗ࠙੄ ઺ਃ ߸ࣻ৬ DB ௪ܻܳ Stringਵ۽ ҳഅ೧ पࣻী ஂডೞ׮ 5. ࢲߡ Session ੷੢ࣗܳ ೐ۿ౟ীࢲ ݆੉ ഝਊ೧ ৔ೱب ৘ஏ੉ ൨ٜ׮
18. ޙઁ ౵ঈ 1. ؀ࠗ࠙੄ ۽૒੉ graphql۽ ೐ۿ౟ী ੓যࢲ UI/࠺ૉפझ ۽૒ ҳ࠙੉ য۵׮ 2. ஭ङച হ੉ ࠂࢎ ࠢৈ֍ӝ ௏٘о ݆ই ઺ࠂ ੘স੉ ݆׮ 3. Source of truth হ੉ ҔҔীࢲ if/else ࠺Үܳ ೞҊ ੓যࢲ ഛ੢ࢿ੉ ծ׮ 4. ؀ࠗ࠙੄ ઺ਃ ߸ࣻ৬ DB ௪ܻܳ Stringਵ۽ ҳഅ೧ पࣻী ஂডೞ׮ 5. ࢲߡ Session ੷੢ࣗܳ ೐ۿ౟ীࢲ ݆੉ ഝਊ೧ ৔ೱب ৘ஏ੉ ൨ٜ׮ 6. ֢റച ػ ӝࣿझఖ(JSP)ਵ۽ ଻ਊ੉ য۵׮
19. അ੤ ҳઑ۽ח ൨ٜ׮ 1. ؀ࠗ࠙੄ ۽૒੉ graphql۽ ೐ۿ౟ী ੓যࢲ UI/࠺ૉפझ ۽૒ ҳ࠙੉ য۵׮ 2. ஭ङച হ੉ ࠂࢎ ࠢৈ֍ӝ ௏٘о ݆ই ઺ࠂ ੘স੉ ݆׮ 3. Source of truth হ੉ ҔҔীࢲ if/else ࠺Үܳ ೞҊ ੓যࢲ ഛ੢ࢿ੉ ծ׮ 4. ؀ࠗ࠙੄ ઺ਃ ߸ࣻ৬ DB ௪ܻܳ Stringਵ۽ ҳഅ೧ पࣻী ஂডೞ׮ 5. ࢲߡ Session ੷੢ࣗܳ ೐ۿ౟ীࢲ ݆੉ ഝਊ೧ ৔ೱب ৘ஏ੉ ൨ٜ׮ 6. ֢റച ػ ӝࣿझఖ(JSP)ਵ۽ ଻ਊ੉ য۵׮ ੤ѐߊ Ѿ੿
20. ߑߨ Ѩష ৮੹ೠ ੤ѐߊ ݽٚ ѐߊ੗о ڪযٜয ੤ѐߊೞҊ ೠߣী ۠஖ ੼૓੸ ੤ѐߊ ੌࠗח ਬ૑ࠁࣻೞҊ ੌࠗח ചݶ ೞաঀ ੤ѐߊ
21. ৮੹ೠ ੤ѐߊ Ѩష ৘ড दझమ 🤓 एਕࠁੋ׮
22. ৘ড दझమ 🤓 एਕࠁੋ׮ PSS, GDS, ա࠺పয, Seg/Leg/Journey, OpenJaw… بݫੋ ૑ध ౵ঈ ೙ਃ ޅ೧ب 6ѐਘ ੉࢚ ৘࢚ ৮੹ೠ ੤ѐߊ दр
23. ৮੹ೠ ੤ѐߊ ࠺ਊ 6ѐਘ ݒ୹ Nୌর Nୌর ਬ૑ࠁࣻ ݥ୾? ࠛоמ
24. ੼૓੸ ੤ѐߊ Ѿ੿ JSPܳ ਬ૑ࠁࣻ ೞݶࢲ Next.js ੤ѐߊ ചݶ ೞաঀ Ү୓
25. Ӓېࢲ… JSPܳ ਬ૑ࠁࣻ ೞݶࢲ Next.js ੤ѐߊ ചݶ ೞաঀ Ү୓ Next.js with JSP!
26. Incheon/Songdo 2. How Next.js with JSP? - ӝࣿ ҙ੼੄ ੄ࢎѾ੿
27. যڌѱ ز੘ೞաਃ? airpremia.com/ticket/flight airpremia.com/a/ticket/flight 👉 Next 👉 JSP
28. যڌѱ ز੘ೞաਃ? ೞա੄ بݫੋীࢲ path prefix۽ ࠙ӝ a prefix ࠙ӝח AWS ALBীࢲ airpremia.com/a/ticket/flight 👉 Next
29. ߓನ ೒ۖಬ
30. ߓನ AWS, Docker, ECS, Jenkins ਋ܻ Next ਗ਼ই 😎 Vercel যٸ?
31. Vercel PSS(৘ড ࣛܖ࣌), ҕ೦ ١ ݆ࣻ਷ ղࠗݎ ాनҗ ࠁউ੿଼ AWS ਬ૑ Ѿ੿
32. EKS / Github Action ECS ݈Ҋ EKSח যٸ? Jenkins ݈Ҋ Github Action਷ যٸ? р׮! 🚀 ݃੉Ӓۨ੉࣌ ૓೯ ઺
33. ߓನ ߑߨ
34. ߓನ ߑध S3 + CloudFront ೐ۿ౟ ࢲߡ VS
35. ߓನ ߑध Next ੢੼ ࢓ܻ੗ 🤗 S3 + CloudFront ೐ۿ౟ ࢲߡ VS
36. ECSפө… Docker + ECS
37. 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, }, ], };
38. CDN
39. static ౵ੌ html, css, font, image… static ౵ੌ যڌѱ ࢲࡂೡө?
40. static ౵ੌ Ҵղ ࢎਊ੗о ؀׮ࣻݶ Next ࢲࡂب Ҋ޹ ೦ҕࢎח Ӗ۽ߥ Ҋё ׮ࣻ 🌎 CDN ೙ࣻ
41. AWSפө…
42. CDN ࢸ੿ ѐߊ ઺ীח ۽ஸ URL ߓನೞݶ CDN URL
43. 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
44. 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
45. CORS
46. Corsۆ? ೐ۿ౟о ׮ܲ بݫੋਵ۽ ޖ঱о ਃ୒ೞݶ ࠳ۄ਋੷о ղܻח ী۞ Cross-Origin Resource Sharing
47. ਋ܻח… ೐ۿ౟/ࢲߡо ೠރ 👫 بݫੋ੉ эই ੗োझۣѱ CORS ೧Ѿ
48. పझ౟ח… ѐߊ ઺ীח localhostীࢲ ਃ୒ بݫੋ੉ ׳ۄ CORS ࢸ੿ ೙ਃ Spring @CrossOrigin ਵ۽ ೧Ѿ
49. Next పझ౟ח… @CrossOrigin ࢸ੿ਸ ୶оೡө? ೐ۿ౟ పझ౟ܳ ਤ೧ ࢲߡܳ Ѥܻ٘חѱ ݏա? Next localhostח ನ౟о ׮ܰ׮
50. Next పझ౟ח… Nextب ࢲߡ ೐ۨ੐ਕ௼ ೐ۿ౟ীࢲ Proxy Next localhostח ನ౟о ׮ܰ׮
51. Next proxy const rewrites = async () => { return [ { source: "/a/cors/:path*", destination: `${BASE_URL}/:path*`, }, ]; }; next.config.js
52. ੋૐ
53. ۽Ӓੋ JSP ചݶীࢲ ۽Ӓੋ Next ചݶਵ۽ ੉ز ۽Ӓੋ ࢚క ਬ૑ ೙ਃ
54. ੋૐ ߑध Cookieী ࢲߡ Session ః ੷੢ Springীࢲ Session ੷੢ࣗ ҙܻ Session - Cookie
55. ੋૐ ҕਬ Session - Cookie Cookieח بݫੋ੉ эਵݶ ҕਬ JSP৬ Next ೐۽ં౟ח بݫੋ੉ э׮ ੗োझۣѱ ੋૐ ҕਬ 😆
56. పझ౟ח… ѐߊ ઺ীח بݫੋ੉ localhost Cookie Үജ੉ উؽ Spring ࢲߡܳ ۽ஸ۽ ڸਕࢲ పझ౟
57. Session-Cookie ੋૐ Session-Cookie ੋૐ ߑध਷ Web, Android, iOS ١ ׮নೠ ೒ۖಬ ૑ਗ੉ ൨ٜ׮ ୶റ ష௾ ߑधਵ۽ Ү୓ ҅ദ
58. ࢲߡ ాन
59. ࢲߡ ాन ߑध graphql grpc vs rest vs
60. graphql ੢੼ ੗ਬب ӓ؀ച ѐߊ ઑ૒੉ ௿ ٸ ੢੼ ߊൃ
61. graphql ױ੼ ੗ਬب ӓ؀ച ѐߊ ઑ૒੉ ௿ ٸ ੢੼ ߊൃ ೐ۿ౟ীࢲ ݺࣁ ౵ঈ য۰਑ ߔূ٘ ҳഅ ࠂ੟ب ࢚थ
62. graphql ਋ܻח… ੗ਬب ӓ؀ച ѐߊ ઑ૒੉ ௿ ٸ ੢੼ ߊൃ ਋ܻח 20ݺ ઑ૒ ழޭפா੉࣌ਵ۽ ࠂ੟ب ઁয оמ
63. grpc ੢੼ HTTP2.0 ࡅܰ׮
64. grpc ױ੼ HTTP2.0 ࡅܰ׮ ݻ ࠳ۄ਋੷ীࢲ ૑ਗೞ૑ ঋח׮
65. grpc-rest ഒਊ ೐ۿ౟৬ ాन਷ rest ࢲߡ ղࠗ ాन਷ grpc ೐۽షߡಌ۽ ݺࣁ ҕਬо एਕ૓׮
66. grpc-rest ഒਊ Ѩష Springীࢲ grpc ੸ਊ੉ оמೠо? оמ but ݆਷ ܻಖష݂ ೙ਃ ࢲߡ ղࠗ ాन਷ grpc
67. grpc-rest ഒਊ ਋ܻח… Springীࢲ grpc ੸ਊ੉ оמೠо? оמ but ݆਷ ܻಖష݂ ೙ਃ ੤ѐߊ ೐۽ં౟ח ࣘبب ઺ਃ
68. ࢲߡ ాन ߑध graphql grpc vs rest vs
69. API Interface
70. ࢲߡ ݺࣁ ҕਬ Spring + Rest Swagger
71. ੗زച Swaggerח ޙࢲ ੗زച ೐ۿ౟ীࢲ ࢲߡ ాन ௏٘ ੘ࢿ ೙ਃ ؊ ੗زച ޅೡө?
72. Openapi generator Swagger json ӝ߈ typescript ݽ؛۽ ੹ജ
73. Openapi generator झ௼݀౟ const command = "npx @openapitools/openapi-generator-cli generate" + `-g typescript-fetch -i ${inputFile} -o ${outputDir}`; exec(command);
74. 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)); }
75. CMS
76. CMS? Content Management Service Static ಕ੉૑ ҙܻ ೦ҕࢎח ੿ࠁࢿ ಕ੉૑о ݆׮
77. ޙҳ ࣻ੿ ࠄࢎ੄ ࣻ੿ ਃ୒ ઺ ؀ࠗ࠙੉ Static ಕ੉૑ ޙҳ ࣻ੿ ೦ҕࢎח ੿ࠁࢿ ಕ੉૑о ݆׮
78. ੗زച ੗زചܳ ਤ೧ CMS Ѩష ࠄࢎ੄ ࣻ੿ ਃ୒ ઺ ؀ࠗ࠙੉ Static ಕ੉૑ ޙҳ ࣻ੿
79. Strapi
80. Strapi ੢੼ ࢸ஖ഋ 🛠 DB ੗ਬبо ֫׮ Headless CMS 🙈 ٣੗ੋ ੗ਬبо ֫׮
81. ੉߮౟ ౟ۑఊ
82. ੉߮౟ ౟ۑఊ? GA, Mixpanel, ChannelTalk, Meta/Kakao Pixel, redshift, Insider… ؘ੉ఠ ࠙ࢳ, ҟҊ, CRMਸ ਤೠ ࢎਊ੗ ؘ੉ఠ ӝ۾
83. ࠁా੄ ੉߮౟ ౟ۑఊ ೐ۿ౟ীࢲ ৈ۞ ؘ੉ఠ ೒ۖಬ SDK ࢸ஖ SDKٜ ҙܻೞח ݒפ੷ ੘ࢿ ؘ੉ఠ ೒ۖಬ טযզ ٸ݃׮ SDK ୶о ೒ۖಬ݃׮ ઑӘঀ ׮ܲ ݺࣁ ؀਽
84. ࠁా੄ ੉߮౟ ౟ۑఊ ѐߊ੗ب Ҧ܂Ҋ ѐߊਸ ӝ׮ܻח ࢎসب Ҧ܂Ҋ ೐ۿ౟ীࢲ ৈ۞ ؘ੉ఠ ೒ۖಬ SDK ࢸ஖ SDKٜ ҙܻೞח ݒפ੷ ੘ࢿ
85. CDP Customer Data Platform ؘ੉ఠ ൒ܴਸ ೠ Ҕীࢲ ҙܻ
86. CDP
87. CDP ѐߊ਷ ੉߮౟ ݺࣁ݅ ૘઺ п ೒ۖಬী ݏѱ оҕ਷ POо CDPীࢲ ٱӪ
88. CDP more batch۽ ׮নೠ ࢎਊ੗ ؘ੉ఠ -> ؘ੉ఠ ਝযೞ਋झ -> CRM ੉߮౟ ౟ܻѢ -> ѐੋച ݃ா౴ ON
89. CDP more LA ֢ࢶ 6׳ ղ 3ߣ ੉࢚ ৘ড -> redshift ؘ੉ఠ ࢗੑ -> Braze ౟ܻѢ -> Ү޹ ҙ۲ উղ ੹࣠ batch۽ ׮নೠ ࢎਊ੗ ؘ੉ఠ -> ؘ੉ఠ ਝযೞ਋झ -> CRM ੉߮౟ ౟ܻѢ -> ѐੋച ݃ா౴ ON
90. ӝఋ ӝࣿ झఖ
91. ӝࣿ झఖ ࣗѐ Next.js 13 Tailwind Shadcn Jotai ࢜ ೐۽ં౟פө ୭नӝࣿ ݆੉ ॄࠁ੗
92. Incheon/Songdo ݃ޖܻ
93. ݃ޖܻ ೐۽ં౟ܳ ਍৔ਵ۽ ݅٘۰ݶ ௏٘ ৻ীب ݆਷ Ѫ੉ Ҋ۰غযঠ ೠ׮ ࢚ടী ݏח ੄ࢎѾ੿੉ ઺ਃ
94. ݃ޖܻ যڃ Ҋ޹ਵ۽ بݫੋ, ӝࣿ, അपਸ ੒חо ب਑੉ غӡ ߄ېਃ ࢚ടী ݏח ੄ࢎѾ੿੉ ઺ਃ
95. ݃ޖܻ ীয೐ۨ޷ই ەझח ੉ઁ ѐߊ ׳݀פ׮ 🏃 ѐੋ੸ਵ۽ ׳ܻח Ѫب ੓যਃ
96. Incheon/Songdo ҳة😍