React on 엔지니어 생존기록

CRA & CRACO -> VITE 마이그레이션

Thu, 01 May 2025 08:40:44 +0900

CRA와 씨름하다

2022년 한 프로젝트를 처음 시작할 때 저는 리액트에 대해 아주 잘 알지는 못했습니다. 그렇기 때문에 공식 사이트에 나와있는 대로 CRA(Create React App)을 이용해 프로젝트를 생성했습니다. 그리고 몇 달 후, 새롭게 합류한 프론트 개발자가 그 프로젝트에 CRACO를 추가했습니다. 그 당시에는 CRA의 여러 문제점으로 인해서 eject하여 커스텀하게 설정을 하던지, CRACO나 React App Rewired같은 방법을 사용했던 걸로 기억합니다.

그리고 프로젝트가 점점 커지자 몇 가지 문제가 발생했습니다.

개발 환경의 메모리 문제 CRA가 Webpack + Babel을 사용하는데, 앱이 시작 될 때 src 폴더와 node_modules 폴더에서 임포트 되는 모든 파일을 찾아서 의존성 그래프를 생성합니다. 그리고 생성된 결과를 번들링해서 메모리에 저장하는데요, 이 과정에서 많은 메모리가 필요합니다. 프로젝트가 복잡해지고 커질수록 더 악화되겠죠! 그래서 npm run dev 명령에 NODE_OPTIONS='--max-old-space-size=4096' 옵션을 추가하여 메모리를 조금 더 사용할 수 있도록 했습니다.
빌드 시간 문제 프로젝트가 커짐에 따라 시간이 점점 더 걸리더니 결국 빌드에 10분씩 걸리는 지경에 이르렀습니다. 사소한 실수 하나를 수정하기 위해 10분이나 기다려야 하는 건 너무 비효율적이었습니다. 그래서 빌드 시간을 단축시키기 위해서 esbuild를 craco에 엮어서 사용하는 방식을 통해 어느 정도 줄일 수 있었지만 여전히 4-5분 정도의 빌드 타임이 소요되었습니다.
CRA의 지원 종료 2023년 즈음해서 사실상 React 팀에서도 CRA에 대한 지원을 조용히 그만두기로 결정했습니다. 그래서 회사에서 추가로 진행하는 프로젝트에 더 이상 CRA를 사용할 수 없는 상황이었고, 이 때문에 대안을 찾아야 했습니다.

이때쯤 부터 VITE에 대한 이야기가 더 많아졌던 것 같습니다. 몇 년전에 Vue.js 3를 처음 스터디 해볼 때 VITE라는 게 있더라 정도는 봤던 기억이 있었는데, 구체적으로 이게 뭔지는 몰랐죠. 그래서 작년 말에 새로운 프로젝트를 시작 할 때 VITE를 사용해보기로 했습니다.

VITE에 놀라다

VITE는 제 생각보다 더 훌륭했습니다. 왜 사람들이 VITE를 칭송하는지 알겠더군요!

개발 환경의 쾌적함 VITE는 앱이 시작될 때 앱 전체를 번들링 하지 않습니다. 요청되는 페이지와 관련있는 임포트만 번들링하여 제공합니다. 그러니까 엄청 빠르고, 메모리 문제도 없습니다!
빌드도 빠르다! 초기 프로젝트 생성과정에서 간단하게 SWC를 선택할 수 있고, SWC를 이용하면 빌드 시간이 매우 단축됩니다. CRA에는 없던 다른 문제가 발생하긴 했지만 그건 나중에 자세히 말씀드리죠.

왜 그동안 CRA를 가지고 씨름했었을까 하는 현타가 몰려왔지만, 어쩔 수 없었죠. VITE가 좋은지 몰랐으니까!

그래서 한동안 새 프로젝트를 작업하다보니 그 작업이 다시 돌아왔습니다. 네, 기존 프로젝트 유지보수 작업이죠. 즐거운 작업입니다. 근데 이제와서 다시 CRA를 사용하는 건 마음이 불편했습니다. 실제로도 불편했고요. 메모리 옵션을 줬음에도 불구하고 꺼지는 앱과 HMR 할 때 마다 걸리는 시간! 그래서 대충 각을 잡아보고 마이그레이션 작업을 시작했습니다.

인생은 실전이다! CRA -> VITE 마이그레이션

CRA와 craco 제거

우선 CRA와 craco를 제거합니다.

npm uninstall react-scripts @craco/craco

VITE와 필수 플러그인을 설치

다음 명령으로 VITE 및 필수 플러그인을 설치합니다.

npm install -D vite @vitejs/plugin-react-swc vite-plugin-svgr vite-tsconfig-paths @swc/core @swc/cli

vite외에 설치되는 패키지 목록은 다음과 같습니다.

@vitejs/plugin-react-swc: VITE가 React를 지원할 수 있도록 하며, SWC를 사용하여 빌드 속도를 높입니다.
vite-plugin-svgr: SVG 파일을 React 컴포넌트로 변환합니다.(추후에 왜 설치했는지 설명합니다.)
vite-tsconfig-paths: 타입스크립트 경로 별칭을 사용할 수 있도록 합니다.
@swc/core: SWC의 핵심 모듈입니다.
@swc/cli: SWC를 명령줄에서 사용할 수 있도록 합니다.

VITE 설정 파일을 생성

프로젝트의 루트 폴더에 vite.config.ts 파일을 생성하고 다음과 같이 작성합니다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tsconfigPaths from "vite-tsconfig-paths";
iport svgr from "vite-plugin-svgr";

// https://vite.dev/config/
export default defineConfig({
 define: {
 global: "globalThis", // <- 패키지 중에 global 관련 에러가 발생할 경우 추가
 },
 plugins: [
 react(),
 tsconfigPaths(),
 svgr(),
 ],
 server: {
 port: 3000,
 },
});

tsconfig.json 파일의 경로 정보 수정

프로젝트의 tsconfig.json 파일을 수정합니다. 아래 내용은 예시이므로 프로젝트에 맞게 수정해야 합니다.

{
 "compilerOptions": {
 "baseUrl": "./src",
 "paths": {
 "@/*": ["*"],
 "@store": ["./app/store"],
 "@pages/*": ["./pages/*"],
 "@components/*": ["./components/*"],
 ...
 },
 "target": "es2015",
 "lib": ["dom", "dom.iterable", "esnext"],
 "allowJs": true,
 "skipLibCheck": true,
 "esModuleInterop": true,
 "allowSyntheticDefaultImports": true,
 "strict": true,
 "forceConsistentCasingInFileNames": true,
 "noFallthroughCasesInSwitch": true,
 "module": "esnext",
 "moduleResolution": "node",
 "resolveJsonModule": true,
 "isolatedModules": true,
 "noEmit": true,
 "jsx": "react-jsx",
 "noImplicitAny": false
 },
 "include": ["src"]
}

vite-env.d.ts 파일 생성

src/vite-env.d.ts 파일을 생성하고 다음과 같이 작성합니다.

/// <reference types="vite/client" />

// svg 파일을 React 컴포넌트로 사용할 수 있도록 선언
declare module "*.svg?react" {
 import * as React from "react";
 const ReactComponent: React.FunctionComponent<
 React.SVGProps<SVGSVGElement> & { title?: string }
 >;
 export default ReactComponent;
}

index.html 파일 수정

public/index.html 파일을 프로젝트의 루트 폴더로 옮기고, 스크립트 링크를 다음과 같이 수정합니다.

...
<body>
 <div id="root"></div>
 <script type="module" src="/src/main.tsx"></script>
</body>
...

환경 변수 업데이트

프로젝트의 .env 파일에서 환경 변수를 REACT_APP_ 대신 VITE_ 접두사를 사용하도록 수정합니다.

// 이전
REACT_APP_API_URL=http://localhost:3000

// 다음과 같이 수정
VITE_API_URL=http://localhost:3000

package.json 파일의 스크립트 수정

프로젝트의 package.json 파일을 수정합니다.

...
 "scripts": {
 "dev": "vite",
 "build": "NODE_ENV=production tsc -b && vite build",
 }
...

svg 임포트 수정

앞서 vite-plugin-svgr 플러그인을 설치했었는데요, VITE에서는 CRA 처럼 svg파일을 컴포넌트로 임포트 할 수 없습니다. 그래서 플러그인을 설치하고 임포트 부분을 다음과 같이 수정합니다.

// 이전 방식
import { ReactComponent as Checklist } from "../assets/checklist.svg";

// 다음과 같이 수정
import Checklist from "../assets/checklist.svg?react";

앞서 작성한 vite-env.d.ts 파일을 다시 확인해보시면 .svg?react를 처리하기 위한 선언이 추가되어 있습니다.

ERR_REQUIRE_ESM 에러

npm run dev 명령으로 프로젝트를 실행했을 때, 다음과 같은 에러가 발생할 수 있는데요,

...
Error [ERR_REQUIRE_ESM]: require() of ES Module /path/to/vite-tsconfig-paths/dist/index.js from /path/to/vite.config.ts not supported.
...

그렇다면 프로젝트가 ESM 모듈을 사용하도록 타입을 변경해야 합니다.

{
 "type": "module"
}

global is not defined 에러

몇몇 패키지는 global 변수를 참조하는데, VITE가 global 대신에 브라우저에서 사용하는 globalThis를 사용하도록 설정해주면 됩니다.

앞서 작성한 vite.config.ts 파일을 확인해보시면 다음과 같은 설정이 있었습니다.

export default defineConfig({
 define: {
 global: 'globalThis', // ← 바로 이겁니다!
 },
 ...
});

process.env.NODE_ENV 를 찾을 수 없는 오류

VITE는 process.env.NODE_ENV 대신 import.meta.env.MODE를 사용합니다.

// 이전 방식
const isProduction = process.env.NODE_ENV === "production";

// 다음과 같이 수정
const isProduction = import.meta.env.MODE === "production";

require를 import로 변경

VITE는 CommonJS 모듈 시스템을 사용하지 않습니다. 그래서 require를 import로 변경해야 합니다.

// 이전 방식
import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n.use(initReactI18next).init({
 fallbackLng: "en-US",
 lng: "en-US",
 resources: {
 en: {
 translations: require("./locales/en/translations.json"),
 },
 ko: {
 translations: require("./locales/ko/translations.json"),
 },
 },
 ...
});

// 다음과 같이 수정
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import enTranslations from "./locales/en/translations.json";
import koTranslations from "./locales/ko/translations.json";

i18n.use(initReactI18next).init({
 fallbackLng: "en-US",
 lng: "en-US",
 resources: {
 en: {
 translations: enTranslations,
 },
 ko: {
 translations: koTranslations,
 },
 },
 ...
});

빌드에서 문제가 발생하다.

CRA는 개발환경에서는 문제가 많았지만, 빌드 속도를 제외하고 빌드에서 문제는 특별히 없었습니다. 그런데 VITE로 변경하니 로컬에서는 빌드가 잘 되는데 Github Actions에서는 메모리 이유로 빌드가 실패하는 문제가 발생했습니다.

원인을 찾다보니, 너무 거대한 번들 사이즈가 원인이었습니다. 현재 작업 중인 프로젝트는 좀 복잡한 요구사항으로 인해 무거운 패키지를 많이 사용할 수 밖에 없었는데요. 가장 큰 번들의 크기가 무려 16MB에 이를 정도 였습니다.

다음과 같이 manualChunks 옵션을 사용하여 번들의 크기를 분할하는 방법이 있었지만,

build: {
 rollupOptions: {
 output: {
 manualChunks(id) {
 if (id.includes('node_modules')) {
 if (id.includes('react')) return 'vendor-react';
 if (id.includes('codemirror')) return 'vendor-codemirror';
 return 'vendor';
 }
 },
 },
 },
},

빌드되고 나서 실행과정에서 문제가 생겼기 때문에, 다른 방법을 찾아야 했습니다.

다른 방법으로는 lazy import를 사용하는 방법이었는데, 프로젝트가 워낙 복잡한 상황이었기에 한 번에 적용할 수는 없었고 일단은 Github Actions의 빌드 설정에 메모리 옵션을 추가하는 것으로 해결했습니다.

- run: CI=false npm run build
 env:
 NODE_OPTIONS: --max-old-space-size=8192

일단은 한숨 돌리고 프로젝트를 유지보수 하면서 점진적으로 lazy import를 적용해 나가면서 상황을 개선 해봐야 겠습니다.

React 19 & 19.1 알아보기

Sat, 15 Mar 2025 00:10:50 +0000

1. 프로젝트 세팅하기

1.1 vite 프로젝트 세팅

우선 vite를 이용해서 react 프로젝트를 설정합니다.

> npm create vite@latest react-19
Need to install the following packages:
create-vite@6.3.1
Ok to proceed? (y) y


> npx
> create-vite react-19

│
◇ Select a framework:
│ React
│
◇ Select a variant:
│ TypeScript + SWC
│
◇ Scaffolding project in /Users/onlifecoding/src/studies/react-19...
│
└ Done. Now run:

 cd react-19
 npm install
 npm run dev

> cd react-19
> npm i

이렇게 프로젝트를 설정하고 에디터를 통해 프로젝트를 열어보면, 다음과 같이 react 19 프로젝트가 설정된 것을 확인할 수 있습니다.

{
 ...
 "dependencies": {
 "react": "^19.0.0",
 "react-dom": "^19.0.0"
 },
 "devDependencies": {
 ...
 "@types/react": "^19.0.10",
 "@types/react-dom": "^19.0.4",
 ...
 }
}

1.2 tailwindcss 설정

tailwindcss를 설치합니다.

> npm i tailwindcss @tailwindcss/vite

vite.config.ts 파일에 tailwindcss를 설정합니다.

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import tailwindcss from "@tailwindcss/vite";

// https://vite.dev/config/
export default defineConfig({
 plugins: [react(), tailwindcss()],
 server: {
 port: 3000,
 },
});

src/index.css 파일의 최상단에 다음과 같이 작성합니다.

@import "tailwindcss";

1.3 react-router-dom 및 기본 라우팅 설정

페이지간의 이동을 위해 react-router-dom을 설치합니다.

> npm install react-router-dom

그리고 src/Router.tsx 파일을 생성하고 다음과 같이 코드를 작성합니다.

import { lazy } from "react";
import { createBrowserRouter, Outlet } from "react-router-dom";

const Index = lazy(() => import("./pages/Index"));
const About = lazy(() => import("./pages/About"));

// 루트 레이아웃 컴포넌트
const RootLayout = () => {
 return (
 <div className="h-screen w-full">
 <Outlet />
 </div>
 );
};

export const router = createBrowserRouter([
 {
 path: "/",
 element: <RootLayout />,
 children: [
 {
 index: true,
 element: <Index />,
 },
 {
 path: "/about",
 element: <About />,
 },
 ],
 },
]);

라우팅 확인을 위해 src/pages/Index.tsx 파일을 다음과 같이 작성합니다.

import { Link } from "react-router-dom";

const Index = () => {
 return (
 <div className="h-screen w-full flex flex-col">
 <div className="w-full flex items-center gap-2 text-blue-500 underline">
 <Link to="/">Index</Link>
 <Link to="/about">About</Link>
 </div>
 <div className="text-4xl font-bold">Index</div>
 </div>
 );
};

export default Index;

이어서 src/pages/About.tsx 파일을 다음과 같이 작성합니다.

import { Link } from "react-router-dom";

const About = () => {
 return (
 <div className="h-screen w-full flex flex-col">
 <div className="w-full flex items-center gap-2 text-blue-500 underline">
 <Link to="/">Index</Link>
 <Link to="/about">About</Link>
 </div>
 <div className="text-4xl font-bold">About</div>
 </div>
 );
};
export default About;

마지막으로 라우팅이 동작하도록 src/App.tsx 파일을 다음과 같이 작성합니다.

import { Suspense } from "react";
import { RouterProvider } from "react-router-dom";
import { router } from "./Router";

function App() {
 return (
 <Suspense fallback={<div>Loading...</div>}>
 <RouterProvider router={router} />
 </Suspense>
 );
}

export default App;

이제 프로젝트를 실행하고 라우팅이 동작하는 것을 확인할 수 있습니다.

> npm run dev

2. React 19 알아보기

2.1 Actions

React에서는 데이터를 작성하고 저장하거나 수정하는 일이 빈번하게 발생합니다. 사실 웹 페이지라는 게 데이터를 저장하고, 표시하고, 수정하고, 삭제하는 것이 전부이기 때문입니다. 이렇게 데이터를 다루는 과정에서 무언가 상태 값이 변경되겠죠?(ex: 서버에 데이터를 전송하고 처리되기 기다릴 때, 요청 상태는 요청중 -> 요청 완료 또는 요청중 -> 요청 실패 등으로 변경될 겁니다!) 이렇게 상태가 변경되는 걸 상태 전이(transition)이라고 합니다. 그리고 공식 문서에 따르면, 비동기 상태 전이(async transition)을 사용하는 함수를 Action이라고 정의하고 있습니다.

2.1.1 useTransition

예시를 하나 들어볼까요? 서버에 데이터를 전송하는 경우를 생각해보죠. 서버와의 통신 작업을 진행할 때 중요한 점은, 사용자가 실수로 저장 버튼을 두번 클릭하는 걸 방지할 수 있어야 합니다. 만약 이런 처리가 제대로 되지 않는다면, 데이터가 중복으로 저장되어 문제가 발생할 수 있습니다. 예시를 위해서 src/pages/Index.tsx 파일을 다음과 같이 작성합니다.

import { useState } from "react";
import { Link } from "react-router-dom";

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

const Index = () => {
 const [message, setMessage] = useState("");
 const [log, setLog] = useState<string[]>([]);

 const handleSave = async () => {
 await wait(2000); // 서버와의 통신을 흉내내기 위해 2초 대기
 setLog((prev: string[]) => [...prev, message]);
 };

 return (
 <div className="h-screen w-full flex flex-col">
 <div className="w-full flex items-center gap-2 text-blue-500 underline">
 <Link to="/">Index</Link>
 <Link to="/about">About</Link>
 </div>
 <div className="flex items-center gap-2">
 <input
 type="text"
 placeholder="메세지를 입력하세요"
 value={message}
 onChange={(e) => setMessage(e.target.value)}
 />
 <button onClick={handleSave}>저장</button>
 </div>
 <div className="flex items-center gap-2">
 {log.map((item, index) => (
 <div key={index}>{item}</div>
 ))}
 </div>
 </div>
 );
};

export default Index;

완성된 페이지는 다음과 같습니다.

메세지를 입력할 수 있는 입력 필드와 저장 버튼을 표시하고, 저장 버튼을 클릭하면 메세지를 서버에 저장하는 기능을 구현했습니다. 그리고 서버에 저장하는 걸 흉내내기 위해서 저장 버튼을 누르면 2초 대기 후 저장된 메세지를 표시하도록 했습니다.

이 페이지에서 메세지를 입력하고, 저장 버튼을 누르면 2초 후에 저장된 메세지가 로그에 표시되는 걸 확인할 수 있습니다. 그런데 저장 버튼을 마구 누르면 어떻게 될까요?

서버에 저장하는 동안 입력을 방지하는 작업을 하지 않았기 때문에 누르는 만큼 중복되어 저장되는 걸 볼 수 있습니다. 그러면 입력을 방지하기 위한 장치를 추가해보겠습니다.

...
const Index = () => {
 ...
 const [isSaving, setIsSaving] = useState(false);

 const handleSave = async () => {
 setIsSaving(true);
 await wait(2000); // 서버와의 통신을 흉내내기 위해 2초 대기
 setLog((prev: string[]) => [...prev, message]);
 setIsSaving(false);
 };

 return (
 <div className="h-screen w-full flex flex-col gp">
 ...
 <div className="flex flex-col gap-2">
 <div className="flex items-center gap-2">
 ...
 <button
 className="border-2 border-gray-300 rounded-md p-2 disabled:opacity-50 disabled:cursor-not-allowed"
 onClick={handleSave}
 disabled={isSaving}
 >
 저장
 </button>
 </div>
 ...
 </div>
 </div>
 );
};

export default Index;

데이터를 저장하는 중인지 알 수 있는 상태 isSaving을 추가했습니다. 그리고 저장 버튼을 누르면 이 상태를 true로 변경하고, 서버와의 통신이 끝나면 false로 변경합니다. 이렇게 하면 저장 버튼이 눌리지 않은 상태에서는 비활성화되어 입력을 방지할 수 있습니다. 그리고 사용자에게 버튼을 누를 수 없다는 알림을 위해 disabled 속성과 스타일을 추가했습니다.

이제 저장 버튼을 누르면 중복으로 저장되는 걸 막을 수 있습니다. React 19에서는 이런 작업을 쉽게 할 수 있도록 useTransition 훅을 제공합니다. 이 훅은 서버에 데이터를 저장하는 등의 비동기 작업이 시작될 때 isPending 상태를 true로 변경하고, 끝나면 false로 변경합니다. 위 예제를 다음과 같이 수정할 수 있습니다.

import { useState, useTransition } from "react";
import { Link } from "react-router-dom";

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

const Index = () => {
 const [message, setMessage] = useState("");
 const [log, setLog] = useState<string[]>([]);
 const [isPending, startTransition] = useTransition();

 const handleSave = async () => {
 startTransition(async () => {
 await wait(2000); // 서버와의 통신을 흉내내기 위해 2초 대기
 setLog((prev: string[]) => [...prev, message]);
 });
 };

 return (
 <div className="h-screen w-full flex flex-col gp">
 ...
 <div className="flex flex-col gap-2">
 <div className="flex items-center gap-2">
 ...
 <button
 className="border-2 border-gray-300 rounded-md p-2 disabled:opacity-50 disabled:cursor-not-allowed"
 onClick={handleSave}
 disabled={isPending}
 >
 저장
 </button>
 </div>
 ...
 </div>
 </div>
 );
};

export default Index;

isSaving과 같은 별도의 상태를 사용하지 않아도 되고, 사용자가 직업 setIsSaving(true), setIsSaving(false)를 호출해야 할 필요도 없어졌습니다. startTransition 함수를 사용하면, 호출이 시작될 때와 종료될 때 useTransition 훅이 자동으로 상태를 관리해줍니다.

useTransition은 React 18에서도 사용할 수 있습니다!

2.1.2 useActionState

만약 데이터를 전송하던 중에 오류가 발생한다면 어떻게 될까요? 사용자에게 뭔가 오류가 발생했다는 사실을 알려줘야 합니다. 그렇지 않으면, 사용자는 뭐가 안되는지도 모르면서 계속 여기저기 클릭하다가 결국 사용을 포기하겠죠!

import { useState, useTransition } from "react";
import { Link } from "react-router-dom";

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

/**
 * 서버에 데이터를 전송하는 함수, 일부러 오류를 발생시키기 위해 예외를 던집니다.
 */
const submitMessage = async (message: string) => {
 console.log(`submitMessage: ${message}`);
 await wait(2000); // 서버와의 통신을 흉내내기 위해 2초 대기
 throw new Error("서버에 문제가 발생했습니다.");
};

const Index = () => {
 const [message, setMessage] = useState("");
 const [log, setLog] = useState<string[]>([]);
 const [isPending, startTransition] = useTransition();
 const [error, setError] = useState<string | null>(null);

 const handleSave = async () => {
 setError(null);

 startTransition(async () => {
 try {
 await submitMessage(message);

 setLog((prev: string[]) => [...prev, message]);
 } catch (error: unknown) {
 setError(
 error instanceof Error
 ? error.message
 : "알 수 없는 오류가 발생했습니다."
 );
 }
 });
 };

 return (
 <div className="h-screen w-full flex flex-col gp">
 <div className="w-full flex items-center gap-2 text-blue-500 underline">
 <Link to="/">Index</Link>
 <Link to="/about">About</Link>
 </div>
 <div className="flex flex-col gap-2">
 <div className="flex items-center gap-2">
 <input
 className="border-2 border-gray-300 rounded-md p-2"
 type="text"
 placeholder="메세지를 입력하세요"
 value={message}
 onChange={(e) => setMessage(e.target.value)}
 />
 <button
 className="border-2 border-gray-300 rounded-md p-2 disabled:opacity-50 disabled:cursor-not-allowed"
 onClick={handleSave}
 disabled={isPending}
 >
 저장
 </button>
 {error && <p className="text-red-500">{error}</p>}
 </div>
 <div className="flex flex-col gap-2">
 <p className="text-lg font-bold text-gray-500">로그</p>
 <div className="flex items-center gap-2">
 {log.map((item, index) => (
 <div key={index}>{item}</div>
 ))}
 </div>
 </div>
 </div>
 </div>
 );
};

export default Index;

저장 버튼을 눌렀을 때, 서버에 메세지를 전송하는 걸 흉내내기 위해 submitMessage 함수를 추가했습니다. 그리고 서버에서 뭔가 오류가 발생하는 상황을 만들기 위해 일부러 예외를 던지도록 했습니다.

이제 저장 버튼을 누르면 2초 대기 후 에러 메세지가 표시되는 걸 볼 수 있습니다.

React 19에 추가된 useActionState 훅을 사용하면, 이런 폼 전송 작업의 상태와 에러 처리를 더 쉽게 할 수 있습니다.

import { useActionState, useState } from "react";
import { Link } from "react-router-dom";

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

interface submitMessageResult {
 error: string | null;
}

/**
 * 서버에 데이터를 전송하는 함수, 일부러 오류를 발생시키기 위해 예외를 던집니다.
 */
const submitMessage = async (message: string) => {
 console.log(`submitMessage: ${message}`);
 await wait(2000); // 서버와의 통신을 흉내내기 위해 2초 대기
 throw new Error("서버에 문제가 발생했습니다.");
};

const Index = () => {
 const [message, setMessage] = useState("");
 const [log, setLog] = useState<string[]>([]);
 /**
 * 각각 Action의 결과, 폼의 값을 전송할 Action, Action의 진행 상태를 나타냅니다.
 *
 * 이 예제에서는 결과 값으로 오류 메세지만 리턴합니다.
 */
 const [result, submitAction, isPending] = useActionState(
 async (
 prevState: submitMessageResult,
 formData: FormData
 ): Promise<submitMessageResult> => {
 const message = formData.get("message") as string;

 if (prevState) {
 console.log(`이전 상태 값: ${JSON.stringify(prevState)}`);
 }

 try {
 await submitMessage(message);

 setLog((prev: string[]) => [...prev, message]);

 return { error: null }; // Action의 결과를 리턴합니다. 오류가 없었으므로 null을 리턴합니다.
 } catch (error: unknown) {
 const errorMessage =
 error instanceof Error
 ? error.message
 : "알 수 없는 오류가 발생했습니다.";
 return { error: errorMessage }; // 오류가 있었으므로 오류 메세지를 리턴합니다.
 }
 },
 { error: null } // 초기 상태는 null입니다.
 );

 return (
 <div className="h-screen w-full flex flex-col gp">
 <div className="w-full flex items-center gap-2 text-blue-500 underline">
 <Link to="/">Index</Link>
 <Link to="/about">About</Link>
 </div>
 <div className="flex flex-col gap-2">
 <form action={submitAction} className="flex items-center gap-2">
 <input
 name="message"
 className="border-2 border-gray-300 rounded-md p-2"
 type="text"
 placeholder="메세지를 입력하세요"
 value={message}
 onChange={(e) => setMessage(e.target.value)}
 />
 <button
 className="border-2 border-gray-300 rounded-md p-2 disabled:opacity-50 disabled:cursor-not-allowed"
 type="submit"
 disabled={isPending}
 >
 저장
 </button>
 {!isPending && result.error && (
 <p className="text-red-500">{result.error}</p>
 )}
 </form>
 <div className="flex flex-col gap-2">
 <p className="text-lg font-bold text-gray-500">로그</p>
 <div className="flex items-center gap-2">
 {log.map((item, index) => (
 <div key={index}>{item}</div>
 ))}
 </div>
 </div>
 </div>
 </div>
 );
};

export default Index;

직접 setError를 통해 오류 메세지를 설정할 필요 없이 useActionState 훅을 통해 Action의 결과와 진행 상태를 관리할 수 있습니다. 그리고 이전 상태까지도 접근할 수 있어서, 뭔가 이전 상태에 따른 처리를 할 수도 있습니다.

2.1.3 use

아마도 웹에서 가장 빈번한 작업을 서버에서 비동기(async)로 데이터를 조회해서 목록을 출력하는 작업일겁니다. 그런 작업을 하나 추가해볼까요? pages/List.tsx 파일을 추가하고 다음과 같이 작성합니다.

단순한 구현을 위해 코드 중복은 무시하겠습니다!

import { Suspense } from "react";
import { Link } from "react-router-dom";
import MemberList from "./components/MemberList";

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

/**
 * 멤버 목록을 조회하는 함수
 * @returns 멤버 목록
 */
const fetchMemberList = async () => {
 await wait(2000); // 서버와의 통신을 흉내내기 위해 2초 대기

 return [
 { id: 1, name: "John" },
 { id: 2, name: "Jane" },
 { id: 3, name: "Jim" },
 ];
};

const List = () => {
 return (
 <div className="h-screen w-full flex flex-col">
 <div className="w-full flex items-center gap-2 text-blue-500 underline">
 <Link to="/">Index</Link>
 <Link to="/about">About</Link>
 </div>
 <div className="text-4xl font-bold">List</div>
 <div className="flex flex-col gap-2">
 {/* 비동기 처리를 위해 Suspense를 사용 */}
 <Suspense fallback={<div>목록을 불러오는 중입니다...</div>}>
 {/* 멤버 목록을 조회하는 함수의 Promise를 넘겨줍니다. */}
 <MemberList memberListPromise={fetchMemberList()} />
 </Suspense>
 </div>
 </div>
 );
};

export default List;

MemberList 컴포넌트에 멤버 목록을 조회하는 함수의 결과인 Promise를 넘겨주고 있습니다. 이제 pages/components/MemberList.tsx 파일을 추가하고 다음과 같이 작성합니다.

import { use } from "react";

interface MemberListProps {
 memberListPromise: Promise<
 {
 id: number;
 name: string;
 }[]
 >;
}

/**
 * 멤버 목록을 조회하는 컴포넌트
 * @param memberListPromise 멤버 목록을 조회하는 Promise
 * @returns 멤버 목록
 */
const MemberList = ({ memberListPromise }: MemberListProps) => {
 // Promise의 결과가 resolve될 때까지 기다립니다.
 const memberList = use(memberListPromise);

 return (
 <ul>
 {memberList.map((member) => (
 <li key={member.id}>{`${member.id} - ${member.name}`}</li>
 ))}
 </ul>
 );
};

export default MemberList;

Promise를 받아서 use 훅으로 넘겨줍니다. use 훅은 Promise 결과가 나올 때 까지(resolve 또는 reject) 기다리고, 그 결과를 반환합니다. 결과를 받아서 li 요소를 생성합니다.

마지막으로 Router.tsx 파일에 다음과 같이 라우팅을 추가합니다.

import { lazy } from "react";
import { createBrowserRouter, Outlet } from "react-router-dom";

const Index = lazy(() => import("./pages/Index"));
const About = lazy(() => import("./pages/About"));
const List = lazy(() => import("./pages/List"));

// 루트 레이아웃 컴포넌트
// eslint-disable-next-line react-refresh/only-export-components
const RootLayout = () => {
 return (
 <div className="h-screen w-full">
 <Outlet />
 </div>
 );
};

export const router = createBrowserRouter([
 {
 path: "/",
 element: <RootLayout />,
 children: [
 {
 index: true,
 element: <Index />,
 },
 {
 path: "/about",
 element: <About />,
 },
 {
 path: "/list",
 element: <List />,
 },
 ],
 },
]);

이제 브라우저에서 http://localhost:3000/list 주소로 이동하면, 서버의 응답을 기다리는 동안 Suspense 컴포넌트의 fallback 속성으로 설정한 내용이 표시되다가 서버의 응답이 오면 멤버 목록을 조회하는 작업이 진행되는 걸 볼 수 있습니다.

만약 서버에서 데이터를 조회하는 작업이 실패한다면, 그러니까 Promise가 reject 된다면 어떻게 될까요? fetchMemberList 함수에서 일부러 오류가 발생하도록 수정해볼까요?

/**
 * 멤버 목록을 조회하는 함수
 * @returns 멤버 목록
 */
const fetchMemberList = async () => {
 throw new Error("서버에 문제가 발생했습니다.");
 await wait(2000); // 서버와의 통신을 흉내내기 위해 2초 대기

 return [
 { id: 1, name: "John" },
 { id: 2, name: "Jane" },
 { id: 3, name: "Jim" },
 ];
};

페이지를 새로고침 해보면, 컴포넌트 내용 대신에 오류 메세지가 표시됩니다!

이럴 때는 Promise에 catch 핸들러를 추가할 수도 있지만, ErrorBoundary를 사용해서 오류를 사용자에게 친화적인 메시지로 표시할 수 있습니다. 우선, react-error-boundary 패키지를 설치합니다.

> npm install react-error-boundary

그리고 src/pages/List.tsx 파일의 Suspense 컴포넌트를 ErrorBoundary 컴포넌트로 감싸줍니다.

import { Suspense } from "react";
import { Link } from "react-router-dom";
import MemberList from "./components/MemberList";
import { ErrorBoundary } from "react-error-boundary";

const wait = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));

/**
 * 멤버 목록을 조회하는 함수
 * @returns 멤버 목록
 */
const fetchMemberList = async () => {
 throw new Error("서버에 문제가 발생했습니다.");
 await wait(2000); // 서버와의 통신을 흉내내기 위해 2초 대기

 return [
 { id: 1, name: "John" },
 { id: 2, name: "Jane" },
 { id: 3, name: "Jim" },
 ];
};

const List = () => {
 return (
 <div className="h-screen w-full flex flex-col">
 <div className="w-full flex items-center gap-2 text-blue-500 underline">
 <Link to="/">Index</Link>
 <Link to="/about">About</Link>
 </div>
 <div className="text-4xl font-bold">List</div>
 <div className="flex flex-col gap-2">
 <ErrorBoundary
 fallback={<div>목록을 불러오는 중에 문제가 발생했습니다.</div>}
 >
 {/* 비동기 처리를 위해 Suspense를 사용 */}
 <Suspense fallback={<div>목록을 불러오는 중입니다...</div>}>
 {/* 멤버 목록을 조회하는 함수의 Promise를 넘겨줍니다. */}
 <MemberList memberListPromise={fetchMemberList()} />
 </Suspense>
 </ErrorBoundary>
 </div>
 </div>
 );
};

export default List;

이렇게 하면 데이터를 조회하는 작업이 실패했을 때, 사용자에게 친화적인 메시지를 표시할 수 있습니다.

React 19.1 업데이트하기

다음 명령을 통해 설치된 패키지의 현재 버전과 최신 버전을 확인합니다.

> npm outdated
Package Current Wanted Latest Location Depended by
@eslint/js 9.22.0 9.24.0 9.24.0 node_modules/@eslint/js react-19
@tailwindcss/vite 4.0.14 4.1.3 4.1.3 node_modules/@tailwindcss/vite react-19
@types/react 19.0.10 19.1.1 19.1.1 node_modules/@types/react react-19
@types/react-dom 19.0.4 19.1.2 19.1.2 node_modules/@types/react-dom react-19
@vitejs/plugin-react-swc 3.8.0 3.8.1 3.8.1 node_modules/@vitejs/plugin-react-swc react-19
eslint 9.22.0 9.24.0 9.24.0 node_modules/eslint react-19
globals 15.15.0 15.15.0 16.0.0 node_modules/globals react-19
react 19.0.0 19.1.0 19.1.0 node_modules/react react-19
react-dom 19.0.0 19.1.0 19.1.0 node_modules/react-dom react-19
react-router-dom 7.3.0 7.5.0 7.5.0 node_modules/react-router-dom react-19
tailwindcss 4.0.14 4.1.3 4.1.3 node_modules/tailwindcss react-19
typescript 5.7.3 5.7.3 5.8.3 node_modules/typescript react-19
typescript-eslint 8.26.1 8.29.1 8.29.1 node_modules/typescript-eslint react-19
vite 6.2.2 6.2.6 6.2.6 node_modules/vite react-19

위 내용 중 Current, Wanted, Latest 열은 다음과 같은 의미를 가집니다.

Current: 현재 설치된 버전
Wanted: package.json 파일에 설정된 버전 범위를 만족하는 최신 버전(ex: “~5.7.2"는 5.7.2 <= 패키지 버전 < 5.8.0, “^6.2.0"은 6.2.0 <= 패키지 버전 < 7.0.0)
Latest: 최신 버전

자 그러면, 모든 패키지를 Wanted 버전으로 업데이트 하겠습니다.

> npm update

이제 다시 패키지 버전을 확인해보면, 다음과 같이 모든 패키지가 최신 버전으로 업데이트 된 것을 확인할 수 있습니다.

Owner Stacks

React 19.1 버전에서 추가된 Owner Stacks는 컴포넌트의 오류가 발생했을 때, 오류가 발생한 컴포넌트의 계층 구조를 표시해줍니다. 그래서 실제로 어떤 컴포넌트에서 오류가 발생했고, 그 컴포넌트는 어떤 컴포넌트가 렌더링한 건지 확인할 수 있어 디버깅할 때 유용합니다.

공식 문서를 참조하여 다음과 같은 예제를 작성해보겠습니다.

우선, 무언가 에러가 발생했을 때 화면에 오버레이를 표시할 수 있도록 index.html 파일을 수정합니다.

<!doctype html>
<html lang="en">
 <head>
 <meta charset="UTF-8" />
 <link rel="icon" type="image/svg+xml" href="/vite.svg" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <title>Vite + React + TS</title>
 </head>
 <body>
 <!--
 Error dialog in raw HTML
 since an error in the React app may crash.
-->
<div id="error-dialog" class="hidden">
 <h1 id="error-title" class="text-red">Error</h1>
 <p class="">
 <pre id="error-body"></pre>
 </p>
 <div class="mb-10"></div>
 <h2 class="">Owner Stack:</h2>
 <pre id="error-owner-stack" class="nowrap"></pre>
 <button
 id="error-close"
 class="mt-10"
 onclick="document.getElementById('error-dialog').classList.add('hidden')"
 >
 Close
 </button>
</div>
 <div id="root"></div>
 <script type="module" src="/src/main.tsx"></script>
 </body>
</html>

그리고 이 오버레이의 스타일을 src/index.css 파일에 추가합니다.

#error-dialog {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: white;
 padding: 15px;
 opacity: 0.9;
 text-wrap: wrap;
 overflow: scroll;
}

#error-dialog h1 {
 margin-top: 0;
 font-size: 22px;
}

#error-dialog h2 {
 margin-top: 0;
 font-size: 20px;
}

#error-dialog .text-red {
 color: red;
}

#error-dialog .mb-20 {
 margin-bottom: 20px;
}

#error-dialog .mb-10 {
 margin-bottom: 10px;
}

#error-dialog .mb-0 {
 margin-bottom: 0;
}

#error-dialog .mt-10 {
 margin-top: 10px;
}

#error-dialog pre {
 text-wrap: wrap;
}

#error-dialog pre.nowrap {
 text-wrap: nowrap;
}

#error-dialog .hidden {
 display: none;
}

다음으로 오버레이에 에러 메세지와 Owner Stack을 표시할 수 있도록 하는 유틸 함수를 src/utils/errorOverlay.ts 파일에 추가합니다.

export const onConsoleError = ({
 consoleMessage,
 ownerStack,
}: {
 consoleMessage: string;
 ownerStack: string | null;
}) => {
 const errorDialog = document.getElementById("error-dialog");
 const errorBody = document.getElementById("error-body");
 const errorOwnerStack = document.getElementById("error-owner-stack");

 if (errorBody) {
 // Display console.error() message
 errorBody.innerText = consoleMessage;
 }

 if (errorOwnerStack) {
 // Display owner stack
 errorOwnerStack.innerText = ownerStack ?? "-no owner stack-";
 }

 if (errorDialog) {
 // Show the dialog
 errorDialog.classList.remove("hidden");
 }
};

이제 마지막으로 src/main.tsx 파일에 console.error 함수를 재정의하여 console.error 함수가 호출될 때 오버레이에 에러 메세지와 Owner Stack을 표시할 수 있도록 합니다.

import { captureOwnerStack, StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
import { onConsoleError } from "./utils/errorOverlay.ts";

// 원래의 console.error 함수를 저장
const originalConsoleError = console.error;

// 재정의된 console.error 함수
console.error = function patchedConsoleError(...args) {
 // 원래의 console.error 함수를 호출
 originalConsoleError.apply(console, args);
 // Owner Stack을 캡쳐
 const ownerStack = captureOwnerStack();
 // 오버레이에 에러 메세지와 Owner Stack을 표시
 onConsoleError({
 consoleMessage: args[0],
 ownerStack,
 });
};

createRoot(document.getElementById("root")!).render(
 <StrictMode>
 <App />
 </StrictMode>
);

이제 브라우저에서 무언가 에러가 발생했을 때 오버레이에 에러 메세지와 Owner Stack을 표시할 수 있습니다. 그러면 간단하게 테스트를 해볼까요?

다음과 같이 src/pages/components/Parent.tsx와 src/pages/components/Child.tsx 파일을 추가합니다.

const Child = () => {
 console.error("Child 컴포넌트에서 에러가 발생했습니다.");

 return <div>Child</div>;
};

export default Child;

import Child from "./Child";

const Parent = () => {
 return (
 <>
 <div>Parent</div>
 <Child />
 </>
 );
};

export default Parent;

그리고 src/pages/About.tsx 파일에 Parent 컴포넌트를 추가합니다.

import { Link } from "react-router-dom";
import Parent from "./components/Parent";

const About = () => {
 return (
 <div className="h-screen w-full flex flex-col">
 <div className="w-full flex items-center gap-2 text-blue-500 underline">
 <Link to="/">Index</Link>
 <Link to="/about">About</Link>
 </div>
 <div className="text-4xl font-bold">About</div>
 <Parent />
 </div>
 );
};
export default About;

이제 브라우저에서 About 페이지로 이동해서 에러를 확인해볼까요?

오버레이가 표시되고, Owner Stack에 오류가 발생한 컴포넌트의 계층 구조가 표시되는 것을 확인할 수 있습니다. 에러가 발생한 컴포넌트의 부모 컴포넌트는 Parent 컴포넌트이고, Parent 컴포넌트의 부모 컴포넌트는 About 컴포넌트인 거죠.

단, Owner Stack은 개발 환경에서만 사용가능하기 때문에 main.tsx를 다음과 같이 수정할 필요가 있습니다.

import { captureOwnerStack, StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
import { onConsoleError } from "./utils/errorOverlay.ts";

if (process.env.NODE_ENV === "development") {
 const originalConsoleError = console.error;

 console.error = function patchedConsoleError(...args) {
 originalConsoleError.apply(console, args);
 const ownerStack = captureOwnerStack();
 onConsoleError({
 consoleMessage: args[0],
 ownerStack,
 });
 };
}

createRoot(document.getElementById("root")!).render(
 <StrictMode>
 <App />
 </StrictMode>
);

참고로 process를 사용하려면 다음 명령으로 node의 타입 정보 패키지를 설치해야 합니다.

> npm install --save-dev @types/node

Github Copilot First Look - 첫 인상과 React 개발 일주일 사용후기

Mon, 03 Oct 2022 09:52:29 +0900

지난 6월에 Github에서 Copliot을 정식으로 출시하여 이제 일반 사용자들도 사용해볼 수 있게 되었습니다.(출시한지가 언젠데 이제서야…😞) 하도 주변에서 copliot에 대한 찬사를 하고, 심지어 이제 AI가 코딩을 더 잘한다는 소리까지 듣게 되니 좀 많이 궁금해지더군요! 하지만 궁금함이 귀찮음을 이기지 못하던 차에 한 뉴스를 접하게 됐습니다. AI가 그린 그림이 한 공모전에서 1등을 했다는 뉴스였는데요. 그림 분야에서 AI의 위협이 무시하지 못할 수준이라는 건 알았지만, ‘copilot이 과연 개발자의 일을 뺏아갈 수 있을까?’ 하는 의문이 들었습니다. 드디어 호기심이 귀찮음을 뛰어넘을 수 있는 기회가 왔기에 한 번 찍먹 해보기로 했습니다. 근데 찍먹해보기 전에 방금 전해드린 AI 뉴스부터 한 번 보고갈까요?

정말 AI가 내 직업을 뺏을까?

AI의 발전은 갈수록 그 속도가 더 빨라지고 있습니다. 최근에 미국에서는 AI가 그린 그림이 공모전 1등을 해서 논란이 일었습니다. 보도에 따르면 출품 당시 ‘미드 저니’라는 AI를 통해 그린 것임을 미리 밝혔지만, 일부 심사위원은 AI가 그린 그림인지 인지하지 못할 정도였다고 합니다. 어느 정도 였길래 1등을 먹었을까요?

(출처: 동아일보, https://www.donga.com/news/article/all/20220905/115301579/1)

확실히 이 정도면 그림을 잘 모르는 제가 봐도 "와 쩐다" 싶은 느낌이 들긴합니다. 그리고 이런 논란이 있기 한참 전 부터 각종 커뮤니티에서는 키워드만 입력해주면 일러스트나 캐릭터를 그려주는 사이트에 대한 이야기가 많이 올라오곤 했습니다. 생각난 김에 저도 [DALL·E2](https://labs.openai.com/) 로 그림을 하나 그려보기로 했습니다.

korean programmer 라고 치자 제법 그럴듯한 이미지들이 몇 초만에 생성됩니다. 세세하게 살펴보면 얼굴의 눈가 쪽과 손가락이 엉성한 느낌이 들긴 하지만, 만약 제가 그림을 그리는 입장이라면 좀 민감하게 받아들일 것 같습니다.🥺

이럴 수가... AI 네 이놈...

그런데 말입니다….

과연 개발자들은 안전한 걸까요? 아래 영상을 보면 그런 생각이 들기도 합니다…

코딩접어야겠습니다 만원짜리 AI가 더 코딩 잘함

그래서 직접 테스트를 해봤습니다

남이 만들어 놓은 영상만 보고 판단하는 건 현명하지 못한 생각이겠죠? 그래서 직접 테스트를 해보기로 하고 copilot을 신청하고 환경을 세팅했습니다.

아주 간단한 것 부터 테스트를 시작했습니다.🧐

함수의 이름을 보고 합계를 구하는 그럴듯한 코드를 제시해줍니다.

const caculateSum = (a, b) => a + b;

조금 더 복잡한 코드를 요구해볼까요?

문자열을 뒤집는 함수도 잘 짜줍니다.

const reverseString = (str) => {
 return str.split("").reverse().join("");
};

호오... 그럴싸 한데??

좀 더 복잡한 코드를 테스트 해보죠!

주석으로 큐를 구현해달라고 요청하면, 큐를 구현하는 코드와 함께 테스트 할 수 있는 코드까지도 제안해줍니다!

/**
 * implement queue using two stacks
 */
class Queue {
 constructor() {
 this.stack1 = [];
 this.stack2 = [];
 }

 enqueue(item) {
 this.stack1.push(item);
 }

 dequeue() {
 if (this.stack2.length === 0) {
 while (this.stack1.length > 0) {
 this.stack2.push(this.stack1.pop());
 }
 }
 return this.stack2.pop();
 }
}

const queue = new Queue();
queue.enqueue(1);
queue.enqueue(2);
queue.enqueue(3);
console.log(queue.dequeue());
console.log(queue.dequeue());
console.log(queue.dequeue());

내가 원하는 코드가 나오지 않을 때는 Alt + “[” or “]” 맥에서는 option + “[” or “]” 를 통해서 제안되는 코드를 변경할 수 있습니다. 그리고 제안을 받고 싶을 때는 Alt + “\” 를 누릅니다.

확실히 기대했던 것 보다는 훨씬 똑똑합니다.

조아.. 아주 조아!!!

와… 이거 쩌는데? 하는 생각과 함께 계속 테스트를 이어나갔습니다. 이번에는 사용자에게 숫자를 입력받아서 소수인지 출력하는 코드를 요청해보기로 했습니다.

/**
 * 숫자를 입력받아서
 * 숫자가 소수인지 출력하기
 */
function isPrime(num) {
 if (num < 2) {
 return false;
 }
 for (let i = 2; i < num; i++) {
 if (num % i === 0) {
 return false;
 }
 }
 return true;
}

console.log(isPrime(2)); // true
console.log(isPrime(3)); // true
console.log(isPrime(4)); // false
console.log(isPrime(5)); // true

이거 아닌데...

코드를 추천해주기는 하지만 제가 원하는 코드는 아닙니다. 사용자가 숫자를 입력할 수 있는 부분이 없거든요. 다시!

/**
 * 사용자에게 "숫자를 입력하세요: " 라는 메시지를 출력하고
 * 숫자를 입력받아서
 * 숫자가 소수인지 아닌지 출력하기
 */
var num = prompt("숫자를 입력하세요: ");

// 소수인지 아닌지 판별하기
var isPrime = true;
for (var i = 2; i < num; i++) {
 if (num % i == 0) {
 isPrime = false;
 break;
 }
}

// 소수인지 아닌지 출력하기
if (isPrime) {
 console.log(num + "은 소수입니다.");
}

좀 더 구체적으로 입력하자 좀 더 적합한 코드를 주기 시작합니다. 하지만 이건 node.js가 아닌 브라우저에서 동작하는 코드죠. 물론 prompt 함수를 추가해서 동작하게 만들 수도 있겠지만요. 다시!

/**
 * node.js
 * "숫자를 입력하세요:" 숫자 입력받아서 소수 판별
 */
var readline = require("readline");

var rl = readline.createInterface({
 input: process.stdin,
 output: process.stdout,
});

rl.question("숫자를 입력하세요: ", function (answer) {
 var num = parseInt(answer);
 var result = true;
 for (var i = 2; i < num; i++) {
 if (num % i == 0) {
 result = false;
 break;
 }
 }
 if (result) {
 console.log("소수입니다.");
 } else {
 console.log("소수가 아닙니다.");
 }
 rl.close();
});

node.js 키워드를 추가하자 이제 node.js 에서 실행할 수 있는 코드를 제시해줍니다. 오오오… 근데 계속 탭키 누르면서 다음줄로 가는 것도 좀 귀찮긴 하죠. 그래서 이번엔 제가 어떤 코드를 원하는지 살짝 힌트를 주기로 했습니다.

/**
 * node.js
 * "숫자를 입력하세요:" 숫자 입력받아서 소수 판별
 */
const main = () => {
 const readline = require("readline");
 const rl = readline.createInterface({
 input: process.stdin,
 output: process.stdout,
 });
 rl.question("숫자를 입력하세요: ", (answer) => {
 console.log(isPrime(answer));
 rl.close();
 });
};

const isPrime = (num) => {
 if (num < 2) return false;
 for (let i = 2; i < num; i++) {
 if (num % i === 0) return false;
 }
 return true;
};

main();

제가 코드를 쭉 늘어놓지 말고 함수로 제안해달라고 힌트를 주자 거기에 맞춰서 코드를 제안해줍니다. 오호…😆

아 이제 대충 사용법은 마스터 한듯 ㅋ

이제는 실전이다. React로 일주일 써본 후기

Github Copliot의 첫 인상은 똑똑하긴 한데, 알아듣게 설명을 해줘야만 일을 잘하는 친구였습니다. 그래서 일단 React 작업을 하면서 능력을 확인해보기로 했죠.

첫 번째 케이스 : Good!

다음 영상은 Redux 스토어의 reducer에 코드를 작성하는 장면입니다.

상단에 Todo 타입이 명시되어 있고, 상태 값인 todos는 Todo[] 타입입니다. 그래서 todos에 새 항목을 추가하는 코드를 작성하자 copilot이 눈치를 까고 타입에 맞는 적절한 값을 추천해줍니다.

두 번째 케이스 : Good!

다음은 할 일 목록을 표시하고 그 아래에 새 할일 입력 칸을 추가하는 장면입니다.

역시 copliot이 눈치까고 useState로 선언된 todo 값을 이용해서 새 할 일 제목을 입력받을 수 있는 input 태크를 완성해줍니다.

세 번째 케이스 : Excellent!

마지막 장면은 커스텀 hook을 만들고 사용하는 상황입니다.

우선 훅을 작성하고 마지막에 리턴 타입을 추가하는데요, 100% 정확하지는 않지만 리턴하는 항목의 타입을 유추해서 hook의 리턴 타입을 추천해줍니다.

그리고 이 훅을 사용하는 장면입니다.

아무런 힌트를 주지 않았지만 당연히 hook을 사용하겠지? 하면서 아까 만든 hook을 사용하는 코드를 추천해줍니다.

오 이건 기대 이상인 듯

네 번째 케이스 : What the…?

뭘 하려고 하는 건지 나도 모르고 AI도 모를 땐 아무말 대잔치가 벌어집니다.

이럴 땐 copilot 에게 물어보기 전에 어떤 작업을 할지 생각을 먼저 해야 겠죠…

코딩하기 전에 생각했나요?

결론 : 아는 만큼 쓸 수 있다.

아주 짧은 시간 copilot을 써보고 든 생각은 아는 만큼 쓸 수 있다는 거였습니다. 그 이유는 다음과 같습니다.

1. AI도 우문현답은 못한다.

| 우문현답(愚問賢答): 어리석은 질문에 현명한 대답

이건 AI가 아닌 사람을 놓고 생각해도 마찬가지인데요, 내가 뭘 모르는지 정확하게 알아야 정확한 답변을 얻을 수 있습니다.

사람은 ‘아 이 사람이 이걸 물어보는 건가?‘하고 예측을 할 수 도 있고, 질문과 답변을 이어가면서 좀 더 정확하게 알려줄 수도 있죠.(물론 아 말해줘도 못 알아먹겠구나 싶은 느낌도 받을 수 있습니다.) 근데 AI라고 별 수 있을까요? 내가 뭘 짜려고 하는지 최소한의 구조를 알고 있고 어떻게 진행되어야 하는 흐름을 알아야 적합한 코드를 제안받을 수 있습니다.

생각해보면 이런 경우가 아닐까요?

잘 기억은 안 나는데 그거 어떻게 하더라?(ex: node.js에서 readline)
새로운 SDK나 API 사용법에 대해서 힌트를 얻고 싶을 때(ex: dynamodb 쿼리 어떻게 날렸더라?)
알고리즘 구현 방법을 알고 싶을 때(ex: 소수 어떻게 구하더라?)

사실 서두에 소개해드렸던 코딩접어야겠습니다 만원짜리 AI가 더 코딩 잘함 영상을 한 번 더 자세히 보시면, 이건 AI 도움 없이도 만들 줄 아는 사람이 이런 저런 테스트를 거쳐서 copilot에게 일을 잘 시키는 방법을 찾아낸 겁니다. 유투브니까 제목이 자극적인건 이해 해야겠죠. 🤔

2. 제안 받은 코드가 맞는 코드인지 확인할 수 있어야 한다.

역시 AI를 빼놓고 생각해도 당연한 이야기 입니다. Stackoverflow에서 검색할 때도 결국은 이게 무슨 코드인지 이해할 수 있어야 제대로 활용할 수 있습니다. Stackoverflow는 다른 사용자들이 답변에 대해서 검증도 해주고 다양한 의견을 남겨주기 때문에 답변에 대한 크로스 체크가 들어가는 경우가 많지만, copliot은 여러분이 직접 체크해야만 합니다. github 역시 공식 문서에서 이 점을 분명하게 해두고 있습니다.

3. 아예 제안할 방법이 없는 경우도 있다.

공개된 코드를 기반으로 학습하고 코드를 제안하기 때문에, 아직 공개되지 않은 코드나 공개된지 얼마 되지 않은 코드는 copliot이 제안할 방법이 없습니다. 막 SDK 새 버전이 나와서 적용해야 할 때, 아마도 copliot은 계속 옛날 버전의 코드를 제안할 겁니다. 자기도 본 적이 없으니까요 😱

그리고 이 외에도 여러가지 문제점이 있긴 합니다. 관심이 있는 분들은 이 글 Is GitHub Copilot a blessing, or a curse? 을 참고하세요.

마치며 : 1 개발자 1 AI 시대의 예감

아직은 장점도 단점도 분명합니다. 개발자의 직업을 위협할 정도가 되려면 한참 멀었습니다. 그리고 자동완성에 너무 의존하게 되면, 개발자 스스로 생각하는 능력이 떨어지지 않을까 하는 걱정이 들기도 했습니다.

하지만 이제 사람들은 AI와 공존하며 살아가야 하는 방법을 찾아야 하는 시대가 된 것 같습니다. 아마도 곧 AI의 도움을 받아 코딩하는 게 일상적인 일이 되겠죠. 그렇다면 AI에게 허드렛일을 맡겨 빨리 처리하고 개발자는 좀 더 고차원적인 고민을 하는 연습을 해야 할 것 같습니다.

copilot도 계속 발전하고 다른 AI 기술도 등장해서 경쟁도 이루어지겠죠? 그에 맞춰 개발자의 역할도 계속 변화에 적응해야 한다고 생각합니다. 더 발전할 copilot을 기대하며 이만 마치겠습니다.