기술적 마이그레이션

기술적 마이그레이션

개발 과정에서 기술적 마이그레이션은 피할 수 없다.

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

• 기존 시스템, 앱, 혹은 데이터 셋의 스택, 플랫폼, 버전을 이동하는 프로세스를 가리킴

• 성능, 유지보수성, 보안을 개선하거나 진화하는 업계표준과 발맞추기 위해 기술적 마이그레이션을 수행함

다양한 마이그레이션 예

• 의존성, 라이브러리, 프레임워크 업그레이드 혹은 대체

• 새로운 프로그래밍 언어 또는 플랫폼 이동

• 테스팅, 모니터링, 디버깅을 위한 새로운 도구 혹은 방법론 도입

• 성능, 유지보수성, 확장성 개선을 위한 기존 코드 리팩토링

• 새로운 기능 혹은 비즈니스 요구사항을 지원하기 위한 앱 아키텍처 업데이트

다양한 마이그레이션 전략

• https://www.smashingmagazine.com/2021/07/migrate-jquery-nextjs/

좋은 마이그레이션

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

• 모든 컴포너트가 새로운 프레임워크 혹은 기술로 완전히 이전되는것을 포함

• 이 접근법을 활용하면 완전히 새롭게 시작, 현대적인 도구와 기법들로 장점을 취하고 보다 효율적으로 앱을 개발할수있게됨

• 많은 시간과 노동이 소요되며, 앱 가용성 측면의 문제를 일으킴

• 작은 프로젝트, 덜 중요한 앱, 자주 변경되지 않는 프로젝트에 적합

빠른 마이그레이션

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

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

교살자 애플리케이션

교살자 무화과 패턴에서 유래

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

• 기존 웹 경계를 식별하고 새로운 프레임워크를 사용하여 새로운 기능을 추가함으로써 구식 시스템을 교살시키는 접근법

• 통제된, 체계적인 방식으로 구식 컴포넌트를 새로운 컴포넌트로 점진적으로 대체함으로써 잠재적인 리스크를 줄임

• 이 접근법을 따르려면 개발자들은 반드시 앱을 관련된 서로 다른 코드 조각으로 나눈뒤 이들을 새로운 컴포넌트로 감싸야함

• 이 방법론은 어떤 동작도 추가하지 않고 기존 콘텐츠를 렌더링하는 컴포넌트를 생성할 수 있음

마이그레이션 전략

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

마이그레이션 범위를 이해

• 마이그레이션 전에 마이그레이션 범위를 이해해야함

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

마이그레이션 계획 세우기

• 범위를 식별한 후 계획을 세워야함

• 수행 단계, 타임 라인, 필요한 리소스 정의 등이 포함됨

• 실제적이고 달성할 수 있는 계획을 세우는 게 중요

• 마이그레이션 복잡도와 잠재적인 리스크 어려움을 인지 및 고려해야함

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

• 앱 중단 등의 혼란을 최소화하고 에러나 버그의 리스크를 줄이기 위해서는 점진적으로 구현해야함

• 힌 번에 작은 부분만 마이그레이션하고 각 조각을 충분히 테스트하고 배포한 뒤 다음 단계 진행

성능 모니터링 및 최적화

• 마이그레이션 프로세스를 진행하는 동안 앱 성능을 모니터링하고 최적화하는 것이 중요

• 지연 로딩과 코드 분할 같은 기법을 구현해 새롭게 마이그레이션한 코드와 컴포넌트의 성능을 개선해야함

충분히 테스트

• 테스팅은 모든 기술적 마이그레이션에서 대단히 중요

• 각 컴포넌트를 충분히 테스트한 뒤 다음 단계 진행

• 통합 테스트를 통해 컴포넌트들이 함께 올바르게 기능하는것을 보장해야함

이해관계자들과 소통

• 진행하는 동안 최종 사용자, 개발자, 관리자를 포함한 모든 이해관계자와 소통해야함

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

코드모드

앱 코드 변경 프로세스를 자동화하는 스크립트를 뜻함

코드 수정 프로세스를 크게 간소화시킴

• 코드베이스를 스캔하고 필요한 변경을 자동 수행함으로써 마이그레이션의 특정 측면을 자동화 가능

• 구문 업데이트, 변경 사항 임포트, 구성 파일 업데이트 등을 수행

• 프레임워크, 라이브러리 메이저 버전 사이에서 마이그레이션할 때 특히 유용

• 변경의 많은 부분을 자동화함으로써 프로세스를 빠르고, 더 일관성 있고 에러가 덜 발생하도록 도움

• 뿐만 아니라, 코드 리팩터링이나 여러 코드베이스에 모범 사례를 적용하는 테스크에도 유용하게 사용

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

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

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

• 발견: 상대 경로 임포트 구문을 가진 모든 파일을 식별

• 경로 분석: 현재 파일 경로와 상대 임포트 경고를 분석하고 절대 경로를 계산

• 대체: 상대 경로를 계산하는 절대 경로를 대체

Phenax가 작성한 스크립트

• 코드모드 스크립트가 준비되면 jscodeshift 툴킷을 사용해 여러 JS/TS 대상으로 스크립트 실행

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

생성형 AI 역할

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

• 생성된 코드는 항상 최적이거나 정확한것이 아니므로 개발자가 직접 리뷰하고 수정해야한다.

• 사람의 전문성을 대신하는것이 아닌 보조하는 목적으로만 사용해야한다.

코드 생성

• 자연 언어 프롬프트를 기반으로 새로운 코드를 생성

• 수동으로 전체 코드베이스를 재작성하지 않아도 됨

코드 자동완성

• 부분적으로 작성된 코드를 자동 완성 가능

• 마이그레이션 과정에서 간극을 채우거나 기존 코드를 새로운 언어나 프레임워크에 맞게 조정해야할 때 유용

코드 번역

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