레이블이 front-end인 게시물을 표시합니다. 모든 게시물 표시
레이블이 front-end인 게시물을 표시합니다. 모든 게시물 표시
2020년 8월 7일 금요일

jQuery에서 Vue.js와 React로 사고방식 전환하기

jQuery는 DOM을 조작하기에 편리한 도구입니다. 지금까지도 DOM을 컨트롤 하는 가장 강력하고 편리한 방법 중 하나입니다. 그래서 여전히 많은 대기업과 스타트업에서 jQuery를 사용하고 있습니다. 그만큼 안정성이 높고 사용하기에 편리하다는 의미도 되겠습니다.

그러나 jQuery는 대부분의 대형 프로젝트에서 무분별하게 쓰입니다. 그리고 심각한 성능 문제를 야기합니다. 또, 이미 한물간 퇴물 라이브러리로 인식되기도 합니다.

jQuery는 쉽습니다. 그래서 JavaScript를 다루지 못하는 사람도 쉽게 jQuery를 다룰 수 있습니다. 심지어 자바스크립트 배우기를 건너뛰고 jQuery를 이용해서 프로젝트를 진행하기도 합니다. 그러나 이것은 분명히 좋은 현상은 아닙니다.

주식 시장이 급락하던 3월에 프론트엔드 프레임워크의 검색량도 급감하는 것이 재미있습니다. 현재 세계에서 가장 많이 쓰는 프론트엔드 프레임워크의 검색량입니다. Vue.js가 절대 강자였지만 최근 어떠한 이슈로 리액트가 다시 왕좌를 탈환했습니다.
<자료 : 구글 트렌드>

이미 오래전부터 프론트엔드프레임워크나 라이브러리는 폭 넓게 사용되어 왔습니다. 대표적인 것은 3가지가 있습니다. 먼저 페이스북에서 지원하는 리액트입니다. 그리고 Evan Yu라는 개인 개발자가 만든 Vue.js,그리고 끝으로 이들 중 가장 역사가 오래된 Angular입니다. 앵귤러는 과거 앵귤러JS의 진화된 버전입니다. 구글에서 시작된 프로젝트입니다.

세계적으로는 모두 비등비등한 선호도를 갖고 있습니다. 그러나 한국에서는 압도적으로 리액트의 인기가 높습니다. 어쨌든 어떤 도구를 쓰든 그것은 크게 중요하지는 않습니다. 그리고 오늘 이야기 할 주제도 그건 아니니까 일단 넘어가겠습니다.

jQuery에서 Vue.js나 React로 넘어갈 때 사고방식 전환을 하지 못해 어려움을 겪는 분들이 많습니다. 알고보면 별 것 아닙니다. 그런데, 아주 기본적인 설명을 해주는 사람이 없다보니 아주 기초적인 부분에서 걸려 넘어지는 분들이 계시는 것 같습니다.

그렇다면 jQuery에서 Vue.js로 넘어갈 때 어떤 사고방식 전환을 해야하는지 핵심적인 부분을 간략하게 짚어보겠습니다.

jQuery의 DOM First 사고 방식


jQuery는 DOM에 직접적으로 접근하고, 컨트롤합니다.
여기를 컨트롤 해주세요
위와 같은 HTML 마크업이 있습니다. jQuery를 이용해서 <span>태그를 감춰보겠습니다.
$(".box span").hide();
CSS 선택자와 거의 유사한 방법으로 DOM에 접근이 가능합니다. 편리하고 강력합니다.

Vue.js는 Data First 사고 방식


Vue는 가급적 DOM에 직접 접근하지 않고, 직접 컨트롤 하지 않습니다.
여기를 컨트롤 해주세요
jQuery는 CSS 선택자와 동일한 문법을 씁니다. 그래서 DOM에 직접 접근합니다. 그러나 Vue.js는 tag, id, class 값을 통한 직접 적인 DOM 접근을 하지 않습니다.

위의 예제에서는 v-if라는 컨디셔너 디렉티브가 붙어있습니다.
show: true
ES6의 export default를 이용해서 data 객체에 다음과 같이 show에 true값을 적용합니다. 그렇다면 앞서 작성한 v-if문은 <span>태그를 그대로 출력할 것입니다. 반대로 값이 false로 바뀌면 <span>태그는 사라지겠죠?

위 코드의 온전한 컴포넌트의 코드는 다음과 같습니다.



Vue는 기본적으로 위와 같은 구조로 작동을 합니다. data 객체의 return 구문 안에 템플릿에 뿌려 줄 데이터나 DOM 컨트롤을 위한 데이터를 넣어주면 됩니다. 그리고 이 데이터는 물론 동적으로 관리할 수 있으며 실시간으로 감시할 수도 있습니다. 그 부분에 대한 건 제가 혹시라도 나중에 다룰 수 있으면 다루어 보겠습니다.

객체에 들어가는 데이터들은 JSON을 사용할 수 있다면 쉽게 사용할 수 있습니다. JSON과 거의 흡사한 문법을 사용합니다.

정말 최대한 간단히 설명을 해보았습니다. Vue.js는 jQuery와 달리 DOM에 직접 접근하지 않습니다. 다만, 데이터의 상태 변동에 따라 DOM도 변동하게 되는 방식입니다.

2020년 8월 7일
송종식 드림


2020년 4월 1일 수요일

a와 button을 용도에 맞게 사용하기

출처 : unsplash.com

오랜만에 개발 관련 글을 쓴다. 아주 기초적인 부분인데 놓치고 있던 부분이 있어서 기록으로 남겨둔다. 코딩하는 습관은 한번 익숙해지면 고치기가 어렵다. 나는 여러가지 안 좋은 습관을 가지고 있다.

그 중 제발 좀 고치자 싶어서 노력하는 부분이 하나 있다. 바로 링크가 아닌 곳에서 <a>태그의 사용을 지양하는 것이다.

앵커 태그


WWW의 근간을 이루는 기술 중 하나는 HTML이다. HTML이라는 이름에도 들어 있듯이 HTML문서는 '하이퍼텍스트' 문서다. 하이퍼텍스트의 근간은 하이퍼 링크이며 이 하이퍼링크를 위해 존재하는 것이, 기본적으로 <a>태그이다.

<a>태그는 'href' 요소와 결합하여 하이퍼링크를 만든다.

따라서, <a> 태그는 페이지 간의 이동을 위해 링크를 생성할 때만 사용해야 한다. 기본중에 기본인데 과거에는 <a>태그에 href="#"을 넣거나, javascript:; 와 같은 것으로 페이지 링크와 스크립트 호출을 막아놓고, 동적 UI를 만들 때 버튼 기능으로 많이 사용했다. 이것이 시간이 흐르고 손에 굳어버리니 계속 이 방법을 고수했다. 이는 의미에 맞지 않는 매우 잘못된 마크업 사용법이므로 하이퍼링크 생성 이외에 페이지 내의 동적 UI 작성을 할 때는 <a> 태그의 사용을 지양하자.

버튼 태그


2000년대 중반부터 AJAX 기법이 널리 확산되었다. 그리고 나중에는 모바일 시대가 열리면서 SPA 앱 개발 방식도 널리 사용되었다. 웹페이지나 모바일 페이지는 심플하면서도 복잡해졌다. 어떤 인터렉션이 있기전에는 심플해졌고, 거기서 무언가 인터렉션이 발생하면 점점 복잡한 속살을 드러낸다.

지금의 웹페이지나 모바일웹 사이트들은 페이지 이동을 하지 않은 상태에서 수 많은 동작과 인터렉션을 요한다. 이런 페이지 내 기능들을 사용할 때 <a>태그 대신 <button> 태그를 사용하는 것이 조금 더 논리에 맞지 않을까 생각한다.

버튼 태그는 기본적으로 <input> 요소로 구현이 가능하다. 이 경우에는 form의 submit이나 reset 기능도 사용이 가능하다.

다만, <a>태그 대용으로 사용할 경우에는 이렇게 사용하지 말고 <button>..</button>으로 독립적 마크업을 사용하자. 이렇게 사용하면 버튼 안에는 이미지를 비롯해서 <span>등 다른 요소를 넣어서 조금 더 디테일한 스타일링도 가능하다.

W3C 링크


앵커 태그 명세 : https://www.w3.org/MarkUp/1995-archive/Elements/A.html
버튼 태그 명세 : https://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html#the-button-element

2020년 4월 1일
송종식