⚙️ JavaScript Alapok

1. Környezet és eszközök

• Node.js 22+: tartalmaz npm-et és a corepack-et (pnpm/yarn aktiváláshoz).
• VS Code: JavaScript/TypeScript Nightly, ESLint és Prettier bővítményekkel.
• nvm-windows vagy fnm: több Node verzió kezelése projekt szinten.

node --version
npm init -y
corepack enable

2. Nyelvi alapok

"use strict";
const greeting = (name = "Világ") => `Szia, ${name}!`;

function sum(...values) {
    return values.reduce((acc, value) => acc + value, 0);
}

console.log(greeting());
console.log(sum(1, 2, 3));

• let/const blokkszintű scope.
• Destrukturálás és spread a tömb/objektum műveletekhez.
• Optional chaining: user?.profile?.email a null ellenőrzések helyett.

3. Modulok és projektstruktúra

// package.json
{
  "type": "module",
  "scripts": {
    "dev": "node --watch src/index.js"
  }
}

// src/index.js
import { greet } from "./lib/greet.js";

console.log(greet("Community"));

// src/lib/greet.js
export const greet = (name) => `Hello ${name}`;

ESM projektnél az importokhoz mindig add hozzá a kiterjesztést, vagy használj bundlert (Vite, Next.js).

4. Böngészős DOM kezelés

const button = document.querySelector('[data-action="toggle"]');
const output = document.getElementById('status');

button?.addEventListener('click', () => {
    const visible = output?.classList.toggle('hidden');
    output.textContent = visible ? '🎉 Látható' : '🙈 Elrejtve';
});

• Használj defer attribútumot vagy a body végi scriptet, hogy a DOM már elkészüljön.
• Accessibility: aria-live, fókuszcsapdák, billentyű navigáció.

5. HTTP és async minták

const fetchPosts = async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts?_limit=5');
    if (!response.ok) throw new Error('Hálózati hiba');
    return response.json();
};

fetchPosts()
    .then((posts) => console.table(posts))
    .catch((error) => console.error(error));

• AbortController a megszakítható kérésekhez.
• Retry/backoff: p-retry, ky vagy saját util.

6. Tooling: npm, Vite, bundler

npm create vite@latest js-dx -- --template react-swc
cd js-dx
npm install
npm run dev

• Alias: Vite configban "@": "/src".
• Env változók: csak VITE_ prefixszel érhetők el a kliens oldalon.
• Codegen: OpenAPI vagy GraphQL generátor csökkenti a kézi HTTP klienst.

7. Debug, lint, teszt

npm install -D eslint prettier vitest @vitest/ui
npm create @eslint/config

• VS Code debugger: .vscode/launch.json + node --inspect.
• Vitest: npx vitest --watch vagy vitest ui böngészős felülettel.
• Playwright vagy Cypress teljes böngészőteszthez.

// sum.test.js
import { describe, expect, it } from 'vitest';
import { sum } from './sum.js';

describe('sum', () => {
  it('összeadja az értékeket', () => {
    expect(sum(1, 2, 3)).toBe(6);
  });
});

8. Backend + adatbázis

import Fastify from 'fastify';
import { drizzle } from 'drizzle-orm/node-postgres';

const app = Fastify();
const db = drizzle(process.env.DATABASE_URL);

app.get('/health', async () => ({ ok: true }));
app.post('/todos', async (request) => {
    const todo = await db.insert(todos).values({ text: request.body.text }).returning();
    return todo;
});

await app.listen({ port: 4000 });

Bejövő requestekhez használj Zod vagy valibot sémákat és globális hibakezelőt.

9. Frontend architektúra

• Design tokenek: CSS variables + Style Dictionary generálás.
• Állapot: React Query + Zustand/Redux Toolkit, signals (Solid, Qwik) SSR-hez.
• Routing: Next.js/Remix file routing, loader-ekkel és streaminggel.
• Teljesítmény: React Server Components, Suspense, partial hydration (Astro).

10. DevOps és deployment

1. GitHub Actions: actions/setup-node + npm ci + npm run test.
2. Docker multi-stage build: builderben npm run build, runtime-ban csak npm ci --omit=dev.
3. Hostolás: Vercel/Netlify frontendre, Render/Fly.io API-ra, Cloudflare Workers edge logikára.
4. Observability: OpenTelemetry SDK, Sentry, Logtail.
5. Feature flags: LaunchDarkly vagy open-source Unleash.

FROM node:22-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:22-alpine
WORKDIR /app
COPY --from=builder /app/dist ./dist
COPY package*.json ./
RUN npm ci --omit=dev
CMD ["node", "dist/server.js"]

11. Gyakori hibák

• ReferenceError: document is not defined → böngészős kódot ne futtass Node-ban, használj JSDOM-ot.
• Unhandled Promise Rejection → globális handler + minden async kódnál try/catch.
• CORS hiba → szerver oldalon engedélyezd a domain-t (Fastify cors plugin, Next middleware).
• Memóriaszivárgás → Node inspector + heap snapshot, figyelj a globális referenciákra.