[Web] React로 보는 요즘 Web Front-end Style

 

Recent Web Front-end Style

글 제목은 거창하지만.. 사실 별 내용은 아니고, React를 공부하면서 느낀점입니다.

대체로 느껴지는 요즘 프론트앤드 웹 코딩 스타일의 변화를 적어봅니다. 개인적으로 느끼는 것들을 적어보는 것이라, 실상과 다를 수도 있습니다. 이해를 위해서 지나치게 단순화하거나, 과장한 부분이 있습니다.

 

1. HTML5

  기존에는 HTML-CSS-JS로 이어지는 3단 요소들을 잘 작성해야 했지만, React에서 볼 수 있듯 이제는 JS로 통합이 되는 (적어도 될 수 있다 정도는 되겠네요) 느낌입니다.

HTML5에서 DOM Name을 XML처럼 가져갈 수 있었지만, 사실 디자인 측면에서 div와 다른 면이 없기 때문에 다들 div로 그냥 쓰곤 했죠(저도 그렇구요).

그렇게 됐던 가장 큰 이유는 아마 브라우저의 하위호환성이라는 떨어낼 수 없는 부분 때문에 그렇습니다.

이러한 구조에서는 <div id="xxx">로 구분되는 매우 가독성 떨어지는 HTML5 코드가 나오게 되지요. 근본적인 부분이 해결될 수 없으니 코딩디자인적인 부분이 그동안은 개선되지 못했습니다.

2. Responsive Design

  반응형 디자인이라고도 불리우는 이러한 디자인은 모바일-PC에서 동시에 디자인이 될 수 있게 하는 좋은 툴입니다. 한동안 이 블로그의 메인 주제이기도 하였구요. 여기서 주목해야할 점은, 하나의 코드로 다양한 Platform에 대응한다는 아이디어 입니다. media query를 씀으로써 대두된 이 디자인은 구버전 브라우저인 IE8에서도 전용 CSS를 지원하는 식으로 구현이 가능하게 되었습니다. 이러한 식의 1 Code - Multiplatform의 흐름은 시대적 흐름이 되었습니다.

 

3. JS Transpiler의 대두

  Javascript라고 해도 이것이 불가능할 이유는 딱히 없었습니다. ES6가 나오고, 여전히 구버전의 브라우저들은 이를 지원하지 않지만, Babel이라는 일종의 컴파일러 역할을 하는 놈이 등장하였습니다. 이제는 Javascript의 신 문법을 거리낄 필요가 없어졌다고 할까요. React와 같은 웹 Framework는 너무나 당연하게 이러한 시대적 흐름으로 등장하였습니다. 아마 Facebook에서 이를 개발하지 않았다고 하더라도 언젠가 등장하였을 Framework입니다. Javascript가 실질적인 웹에서의 Engine역할을 담당하는 만큼, 브라우저별로 파편화된 문제를 해결할 수 있다는 점이 또다른 장점입니다. 제가 1번에서 이야기하였던, <div id="xxx"> 대신에 <nav>를 과감하게 사용할 수 있는 또다른 이유입니다.(엄밀히 따지자면 <nav>는 사용해도 아무 문제가 없었지만, 개발자들이 과감하게 신문명(?)을 사용할 수 있는 계기가 되었다고나 할까요) Front-end 개발자는 그저 표준대로 작성만 하면, Transpiler가 각각의 Target Browser에 맞게 알맞을 출력물을 보여줄 테니까요.

 

4. 그래서...

  그래서 이제는 Front-end 개발도 단순한 텍스트 에디터로만은 하지 못하게 되었습니다. webpack과 같은 놈이 css의 sass, js의 es6와 같은 놈들을 자동적으로 컴파일 비스무레한 작업을 하게 해주어야 제대로된 결과물을 볼 수 있게 해줍니다. 어찌보면 더 어려워진 면도 있지만, 그래도 이렇게 개발환경이 변화한 데에는 나름의 이유를 다 찾을 수 있었고, 순응해야할 것 같습니다. 그렇지만 어찌보면 현재의 시점은 과도기이기도 하기 때문에, 보다 더 본질적인 HTML-JS-CSS의 공부가 오히려 필요한 시점이라고도 할 수 있겠습니다.