안녕하세요, 사람인HR Tech Sourcer 이승빈입니다
어느덧 마지막인 네 번째 개발 큐레이션을 작성하게 되었어요. 작성한 개발 큐레이션이 기술스택에 대한 정보를 얻으며 읽는 분들에게 조금이나마 도움이 되었기를 기대합니다.
이전에는 사람인HR에서 사용 중인 백엔드 기술스택을 중점으로 살펴보았다면 이번 포스팅에서는 사람인HR의 대표 프론트 기술스택 ‘Vue’를 소개해드리며 개발 큐레이션을 마무리해볼까 해요.
Story
지금까지 소개해드린 프론트와 백엔드의 역할이 어떻게 나뉘는지에 대해 간단히 소개하면서 Vue가 어떤 역할을 수행하는지 이야기해드리려 합니다. 개발 직무는 크게 두 가지로 나눠볼 수 있는데요. 이해하기 쉽도록 레스토랑의 상황에 비유하자면 다음과 같이 나타낼 수 있습니다.
•
프론트엔드 → 인테리어 디자이너 + 직원
•
백엔드 → 요리사
먼저 프론트엔드는 디자인 영역의 퍼블리싱 업무와 일반적인 프론트엔드 개발의 업무로 나눌 수 있는데요. 퍼블리셔는 인테리어 디자이너처럼 매력적인 공간을 설계하여 손님을 매료시키는 역할을 합니다. 웹 사이트 외관의 디자인을 담당한다고 볼 수 있어요.
일반적인 프론트엔드 개발의 업무는 벨을 눌러 손님이 음식을 주문하는 것과 같이 페이지에서 눈으로 확인할 수 있는 기능 이용을 가능하게 해주는 것을 의미합니다. 버튼을 클릭하면서 페이지를 이동하는 기능이 이에 포함될 수 있죠.
백엔드는 손님이 음식 주문이라는 프론트의 기능을 이용할 수 있도록 그에 맞는 음식을 만들어 제공하는 업무라고 할 수 있어요. 프론트 기반의 웹 서비스를 원활하게 운영하기 위해 서버, 데이터베이스와 같이 사용자에게 보이지 않는 위치에서의 업무를 수행하는 것을 의미합니다.
위 역할에서 일반적인 프론트엔드 개발의 업무를 수행하기 위해 사람인HR은 Vue.js라는 기술스택을 사용하고 있는데요. 사람인HR의 대표 프론트 기술스택으로 자리 잡은 Vue.js는 과연 어떤 특징을 가지고 있는지 살펴보겠습니다.
Vue.js
Vue는 프론트엔드의 개발 언어인 자바스크립트를 효율적으로 사용할 수 있게 만들어주는 프레임워크에요. 오늘날 React, Angular와 함께 가장 많이 사용되고 있는 프론트엔드 프레임워크 중 하나입니다. Vue.js가 다른 프레임워크와 차별화되는 특징은 무엇일까요?
Virtual DOM : “빠른 속도를 위한 가상화 기술”
한 번쯤은 사진의 왼쪽과 같은 HTML 코드를 본 적이 있으실 텐데요. 웹 브라우저는 이런 코드를 해석하여 화면에 보여주는 과정을 거치게 됩니다. 코드 해석은 일반적으로 이루어지지 않고 해석 과정에서 오른쪽과 같이 html, head, body와 같은 객체를 Tree의 형태로 구조화해야만 해석이 가능해져요. 이러한 구조를 바로 DOM(Document Object Model)이라고 합니다. HTML의 코드를 해석하는 렌더링을 위한 과정이라고 정리할 수 있죠.
페이지 수정 시 간단한 코드는 적용할 때 문제가 없겠지만, 객체가 몇백 개, 몇천 개로 늘어난 DOM을 수정하기 위해서는 수정 부분까지 Tree 구조의 많은 부분을 확인해야 해서 성능에 문제가 발생하게 돼요. 그래서 등장한 것이 바로 Virtual Dom입니다. 실제 DOM은 미리 저장해두고 이후의 작업은 Virtual DOM에서 수행하면서 수정 사항이 발생하는 경우 기존의 Virtual DOM과 수정된 Virtual DOM을 비교하여 차이가 있는 부분만을 실제 DOM에 적용해 성능 이슈를 해결하는 방식이에요.
양방향 데이터 바인딩 : “코드의 양을 줄이는 기술”
소프트웨어를 설계할 때는 기능에 따라 역할에 구분을 두고 그에 맞춰 디자인하게 되는데요. 위처럼 크게 세 가지인 Model, View, Controller 세 가지(MVC 패턴)로 분류할 수 있어요.
여러분이 Instagram을 사용한다고 해볼게요. User가 사진을 올리고 글을 작성하고 업로드하는 과정이 바로 Controller에게 ‘내 소식 올린다!’ 라고 알리는 행위에요. User의 요청을 받은 Controller는 Model에게 ‘User가 새로운 소식을 올렸어, 목록에 추가 부탁해~’ 라고 전달하죠. 하지만 목록 추가만 하면 다른사람들이 내 소식을 볼 수 있을까요? User가 보는 화면인 View에도 동일하게 소식을 추가해 주어야 다른 사람들이 내 소식을 확인할 수가 있는겁니다. 이렇게 Model과 View의 데이터 상태를 동일하게 만드는 것이 데이터 바인딩이에요. 이에 대한 코드의 구성은 다음과 같습니다.
1.
User가 Controller에게 요구사항 전달
2.
Controller가 전달한 사항에 따라 Model의 데이터 수정
3.
Model이 수정한 데이터에 따라 화면인 View 업데이트
이미지는 양방향 데이터 바인딩의 예시인데요. User가 Controller에게 요구사항을 전달한 후 Model의 데이터에 변화가 일어나고 동시에 화면의 View가 같이 변화합니다. 이처럼 양방향 데이터 바인딩이란 Model과 View의 데이터를 동기화하는 것을 의미합니다. 기존의 Model의 데이터가 수정되고 Model이 수정한 데이터에 따라 화면인 View가 순차적으로 업데이트 되는 2번과 3번의 과정이 동시에 일어나도록 설계하기 때문에 코드의 양이 크게 줄어 매우 편리합니다.
우수한 성능 : “가볍다, 빠르다”
Vue는 React와 Angular로부터 각각 Virtual DOM, 양방향 바인딩이라는 장점을 잘 흡수한 사례라고 볼 수 있어요. 여기에 코드 구조가 간단하여 가볍고 빠르며 개발속도를 높일 수 있다는 장점까지 보유하고 있습니다. Vue의 우수한 성능을 토대로 사람인HR에서는 Vue를 기반으로 하여 사람인을 포함한 다양한 서비스의 프론트엔드 작업을 수행, 개발하고 있답니다.
Vue를 기반으로 진행한 사람인HR의 프로젝트 이미지
준비한 개발 큐레이션은 여기까지입니다. 지금까지 총 네 편의 개발 큐레이션을 통해 사람인HR의 대표적인 백엔드와 프론트엔드의 기술스택을 알아보았는데요. 큐레이션에 관심을 가져주신 모든 분들께 감사의 말을 전합니다. 큐레이션에 소개된 이야기 외에도 다양한 기술스택을 기반으로 여러 프로젝트가 진행되고 있으니 관심이 있으시다면 기술블로그를 통해 더 많은 사람인HR의 기술을 살펴보시기 바랍니다.
사람인HR에서는 제공하는 서비스를 함께 운영하고 새롭게 개발하며 발전시켜나갈 유능한 개발자들을 모집하고 있는데요. 큐레이션에서 소개한 기술스택이 평소에 관심을 가지고 있던 기술이거나 보유하고 있는 전문적인 기술 중에 포함되어 있다면 사람인HR의 개발자 모집에 지원해보는 건 어떠신가요?