들어가면서

최근 회사에서 이것저것 바쁘게 일만하다보니, 내가 정작 어떤 기술을 가지고 있는지, 어떤 기술을 가지고 어떻게 솔루션을 만들어 내는지 가늠이 되지 않았다. 어떤 것이 기본 소양인지 내가 누구인지 장자가 나비인지 내가 장자인지 나비가 장자로 승진을 했는지 가늠이 되지 않았다.

Svelte 4?

svelte 4 나왔다고 한다.
Svelte 4 발표 (svelte.dev) 라고 한다.

React 가 부동의 1위라서 딱히 이걸 흔들 것은 아닌 것 같다. react vs svelte vs vue

이게 무엇인지 알아보기 위해서 홈페이지에 방문 했는데…
cybernetically enhanced web apps 라고 한다.
인공두뇌적으로 향상된 웹 앱 이라고 번역이 된다 한다. - by google
뭐지?

그냥 내가 알기로는 Front-End 프레임워크라고 들었다.

적은 코드, 가상 돔 없음, 찐 Truly Reactive 라고 한다.

Truly Reactive 가 뭐지?

Reactive Programming 를 이해하기 위해서[RxJava] RxJava 이해하기 를 참조한 페이지를 인용해본다.

Reactive Programming이란 데이터 흐름과 전달에 관한 프로그래밍 패러다임이다.
우리는 주로 알고리즘 문제와 같이 절차를 명시하여 순서대로 실행되는 Imperative Programming(명령형 프로그래밍)을 한다.
반면 Reactive Programming이란 데이터의 흐름을 먼저 정의하고 데이터가 변경되었을 때 연관된 작업이 실행된다.

즉 프로그래머가 어떠한 기능을 직접 정해서 실행하는 것이 아닌, 시스템에 이벤트가 발생했을 때 알아서 처리되는 것이다.

DOM EVent

<script>
	let m = { x: 0, y: 0 };

	function handleMousemove(event) {
		m.x = event.clientX;
		m.y = event.clientY;
	}
</script>

<div on:mousemove={handleMousemove}>
	The mouse position is {m.x} x {m.y}
</div>

로 되어 있다.

만약 React 로 구현한다고 치면

const App = () => {
  const [m, setM] = useState({x:0, y:0});
  
  const handleMousemove = (event) => {
		setM({
		   x: event.clientX,
		   y: event.clientY
		});
  }
	
  useEffect(() => {
    setM({x:0, y:0});
  }, [])
  
  return (
    <div onMouseMove={handleMousemove}>
        The mouse position is {m.x} x {m.y}
    </div>
  );
}

정도 될 것 이다.

useState 초기화? 와 같은 문제가 있어 그냥 useEffect 에 useState 의 초기화를 보내보았지만 뭐 이건 지극히 나의 useState 에 대한 인식이다.

뭐 변수에 바로 값을 쓰니 편할 것 같긴한데, 근 몇년 이상을 hook 이라는 것을 쓰다보니 매우 조심스럽긴 하다.

What is Svelte? 에서는
A React code to update counter would look something like this:

const { count } = this.state;
this.setState({
count: count + 1
});

Svelte, however, reduces and simplifies this 65 character code into the following 11 character code:

count += 1;

라고 하는데… 나는 React 를 너무 오래 썼나보다.

사람 죽을만한 차이가 있는 것인가?

Svelte vs React: Which JavaScript Framework Is Better?

Programs written in Svelte are useful for application in low-capacity or low-power devices. Svelte tools and frameworks provide enhanced control over state management, routing, and building customized infrastructure. Svelte is useful for DOM manipulation, reactive frameworks, and emerging markets.

라고 한다.

사실 React 로 무언가를 만들다보면, HTML 은 점점 제외되고 React Component 를 몇몇 hook 을 활용하여 만들고 또 만들고 또 감싸고 감싸고 있긴 하다.
과연 HTML 아셔요? 하면 아니요 잘 몰라요 할 수도 있겠다.
편리하긴 한데 기저에 무엇이 있는 지 모를때도 있고 나름 정의된 Life Cycle 에서 구현을 하고 있기도 하다.
뭐 추상적이고 나 혼자 알아 들을 수 있는 이야기를 하는 것이긴 한데…
사실 무슨일 하는 지 모르겠고 어느날 React 망했어요 하면 나도 함께 망할 것 같긴 하다.
물론 나름 마크업을 나름 추상화 해서 구현하고 있는 것이긴 하지만… 점점 자신은 없어 진다.

하고 싶은 것은

주식 예측 은 망했다.
한톨도 벌지 못했다.
컨센선스라는.. 지표를 믿어 보았지만..
나는 인내심도 없고, 예지력도 없고, 돈도 없었다.

이번엔 배당에 근거한 주식 투자, 개 장기 투자를 하고 싶다.
사실 배당락 전에 팡팡 오르면 싹 내다 팔고 싶다.
이 전략을 할 때 필요한 데이터를 알아서 긁어주는 솔루션을 내고 싶다.

프론트는 엄청 간단히 구현을 할 것이고
네이버 주식 API 등을 잘 감싸서 내가 하고 싶은 일들을 만드는 것에 일이 집중될 것이긴 하다.

흠 그럼 react 니 svelte 니 할 필요가 없었다.
결국 Backend 를 봤어야 했다..

그런데!

seveltekit

Svelte renders UI components. You can compose these components and render an entire page with just Svelte, but you need more than just Svelte to write an entire app.
SvelteKit provides basic functionality like a router — which updates the UI when a link is clicked — and server-side rendering (SSR).

라고 한다.

솔루션은??

기술 스택이나 잡아보자.
최근 나는 Typescript - React - NextJS - TanStack/Query 로 솔루션을 만들어 냈었다.
정적페이지가 대부분이었고, MUI 를 쓰곤 했다. (사실 나는 ExpressJS 가.. 좋..다…)

이번엔 과감하게 SvelteKit 을 써봐야겠다.
흠 이번에 그런데 SSR 해야 하나?

뭐 굳이긴 한데 찐 백엔드에 가기 전에 이미 캐싱된 것이 있으면 조금 더 빨리 답을 내려줄 수 있는 등의 레이어를 나누어 보고 싶다.
그래 그냥 나 혼자 하는 것인데, 코드 리뷰도 필요없고, 하고 싶은거 하자.

마무리

러스트 하기로 한 것은… 아직 안하고 있다.
그리고 CSR - svelte 이런거 보고 있다. 내가 할지는 잘 모른다.