지난 8월 Ahea 팀 해커톤에 참석을 했었습니다. 그때 새로운 기술을 써보자는 의미로 Angular를 하게 되었고, 자연스럽게 Component-Based Development에 대한 이해를 하게 되었습니다. 오늘은 그 주제에 대해서 이야기를 나눠보려고 합니다.
아래는 저희 프로젝트 화면입니다.
보시는 바와 같이 로직은 Field Name과 Type을 필요한 만큼 동적으로 생성하여 값을 넣고, 원하는 추출 타입과 수를 정한 뒤 Preview를 클릭하면 서버에서 데이터를 가져와 보여줍니다.
먼저, Angular는 Component-Based Development(이하 CBD)이기 때문에 Component로 나눠서 생각을 해보겠습니다.
총 4개의 Component로 구성되어있습니다.
- main : 전체와 Header를 나타내고 있고, 최상위 Component입니다.
- form : Field Name, Type, rows, exportType의 값을 서버로 전송하는 역할을 합니다.
- fields-wrapper : field들을 동적으로 생성 및 삭제하는 역할을 합니다.
- field : Field Name과 Type 값을 가지고 있습니다.
제가 맡은 Field와 이것을 감싸고 있는 Wrapper에 대해 소개 드리겠습니다.
로직에서도 Component의 구조가 명확히 나타나네요. wrapper 안의 field의 구조로 말이죠.
field를 생성, 삭제하는 로직을 설명하겠습니다.
<ng-container>태그를 보시면 “rows”라는 Array를 루프 돌면서 field를 생성하는 역할을 하고 있습니다. 디폴트로 rows의 개수가 1개이기 때문에 최초에는 1개의 field만 생성됩니다. field를 생성(Add another field를 클릭) 하기 위해서는 rows.push()를 통해 Array에 값만 하나 넣어주면 됩니다. 삭제하기 위해서는 Array에서 빼주기만 하면 되겠죠?
간단한 로직이지만 이것을 통하여 CBD의 특성을 이해하게 되었고, CBD 기반 Angular의 강력함을 알았습니다.
만약, jQuery로 짰을 경우 HTML을 스크립트에서 만들고, 해당하는 selector를 찾아서 append(), remove() 하고, 값이 존재하면 상황에 맞게 핸들링을 해줘야 합니다.
그러나 CBD를 활용하여 Component만 설계해 놓으면 추가, 삭제는 Array의 push(), splice()로 값이 필요할 경우는 [ ]를 통한 바인딩으로 간단하게 처리할 수 있습니다.
Angular, React, Vue 요즘 유행하는 3개의 프론트엔드 기술 모두 CBD 방식을 채택하고 있습니다. 컴포넌트들로 구성하여 활용하면 위의 예처럼 간단하게 사용하거나 또는 재사용이 가능한 웹 환경을 구축할 수 있기 때문입니다. 굳이 프론트엔드 개발자가 아니더라도 CBD에 대한 이해와 경험을 가지고 있다면 다양한 방면으로 활용할 수 있으리라 생각합니다.
