인프런 커뮤니티 질문&답변
프론트엔드에서의 인터페이스활용
해결된 질문
작성
·
28
·
수정됨
0
자바, 코틀린 등을 사용하여 코드를 작성할 때나 백엔드 개발할 때는 상속보다 유연한 인터페이스를 구현하는 코드가 꽤 종종 사용하곤 하는데 프론트엔드에서는 왜 거의 사용하지 않는지가 궁금합니다.
언어들이 자바보다 더 유연해서 다형성을 만족하는 상황이 많아서 그런걸까요?
혹시 실제 강사님게서 실무에서 사용했던 경험이 있으신지 궁금하며, 없다면.. 왜 굳이 사용하지 않는지도 궁금합니다
답변 2
1
안녕하세요 이정환입니다.
우선 프론트엔드에서는 백엔드(Spring Boot 같은)만큼 DI나 클래스 기반의 객체지향 프로그래밍을 많이 사용하지 않습니다. 그래서 말씀하신 것처럼 인터페이스를 구현해서 다형성을 활용하는 경우가 많지는 않습니다.
TypeScript의 인터페이스는 타입 정의용으로는 엄청 많이 쓰이지만, Java처럼 DI를 통해 구현체를 교체하는 용도로는 거의 사용하지 않습니다. 가장 큰 이유는 React가 함수형 프로그래밍 패러다임을 따르기 때문입니다. 데이터와 로직을 분리해서 함수로 조립하는 방식이 훨씬 자연스럽고, 백엔드처럼 복잡한 비즈니스 로직이나 트랜잭션 처리가 많지 않습니다. 대부분 UI 렌더링과 상태 관리가 주된 작업이기 때문에 클래스 기반의 무거운 구조가 필요하지 않은 거죠.
그럼에도 불구하고 클래스를 사용하는 경우가 있는데, 바로 브라우저 API 같은 외부 API를 추상화할 때입니다. 예를 들어 LocalStorage를 직접 쓰지 않고 StorageService 같은 클래스로 감싸서 사용하면, get, set, remove 같은 여러 관련 메서드를 하나로 묶을 수 있고, 테스트할 때 Mock 객체로 교체하기도 쉬워집니다. API 클라이언트도 마찬가지로 baseURL 같은 상태를 가지고 있어야 하고, get, post, put, delete 같은 관련 메서드들이 있기 때문에 이런 경우에는 또 클래스로 만드는 게 적합합니다!
PS. JavaScript와 TypeScript는 멀티 패러다임 언어이기 때문에, 상황에 맞게 함수형과 객체지향을 섞어서 사용할 수 있습니다. 다만 프론트엔드에서는 함수형이 주가 되고, 필요한 부분에만 객체지향을 활용하는 방식이 일반적입니다!
0
안녕하세요, 인프런 AI 인턴입니다. 개발자 취업 포기님.
프론트엔드 개발에서 인터페이스를 덜 사용하는 이유와 관련된 질문을 주셨군요. TypeScript나 JavaScript 같은 프론트엔드 언어는 타입 시스템이 강력하지 않거나 아예 없었고, TypeScript조차 Java나 Kotlin처럼 강력한 인터페이스 개념을 가진 언어에 비해 상대적으로 단순한 이유가 있습니다. 주요 차이점은 다음과 같습니다:
동적 타입의 특성: JavaScript와 TypeScript는 동적 타입 언어인데, 이로 인해 많은 경우 타입 체크가 컴파일 타임보다는 런타임에서 이루어집니다. 그에 비해 Java같은 언어는 정적 타입을 강조하여 컴파일 타임에 체계적인 타입 체크가 이루어집니다.
TypeScript의 유연성: TypeScript는 JavaScript의 상속을 확장하면서 인터페이스를 제공합니다. 그러나 TypeScript의 인터페이스는 기본적으로 구조적 타입 시스템(structural typing)을 가지기 때문에, 객체의 구조만 맞으면 타입 체크를 통과할 수 있어 Java의 명시적 인터페이스 도입이 불필요할 수 있습니다.
역할의 명확성: 프론트엔드 개발에서는 대부분의 로직이 UI 구성에 중점을 두며, 컴포넌트 간의 역할 정의 및 데이터 흐름을 관리하는 데 집중하게 됩니다. 따라서 복잡한 인터페이스 설계보다는 직접적이고 명확한 데이터 구조와 타입을 사용하는 것이 일반적입니다.
실무에서 인터페이스를 사용하는 경우는 특정 라이브러리나 프로젝트가 복잡한 타입 정의를 통해 다양한 기능을 포괄해야 할 때 입니다. 특히 API 응답 형식이 다양하게 변화하는 환경에서 유틸리티로 활용할 수 있습니다.
유사한 주제에 관련된 커뮤니티의 질문과 답변을 포함한 게시물을 아래 링크에서 확인할 수 있습니다. 도움이 되길 바랍니다:
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.





답변 감사합니다.
궁금증이 해결되었습니다.