모든 것이 하나의 파일에 존재하는 full-stack 웹 프레임워크를 만들었습니다

Source: Dev.to

Overview

Hey

지난 몇 주 동안, 나는 조금 특이한 작업을 해왔습니다.

나는 Luxaura라는 프레임워크를 만들었으며, 단일 파일 형식 .lux를 사용해 풀스택 웹 앱을 만들 수 있습니다.

👉 UI, 상태, 백엔드 로직, 스타일링 — 모두 한 곳에.

Why I built this

React와 같은 도구와 현대적인 프레임워크를 사용하면서 나는 같은 마찰을 느꼈습니다:

• 하나의 기능 = 여러 파일
• UI는 여기, 상태는 저기, API는 또 다른 곳
• 끊임없는 컨텍스트 전환

작동은 하지만, … 파편화된 느낌이 들 수 있습니다.

그래서 나는 생각하기 시작했습니다: 기능과 관련된 모든 것이 한 곳에 있다면 어떨까?

The idea

.lux 파일은 다음을 결합합니다:

• canvas → UI
• signal → 상태
• receive → 입력
• vault → 백엔드 로직 (서버‑전용)
• paint → 스타일링

레이어 사이를 오가는 대신, 한 읽기 쉬운 구조 안에 머무릅니다.

Example

Here’s a simple counter:

receive
    title: String = "My Luxaura App"

signal
    count: 0

canvas
    Scene
        Stack
            Headline ">"
            Body "Clicked > times"

            Trigger "Click me"
                when click:
                    count = count + 1

Backend… inside the same file

This is the part I found most interesting.

signal
    status: "Send a message"

vault
    action contact(name, email, message):
        if (!name || !email || !message) {
            return "Please fill every field."
        }
        return `Message received from ${name}`

canvas
    Scene
        Stack
            Trigger "Send"
                when click:
                    status = await vault.contact(name, email, message)

👉 vault 안의 코드는 서버에서만 실행됩니다. 별도의 API 라우트가 없습니다. 클라이언트로의 실수로 인한 누출도 없습니다.

What it tries to improve

• 파일 파편화 감소
• 풀스택 개발을 더 “로컬”하게 느끼게 함
• 백엔드 로직을 명확히 분리하고 안전하게 유지
• 더 나은 성능을 위해 정적‑우선 HTML 생성

What it’s NOT (yet)

• React의 생태계가 없습니다
• 아직 초기 단계이며 실험적입니다
• 대규모 프로덕션 앱에 아직 준비되지 않았을 가능성이 높습니다

Where I think it could fit

Luxaura가 적합할 수 있는 경우:

• 소규모‑중간 규모 앱
• 대시보드
• 내부 도구
• 빠른 프로토타이핑

What I’m testing now

I’m currently comparing it against frameworks like React and Next.js by building the same app in each.

또한 작업 중:

• 외부 라이브러리 지원 (예: Bootstrap, Anime.js)
• 개발자 경험 개선
• 문법을 더 명확하게 만들기

I’d really like your feedback

나는 React를 “대체”하려는 것이 아닙니다. 단지 앱을 만드는 다른 방식을 탐구하고 있습니다.

궁금하다면 여기서 확인할 수 있습니다:
https://www.npmjs.com/package/luxaura

알고 싶습니다:

• 이것이 이해가 되나요?
• 무엇이 혼란스러운가요?
• 이런 것을 시도해볼 생각이 있나요?

읽어주셔서 감사합니다 🙌