이 코드를 딱 봤을 때 "이걸 왜 이렇게 짜지? 내가 이것보다 더 잘할 수 있어"라는 확신이 들지 않는다면 인공지능과의 대결에서 어려울까요?

Question

import React, { useEffect, useRef, useState, useCallback } from 'react';

const WORKER_CODE = `

const hslToRgb = (h, s, l) => {

let r, g, b;

if (s === 0) {

r = g = b = l;

} else {

const hue2rgb = (p, q, t) => {

if (t < 0) t += 1;

if (t > 1) t -= 1;

if (t < 1/6) return p + (q - p) * 6 * t;

if (t < 1/2) return q;

if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;

return p;

};

const q = l < 0.5 ? l * (1 + s) : l + s - l * s;

const p = 2 * l - q;

r = hue2rgb(p, q, h + 1/3);

g = hue2rgb(p, q, h);

b = hue2rgb(p, q, h - 1/3);

}

return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];

};

self.onmessage = function(e) {

const { width, height, maxIter, centerX, centerY, zoom } = e.data;

const buffer = new ArrayBuffer(width * height * 4);

const data = new Uint8ClampedArray(buffer);

for (let x = 0; x < width; x++) {

for (let y = 0; y < height; y++) {

let cRe = (x - width / 2) / zoom + centerX;

let cIm = (y - height / 2) / zoom + centerY;

let zRe = 0, zIm = 0;

let iter = 0;

while (zRe * zRe + zIm * zIm <= 4 && iter < maxIter) {

let zReNew = zRe * zRe - zIm * zIm + cRe;

zIm = 2 * zRe * zIm + cIm;

zRe = zReNew;

iter++;

}

const p = (y * width + x) * 4;

if (iter === maxIter) {

data[p] = 0; data[p+1] = 0; data[p+2] = 0; data[p+3] = 255;

} else {

const [r, g, b] = hslToRgb((iter / maxIter) * 1.5 % 1, 1, 0.5);

data[p] = r;

data[p+1] = g;

data[p+2] = b;

data[p+3] = 255;

}

self.postMessage({ data }, [buffer]);

};

`;

export default function FractalExplorer() {

const canvasRef = useRef(null);

const workerRef = useRef(null);

const [config, setConfig] = useState({

centerX: -0.5,

centerY: 0,

zoom: 200,

maxIter: 100,

});

const [isDragging, setIsDragging] = useState(false);

const dragStart = useRef({ x: 0, y: 0, cX: 0, cY: 0 });

useEffect(() => {

const blob = new Blob([WORKER_CODE], { type: 'application/javascript' });

workerRef.current = new Worker(URL.createObjectURL(blob));

workerRef.current.onmessage = (e) => {

const canvas = canvasRef.current;

if (!canvas) return;

const ctx = canvas.getContext('2d');

const imageData = new ImageData(e.data.data, canvas.width, canvas.height);

ctx.putImageData(imageData, 0, 0);

};

return () => workerRef.current.terminate();

}, []);

const renderFractal = useCallback(() => {

const canvas = canvasRef.current;

if (!canvas || !workerRef.current) return;

workerRef.current.postMessage({

width: canvas.width,

height: canvas.height,

maxIter: config.maxIter,

centerX: config.centerX,

centerY: config.centerY,

zoom: config.zoom

});

}, [config]);

useEffect(() => {

renderFractal();

}, [renderFractal]);

const handleWheel = (e) => {

e.preventDefault();

const zoomFactor = e.deltaY > 0 ? 0.8 : 1.25;

setConfig(prev => ({ ...prev, zoom: prev.zoom * zoomFactor }));

};

const handleMouseDown = (e) => {

setIsDragging(true);

dragStart.current = { x: e.clientX, y: e.clientY, cX: config.centerX, cY: config.centerY };

};

const handleMouseMove = (e) => {

if (!isDragging) return;

const dx = (e.clientX - dragStart.current.x) / config.zoom;

const dy = (e.clientY - dragStart.current.y) / config.zoom;

setConfig(prev => ({ ...prev, centerX: dragStart.current.cX - dx, centerY: dragStart.current.cY - dy }));

};

const handleMouseUp = () => setIsDragging(false);

return (

<h2>Mandelbrot Set Explorer (WebWorker Accelerated)</h2>

<span>Zoom: {Math.round(config.zoom)}x | </span>

<span>Iter: {config.maxIter}</span>

<input

type="range" min="10" max="1000" step="10" value={config.maxIter}

onChange={(e) => setConfig(prev => ({ ...prev, maxIter: Number(e.target.value) }))}

style={{ marginLeft: '10px', verticalAlign: 'middle' }}

/>

</div>

<canvas

ref={canvasRef}

width={800}

height={600}

onWheel={handleWheel}

onMouseDown={handleMouseDown}

onMouseMove={handleMouseMove}

onMouseUp={handleMouseUp}

onMouseLeave={handleMouseUp}

style={{ border: '1px solid #333', cursor: isDragging ? 'grabbing' : 'grab' }}

/>

<p style={{ marginTop: '10px', fontSize: '12px', color: '#888' }}>* Scroll to zoom, drag to pan</p>

</div>