Forem: Composite

Why do you hate frontend developers?

Composite — Thu, 12 Feb 2026 08:07:12 +0000

Every time a new LLM drops, the dev community goes into a frenzy.
Among all the noise, one topic consistently steals the spotlight:

"AI is getting so good at frontend that frontend developers will soon be extinct!"

I’ve been seeing this same headline for two years straight now.
At this point, it feels like the subtext is actually:

"Frontend devs are useless. Isn't it about time they disappeared?"

And yet, here we are two years later, and frontend developers are still very much alive. Why is that?

node.js Worker thread with Typescript

Composite — Thu, 08 Jan 2026 11:34:33 +0000

Have you encountered this frustrating error since updating to Node.js 20?

TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for src/App.ts

This isn't just a minor glitch; it’s a long-standing issue in the ecosystem. You can see the ongoing discussion here:

TypeStrong/ts-node#2100

The problem is especially painful when trying to run .ts files using Worker. No matter what you try, that error often greets you. Even tools like ts-worker from Bree don't fully support ESM yet, leaving many of us in a tough spot.

But there is a way out! If you are using Vite in your environment, the solution is closer than you think. The Vite team provides vite-node, which allows you to run scripts within your Vite environment.

The Solution: Using vite-node

One tricky part remains: Node.js Worker still primarily expects .js or .mjs extensions. To bridge this gap, we'll use a small wrapper strategy.

Here’s our setup:

vite-node
A worker_wrapper.mjs file
parent.ts and child.ts

It sounds a bit complex, but it's actually quite simple once you see the code.

1. `worker_wrapper.mjs`

This file uses the vite-node programmatic API to load and execute our TypeScript worker.

import { workerData } from 'node:worker_threads';
import { createServer } from 'vite';
import { ViteNodeRunner } from 'vite-node/client';
import { ViteNodeServer } from 'vite-node/server';
import { installSourcemapsSupport } from 'vite-node/source-map';

// create vite server
const server = await createServer({
  optimizeDeps: {
    // It's recommended to disable deps optimization
    noDiscovery: true,
    include: undefined,
  },
});

// create vite-node server
const node = new ViteNodeServer(server);

// fixes stacktraces in Errors
installSourcemapsSupport({
  getSourceMap: (source) => node.getSourceMap(source),
});

// create vite-node runner
const runner = new ViteNodeRunner({
  root: server.config.root,
  base: server.config.base,
  // when having the server and runner in a different context,
  // you will need to handle the communication between them
  // and pass to this function
  fetchModule(id) {
    return node.fetchModule(id);
  },
  resolveId(id, importer) {
    return node.resolveId(id, importer);
  },
});

// execute the file
await runner.executeFile(workerData.jobpath);

// close the vite server
await server.close();

2. `parent.ts`

When initializing the Worker instance, we point it to worker_wrapper.mjs instead of the .ts file directly. We pass the actual target path via workerData.

import { Worker } from 'node:worker_threads';
import path from 'node:path';
// in Vite, you should declare __dirname yourself.
const worker = new Worker('./worker_wrapper.mjs', {
  workerData: {
    scriptPath: path.resolve(__dirname, './child.ts'),
  },
});

worker.on('message', (msg) => console.log('From Worker:', msg));

3. `child.ts`

This is where your actual worker logic lives. You can write pure TypeScript here!

import { parentPort } from 'node:worker_threads';

const heavyTask = (): string => {
  return "Task Completed in TypeScript!";
};

parentPort?.postMessage(heavyTask());

Why this works

With this approach, you can:

Test efficient thread separation (for schedulers like Bree) during development.
Avoid messy hacks with Node's experimental loaders.
Ensure a seamless transition from development to build.

But, you must follow real chunk path for after-built worker!

Happy node.js-ing!

The frondend chaos

Composite — Thu, 19 Jun 2025 01:04:11 +0000

React

The Next ~~.js~~ of Frontend Technology. by ~~Meta~~Vercel.

Vue.js

New Frontend Era for ~~Quasar~~OTAKU.

Svelte

Introducing Rune, The React ~~ive~~ state management system.

Solid.js

DO NOT use: OR YOUR TYPE INDEFINITION WILL FAIL.

Preact

Postreact.

Qwik

Run away, Qwikly!

Backbone

Backbone? I can't see anything but bone.

Ember.js

Only Apple ~~rem~~embers.

htmx

SHUT UP REACT WE WILL BE THE ONE IN THE FRONTEND BECAUSE I AM THE HTML!

Lit

Li f ted in the frontend.

11ty

1 Markdown vs 11 men

Marko

We need Macro, Marco!

Alpine.js

I'm not frontend, just a framework.

jQuery

The frontend winner of the whole day, ever.

A React server feature cheat sheet

Composite — Thu, 19 Dec 2024 06:20:37 +0000

React Server feature basics

Server Component (React Server Component, RSC): A component that runs on the server and renders to the client as the same as SSR.
Server Function (a.k.a. Server Actions): A function that runs on the servers only and sends the information to the client.

Directives

'use client': If you are using a "server component" enabled environment, you should mark use client at the top of the file to mark it as a client component.
'use server': If you have a consideration of mutating the information on the server, you should mark use server directive at the top of the function body in the server component or file to operate only on the server.

Server Component

RSC is no stateful nor lifecycle. You can't use any hook functions (useState, useEffect, etc.) on the server component.
RSC can have an async function.
RSC can have server functions. but you must mark 'use server' in the top of the function body.
RSC can have children in both the server component and the client component.
RSC cannot run any browser API.
Your RSC can pass props of any type to RSC. also can pass props type with limitation to the client component. Check the directive types table below.

import marked from 'marked'; // Not included in bundle
import sanitizeHtml from 'sanitize-html'; // Not included in bundle

async function Page({page}) {
  // NOTE: loads *during* render, when the app is built.
  const content = await file.readFile(`${page}.md`);

  return <div>{sanitizeHtml(marked(content))}</div>;
}

Server Function

when definition, you must have the 'use server' directive in the function body or file.
You can run any server features on the function body.
You cannot run the browser API on the function body.
You can call server functions on both the server and client.
You can return value with limitations. Check the directive types table below.

Declaring server function in the server component

import Button from './Button';

function EmptyNote () {
  async function createNoteAction() {
    // Server Function
    'use server';

    await db.notes.create();
  }

  return <Button onClick={createNoteAction}/>;
}

Declaring server function in the separate file

"use server";

export async function updateName(name) {
  if (!name) {
    return {error: 'Name is required'};
  }
  await db.users.updateName(name);
}

Using server function in the client component

"use client";

import {updateName} from './actions';

function UpdateName() {
  return (
    <form action={updateName}>
      <input type="text" name="name" />
    </form>
  )
}

Comparison of handle value types in directives

use client: passing prop type from server component to client component.
use server: The return type of Server functions

Type	`use client`	`use server`	Notes
`string`	✅	✅	both string value and iterables are supported.
`number`	✅	✅
`bigint`	✅	✅
`boolean`	✅	✅
`undefined`	✅	✅
`null`	✅	✅
`Array`	✅	✅	Only available in the item of serializable list.
`Map`	✅	✅	Only available in the item of serializable list.
`Set`	✅	✅	Only available in the item of serializable list.
`TypedArray`	✅	✅
`ArrayBuffer`	✅	✅
`Date`	✅	✅
`object`	✅	✅	Support only plain object(object initializers or `JSON`), null prototype not supported.
`Promises`	✅	✅	Only available in the serializable list.
`ReactNode`	✅	❌	Only Server Component can send it to Client Component via props.
`FormData`	❌	✅	Only server functions can return `FormData` instance.
`symbol`	⚠️	⚠️	Only symbols registered in the global Symbol registry via `Symbol.for`
`function`	⚠️	⚠️	Only server functions allowed.
`class`	❌	❌	Any instance objects are not serializable.

The other types and instances are not available.

Happy react'ing!

You don't need update to React 19

Composite — Wed, 11 Dec 2024 06:15:11 +0000

When you saw the new features listed on the official blog:

useTransition: Just startTransition with pending state.
useActionState: useTransition + useState
Form action as function: VS react-hook-form
useFormStatus: useContext(<form>)
useOptimistic: HERE COMES A NEW CHALLENGER!
use: React.lazy without dynamic import + @tanstack/query
Server component and Server Action: for SSR Only
ref as Prop: Yes. you can cleanup as callback ref. This feature has made other JS libraries more friendly, making it worth competing with other frontend tech stacks.
Hydration error: for SSR Only 2
Context is Provider by default: The beginning of the end for class components.
<Suspense> waterfall issue: RESOLVED!
<meta>, <link>, <script async>, <custom-element>: so what?

Recap

You are ready and good to upgrade!

Next.js with App Router
Any integrations with node.js backend server (e.g. express, hono, NestJS, etc.)

No, it's not worth upgrading...

Any SPA stack
Full stack framework other than Next.js (Pages router included)
Any SSG or based framework (e.g. Getsby, Docusaurus, Astro...)
React Native
A stack that contains non-webpack bundlers. (yes. Vite.)

Conclusion

This version of React is a major update with the main goal of enhancing server functionality. So you don't need to get excited, and you don't need to upgrade quickly—just keep your version in your existing environment. React is meant to be a library like that. such as Java...

Make a React introvert Component (What?🤨)

Composite — Wed, 29 May 2024 10:28:11 +0000

(2024-05-30: Added working example)

What the heck does that mean?
Today I'm going to break a React feature that I've been using for a while now.

The React.lazy function is mainly for lazy importing of external components, and in general, the official documentation will tell you to write it like this:

export const MyExternalComponent = React.lazy(() =>
  import('./path/to/my/component')
)

This is a popular optimization recommendation that wraps a <Suspense> component around a component declared with the export default statement in an external component file and imports it on the first call to save resources.

Right. It must be the component that you declared with the export default statement. not a named export.

As you'll see when you write a dynamic import statement, if you want to lazy load something that you've declared other than default export, you have to return an object with the default property.

export const MyExternalComponent = React.lazy(() =>
  import('./path/to/my/component')
  .then(({ OtherComponent }) => ({ default: OtherComponent }))
)

Or you can install react-lazly package instead to make it more flexible.

From this feature, I came up with a brilliant idea.

export const IntrovertComponent = React.lazy(() =>
  fetch('/path/to/api')
  .then(res => res.json())
  .then(json => {
    const MyComponent = () => {
      return <pre>{JSON.stringify(json, null, 2)}</pre>
    }
    return { default: MyComponent }
  })

You might be wondering if the above code will work, right?
The short answer is yes. It will work.

Let's see in action.

Why?

React doesn't care if there's an import statement in the function body or not. We're not necessarily using the Webpack bundler, so it's a pain for them to analyze the bundler's code output.
Instead, the value is in the ability to defer the import statement.

Anyway, the argument to the lazy function accepts a function that returns a Promise instance, so it doesn't have to be an import statement, just a Promise object.

It'll useful when:

Lazly loads 3rd party quite complex libraries before initializing your compoenent
Lazly loads API and applies to your component(but once)
Lazly loads your component that avoids SSR for some external reasons

Instead, there is one thing to keep in mind.

This behavior will be out of the purpose of the lazy function.
Its original purpose is to optimize component resources with import, but since you declared this code inline, you'll be far from optimizing resources.

I hope that in the upcoming React 19, do not implement this nonsense and create a normal component with a use hook function.

The dynamic provided by Next.js can be implemented in the same way. In particular, since the initialization function of the Plotly library I was using returns a Promise, I implemented the following to create a pure client component away from SSR. See also my original post

export const Plotly = dynamic(
  () =>
    import('plotly.js/dist/plotly.js').then(({ newPlot, purge }) => {
      const Plotly = forwardRef(({ id, className, data, layout, config }, ref) => {
        const originId = useId();
        const realId = id || originId;
        const originRef = useRef(null);
        const [handle, setHandle] = useState(undefined);

        useEffect(() => {
          let instance;
          originRef.current &&
            newPlot(originRef.current!, data, layout, config).then((ref) => setHandle((instance = ref)));
          return () => {
            instance && purge(instance);
          };
        }, [data]);

        useImperativeHandle(
          ref,
          () => (handle ?? originRef.current ?? document.createElement('div')),
          [handle]
        );

        return <div id={realId} ref={originRef} className={className}></div>;
      });
      Plotly.displayName = 'Plotly';
      return Plotly;
    }),
  { ssr: false }
);

I named this component an introvert component.
Funny, huh?

Happy React'ing!

How to integrate plotly.js on Next.js 14 with App Router

Composite — Tue, 28 May 2024 11:25:34 +0000

I remember struggling quite a bit with integrating the plotly.js library into Next.js in the past.
However, now with Next.js 14 and the use of app routers, I've had to do it all over again, but this time the pain was quite painful.
Eventually I got over it, and today I'm going to share my experience with you, along with a few tips on how to integrate plotly.js into next.js.

Add the plotly.js library to your existing environment.

Install plotly.js

npm i -S plotly.js
# or
yarn add plotly.js
# or
pnpm add plotly.js

If you're using Typescript, you can't forget about type definitions.

npm i -D @types/plotly.js

If you felt something strange, yes, you're right, plotly.js has a React wrapper. But, it hasn't been updated anymore since 2 years ago, and I don't install it because I personally felt a lot of discomfort in the Typescript environment when I first developed it.
If you still want to install it, you can do so. However, I'm going to skip the React wrapper part and create a very simple wrapper component.

Use plotly.js

Of course, the plotly.js library is completely browser-specific, so build errors will be waiting for you the moment you import it and start using it.
So, the react-plotly's issue suggests using it as follows:

import dynamic from 'next/dynamic'

export const Plotly = dynamic(() => import('react-plotly.js'), { ssr: false });

The reason why the react-plotly component doesn't work despite the 'use client' directive is because it's a class component, and it was designed from the ground up assuming a browser. As if that weren't bad enough, now that I'm not touching anything but JS libraries, I'm starting to feel self-conscious about why I'm using this when there are actually better charting libraries out there.

Now, let's get back to business. Here's the simple wrapper component I created.

export const Plotly = dynamic(
  () =>
    import('plotly.js/dist/plotly.js').then(({ newPlot, purge }) => {
      const Plotly = forwardRef(({ id, className, data, layout, config }, ref) => {
        const originId = useId();
        const realId = id || originId;
        const originRef = useRef(null);
        const [handle, setHandle] = useState(undefined);

        useEffect(() => {
          let instance;
          originRef.current &&
            newPlot(originRef.current!, data, layout, config).then((ref) => setHandle((instance = ref)));
          return () => {
            instance && purge(instance);
          };
        }, [data]);

        useImperativeHandle(
          ref,
          () => (handle ?? originRef.current ?? document.createElement('div')),
          [handle]
        );

        return <div id={realId} ref={originRef} className={className}></div>;
      });
      Plotly.displayName = 'Plotly';
      return Plotly;
    }),
  { ssr: false }
);

Is the import path weird? No, this is the import path used by the react-plotly source.

Anyway, apply the component like this, and you're done.

<div>
  <Plotly
    style={{ width: '640px', height: '480px' }}
    data={[{ x: [1, 2, 3, 4, 5], y: [1, 2, 4, 8, 16] }]}
    layout={{ margin: { t: 0 } }}
  />
</div>

But if you're using Typescript, there's still one problem.

Make typescript friendly

(2024-12-20 UPDATED)

Updated and modern, clean solution

install plotly.js instead of

npm remove plotly.js
npm install -S plotly.js-dist-min
npm install -D @types/plotly.js

Don't touch next.config.js. Just edit tsconfig.json or tsconfig.(your app stack).json as below:

{
  "compilerOptions": {
    "paths": {
      // rest of aliases...
      "plotly.js-dist-min": ["node_modules/@types/plotly.js"]
    }
    // rest of options...
  }
  // rest of other options...
}

then,

-     import('plotly.js/dist/plotly.js').then(({ newPlot, purge }) => {
+     import('plotly.js-dist-min').then(({ newPlot, purge }) => {

DONE. ENJOY!

Old and dirty solution. DON'T TRY THIS METHOD!

If you specify an import path like import('plotly.js/dist/plotly.js'), Typescript will fail to import the type. The reason for this is simple. It's because the type definition is based on the default path, import('plotly.js').

There are two ways to fix the problem.

Create a d.ts file that duplicates the default types in the path 'plotly.js/dist/plotly.js'.
include webpack resolve alias to bypass it (included when using turbopack)

I used method #2 because it also solved the build error.

Now let's touch the next.config.js file, which in my case was based on next.config.mjs.

import path from 'node:path';

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  output: 'standalone',
  images: {},
  ...bundleOptions(),
};

export default nextConfig;

function bundleOptions() {
  const resolvers = {
    'plotly.js': 'plotly.js/dist/plotly.js'
  }

  if (process.env.TURBOPACK) // If you are using dev with --turbo
    return {
      experimental: {
        turbo: {
          resolveAlias: {
            ...resolvers
          }
        },
      },
    };
  else return { // otherwise, for webpack
    webpack: (config) => {
      for (const [dep, to] of Object.entries(resolvers))
        config.resolve.alias[dep] = path.resolve(
          config.context,
          to
        );
      return config;
    },
  };
}

Now you can modify the import path in the wrapper component as you would normally import it.

-     import('plotly.js/dist/plotly.js').then(({ newPlot, purge }) => {
+     import('plotly.js').then(({ newPlot, purge }) => {

Then, fix the required types for typescript, and voila!

Done. Congratulations. You can now use plotly.js in Next.js!

Conculusion

I chose plotly.js over several popular charting libraries, especially the feature-rich Apache ECharts, because my company's algorithmic research team uses Python, and the plotly Python library is available, which is an advantage for exchanging chart data and layouts.

I hope I'm not wrong in my choice for this web application product development. lol

Happy Next.js-ing~!

A Some undocumented about Server Component on Next.js

Composite — Fri, 18 Aug 2023 12:37:51 +0000

The Server Component of Next.js is stateless component that it can get some request parameters: Headers and cookies.
But, There is no way to get other parameters such as request.url.

I don't understand why limited to get properties in Server Components. someone says you're not ready to use App Router yet.
I agree. Server component is future of React, but it's still experimental feature.

While I'm using App Router, I found a way of get some properties in server component, Let's get started.

What Header contains in Server Components?

I ran console.log() in a server component like below:

export const debugHeaders = () => {
  const list = headers();
  console.table(Array.from(list.entries()));
};

And I found the following header key Let's see what it contains.

host: A real hostname of server. If you are using the app behind reverse proxy, do not use it.
x-forwarded-proto: A forwarded protocol of reverse proxy server. use it if you want check HTTPS behind reverse proxy.
x-forwarded-host: A forwarded real hostname behind a reverse proxy. use it if you are using the app behind reverse proxy.
x-middleware-invoke: It seems that show some infomation when proceed with middleware of Next.js.
x-invoke-path: A
x-invoke-query: A URL encoded query string with JSON. call DecodeURLComponent and JSON.parse If you want use.
x-invoke-output: Not sure what it is.

Depending on your server environment, the header key may be different, so be sure to extract and verify it yourself.

Get `request.url` and query string in Server Component

Based on the header information above, I made function to take in the URL and query string.

import { headers } from 'next/headers';

export const url = () => {
  const header = headers();
  return `${header.get('x-forwarded-proto') || (header.get('https') && 'https') || 'http'}://${header.get('x-forwarded-host') || header.get('host') || 'localhost:3000'}/${header.get('x-invoke-path')}`
}

export const query = () => {
  const header = headers();
  return JSON.parse(decodeURIComponent(header.get('x-invoke-query') || '{}')) as Record<string, string>
}

Have fun and Happy Next.js'ing!

React와 Solid의 차이점 톺아보기

Composite — Thu, 29 Jun 2023 08:14:49 +0000

또다른 JSX 기술 라이브러리, Solid.js가 있다.

solidjs / solid

A declarative, efficient, and flexible JavaScript library for building user interfaces.

Website • API Docs • Features Tutorial • Playground • Discord

Solid is a declarative JavaScript library for creating user interfaces. Instead of using a Virtual DOM, it compiles its templates to real DOM nodes and updates them with fine-grained reactions. Declare your state and use it throughout your app, and when a piece of state changes, only the code that depends on it will rerun.

At a Glance

import { createSignal } from "solid-js";
import { render } from "solid-js/web";
function Counter() {
  const [count, setCount] = createSignal(0);
  const doubleCount = () => count() * 2;
  
  console.log("The body of the function runs once...");

  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>
        {doubleCount(

…

View on GitHub

이걸로 잠시 관리자 페이지를 만들다가 협업의 어려움으로 React로 전환한 뼈아픔이 있었지만, Solid도 상당히 매력적인 라이브러리다.

그래서 이제서야 꺼내게 되었다. React와 Solid.js의 차이점을.

가상 DOM

기본적으로, 일단 Solid.js 들어본 적 있다면 이미 알고 있을 것이다.
React와 Vue 는 가상 DOM을 사용하는 대표적인 라이브러리다. 아, Angular도.
그러나 Preact, Solid.js, Svelte 등은 가상 DOM 없이 실제 DOM을 바로 렌더링한다.

그래서, 이들의 장단점을 정리하면 대충 이렇다.

가상 DOM

장점: 렌더링 전의 자주 발생하는 변경사항을 빠르게 정리할 수 있다.
단점: 렌더링 할때마다 가상DOM을 경유하여 실제DOM으로 옮기기 때문에 상대적으로 렌더링 속도가 느리다.
적합한 케이스: 태그 변경이 많이 일어나는 데이터그리드, 차트 등의 업무 중심의 컴포넌트

가상 DOM 사용하지 않음

장점: 렌더링 빈도가 적을 수록 성능이 빨라진다.
단점: 렌더링 빈도가 많을 수록 성능이 느려진다.
적합한 케이스: 태그 변경이 적게 일어나는 CMS, 쇼핑몰에 쓰는 컨텐츠 중심의 컴포넌트

따라서, 이 문제에 대해서는, 당신의 앱이 어느 쪽이 적당할 지는 직접 써보고 판단해야 할 문제인 것이기 때문에, 존중이니 취향해 드리겠다.

상태관리

리액트의 기본 상태관리 함수는 useState 이다.
Solid의 기본 상태관리 함수는 createSignal 이다.

이 둘의 차이점을 알아보자.

React 상태관리

상태관리 함수는 React 컴포넌트 함수 내에서만 호출이 가능하다.
(단, React 상태관리 결과물은 함수 외부에서도 호출 가능하다.)

React 상태관리는 빌드 과정을 거쳐 렌더링 상태의 기준을 정의한다.

Solid.js 상태관리

상태관리 함수들은 컴포넌트 내외 모두 호출이 가능하다.
Solid.js 상태관리 함수 호출부와 결과물 모두 빌드하지 않는다.
따라서, 스코프에 따라 유연한 상태관리 기준을 정의할 수 있다.
심지어, setter 호출만 해도 상태를 바꾸는 옵션도 설정할 수 있다.



// 두번째 인자에 옵션이 있는데, 아래처럼 하면 상태값이 같아도 상태가 바뀐다.
const [, render] = createSignal(undefined, { equals: false })

(만약 React 에서 같은 기능을 구현하려면, 최대한 랜덤 수를 세팅하는 useState 기반 함수를 만들든가, @react-hookz/web 유틸리티의 useRender 훅을 이용하면 된다.)

여기서 주의사항! 솔리드의 상태관리 결과물은 대부분 함수다! 따라서 호출해야 한다! 애초에 시스템이 다른데, 리액트가 렌더링 시 컴포넌트 함수 본문를 갈아엎기 때문에 가능하지만, 솔리드는 함수 원형을 유지하고 상태관리가 별개로 작동하기 때문이다.



const [getter, setter] = createSignal()
setTimeout(() => setter('메롱'), 1000)
// react와 달리 getter 는 함수로 호출해야 한다!
return <div>{getter()}</div>

부작용(Side-Effect)

React

설명 해봐야 손만 아프다. 리액트 개발자야 말 안해도 알지?
그리고 이 함수 리액트 컴포넌트 본문에서만 호출 가능한 것도 알제?



useEffect(() => {
  /* 상태 바뀌면 실행할 함수 */
  return () => { /* 정리(Cleanup)할 함수 */ }
}, [...영향받을 속성이나 상태])

Solid.js

사실 사용법은 큰 차이 없고, 당연하겠지만 리액트와 동일하게 비동기로 동작한다.
사소한 차이점이 있는데, 이제 설명하겠다.
먼저, 컴포넌트 함수 외에서도 호출 가능하다.
그다음, 위 React 구문을 똑같이 적용한다는 기준으로,



createEffect(() => {
  /* 상태 바뀌면 실행할 함수 */
  onCleanup(() => { /* 정리(Cleanup)할 함수 */ })
}) // 위 함수 본문에 명시한 상태값들이 영향받을 때 호출된다!

첫번째, 영향 받을 상태를 명시적으로 지정 가능한 React와 달리, Svelte처럼 부작용 함수 본문에 언급한 상태가 바뀔 때 함수가 실행된다. 따라서 영향받을 상태값을 따로 함수로 빼는 꼼수를 통해 영향받을 상태를 한정짓는 방식으로 해결할 수 있다.
두번째, useEffect 함수에서는 리턴 함수로 정리할 수 있지만, createEffect 는 새로운 상태관리 영역 방식으로 관리하여 onCleanup 같은 생명주기 함수를 컴포넌트와 별개로 사용할 수 있다.

범위 관리(Context)

둘의 차이 별로 없다. 기능도 딱히 차이점 없으니 그냥 쓰던대로 쓰면 된다.

동적 컴포넌트

React

사실상 다이렉트로 동적 컴포넌트 호출 가능하다. 하지만, 빌드가 필요하고, 컴포넌트 함수임을 인지해야 하기 때문에 상수를 선언 후 그 상수를 컴포넌트 함수로 사용하는 살짝 번거로운 방법을 써야 한다. (JSX,TSX 한정, JS/TS일 경우 그럴 필요 없이 컴포넌트 함수임이 확실하면 함수처럼 호출하거나, 태그일 경우 React.createElement 함수 쓰면 됨)



export default function MyDynamicComponent({ tag, ...props }) {
  const Dynamic = tag
  return (<Dynamic {...props} />)
}

Solid

Vue나 Svelte 처럼 Solid 에서도 동적 컴포넌트를 정의하는 내장 컴포넌트인 <Dynamic> 컴포넌트를 사용한다.



export default function MyDynamicComponent({ tag, ...props }) {
  return (<Dynamic as={tag} {...props} />)
}

조건문 / 반복문

React

리액트는 조건문과 반복문을 직접적으로 지원한다. 어자피 빌드하니까. 어자피 상태 바뀌면 본문 갈아 엎으니까~ 화성 갈끄니께~



function MyConditionalComponent({ isShow }) {
  return (<div>
    {isShow && '앱있음'}
  </div>)
}
function MyForeachComponent({ list }) {
  return (<ul>
    {list.map(row => (<li>{row.name}</li>)}
  </ul>)
}

Solid.js

솔리드는 직접적인 스크립트 렌더링을 지원하지 않는다. 본문이 안갈아엎어지는데 될 리가... 그래서 솔리드는 조건문과 반복문을 컴포넌트로 지원한다.



function MyConditionalComponent({ isShow }) {
  return (<div>
    <Show when={isShow}>앱있음</Show>
  </div>)
}
function MyForeachComponent({ list }) {
  return (<ul>
    <For each={list}>{(row) => (<li>{row.name}</li>)}</For>
  </ul>)
}

비동기 컴포넌트/Suspense

둘이 비슷하다. lazy 함수가 있고 <Suspense> 컴포넌트가 두 진영 다 내장되어 있는데, 그냥 뭐 React 따라갔다고 보면 된다. 어자피 JSX가 애초에 리액트를 위해 태어난 놈이니 JSX 쓰는 다른 것들이 어쩌겠니...

비동기 반응성

React

먼저 리액트는 기본적으로 상태관리가 내부적으로 비동기로 진행될 뿐, 직접적인 비동기에 대한 대응을 편리하게 지원하지 않는다. 그 때문에 이를 쉽게 해결하기 위해 많이들 찾는게 바로 TanStack Query, 구 react-query 많이들 썼을 것이다.

Solid.js

TanStack Query가 Solid를 지원하기 시작했지만, 솔리드 자체적으로 createResource 훅 함수를 통해 비동기를 대응할 수 있는 기본적인 유틸리티를 제공한다.

ref

React

리액트는 useRef 훅이 있다. 이녀석은 기본적으로 값이 바뀌어도 렌더링되지 않기 때문에, 컴포넌트 참조 뿐만 아니라 반응성이 없어야 되는 영역에서도 두루 쓰이고 있다.



function RefComponent() {
  const myDiv = useRef()

  useEffect(() => console.log(myDiv.current), []);

  return (<div ref={myDiv}>뭐임마</div>)
}

Solid.js

솔리드는 따로 훅이 없고, 그냥 let 변수를 선언한 걸 그냥 뙇 걸기만 해도 된다. 함수 본문이 유지가 되기 때문에 가능한 일. Svelte와 비슷하다 생각하면 된다.



function RefComponent() {
  let myDiv

  onMount(() => console.log(myDiv));

  return (<div ref={myDiv}>뭐임마</div>)
}

React 처럼 콜백으로 받을 수 있다. 하지만 Solid에서는 더 강력한 요소의 상태관리 기능을 지원하는데,

바로 use: 속성이다. 이건 Svelte에도 있는 기능인데, 하나의 상태관리 영역으로 취급하기 때문에, 여기서도 컴포넌트 초기화될 때 호출하는 onMount 함수와 컴포넌트 정리할 때 onCleanup 함수를 쓸 수 있다.
어자피 요소 받은 뒤 호출하기 때문에 onMount 함수 호출은 필요없고, removeEventListener 같이 정리가 필요할 경우에 onCleanup 함수의 콜백 인자에 구현하면 된다.



export default function clickOutside(el, accessor) {
  const onClick = (e) => !el.contains(e.target) && accessor()?.();
  document.body.addEventListener("click", onClick);

  onCleanup(() => document.body.removeEventListener("click", onClick));
}

타입스크립트 한정해서 단점은, use: 속성은 컴포넌트 속성에 당연히 없고 정의할 수 없기 때문에, 타입 정의를 어딘가에 해줘야 한다.



declare module "solid-js" {
  namespace JSX {
    interface Directives {
      clickOutside?: () => void;
    }
  }
}

만약 ref 콜백을 사용한다면, 해당 컴포넌트 함수 본문에 onCleanup 함수 호출하면 된다. 선택은 자유.

React와 달리 앙상한 생태계에서, Svelte와 같이 생태계 의존도를 줄일 수 있는 중요한 기능이라 하겠다.

컴포넌트 속성

React

이젠 언급하기도 지쳤다. 말했지? 상태 바뀌면 함수 본문 같아엎는다고.
그래서 얻을 수 있는 이점 중 하나가 바로 컴포넌트 속성을 분해해서 변수처럼 사용할 수 있다는 점 되겠다.



function MyPropsComponent({ some, children, ...others }) {

  return <div {...others}>

    {some && <h1>{some}</h1>}

    {children}

  </div>

}

Solid

하지만 Solid는 상태가 바뀌어도 본문은 그대로 유지가 되기 때문에 React처럼 속성 분해하는 등의 편리한 구문을 썼다간 큰 낭패를 본다. 당장 볼 수 있는 일이라면, 초기 상태에만 한 번 반영하고 그 이후로는 아무런 미동도 없는 네 컴포넌트를 발견할 수 있다. 따라서, 객체를 분해하는 짓은 여기서는 하지 않는 것이 좋고, 만약 "범주별 분리"를 하고 싶다면, Solid에서 제공하는 splitProps 유틸리티를 써야 한다.
즉, 중요한 핵심은, 절대 개별 속성으로 분해하지 말 것!



function MyPropsComponent(props) {

  const [local, others] = splitProps(props, ["some", "children"]);

  return <div {...others}>

    <Show when={local.some}><h1>{local.some}</h1></Show>

    {local.children}

  </div>

}

마치며

그밖에 더 있긴 한데 일단 핵심만 짚어줬다. 더 알아보고 싶으면 직접 비교해보라 내 손 아파서 이만.
끗.

2023-07-02: 부작용(Side-effect) 차이점 추가. 이 중요한 걸 빼먹다니...
2023-07-02: 컴포넌트 속성 차이점 추가. 이 또한 중요한 걸 빼먹다니...

내가 싫어하는 JS/TS 라이브러리들

Composite — Thu, 22 Jun 2023 05:52:54 +0000

오랜만에 dev.to 에서 글을 쓴다.
오늘은, 내가 JS/TS 개발을 하면서 싫어진 라이브러리들, 그리고 왜 싫어하는지, 대응 방안은 무엇인지 내가 간단하게 설명하도록 하겠다.

아니, 내가 개인적으로 싫어하는 거지, 이 라이브러리 욕하고 싶어서 쓰는 거 아니다.
내가 이렇게 오해하게 써야 너희들이 읽으니 어쩔티비.

Lodash

왜?

음... 워낙에 유명한 유틸리티 라이브러리면서, 워낙에 유명하도록 몇몇이 선동하면서까지 안쓰려 하는 라이브러리고, 나도 거기에 동의하는 바이다.

이유는 간단하다. 너무나 간단해서 여기까지 쓰고 다음 석션♂으로 넘어가고 싶어졌다.

만약 IE 호환을 위해 써야 한다면, 차라리 친절하게 어느정도 폴리필 API를 제공하는 corejs 쓰지 말길 바란다.

대응 방안

표준 API 로 대체할 게 많다!
심지어 이를 소개하는 Github 이 있고, 16.9K의 별을 당당히 받았다!

you-dont-need / You-Dont-Need-Lodash-Underscore

List of JavaScript methods which you can use natively + ESLint Plugin

You don't (may not) need Lodash/Underscore

Lodash and Underscore are great modern JavaScript utility libraries, and they are widely used by Front-end developers. However, when you are targeting modern browsers, you may find out that there are many methods which are already supported natively thanks to ECMAScript5 [ES5] and ECMAScript2015 [ES6]. If you want your project to require fewer dependencies, and you know your target browser clearly, then you may not need Lodash/Underscore.

You are welcome to contribute with more items provided below.

If you are targeting legacy JavaScript engine with those ES5 methods, you can use es5-shim
Please note that, the examples used below are just showing you the native alternative of performing certain tasks. For some functions, Lodash provides you more options than native built-ins. This list is not a 1:1 comparison.
Please send a PR if you want to add or modify the code. No need to…

View on GitHub

예외

이미 lodash를 적용한 기존 프로젝트 뿐이다.

Axios

왜?

표준 API인 fetch가 떡하니 있다. 아니, 오히려 fetch 함수가 강력할 수밖에 없다.
물론 일부 예외가 있긴 하다. 전역 옵션이 없다는 것 뿐. (요청 응답 전후 hook 등)
게다가 어자피 axios 도 fetch 에서 사용하는 클래스들 다 빌려쓸 수밖에 없다. 특히 스트리밍 응답이나 이진 데이터를 자체적으로 관리할 수가 없다.

내가 이 라이브러리를 싫어하는 진짜 이유는 중구난방 프로그래밍 패턴을 양산하는 원흉(?)이기 때문이다. 내가 협업하면서 제일 애먹었던게, 이 axios를 누구는 호출할 때마다 인스턴스 갖다 쓰고, 또 누구는 어따가 인스턴스 쳐박고 갖다 쓰도록 유도하고, 또 누구는 공통에다 인스턴스 만들게 하고 갖다 쓰고...
이뿐만이 아니다. 누구는 axios만 딸랑 호출하고, 또 누구는 axios.get 등의 메소드를 호출한다. 이런 편의적 API가 오히려 중구난방 패턴을 유발하는 원인인 것 같다.
그럼 fetch라고 다를게 있냐 하는데, 얘는 fetch 함수 뿐이다.

대응 방안

왜에다가 다 써버렸네...

node.js 서버단에서 쓴다면, LTS 기준 18 부터는 fetch 함수 기본 제공이나 axios가 필요 없다. 하지만 16 이하 서버단에 써야 한다면, 난 아래 라이브러를 추천하겠다. axios보다 상당히 가볍고, fetch 와 유사한 API를 제공하여 표준 fetch 마이그레이션의 수고를 줄여준다.

sindresorhus / ky-universal

Use Ky in both Node.js and browsers

ky-universal

Use Ky in both Node.js and browsers

As of Ky 1.0.0, it runs natively on Node.js. So this package is no longer needed.

Ky is made for browsers, but this package makes it possible to use it in Node.js too, by polyfilling most of the required browser APIs using node-fetch.

This package can be useful for:

Isomorphic code
Web apps (React, Vue.js, etc.) that use server-side rendering (SSR)
Testing browser libraries using a Node.js test runner

Note: Before opening an issue, make sure it's an issue with Ky and not its polyfills. Generally, if something works in the browser, but not in Node.js, it's an issue with node-fetch.

Keep in mind that Ky targets modern browsers when used in the browser. For older browsers, you will need to transpile and use a fetch polyfill.

Install

npm install ky ky-universal

Note that you also need to…

View on GitHub

만약 한국적인 API 스타일에 맞는 전략 패턴(Strategy pattern) 스타일의 라이브러리를 찾는다면, 중국에서 만든 가벼운 alova란 대체제도 있다.

alovajs / alova

Workflow-Streamlined next-generation request tools. Extremely streamline API integration workflow, just one step

Workflow-Streamlined next-generation request tools.
Extremely improve your API using efficiency and save brainpower Just one step

English | Chinese

What is alova?

alova(pronounced /əˈləʊva/) is a workflow-streamlined next-generation request tool. Starting from front-end and back-end collaboration and API integration, it streamline API integration workflow from 7 steps to only 1 step, extremely streamline API integration workflow and making network requests very simple. Let's see how alova can help you simplify your work.

Is there any difference?

Unlike other request libraries, alova aims to make requests very simple and maintain more efficient data interaction.

We consider both developers and App users. For developers, alova provides them with the ultimate user experience, and for application users, they can enjoy the smooth experience brought by alova's high-performance data interaction.

In addition, let's take a look at the specific features:

The API design similar to Axios makes the learning cost of users lower;
High-performance…

View on GitHub

내가 다시한번 얘기하는데 한국에서 필요로 하는 개발 라이브러리들은 중국에서 정말 귀신같이 잘 만든다니까.

예외

기존 프로젝트에 axios를 fetch로 바꾸려는 멍청한 짓 할 개발자는 없을 거라 믿는다.
IE를 챙겨야 한다면 할 말이 없다. 그냥 써라.

끗

정말 끗이다.

너 jQuery 싫어한다면서 왜 안 꺼내?

내가 언제? jQuery 쓸 시대가 지났을 뿐, jquery 는 여전히 메이저한 프론트엔드 도구가 없을 때는 여전히 최강이다. 찬양하라 존 레식!

근데 왜 이런 미적지근한 반응이냐고? 위에 있는 lodash와 axios 는 금방 질리는 라이브러리다. 그냥 기존 프로젝트에 이미 적용했다면 할 수 없이 쓸 뿐, 새로 파거나 대안이 있으면 난 과감히 있든 말든 신경 안쓰고 대안을 쓰는 파렴치한 놈이다. 하지만 jQuery는 내 10여년 경력에서 절반 이상은 함께해오던 라이브러리다. 이런 애증의 라이브러리를 싫어하다니, 내가 아무리 역사공부 하는 게 싫다 하지만 이건 좀 아니다...

혹시 react, vue, svelte 같은 컴포넌트 라이브러리 쓰면서 jQuery 쓰니?

아, SI 가면 볼 수 있다. 지랄같은 SI.

진짜끗.

Vue.js 3 이벤트 뻐-스

Composite — Sun, 16 Oct 2022 12:42:39 +0000

내가 살다살다 이딴 포스트 하나 쓰려고 포토샵까지 꺼내들게 하다니...

SI 아니랄까봐 2022년 Vue 에서 밀고있는 Pinia 도 안쓰고
아 그래 너무 최신 기술이라 거부감 느낀다 쳐.
아니, 하다못해 오랫동안 SI에서 잘만 쓰고 있는 Vuex조차도 안 쓰고...
뭐? 이벤트 버스???

Vue 3 에다가 이벤트 버스???

징-하다.

그래... 그래서 만들었다.
Composition API 시대에 예전 new Vue() 못 쓰니...
하지만 ref() 및 reactive() 사용법을 알면 그리 어렵지 않게 만들 수 있다.
그리고 이걸 전역으로 돌아가도록 하는 게 핵심 포인트.

자, 여기 코드가 있다.
코멘트 주우 늘어진 건 너희들 자동완성하기 좋으라고 해준 거니 감사히 여겨라.

좋아. 원리를 설명해주지.

초기화는 그저 컴포넌트 스크립트 setup() 함수 및 <script setup> 태그 내용 안에서 준비한 함수 useEventBus() 만 호출하여 상수에 담으면 준비 끝!

`on`

이벤트명이 키인 객체가 메인이다. 그리고 그 속성들은 이렇다.
당연하겠지만 콜백은 여러개 있을 수 있으니, 이를 배열로 담아둔다.
그리고 trigger 속성에 이벤트 발생 시 속성을 변경하여 반응형을 유도하기 위해 ref 함수를 사용한다.
그리고 이 trigger 속성에 대한 변경을 감지할 watch 함수를 정의하여, 이를 stopper 에 정의하는데, 왜 stopper를 정의하냐면, watch 함수를 호출하면 반환하는 값이 이 watch 작업을 중지하기 위해 호출할 수 있는 함수를 반환하기 때문이다. 이에 대해 다음 메소드에 후술하겠다.

`emit`

이벤트 리스너를 만들었으면, 이제 발생을 시켜야겠지? emit 메소드를 통해 이벤트를 발생시키도록 유도하면, 이벤트명 키를 찾아 이 안에 있는 trigger 속성에 있는 ref 객체의 값을 변경시켜 반응을 유도한다, 객체 값을 변경시키면, watch 함수 콜백이 발동하는데, 변경한 값을 인자로 받아 배열 내에 있는 모든 콜백을 호출하게 된다.
그렇게 되면 같은 이벤트명을 A.vue에 정의해도, B.vue에 정의하면 모두 호출하게 된다.

`off`

하지만 이벤트를 추가했으면 삭제도 필요하겠지?
이런 상황을 위해 준비한 게 바로 off 메소드다.
뭐 별거 없다. 이벤트명과 함수명 넣으면 이벤트 안에 함수 날라가고,
함수 없이 이벤트명만 넣으면 이벤트 콜백은 다 사라지게 된다.
이 때, 이벤트 콜백이 사라질 때가 바로 핵심인데,
이벤트 콜백이 사라질 때도 watch 함수가 동작하는 것은 낭비다.
따라서 준비해둔 stopper 속성에 담긴 해제 함수를 호출하여 정리하는 것이다.
간단하지?

해결해야 할 것들.

안타깝지만 완벽한 구현체는 아니다. 내가 깜박한 점도 있지만, 이들을 해결해야 한다.

이벤트 버스를 사용한 특정 컴포넌트가 해체될 때(Destroy) 해당 컴포넌트에 등록한 리스너도 사라져야 하는 부분이 구현되지 않았다. 구현 안 하면 좀비 콜백이 되어 잠재적인 스크립트 오류를 유발하고 배열이 쌓이게 되면 좋을 게 없지 않은가.
그냥 Vue 에서 공식으로 넣어준 Provider/Inject 쓰면 안되겠니?

이 외에도 내가 모르는 잠재적인 문제가 내재되어 있는데,
이들의 해결은 여러분에게 맡긴다.
어딜 날로 쳐먹으려고...

아 미안, 조만간 재대로 된 이벤트 버스 구현체 만들게 되면 그때 Github 에 풀게. 언제가 될 지는 모르겠지만 어자피 Vue 코딩 업무 보게 될 수 있으니 그때를 기약하도록 하자. 아니면 뭐 Stack Overflow 가서 찾아도 되고, 그냥...

developit / mitt

🥊 Tiny 200 byte functional event emitter / pubsub.

Mitt

Tiny 200b functional event emitter / pubsub.

Microscopic: weighs less than 200 bytes gzipped
Useful: a wildcard "*" event type listens to all events
Familiar: same names & ideas as Node's EventEmitter
Functional: methods don't rely on this
Great Name: somehow mitt wasn't taken

Mitt was made for the browser, but works in any JavaScript runtime. It has no dependencies and supports IE9+.

Install

This project uses node and npm. Go check them out if you don't have them locally installed.

$ npm install --save mitt

Then with a module bundler like rollup or webpack, use as you would anything else:

// using ES6 modules
import mitt from 'mitt'

// using CommonJS modules
var mitt = require('mitt')

The UMD build is also available on unpkg:

<script src="https://unpkg.com/mitt/dist/mitt.umd.js">

…

View on GitHub

이거 쓰든가.

끗.

자바 17을 쓰도록 설득하는 방법

Composite — Tue, 13 Sep 2022 01:54:40 +0000

자바 8, 11을 이은 최신 LTS 버전!

LTS가 뭔지 알기만 해도 안심이 되는 이 약자로 충분히 설득이 가능하다. 그러나 LTS가 뭔지 모르거나 관심 없는 시니어 개발자들이 많을 것이다. 뭔지 모른다면, 자바 최신 버전이면서 공식적으로 지원하는 가장 안정적이고 최신 버전이라는 어필을 시도해 보자.

맥을 안정적으로 지원하는 최신 버전!

자바 17은 맥 지원에 상당한 심혈을 기울였다. 물론 표면적으로는 자바에서 웹이 아닌 GUI 앱을 돌릴 때, OpenGL 대신 Metal 을 공식 지원하게 된 첫 버전이지만, 더 중요한 사실은, 만약 M1 이상의 맥북을 들고 있는 개발자가 많을 경우, 자바 17은 M1 프로세서 이상을 가장 안정적으로 잘 지원하는 최초의 버전이라는 것이다! 따라서 맥북 들고 다니는 개발자가 많다면 반드시 어필하여 자바 17 사용을 도모하자!

문단을 지원하는 최초의 안정화 버전!

이 기능은 자바 14부터 지원했다. 하지만 17은 이 기능을 지원하는 최초의 안정화 버전이라는 것에 중점을 두어야 한다.

String jonnaginmundan = """
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nisi nunc, facilisis eget velit a, rutrum iaculis metus. Aliquam ornare eu elit ut venenatis. Maecenas placerat rutrum condimentum. Aenean sit amet est pulvinar, placerat sapien eget, varius diam. Nam quis nunc consequat, consectetur urna sit amet, posuere urna. Ut dictum tempor enim, sed auctor odio viverra elementum. Pellentesque rutrum tristique mollis. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam porta urna sit amet massa fringilla dapibus. Duis eleifend quam at lacus laoreet finibus.

Donec sollicitudin sodales lacinia. Ut ut purus erat. Curabitur rhoncus odio felis, vel pellentesque enim faucibus ac. Morbi consectetur, est sed pretium lobortis, neque lacus consectetur lacus, non vulputate nulla metus rutrum lectus. Proin nec magna lobortis, ullamcorper dolor a, mollis nisl. Cras aliquam nibh est, auctor posuere dui aliquet et. Sed vehicula turpis et mauris eleifend convallis.

Quisque mollis mauris eget ligula iaculis congue. Aliquam quis est semper ipsum gravida facilisis. Nam vestibulum nulla a euismod ultrices. Sed suscipit viverra tincidunt. Integer quis sem vitae ligula varius ornare quis ac lectus. Integer aliquam aliquet massa nec finibus. Morbi eleifend facilisis libero eget imperdiet. Sed interdum viverra volutpat. Nunc massa est, vulputate vitae mi id, bibendum ornare metus. Phasellus placerat gravida lacus, at hendrerit turpis iaculis vel. Morbi porta leo quis nibh pulvinar, nec malesuada ipsum rutrum. Donec vehicula egestas magna et sodales. In non lectus mattis arcu maximus pulvinar.

Maecenas congue, quam eu pretium rhoncus, mauris velit lacinia felis, sed tincidunt ex risus et mi. Maecenas vel egestas justo, at porta ligula. Sed sagittis viverra scelerisque. Pellentesque ac diam enim. Etiam consectetur non diam nec mattis. Sed sit amet odio in tellus eleifend molestie. Morbi non velit consectetur, elementum dui eget, porttitor quam. Donec quam sapien, faucibus sit amet eros in, placerat pellentesque dolor. Aenean vulputate lectus in dui efficitur rhoncus. Morbi facilisis tortor et commodo malesuada. Suspendisse risus diam, accumsan et maximus non, molestie a nisl. Vivamus enim neque, cursus ut felis eget, imperdiet suscipit tellus. Nullam commodo arcu sodales metus venenatis tempor. Duis varius dolor et turpis placerat, ac congue arcu commodo. Fusce nibh nisl, suscipit et finibus eget, pulvinar id quam. Nullam vel semper ligula.

Sed malesuada urna sapien, nec blandit nisi suscipit ut. Aenean tincidunt sit amet nulla non ultricies. Duis consequat velit quis tristique eleifend. Sed quis lectus at sem consectetur mollis. Donec a posuere libero, in luctus diam. Sed tristique sit amet nisi vitae mollis. Nam feugiat sodales felis, sed pharetra eros feugiat eu. Fusce aliquam ac magna eu hendrerit. Praesent finibus turpis sodales tempor mattis. Nulla facilisi. Morbi imperdiet quam vel libero lacinia, eget tincidunt mi consectetur. Etiam posuere, nisl id varius viverra, elit nisl efficitur eros, ac iaculis ante ipsum sit amet ex. Quisque lacinia venenatis lobortis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla tincidunt lacus pulvinar ex pulvinar, sed interdum tellus bibendum. Nullam iaculis, quam eu sodales volutpat, sapien nunc cursus ante, ac condimentum nisi felis et est.
""";

뭐. 꼽냐? 길지? 이걸 지원한다는 건 중요하다. 특히 기본값으로 설정한 문단이나, 마크업 등에서!

아 자바는 그짓거리 안해도 문단 쓸 방법 많고 메모리에도 효율적이지 않아!

그래. XML같은 외부 리소스를 활용하는 등의 방법이야 있지. 근데 니네들 그거 쓰고 메모리 관리할 줄 알면 그거 써라. 몰라? 그러면 다국어처럼 문자열을 체계적으로 쓸 거 아니면 다 의미 없는 소리다.

아 인텔리제이도 17 쓴다고!

JBR 이라고 인텔리제이 구동 시 쓰는 자사 JVM이 있다. 이건 JDK가 공개되지 않았음에도 불구하고 오라클 TCL 인증까지 받은 참 요상한 런타임 모듈이다. 즉, 오라클이 보증하는 자바라는 것이다. 2022년 버전부터 자바 17을 기반으로 동작해서 좀 더 빠른 응답속도를 만들어냈다. (물론 확장 많으면 거기서 거기)

아 어자피 스프링 쓸거면서 17도 공식 지원하는데 왜 안 써?

이거마따.

오히려 자바 17을 권장하지 않는 경우

아마 대부분 SI/SM과 연관이 깊을 것이겠지만...

당연하겠지만 기존 유지보수하는 모듈과 같이 관리하는 경우는 이걸 담당한 시니어 개발자에게 어필해봐야 소 귀에 경읽기다.
구동해야 하는 서버가 10년 이상 오래된 경우 작동 가능성을 보장할 수 없다. 이 경우는 당시 기준으로 안정화된 버전을 시도하는 게 나을 수 있다.
DB나 각종 연동 모듈에 대한 지원이 없는 경우는 더욱 더 조심해야 한다. 너무 구형 DB라던가 연동 모듈이 있다면, 어쩔 수 없이 거기서 지원하는 자바 버전을 쓰는 것이 베스트일 수밖에 없다.
제일 좆같은 전자정부표준프레임워크 써야 하는 환경일 경우는 답 없다. 11도 답 없다. 8 써야 한다. 위로를 표한다.

결론

구형 관련한 작동 보증 필요 없고 완전 쌔삥 환경이라면 반드시 자바 17을 사용하여 보안성, 안정성, 그리고 속도 모두를 챙기고 최신 언어 스펙을 누리도록 하자!
참고로 올 말에 출시하고 1년간 안정화되어 내년에 개나소나 쓰게될 스프링 6.0 은 최소 자바 버전이 17이다!

끗.

Forem: Composite

Why do you hate frontend developers?

node.js Worker thread with Typescript

The Solution: Using vite-node

1. worker_wrapper.mjs

2. parent.ts

3. child.ts

Why this works

The frondend chaos

React

Vue.js

Svelte

Solid.js

Preact

Qwik

Backbone

Ember.js

htmx

Lit

11ty

Marko

Alpine.js

jQuery

A React server feature cheat sheet

React Server feature basics

Directives

Server Component

Server Function

Comparison of handle value types in directives

You don't need update to React 19

Recap

You are ready and good to upgrade!

No, it's not worth upgrading...

Conclusion

Make a React introvert Component (What?🤨)

How to integrate plotly.js on Next.js 14 with App Router

Install plotly.js

Use plotly.js

Make typescript friendly

Updated and modern, clean solution

Old and dirty solution. DON'T TRY THIS METHOD!

Conculusion

A Some undocumented about Server Component on Next.js

What Header contains in Server Components?

Get request.url and query string in Server Component

React와 Solid의 차이점 톺아보기

solidjs / solid

A declarative, efficient, and flexible JavaScript library for building user interfaces.

At a Glance

가상 DOM

가상 DOM

가상 DOM 사용하지 않음

상태관리

React 상태관리

Solid.js 상태관리

부작용(Side-Effect)

React

Solid.js

범위 관리(Context)

동적 컴포넌트

React

Solid

조건문 / 반복문

React

Solid.js

비동기 컴포넌트/Suspense

비동기 반응성

React

Solid.js

ref

React

Solid.js

컴포넌트 속성

React

Solid

마치며

내가 싫어하는 JS/TS 라이브러리들

Lodash

왜?

대응 방안

1. `worker_wrapper.mjs`

2. `parent.ts`

3. `child.ts`

Get `request.url` and query string in Server Component

`on`

`emit`

`off`