올리브영, 타입스크립트로 프론트엔드 개발 생산성 향상!
by DD
1년 전
조회수 2
올리브영 프론트엔드에서 타입스크립트 도입으로 타입 안정성을 확보함
타입 검사기의 작동 원리를 설명하고, 서브타입 개념을 소개함
다형성을 통해 코드 유연성을 높이고, TodayProduct와 Product 간 호환성을 확보함
타입 검사기의 핵심 원리
타입스크립트의 타입 검사기는 코드의 타입적 모순을 찾아내기 위해 작동한다. 구체적으로, 환원주의 관점을 활용하여 복잡한 타입을 단순한 타입의 조합으로 분석한다. 따라서, 각 부분의 타입을 검사하고, 결합 과정을 통해 전체 타입의 안정성을 검증한다.
서브타입 관계와 다형성
서브타입 관계는 타입스크립트에서 다형성을 구현하는 핵심 개념이다. Student 타입이 Person 타입의 서브타입인 것처럼, 서브타입 관계를 통해 값의 대입 가능성을 정의한다. 반면, 구조적 타이핑을 통해 타입 간의 호환성을 유연하게 관리하며, 코드 재사용성을 높인다.
실무 적용: ProductCard 컴포넌트
올리브영의 ProductCard 컴포넌트 예시를 통해 서브타입에 의한 다형성의 실용성을 보여준다. TodayProduct와 Product 간의 관계를 정의하여, 코드 변경 없이 새로운 타입의 데이터를 처리할 수 있게 된다. 결과적으로, 유지보수성과 확장성을 동시에 확보한다.