이응시읏이응
95
2021-05-23 18:12:10
3
801

개인적으로 생각한 웹의 트렌드에 대해 정리한 글입니다. 읽어봐주실수 있나요


안녕하세요

최근 이직을 하며 Vue.js + Spring Boot, HTML + Spring에서 React + Go를 접하고 있는 2년차 웹개발자 입니다.


여러 언어를 다루다가 드는 생각을 나름대로 정리해 보았습니다.

괜찮으시다면 한번 읽어봐 주시고 코멘트를 부탁드립니다.


글에 대한 지적도 좋고, 개인적인 생각이나 의견을 적어주셔도 좋습니다.


제 블로그에 포스팅한 글을 그대로 가져온 것이라 말투가 딱딱합니다.

이해를 부탁드립니다 ㅎㅎ


시작하겠습니다.


아래 양식을 구현한다고 생각해보자.


1. HTML + JavaScript

<input type="number" id="inputA" value=1 oninput="handleChange()"> <input type="number" id="inputB" value=2 oninput="handleChange()"> <p id="sum"></p> <script> function handleChange() { const a = document.getElementById('inputA').value const b = document.getElementById('inputB').value this.setLabelValue( a + '+' + b + '=' + (a*1 + b*1)) } function setLabelValue(text) { document.getElementById('sum').textContent = text } </script>

- 구조를 담당하는 html과 동작을 담당하는 script가 확연히 구분된다.

- 명시적으로 event handler를 선언하여 값을 처리하며, id는 unique해야 한다.

- 상당히 직관적이고 구현도 쉽지만 요소가 많아질수록 관리해야할 부분이 너무 많아지게 된다.

- DOM에 바로 접근하고 있다.

2. react

import React, { useState } from 'react'; export default () => { const [a, setA] = useState(1); const [b, setB] = useState(2); function handleChangeA(event) { setA(event.target.value); } function handleChangeB(event) { setB(event.target.value); } return ( <> <input type="number" value={a} onChange={handleChangeA}/> <input type="number" value={b} onChange={handleChangeB}/> <p>{a} + {b} = {a + b}</p> </> ); };

- JSX의 등장으로 html요소가 script내부로 들어갔다.

- html과 마찬가지로 명시적으로 event handler를 선언해 주고 있으나 event object로 target element에 접근이 가능하게 되었다.

- 3개의 element가 하나의 최상위 요소로 감싸져야 한다.

- useState를 거쳐 virtual DOM에 랜더링을 하고 있다.

3. vue

<template> <input type="number" v-model.number="a"> <input type="number" v-model.number="b"> <p>{{a}} + {{b}} = {{a + b}}</p> </template> <script> export default { data: function() { return { a: 1, b: 2 }; } }; </script>

- <scrpit> 태그가 돌아왔다. html요소와 script요소가 다시 구분되기 사작했다.

- v-model의 등장으로 이벤트를 명시적으로 바인딩 할 필요가 없어졌다.

- element들은 여전히 하나의 최상위 요소로 쌓여져야 한다.

- data 함수에 상태와 관련된 변수를 넣어주면 v-model을 거쳐 바로 랜더링이 진행된다.

4. svelte

<script> let a = 1; let b = 2; </script> <input type="number" bind:value={a}> <input type="number" bind:value={b}> <p>{a} + {b} = {a + b}</p>

- 변수의 선언만으로 상태관리가 가능해졌다.

- element요소를 하나의 최상위 요소로 감쌀 필요가 없어졌다.

- 코드가 매우 간결해졌고, 다시 html스러워졌다.


React 페이지의 마크업과 관련된 요소가 함수 내부로 들어갔다. 하나의 페이지는 컴포넌트로 쪼개졌고, 컴포넌트도 JSX로 쪼갠 결과이다.

VUE는 <script>태그를 부활시켜 다시 마크업과 관련된 요소와 기능과 관련된 요소를 구분했고 기존 개발자들에게 익숙함을 제공했다.

Svelte는 한걸음을 더 나아가서 더욱 HTML스러운 문법을 제공했다.

React가 Virtual DOM이라는 개념을 가지고 나오면서 '상태의 변경에 따라 뷰가 자동으로 업데이트 된다'는 반응성의 개념은 프론트엔드 분야의 비약적인 확장을 이끌어냈다. 그리고 JS의 반응형 라이브러리는 돌고돌아 기존의 HTML에서 반응성을 더한 형태로 발전을 해오는 추세이다.

갈길이 멀지만(Svelte는 아직 정식버전이 릴리즈 되지 않았다.) Svelte는 충분히 직관적이고, 빠르고, 편리하며, 강력한 기능을 개발자에게 제공한다. 그런만큼 추후 웹 생태계는 프론트의 변화다는 백엔드의 변화가 이루어 질 것이라는 생각이 든다.

JAVA는 JVM이 무겁고, 느리며, lambda와 stream라는 함수형의 개념을 끌어들여 정체성 마저 혼미해진 느낌이다. Go는 상당한 숙련도를 요구한다.

기존의 백엔드 언어가 단점을 보완할지, 새로운 백엔드 언어가 대두될지 한번 지켜보도록 하자.


0
  • 댓글 3

  • 마라토집착
    5k
    2021-05-23 18:16:00

    Sql 과 유닉스 쉘스크립트 지식이 더 필요한 플젝도 많이있습니다 자바배치나

  • dev_og
    912
    2021-05-23 21:24:28

    Go로도 웹을 하나요 ?

  • 안녕디지몬
    217
    2021-05-23 23:26:09

    처음 리액트 시작할때는 (2017년도) 이 정도로 복잡하지 않았는데

    hooks, componenet 구조, 상태관리, SEO(ssr), graphql, typescript 등

    신경 쓸게 너무 많아져 점점 대규모 웹어플리케이션 규모에 맞다는 생각이 들고 있습니다.

    간단히 만들기엔 svelt가 괜찮은거 같은데 아직 typescript 지원을 하지 않아 아쉽네요. 


    JVM 문제는 여전하고 문제가 될거라보고 저는.. 해결되지 않고 차츰 사장될거 같다는 생각이 듭니다 

    다만 우리나라의 경우 5년이 걸릴지 10년이 걸릴지 모르겠네요.


    Golang의 퍼포먼스는 속된 말로 미쳤다고 생각하고 있습니다.

    특히 gRPC와 함께 사용한다면 더욱 강력해진다고 여기고 있죠

    프로덕션 환경에서 사용하는 golang과 gRPC


    다만 한가지 더 생각해야 될 것이 저는 C#이라고 생각하고 있습니다.

    C#같은 경우 unity기반으로 VR/AR/Game/metabus 등 사용하는 곳이 점점 늘어가고 

    ms에서도 지원을 아끼지 않아 계속 발전이 기대 되고 있습니다.





  • 로그인을 하시면 댓글을 등록할 수 있습니다.