달리는 기차의 바퀴 갈아끼우기: 인프런 프론트엔드 마이그레이션 여정│인프콘2024
INFCON 2024 인프런 · YouTube
AI 핵심 요약
Express.js와 Vanilla.js로 운영하던 인프런 프론트엔드는 페이지가 늘면서 코드 추적이 어려워지고 신규 개발자의 적응과 빌드에 부담이 커져, React 기반으로 점진적 마이그레이션을 진행했습니다. SEO가 필요 없는 페이지에는 Vite SPA를, 필요한 페이지에는 Next.js SSR을 적용하고, 기능 플래그로 기존·신규 페이지를 전환해 운영 중에도 QA와 롤백이 가능하도록 했습니다. 레거시 레이아웃과 React의 공존 과정에서는 Shadow DOM과 Vite manifest를 활용했고, 공용 헤더·푸터는 라이브러리와 Module Federation으로 공유했으며 트래픽 분기에는 CloudFront와 리버스 프록시를 사용했습니다. 마이그레이션은 코드 교체만이 아니라 배포·인프라·공유 컴포넌트의 운영 방식까지 함께 바꾸는 과정이며, 각 단계의 문제에 맞춰 선택을 조정해야 한다는 점을 강조했습니다.
- 기능 플래그를 활용하면 기존·신규 구현을 함께 유지하면서 점진적 배포와 빠른 롤백을 할 수 있지만, 안정화 후 플래그와 구 로직을 정리해야 합니다.
- 레거시 레이아웃에 React를 삽입할 때 전역 CSS가 새 컴포넌트에 번질 수 있으므로 Shadow DOM 같은 스타일 격리 방식을 검토할 수 있습니다.
- Vite의 manifest 옵션은 빌드 산출물의 파일명과 의존성 정보를 제공해 별도 스크립트로 해시를 추적하는 작업을 줄여줍니다.
- 공용 컴포넌트의 배포·버전 갱신이 여러 팀의 병목이 된다면 Module Federation으로 런타임에 모듈을 공유하는 방식을 고려할 수 있습니다.
- CloudFront 경로 규칙은 빠르게 트래픽을 분기할 수 있지만 쿠키 기반 조건에는 한계가 있어, 필요에 따라 리버스 프록시로 라우팅 책임을 옮길 수 있습니다.
소개
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 달리는 기차의 바퀴 갈아끼우기: 인프런 프론트엔드 마이그레이션 여정 - 조성륜 실제 운영되고 있는 서비스의 레거시 코드(Express.js 기반 Vanilla.js)를 모던 리액트 환경으로 마이그레이션을 하기위한 인프런 프론트파트의 여정을 공유합니다. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
비슷한 학습 자료
컨퍼런스 INFCON 2024
실리콘밸리 개발 문화 및 서바이벌 전략 | 인프콘2024
컨퍼런스 INFCON 2024
멀티패러다임 프로그래밍 언어의 시대: 객체지향과 함수형을 섞어야할 때!│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 멀티패러다임 프로그래밍 언어의 시대: 객체지향과 함수형을 섞어야할 때! - 유인동 함수형, 객체지향 패러다임을 모두 제공하는 멀티패러다임 언어를 효율적으로 사용하는 법 - 타입스크립트로 Tagged Templates를 만들면서 멀티패러다임 개발 패턴을 소개합니다. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
프로그래밍 언어
컨퍼런스 INFCON 2024
인프런 아키텍처 2024 ~ 2025 | 인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 인프런 아키텍처 2024 ~ 2025 - 이동욱 작년 발표 이후 1년간 인프런 아키텍처가 어떤 변화가 어떤 이유로 진행되었는지 소개 합니다. 새로운 구조나 아키텍처로 개편하는 과정에 대한 이야기들은 많지만 그런 개편 이후 1년, 2년이 지나서 어떤 결과가 만들어지는지에 대한 소개는 많이 없습니다. 인프런에서는 2022년부터 지속적으로 아키텍처를 점진적으로 개선하고 있으며, 2년전의 결정이 지금은 어떻게 되었는지 등 결과도 함께 경험하고 있습니다. 최근 1년간은 비용절감, Next.js 기반의 SSR, CSR, SPA 환경과 기존 Express SSR 과의 공존, 글로벌 플랫폼을 가기 위한 기반 작업 등등 여러 관심사를 해결하기 위한 노력들을 해왔습니다. 인프런 서비스가 ...
프론트엔드 백엔드
컨퍼런스 INFCON 2024
개발자 손 꼭 붙잡고 기획하기 | 인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://u.inf.run/4cLhYyK 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 개발자 손 꼭 붙잡고 기획하기 - 송은택 개발자들의 의견을 더 많이 듣고 싶지만 어떻게 그들의 의견을 끌어내야할 지 모르겠는 PM, 디자이너 그리고 비즈니스와 제품 기획에 더 많이 관여하고 싶은 개발자들을 위해 준비한 내용입니다. 최근에 인프랩 ucc셀에서는 프로젝트 초기 기획 과정에서부터 엔지니어들도 함께 참여했습니다. 진행하는 프로젝트의 전체적인 맥락을 초기부터 공감하고, 디테일한 정책 설계까지 함께했는데요. 높은 몰입도를 보여주었습니다. 프로젝트를 진행할수록 엔지니어들은 초기 기획보다 더 참신한 방안을 계속해서 제시하고, 실행했습니다. 프로젝트를 진행하며 어느 순간 각자의 생각이 모두 일치하는 경험을 했습니다. 불필요한 커뮤니케이션은 자연스럽게 감소했고요. 어떤 ...
프로덕트 매니지먼트 애자일 · 협업
컨퍼런스 INFCON 2024
사이드 프로젝트로 커리어 레벨업!│인프콘2024
컨퍼런스 INFCON 2024
🌱 인프런 에서 인프콘2024 강의 자료 다운로드 받고 복습해보세요. 🩵 강의 자료 다운 받기 : https://inf.run/ifwWL 🌱 인프런과 함께 배우고, 나누고, 성장하세요. 🩵 사이드 프로젝트로 커리어 레벨업! - 조현우 "사이드 프로젝트 어떻게 시작해야하나요?" "혼자서 사이드 프로젝트를 할 수 있나요?" "사이드 프로젝트 주제는 어떻게 정하나요?" 처음 사이드 프로젝트를 해야겠다! 고 마음 먹으면 어떻게 시작해야할지, 주제는 어떻게 잡으면 좋을지, 혼자서 프로젝트를 끝마칠 수 있을지 고민이 많아집니다. 이번 발표에서는 1년간 12개의 사이드 프로젝트를 만들었던 경험을 공유하며, 사이드 프로젝트 '잘' 하는 방법과, 사이드 프로젝트를 통한 커리어 성장의 방법을 소개해보려 합니다. #인프콘 #인프런 #인프콘2024 #인프콘2024다시보기
컨퍼런스 INFCON 2024