기술적 마이그레이션 | jtwjs Dev Wiki

기술적 마이그레이션

개발 과정에서 기술적 마이그레이션은 피할 수 없다.
앱이 성장하고 기술이 진화하면서 우리는 종종 기존 코드보다 새롭고 효율적인 기술 및 방법론에 맞는 코드로 마이그레이션 해야한다.

기존 시스템, 앱, 혹은 데이터 셋의 스택, 플랫폼, 버전을 이동하는 프로세스를 가리킴
성능, 유지보수성, 보안을 개선하거나 진화하는 업계표준과 발맞추기 위해 기술적 마이그레이션을 수행함

다양한 마이그레이션 예

의존성, 라이브러리, 프레임워크 업그레이드 혹은 대체
새로운 프로그래밍 언어 또는 플랫폼 이동
테스팅, 모니터링, 디버깅을 위한 새로운 도구 혹은 방법론 도입
성능, 유지보수성, 확장성 개선을 위한 기존 코드 리팩토링
새로운 기능 혹은 비즈니스 요구사항을 지원하기 위한 앱 아키텍처 업데이트

다양한 마이그레이션 전략

좋은 마이그레이션

앱 코드를 완전히 새롭게 재작성하는 것

모든 컴포너트가 새로운 프레임워크 혹은 기술로 완전히 이전되는것을 포함
이 접근법을 활용하면 완전히 새롭게 시작, 현대적인 도구와 기법들로 장점을 취하고 보다 효율적으로 앱을 개발할수있게됨
많은 시간과 노동이 소요되며, 앱 가용성 측면의 문제를 일으킴
작은 프로젝트, 덜 중요한 앱, 자주 변경되지 않는 프로젝트에 적합

빠른 마이그레이션

완전히 재작성하는 접근법의 대안

앱을 부분 혹은 조각으로 나누고 각 부분을 점진적으로 마이그레이션

교살자 애플리케이션

교살자 무화과가 기존 나무를 교살시키는 것과 비슷

기존 웹 경계를 식별하고 새로운 프레임워크를 사용하여 새로운 기능을 추가함으로써 구식 시스템을 교살시키는 접근법
통제된, 체계적인 방식으로 구식 컴포넌트를 새로운 컴포넌트로 점진적으로 대체함으로써 잠재적인 리스크를 줄임
이 접근법을 따르려면 개발자들은 반드시 앱을 관련된 서로 다른 코드 조각으로 나눈뒤 이들을 새로운 컴포넌트로 감싸야함
이 방법론은 어떤 동작도 추가하지 않고 기존 콘텐츠를 렌더링하는 컴포넌트를 생성할 수 있음

마이그레이션 전략

좋은 마이그레이션 전략은 이상적으로 포괄적이고 체계적인 접근법을 포함해야함

마이그레이션 범위를 이해

마이그레이션 전에 마이그레이션 범위를 이해해야함
마이그레이션할 컴포넌트 혹은 기능, 관련된 기술, 앱 아키텍처, 성능 및 사용자 경험에 미칠 영향을 식별

마이그레이션 계획 세우기

범위를 식별한 후 계획을 세워야함
수행 단계, 타임 라인, 필요한 리소스 정의 등이 포함됨
실제적이고 달성할 수 있는 계획을 세우는 게 중요
마이그레이션 복잡도와 잠재적인 리스크 어려움을 인지 및 고려해야함

잠재적인 마이그레이션 구현

앱 중단 등의 혼란을 최소화하고 에러나 버그의 리스크를 줄이기 위해서는 점진적으로 구현해야함
힌 번에 작은 부분만 마이그레이션하고 각 조각을 충분히 테스트하고 배포한 뒤 다음 단계 진행

성능 모니터링 및 최적화

마이그레이션 프로세스를 진행하는 동안 앱 성능을 모니터링하고 최적화하는 것이 중요
지연 로딩과 코드 분할 같은 기법을 구현해 새롭게 마이그레이션한 코드와 컴포넌트의 성능을 개선해야함

충분히 테스트

테스팅은 모든 기술적 마이그레이션에서 대단히 중요
각 컴포넌트를 충분히 테스트한 뒤 다음 단계 진행
통합 테스트를 통해 컴포넌트들이 함께 올바르게 기능하는것을 보장해야함

이해관계자들과 소통

진행하는 동안 최종 사용자, 개발자, 관리자를 포함한 모든 이해관계자와 소통해야함
마이그레이션 진행에 대한 정기적인 업데이트를 제공하고, 질문이나 우려사항이 발생하면 이를 해결하고, 피드백을 제공함으로써 마이그레이션이 비즈니스와 사용자의 니즈를 만족시키고 있음을 보장해야한다.

코드모드

앱 코드 변경 프로세스를 자동화하는 스크립트를 뜻함
코드 수정 프로세스를 크게 간소화시킴

코드베이스를 스캔하고 필요한 변경을 자동 수행함으로써 마이그레이션의 특정 측면을 자동화 가능
구문 업데이트, 변경 사항 임포트, 구성 파일 업데이트 등을 수행
프레임워크, 라이브러리 메이저 버전 사이에서 마이그레이션할 때 특히 유용
변경의 많은 부분을 자동화함으로써 프로세스를 빠르고, 더 일관성 있고 에러가 덜 발생하도록 도움
뿐만 아니라, 코드 리팩터링이나 여러 코드베이스에 모범 사례를 적용하는 테스크에도 유용하게 사용

예시: 모든 상대 임포트를 절대 임포트로 변환하기

// XYZ를 상대 경로로 임포트하기
import XYZ from '../../../../compoenents/XYZ'

// 절대 경로로 임포트하기
import XYZ from '.src/components/XYZ'

발견: 상대 경로 임포트 구문을 가진 모든 파일을 식별
경로 분석: 현재 파일 경로와 상대 임포트 경고를 분석하고 절대 경로를 계산
대체: 상대 경로를 계산하는 절대 경로를 대체

jscodeshift -t ./absolute-import-codemode-transform.js src/**/*.js

생성형 AI 역할

생성형 AI는 코드 생성, 코드 자동완성, 코드 번역 같은 기능 제공하여 마이그레이션에 큰 도움을 줌

생성된 코드는 항상 최적이거나 정확한것이 아니므로 개발자가 직접 리뷰하고 수정해야한다.
사람의 전문성을 대신하는것이 아닌 보조하는 목적으로만 사용해야한다.

코드 생성

자연 언어 프롬프트를 기반으로 새로운 코드를 생성
수동으로 전체 코드베이스를 재작성하지 않아도 됨

코드 자동완성

부분적으로 작성된 코드를 자동 완성 가능
마이그레이션 과정에서 간극을 채우거나 기존 코드를 새로운 언어나 프레임워크에 맞게 조정해야할 때 유용

코드 번역

한 프로그래밍 언어를 다른 프로그래밍 언어로 코드를 번역할 수 있다.