Stella https://velog.io/ 공부 기록 Sat, 11 Apr 2026 14:12:24 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed Stella https://velog.velcdn.com/images/seonguul_2/profile/5a9bb513-6214-4a19-b9c9-ef43a11881cf/image.jpg https://velog.io/ Copyright (C) 2019. Stella. All rights reserved. <![CDATA[HTTP Section9 - HTTP 헤더2 캐시와 조건부 요청]]> https://velog.io/@seonguul_2/HTTP-%ED%97%A4%EB%8D%942-%EC%BA%90%EC%8B%9C%EC%99%80-%EC%A1%B0%EA%B1%B4%EB%B6%80-%EC%9A%94%EC%B2%AD https://velog.io/@seonguul_2/HTTP-%ED%97%A4%EB%8D%942-%EC%BA%90%EC%8B%9C%EC%99%80-%EC%A1%B0%EA%B1%B4%EB%B6%80-%EC%9A%94%EC%B2%AD Sat, 11 Apr 2026 14:12:24 GMT 캐시가 없을 때

첫 번째 요청 GET /star.jpg 요청 1.1M 전송 : HTTP 헤더 : 0.1M, HTTP 바디 : 1.0M

데이터가 변경되지 않아도 계속 네트워크를 통해서 데이터를 다운로드 받아야 한다. 인터넷 네트워크는 매우 느리고 비싸다. 브라우저 로딩 속도가 느리다. 느린 사용자 경험

cache-control : max-age=60초 동안 유효하다. 응답 결과를 캐시에 저장한다. (60초 유효)

캐시 적용

캐시 덕분에 캐시 가능 시간동안 네트워크를 사용하지 않아도 된다. 비싼 네트워크 사용량을 줄일 수 있다. 브라우저 로딩 속도가 매우 빠르다. 빠른 사용자 경험

캐시 시간 초과될 때

다시 요청을 해야한다. 응답 결과를 다시 캐시에 저장 = 60초 유효 캐시 유효 시간이 초과하면, 서버를 통해 데이터를 다시 조회하고, 캐시를 갱신한다. 이때 다시 네트워크 다운로드가 발생한다.

- 두 가지 상황이 나타난다.

1) 서버에서 기존 데이터를 변경함 2) 서버에서 기존 데이터를 변경하지 않음

1) 검증 헤더와 조건부 요청 (검증 헤더 추가)

캐시 만료후에도 서버에서 데이터를 변경하지 않음 저장해 두었던 캐시를 재사용 할 수 있다. 단 클라이언트의 데이터와 서버의 데이터가 같다는 사실을 확인할 수 있는 방법이 필요하다.

Last-Modified: 2020년 11월 10일 10:00:00 데이터가 마지막에 수정된 시간 응답 결과를 캐시에 저장한다. 60초 초과

if-modified-since: 2020년 11월 10일 10:00:00이 코드로 검증을 요청한다. 응답 : HTTP/1.1 304 Not Modified (HTTP Body가 없다), Last-Modified와 같이 (헤더 메타 정보만 응답한다. HTTP Body 전송X) 브라우저 캐시 : 응답 결과를 재사용, 헤더 데이터 갱신한다. -> 캐시에서 조회한다.

= 네트워크 다운로드가 발생하지만 용량이 적은 헤더 정보만 다운로드 한다. (매우 실용적인 해결책)

2) 검증 헤더와 조건부 요청

  • 검증 헤더 캐시 데이터와 서버 데이터가 같은지 검증하는 데이터 Last-Modified, ETag

  • 조건부 요청 헤더 검증 헤더로 조건에 따른 분기 If-Modified-Since : Last-Modified 사용 If-None-Match : ETag 사용 조건이 만족하면 200 OK 조건이 만족하지 않으면 304 Not Modified

캐시와 조건부 요청 헤더

If-Modified-Since : 이후에 데이터가 수정되었으면?

  • 데이터 미변경 예시 캐시 : 2020년 11월 10일 10:00:00 vs 서버 : 2020년 11월 10일 10:00:00 304 Not Modified, 헤더 데이터만 전송(BODY 미포함) 전송 용량 0.1M (헤더 0.1M, 바디 1.0M)

  • 데이터 변경 예시 캐시 : 2020년 11월 10일 10:00:00 vs 서버 : 2020년 11월 10일 11:00:00 200 OK, 모든 데이터 전송(BODY 미포함) 전송 용량 1.1M (헤더 0.1M, 바디 1.0M)

단점 : 1초 미만(0.x초) 단위로 캐시 조정이 불가능하다. (그럴 일이 별로 없음) 날짜 기반의 로직 사용 만약 데이터를 수정해서 날짜가 다르지만, 같은 데이터를 수정해서 데이터 결과가 똑같은 경우 서버에서 별도의 캐시 로직을 관리하고 싶은 경우 = ETag ex. 스페이스나 주석처럼 크게 영향이 없는 변경에서 캐시를 유지하고 싶은 경우

검증 헤더 ETag (서버에서 관리)

1) ETag(Entity Tag) : 캐시용 데이터에 임의의 고유한 버전 이름을 달아둔다. ex. ETag: "v1.0", ETag: "a2xddwsdf3" 2) 데이터가 변경되면 이 이름을 바꾸어서 변경한다. (Hash를 다시 생성) ex. ETag: "aaaaa" -> ETag: "bbbbb" = ETag만 보내서 같으면 유지, 다르면 다시 받기

서버에서 내려줌 -> 응답 결과를 캐시에 저장 미변경시 = 304 Not Modified 응답 결과를 재사용, 변경시 = 헤더 데이터 갱신 헤더 데이터 갱신한다.

ex. 베타 기간 파일이 변경되어도 ETag 동일하게 유지, 배포 주기에 맞추어 ETag 모두 갱신한다.

]]> <![CDATA[HTTP Section 8. HTTP 헤더 ]]> https://velog.io/@seonguul_2/HTTP-Section-8.-HTTP-%ED%97%A4%EB%8D%94 https://velog.io/@seonguul_2/HTTP-Section-8.-HTTP-%ED%97%A4%EB%8D%94 Thu, 09 Apr 2026 23:44:12 GMT HTTP 헤더 개요
  • header-field field-name":" OWS field-value OWS 대소문자 구분이 없다. HTTP 전송에 필요한 모든 부가 정보이다. 표준 헤더가 너무 많다.

General 헤더 : 메시지 전체에 적용되는 정보 ex. connection: close Request 헤더 : 요청 정보, ex. User-Agent: Mozilla/5.0 Response 헤더 : 응답 정보 ex. Server: Apache Entity 헤더 : 엔티티 바디 정보 ex. Content-Type: text/html, Content-Length: 3423

HTTP BODY

  • message body 메시지 본문은 엔티티 본문을 전다하는데 사용한다. 엔티티 본문은 요청이나 응답에서 전달할 실제 데이터이다. 엔티티 헤더는 엔티티 본문의 데이터를 해석할 수 있는 정보를 제공한다. 데이터 유형(html, json), 데이터 길이, 압축 정보 등
// 표현 데이터
<html>
    <body>...</body>
</html>

표현은 요청이나 응답에서 전달할 실제 데이터, 표현 헤더는 표현 데이터를 해석할 수 있는 정보를 제공한다. 데이터 유형(html, json), 데이터 길이, 압축 정보 등

표현 (리소스)

Content-Type : 표현 데이터의 형식 미디어 타입, 문자 인코딩 ex. text/html; charset=utf-8, application/json, image/png

Content-Encoding : 표현 데이터의 압축 방식 데이터를 전달하는 곳에서 압축 후 인코딩 헤더 추가 데이터를 읽는 쪽에서 인코딩 헤더의 정보로 압축 해제 ex. gzip, deflate, identity

Content-Language : 표현 데이터의 자연 언어 ex. ko, en, en-US

Content-Length : 표현 데이터의 길이 바이트 단위, Transfer-Encoding(전송 코딩)을 사용하면 Content-Length를 사용하면 안된다.(청크 전송) = 표현 헤더는 전송, 응답 둘 다 사용한다.

협상(콘텐츠 네고시에이션) = 요청

클라이언트가 선호하는 표현 요청 (헤더로 처리한다)

Accept : 클라이언트가 선호하는 미디어 타입 전달 Accept-Charset : 클라이언트가 선호하는 문자 인코딩 Accept-Encoding : 클라이언트가 선호하는 압축 인코딩 Accept-Language : 클라이언트가 선호하는 자연 언어 = 협상 헤더는 요청시에만 사용

협상과 우선순위 Quality Values(q)

Quality Values(q) 값 사용 0~1, 클수록 높은 우선순위 생략하면 1

Accept-Language: ko-KR, ko;q=0.9, en-US; q=0.8, en; q=0.7

1) ko-KR; q=1(q생략) 2) ko;q=0.9 3) en-US;q=0.8 4) en:q=0.7

  • 구체적인 것이 우선한다. Accept: text/, text/plain, text/plain;format=flowed, */ 1) text/plain;format=flowed 2) text/plain 3) text/* 4) /

  • 구체적인 것을 기준으로 미디어 타입을 맞춘다. Accept: text/;q=0.3, text/html;q=0.7, text/html;level=1, text/html;level=2;q=0.4, */;q=0.5

text/html;level=1 quality=1 text/html quality=0.7 text/plain quality=0.3 image/jpeg quality=0.5 text/html;level=2 quality=0.4 text/html;level=3 quality=0.7

전송 방식

  • 단순 전송 HTTP/1.1 200 OK Context-Type: text/html;charset=UTF-8 Content-Length: 3423

    ...

  • 압축 전송 : 압축해서 전송한다. Content-Encoding: gzip Content-Length: 521

  • 분할 전송 : 오면 바로바로 표시가 가능 HTTP/1.1 200 OK Content-Type: text/plain Transfer-Encoding: chunked (덩어리로 쪼개서 보낸다) 5 Hello 5 World 0 \r\n

  • 범위 전송 : 범위를 지정해서 요청한다. Content-Range: bytes 1001-2000 / 2000

From : 유저 에이전트의 이메일 정보

일반적으로 잘 사용되지 않는다. 검색 엔진 같은 곳에서, 주로 사용 요청에서 사용된다.

Referer = 이전 웹 페이지 주소

현재 요청된 페이지의 이전 웹 페이지 주소 A->B로 이동하는 경우 B를 요청할 때 Referer: A를 포함해서 요청 Referer를 사용해서 유입 경로 분석 가능 요청에서 사용

User-Agent : 유저 에이전트 애플리케이션 정보

네트워크 탭에 눌러보면 확인 가능! user-agent: Mozilla/5.0

클라이언트의 애플리케이션 정보(웹 브라우저 정보, 등) 통계 정보 어떤 종류의 브라우저에서 장애가 발생하는지 파악 가능 요청에서 사용한다.

Server : 요청을 처리하는 ORIGIN 서버의 소프트웨어 정보

Server: Apache/2.2.22(Debian) server: nginx 응답에서 사용한다.

Date : 메시지가 발생한 날짜와 시간 (응답에서 사용)

Host : 요청한 호스트 정보(도메인)

요청에서 사용하는 필수값이다. 하나의 서버가 여러 도메인을 처리해야 할 때

GET /search?q=hello&hl=ko HTTP/1.1 Host: www.google.com

Location : 페이지 리다이렉션

웹 브라우저는 3xx 응답의 결과에 Location 헤더가 있으면, Location 위치로 자동 이동(리다이렉트) 응답코드 3xx에서 설명 201(Created) : Location 값은 요청에 의해 생성된 리소스 URI이다. 3xx(Redirection) : Location 값은 요청을 자동으로 리디렉션하기 위한 대상 리소스를 가리킨다.

Allow : 허용 가능한 HTTP 메서드

405 (Method Not Allowed)에서 응답에 포함해야 한다. Allow : GET, HEAD, PUT

Retry-After

유저 에이전트가 다음 요청을 하기까지 기다려야 하는 시간 503(Service Unavailable) : 서비스가 언제까지 불능인지 알려줄 수 있음 Retry-After : Fri, 31 Dec 1999 23:59:59 GMT(날짜 표기) Retry-After : 120 (초단위 표기)

인증

Authorization : 클라이언트 인증 정보를 서버에 전달한다. Authorization: Basic xxxxxxxxxxxx

WWW-Authenticate : 리소스 접근시 필요한 인증 방법 정의 ex. 401 Unauthorized 응답과 함께 사용한다. Newauth realm="apps", type=1, title="Login to"apps"", Basic realm="simple"

쿠키 (사용자를 구분하기 위해) : 모든 요청에 쿠키 정보 자동 포함

HTTP는 무상태 프로토콜이기 때문에, 이전 요청을 기억하지 못한다. GET /welcome?user=홍길동 HTTP/1.1 모든 요청에 사용자 정보를 포함하지 못함 이 문제들을 해결하기 위해 쿠키가 생겼다.

Set-Cookie : 서버에서 클라이언트로 쿠키 전달(응답) HTTP/1.1 200 OK Set-Cookie: user=홍길동 서버는 쿠키 저장소에 저장 -> 클라이언트는 쿠키 저장소에서 조회하고 서버에 보낸다. Cookie : 클라이언트가 서버에서 받은 쿠키를 저장하고, HTTP 요청시 서버로 전달한다.

ex. set-cookie: sessionId=abcde1234; expires=Sat, 26-Dec-2020 00:00:00 GMT; path=/; domain=.google.com; Secure

  • 사용처 : 사용자 로그인 세션 관리, 광고 정보 트래킹

  • 쿠키 정보는 항상 서버에 전송된다. 네트워크 트래픽 추가 유발

  • 최소한의 정보만 사용(세션 id, 인증 토큰)해야 한다.* 서버에 전송하지 않고, 웹 브라우저 내부에 데이터를 저장하고 싶으면 웹 스토리지 참고

  • 주의 보안에 민감한 데이터는 저장하면 안된다(주민번호, 신용카드 번호 등)

쿠키 - 생명주기

Set-Cookie: expires=Sat, 26-Dec-2020 04:39:21 GMT 만료일이 되면 쿠키를 삭제한다.

Set-Cookie: max-age=3600 (3600초) 0이나 음수를 지정하면 쿠키를 삭제한다.

세션 쿠키 : 만료 날짜를 생략하면 브라우저 종료시 까지만 유지한다. 영속 쿠키 : 만료 날짜를 입력하면 해당 날짜까지 유지한다.

쿠키 - 도메인

domain=example.org 도메인을 지정하여 생성

  • 명시 : 명시한 문서 기준 도메인 + 서브 도메인 포함 domain=example.org를 지정해서 쿠키 생성 example.org는 물론이고 dev.example.org도 쿠키 접근

  • 생략 : 현재 문서 기준 도메인만 적용 example.org에서 쿠키를 생성하고 domain지정을 생략 example.org 에서만 쿠키 접근 dev.example.org는 쿠키 미접근

쿠키 - 경로

ex. path=/home 이 경로를 포함한 하위 경로 페이지만 쿠키 접근 일반적으로 path=/ 루트로 지정

ex. path=/home 지정 /home -> 가능 /home/level1 -> 가능 /home/level1/level2 -> 가능 /hello -> 불가능

쿠키 - 보안

  • Secure 쿠키는 http, https를 구분하지 않고 전송 Secure을 적용하면 https인 경우에만 전송

  • HttpOnly XSS 공격 방지 자바스크립트에서 접근 불가(document.cookie) HTTP 전송에만 사용

  • SameSite (브라우저에서 확인하고 사용할 것) XSRF 공격 방지 요청 도메인과 쿠키에 설정된 도메인이 같은 경우만 쿠키 전송

]]> <![CDATA[리액트 고급 - Portal, Profiler API 성능 측정, 엄격모드, AbortController]]> https://velog.io/@seonguul_2/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B3%A0%EA%B8%89-Portal-Profiler-API-%EC%84%B1%EB%8A%A5-%EC%B8%A1%EC%A0%95-%EC%97%84%EA%B2%A9%EB%AA%A8%EB%93%9C-AbortController https://velog.io/@seonguul_2/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EA%B3%A0%EA%B8%89-Portal-Profiler-API-%EC%84%B1%EB%8A%A5-%EC%B8%A1%EC%A0%95-%EC%97%84%EA%B2%A9%EB%AA%A8%EB%93%9C-AbortController Tue, 31 Mar 2026 05:32:25 GMT 리액트의 고급 개념

  • 포털 : 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 특정 DOM 노드에 자식 컴포넌트를 렌더링할 수 있게 해주는 기능입니다.

  • 포털을 사용하는 이유 : CSS 레이아웃 제약 해결, 시각적 계층 구조와 논리적 구조의 분리, 접근성 및 스크린 리더 최적화 (부모 크기에 상관없이 전체화면 활용 가능)

1) 모달 창, 다이얼로그 컴포넌트 2) 툴팁(말풍선), 로딩 창 3) 팝오버 : 사용자에게 빠르게 컨텍스트 빠르게 제공 4) 쿠키 얼럿 5) 드롭다운 메뉴 : 부모 컴포넌트 내부에 드롭다운 메뉴가 위치 -> overflow 스타일에 의해 보이지 않을 수도 있기 때문에 포털을 사용한다.

import { createPortal } from 'react-dom'

const ModalWindow = ({ description, isOpen, onClose }) => {
    if (!isOpen) return null
    return createPortal (
        <div className="modal">
            <span>{description}</span>
            <button onClick={onClose}>Close</button>
        </div>,
        document.body
    )
}

react-dom 패키지에서 불러온 createPortal을 호출해서 생성할 수 있다.

DOMNode : 포털 내용을 렌더링할 DOM노드 key : 컴포넌트 트리에서 포털을 구분할 수 있는 고유 식별자, 선택사항

HTML(DOM) 트리 : 브라우저가 보는 구조 portal을 쓰면 root를 벗어나 body바로 아래 붙는다. React 트리 : React가 관리하는 컴포넌트 계층이다. 부모 컴포넌트의 자식이다.

- 이벤트 버블링의 흐름

portal 내부 버튼 -> 브라우저 레벨 : html -> body 올라간다. (부모 컴포넌트x) React 레벨 : React가 이벤트를 가로채서 자신이 알고있는 컴포넌트 트리를 따라 이벤트 전파 -> Portal밖의 부모 컴포넌트에 설정된 핸들러 실행

- 포털에서 관리하는 접근성 주의사항?

다이얼로그나 모달이 열릴 때 포커스는 다이얼로그 내부의 요소로 이동,

- 에러 바운더리

1) try~catch문 2) 에러 바운더리 : 특정 작업 목록이 담긴 리액트 컴포넌트일 뿐이다. 자식 컴포넌트 트리에서 발생할 수 있는 자바스크립트 오류를 잡아내고, 특정 오류를 기록한 다음, 화면을 대체 UI로 리디렉션해서 오류 상태에서 복구하는 데 사용된다.

전체 컴포넌트 트리의 생성자에서 발생하는 오류를 잡아낸다. 에러 바운더리는 클래스 컴포넌트로 생명주기 메서드 중 하나 이상을 사용해서 생성될 수 있다.

static getDerivedStateFromError : 오류가 발생한 후 대체 UI를 렌더링 componentDidCatch : 오류 정보를 기록하는 데 사용한다.

class MyErrorBoundary extends Component {
    constructor(props) {
        super(props)
        this.state = { isErrorThron: false }
       }

    static getDerivedStateFromError(error) { // 오류가 발생한 대체 UI
        return { isErrorThrown: true }
    }

    componentDidCatch(error, errorInfo) {
        logErrorToReposrtingService(error, errorInfo)
    }

    render() {
        if (this.state.isErrorThrown) { 
            return <h1>Oops, the application is unavaialble.</h1>
        }
        return this.props.children
    }
}

에러 컴포넌트를 사용할 컴포넌트에 감싸면 된다.

  • suspense와 error boundary 사용 장점 1) 서비스 전체의 화이트 아웃 방지 : 에러가 난 부분만 격리 가능하다. (방화벽 역할)

2) 폭포수 현상 해결을 통한 성능 최적화 : 기존 방식 useEffect는 부모 데이터 로딩이 끝나야 자식 데이터 로딩이 시작되는 폭포수 현상이 생기기 쉽다. Suspense를 사용하면 데이터 요청을 병렬로 처리할 수 있다. = 빠르고, 매끄러운 앱 구현 가능

3) 선언적 에러 복구 : 페이지 전체를 새로고침 하지 않아도, ui만 새로고침 하도록 만들 수 있다.

  • Jest같은 테스트 프레임워크로 단위 테스트 작성 가능하다.

  • 에러 바운더리를 함수 컴포넌트로 생성하는 것이 불가능하다. 클래스 컴포넌트를 사용해 에러 바운더리를 만들 수 있다.

  • 에러 바운더리를 사용하지 못하는 경우 이벤트 핸들러, 비동기 코드(지연로딩, requestAnimationFrame 등) 비동기 콜백 내부 에러, SSR, 에러 바운더리 내부에서 에러가 발생한 경우(에러 바운더리 자체에서 발생한 에러)

버튼 클릭 시 발생하는 API 에러 등은 try ~ catch로 잡아서 얼럿을 띄우는 게 맞습니다. 데이터를 렌더링하다가 예상치 못한 undefined 참조 등으로 화면이 깨지는 상황은 에러 바운더리가 방어해야 한다.

- Suspense API를 활용한 비동기 작업 관리

로딩 인디케이터 같은 대체 UI를 표시하는 데 사용된다.

  • 모든 데이터 불러오기에서 서스펜스 컴포넌트 사용 가능한가? lazy API사용한 지연로딩, 릴레이, Next.js, 리믹스, 하이드로겐 등의 서스펜스 기능을 지원하는 프레임워크를 활용한 데이터 불러오기

  • 업데이트 중 불필요한 폴백 방지 리액트의 Suspense는 하위 컴포넌트가 아직 준비되지 않았을 때(데이터 패칭 중 등) 가장 가까운 fallback UI를 보여줍니다. 문제는 이미 렌더링 된 상태에서 새로운 데이터를 가져올 때 발생합니다.

    function navigate(url) {
  startTransition(() => {
      setPage(url) 
  })
}

    페이지를 탐색하고 페이지 업데이트에 전환을 적용해 불필요한 폴백 방지

- 동시성 렌더링을 활용한 렌더링 성능 최적화

비동기적으로 렌더링 하도록 보장하는 동시성 렌더링 도입했다.

  • 동시성 렌더링 가능하게 하는 방법? react 및 react-dom 패키지를 18버전으로 업데이트해야 한다. ReactDOM.render 메서드를 ReactDOM.createRoot 메서드로 교체해야 한다.

애플리케이션이 복잡해지면 성능을 분석하는 데 상당한 시간을 투자해야 한다.

- Profiler API를 활용한 리액트 애플리케이션 디버깅

컴포넌트가 얼마나 자주 리렌더링되는지 각각의 리렌더링 비용을 추적하는 것이 애플리케이션 내의 문제 영역이나, 부분을 파악하는 데 도움이 된다. (컴포넌트의 병목을 수치로 확인하여 최적화의 근거를 찾는 과정)

1) React Profiler API

  • 렌더링 성능을 측정하는 방법 Profiler API를 제공한다. UI 일부를 식별하는 데 사용되는 id prop, 트리 업데이트 시 호출되는 onRender 콜백 두가지 
// id, phase, actualDuration, baseDuration, startTime, commitTime 인수를 받아 렌더링 시간 기록
<App>
    <Profiler id="bio" onRender={onRender}> // 렌더링 성능을 보고 싶다면 전체를 감싼다.
        <AuthorBio />
    </Profiler>
    <Posts />
</App>

2) 리액트 개발자 도구

- 엄격 모드

잠재적인 버그와 이슈를 식별하기 위한 디버깅 도구 = strict mode 리액트 API의 StrictMode 컴포넌트로 사용한다.

컴포넌트 mount -> unmount -> mount 되기 때문에 fetch가 2번 호출된다.

cleanup없이 2번 호출되면 메모리 누수 or 중복요청 존재

- AbortController를 사용하기 (CSR)에서만 작동

useEffect의 cleanup함수와 짝을 이뤄서, 진행 중인 요청을 자동으로 취소하는 패턴이다. 메모리 누수를 방지한다. = 최신 요청만 유효, 1번만 출력한다. fetch, axios 등 비동기 네트워크 요청일 경우에만

const controller = new AbortController()

controller.signal  // ← fetch에 연결하는 신호선
controller.abort() // ← 취소 명령

- 동작 방식
mount → unmount → mount  (Strict Mode가 의도적으로 실행)
         ↑
     abort() 호출 → 첫번째 요청 취소 → 두번째 요청만 유효

const root = createRoot(document.getElementById('root'))
root.render(
    <StrictMode>
        <App/>
    </StrictMode>,
)

렌더링 영역에서 부적절한 로직, 정리 코드 부재 문제를 엄격 모드를 통해 파악한다. 자주 발생하는 버그를 찾기 위한 개발 전용 점검 항목을 활성화한다.

1) 순수하지 않은 렌더링으로 인한 버그를 찾기 위해 컴포넌트를 한 번 더 리렌더링 2) 이펙트에 대한 cleanup 함수 누락에 의한 버그를 찾기 위해 컴포넌트가 한 번 더 effect실행 3) 사용되는 API 중 더 이상사용되지 않는 API를 확인하고 경고

  • 두 번 호출되는 함수는? 1) 함수 컴포넌트의 내부 2) 훅에 전달된 함수 useState, useReducer, useMemo 3) state updater 함수 4) constructor, render 등 클래스 컴포넌트 메서드

- 정적 타입 체크

라이브러리 prop-types 타입스크립트, Flow로 두 가지 방법으로 정적 타입 검사를 구현한다.

1) 런타임 이전에 타입 오류를 식별 2) 초기 단계에서 버그와 오류를 감지 3) 최적화와 코드 가독성 향상 3) IDE 지원 향상 4) 문서 생성

]]> <![CDATA[React Native - 4장 스타일링 ]]> https://velog.io/@seonguul_2/React-Native-4%EC%9E%A5-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81 https://velog.io/@seonguul_2/React-Native-4%EC%9E%A5-%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81 Tue, 10 Mar 2026 03:58:44 GMT 4장. 스타일링

1) 인라인 스타일링

<View style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center' }}>
<Text style={{ padding: 10, fontSize: 26, fontWeight: '400', color: 'red' }}>

2) 클래스 스타일링

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        padding: 10,
        fontSize: 26,
        fontWeight: '600',
        color: 'black',
       },
    error: {
        padding: 10,
        fontSize: 26,
        fontWeight: '400',
        color: 'red',
    }
});

3) 여러 개 스타일 적용

- 여러 개 스타일

<Text style={[styles.text, styles.error]}>Inline Styling - Error</Text>

- 인라인 스타일과 혼용

<Text style={[styles.text, { color: 'green' }]}>

4) 외부 스타일 이용하기

src/styles.js
import { StyleSheet } from 'react-native';

export const viewStyles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
     },
});

export const textStyles = StyleSheet.create({
    text: {
        padding: 10,
        fontSize: 26,
        fontWeight: '600',
        color: 'black',
    },
    error: }
        fontWeight: '400',
        color: 'red',
   },
});

App.js에서 import { viewStyles, textStyles } from './styles';로 불러오면 된다.

<View style={viewStyles.container}>
    <Text style={[textStyles.text, { color: 'green' }]}> 이런식으로 사용 가능

5) flex와 범위

Header와 Contents, Footer로 나뉜다. flex로 비율을 지정해주면 모든 기종에서 비율이 일정하게 보인다.

const styles = StyleSheet.create({
    container: {
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
        height: 80,
    },
    header: {
        flex: 1,
        backgroundColor: '#f1c40f',
    },
    contents: {
        flex: 2,
        backgroundColor: '#1abc9c',
    },
    footer: {
        flex: 1,
        backgroundColor: '#3498db',
    },
    text: {
        fontSize: 26,
    }
});


App.js 에서
return (
    <View style={{ flex: 1 }}>
      <Header/>
      <Contents/>
      <Footer/>
    </View>
  );

6) flexDirection

  • column : 세로 방향으로 정렬(기본값)
  • column-reverse : 세로 방향 역순 정렬
  • row : 가로 방향으로 정렬
  • row-reverse : 가로 방향 역순 정렬

7) justifyContent

  • flex-start : 시작점에서부터 정렬(기본값)
  • flex-end : 끝에서부터 정렬
  • center : 중앙 정렬
  • space-between : 컴포넌트 사이의 공간을 동일하게 만들어서 정렬
  • space-around : 컴포넌트 각각의 주변 공간을 동일하게 만들어서 정렬
  • space-evenly : 컴포넌트 사이와 양 끝에 동일한 공간을 만들어서 정렬

8) alignItems

  • flex-start : 시작점에서부터 정렬(기본값)
  • flex-end : 끝에서부터 정렬
  • center : 중앙 정렬
  • stretch : alignItems의 방향으로 컴포넌트 확장
  • baseline : 컴포넌트 내부의 텍스트(text) 베이스라인(baseline)을 기준으로 정렬

9) 그림자

  • shadowColor : 그림자 색 설정
  • shadowOffset : width와 height값을 지정하여 그림자 거리 설정
  • shadowOpacity : 그림자 불투명도 설정
  • shadowRadius : 그림자의 흐림 반경 설정
import { View, StyleSheet } from 'react-native';
import ShadowBox from './src/components/ShadowBox';

export default function App() {
  return (
    <View style={styles.container}>
      <ShadowBox/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

10) 스타일드 컴포넌트

자바스크립트 파일 안에 스타일을 작성하는 라이브러리이다. npm install styled-components

import styled from 'styled-components/native';

const MyTextomponent = styled.Text`
    color: #fff;`;
const whiteText = css` color: #fff; font-size: 14px;`;
const MyBoldTextComponent = styled.Text`${whiteText} font-weight: 600;`;
const ErrorText = styled(StyledText)`font-weight: 600; color: red;`;

style.컴포넌트이름 백틱안에 스타일 지정한다.

11) 스타일시트 사용

- props사용하기

props로 값에 따라 다른 색이 지정되도록 수정할 수 있다.

const ButtonContainer = styled.TouchableOpacity`
    background-color: ${props => props.title === 'Hanbit' ? '#3498db' : '#9b59b6'};
    border-radius: 15px;
    padding: 15px 40px;
    margin: 10px 0px;
    justify-content: center;
`;

const Title = styled.Text`
    font-size: 20px;
    font-weight: 600;
    color: #fff;
`;

const Button = props => {
    return (
        <ButtonContainer title={props.title}>
            <Title>{props.title}</Title>
        </ButtonContainer>
    )
}
export default Button;

- attrs사용하기

스타일드 컴포넌트에서 속성을 설정할 때 사용하는 attrs의 사용법 고정된 Props나 "동적으로 변하는 스타일"을 HTML(또는 Native) 태그에 미리 붙여두는 도구이다.

스타일 정의 시점에 속성을 포함한다.

const StyledInput = styled.TextInput.attrs({
  placeholder: "Enter a text...", // 기본값 설정
  placeholderTextColor: "#3498db",
  keyboardType: "email-address", // 키보드 타입 고정
})`
  width: 200px;
  height: 60px;
  border: 2px solid #3498db;
`;

// 이제 호출할 때 아무것도 안 적어도 위 속성들이 적용됨!
<StyledInput />

전달한 값에 따라 수정되게 하기

const StyledInput = styled.TextInput.attrs(props => ({
    placeholder: 'Enter a text...',
    placeholderTextColor: props.borderColor,
}))
`
    width: 200px;
    height: 60px;
    margin: 5px;
    padding: 10px;
    border-radius: 10px;
    border: 2px;
    border-color: ${props => props.borderColor};
    font-size: 24px;
`;

const Input = props => {
    return <StyledInput borderColor={props.borderColor}/>
};

export default Input;

- ThemeProvider

theme.js에서 배경 색 지정

export const theme = {
    purple: '#9b59b6',
    blue: '#3498db',
}

모든 컴포넌트를 감싸는 최상위 컴포넌트로 ThemeProvider 컴포넌트를 사용하여 theme 속성에 설정한다.

const App = () => {
    return (
        <ThemeProvider theme={theme}>
            <Container>
            ...
            </Container>
        </ThemeProvider>
    )
}

- 화면 다크/라이트 모드

- theme.js 에서 정의
export const theme = {
    purple: '#9b59b6',
    blue: '#3498db',
}

export const lightTheme = {
    background: '#ffffff',
    text: '#ffffff',
    purple: '#9b59b6',
    blue: '#3498db',
};

export const darkTheme = {
    background: '#34495e',
    text: '#34495e',
    purple: '#9b59b6',
    blue: '#3498db',
}

- App.js 에서 호출하여 사용한다.
const Container = styled.View`
  flex: 1;
  background-color: #ffffff;
  align-items: center;
  justify-content: center;
  background-color: ${props => props.theme.background};
`;

const App = () => {
  const [isDark, setIsDark] = useState(false);
  const _toggleSwitch = () => setIsDark(!isDark);
  return (
    <ThemeProvider theme={isDark ? darkTheme : lightTheme}>
      <Container>
        <Switch value={isDark} onValueChange={_toggleSwitch}/>
        <Button title="Hanbit" />
        <Button title="React Native" />
        <Input borderColor="#3498db"/>
        <Input borderColor="#9b59b6"/>
      </Container>
    </ThemeProvider>
  );
};
]]> <![CDATA[Lighthouse 활용한 웹사이트 성능 측정]]> https://velog.io/@seonguul_2/Lighthouse-%ED%99%9C%EC%9A%A9%ED%95%9C-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%84%B1%EB%8A%A5-%EC%B8%A1%EC%A0%95 https://velog.io/@seonguul_2/Lighthouse-%ED%99%9C%EC%9A%A9%ED%95%9C-%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%84%B1%EB%8A%A5-%EC%B8%A1%EC%A0%95 Mon, 09 Mar 2026 04:37:53 GMT Lighthouse 4대 핵심 메뉴

1. Performance (성능)

핵심: "이 사이트가 얼마나 빠른가?"

설명: 앞서 설명한 FCP, LCP, TBT 등이 포함된 영역입니다. 브라우저가 콘텐츠를 얼마나 빨리 렌더링하고, 사용자의 입력에 얼마나 기민하게 반응하는지를 측정합니다.

개선 포인트: 이미지 압축, 코드 분할(Code Splitting), 캐싱(Blob 활용 등).

2. Accessibility (접근성)

핵심: "장애가 있거나 보조 공학 기기를 사용하는 사용자도 이용 가능한가?"

설명: 시각 장애인이 사용하는 스크린 리더가 내용을 잘 읽을 수 있는지, 키보드만으로 모든 메뉴를 조작할 수 있는지 등을 체크합니다.

개선 포인트: 버튼에 aria-label 넣기, 이미지에 alt 속성 쓰기, 적절한 색상 대비(Contrast) 유지하기.

3. Best Practices (권장사항)

핵심: "웹 표준과 보안 지침을 잘 따르고 있는가?"

설명: 최신 웹 기술(HTTPS, HTTP/2)을 사용하는지, 콘솔에 에러가 찍히지는 않는지, 보안에 취약한 라이브러리를 쓰지는 않는지 검사합니다.

개선 포인트: 보안 프로토콜 준수, 더 이상 사용되지 않는(Deprecated) API 제거.

4. SEO (검색엔진 최적화)

핵심: "구글이나 네이버 같은 검색엔진이 이 사이트를 잘 찾을 수 있는가?"

설명: 검색 로봇이 사이트의 주제를 파악하기 좋게 메타 태그가 잘 설정되어 있는지, 모바일에서 보기 편한지 등을 평가합니다.

개선 포인트: <title>, <meta description> 설정,  robots.txt 파일 확인.

🚀 Lighthouse 핵심 지표 5가지

1. FCP (First Contentful Paint)

의미: 사용자가 페이지에 접속했을 때 브라우저가 텍스트나 이미지 등 첫 번째 콘텐츠를 그리기 시작하는 시점입니다.

사용자 체감: "오, 웹사이트가 로딩을 시작했네?"

팁: 서버 응답 속도를 높이고 렌더링을 방해하는 자바스크립트를 최소화하면 빨라집니다.

2. LCP (Largest Contentful Paint)

의미: 페이지 내에서 가장 큰 이미지나 텍스트 블록이 화면에 완전히 나타나는 시점입니다.

사용자 체감: "이제 메인 화면이 다 떴구나!" (실질적인 로딩 완료 시점)

최적화: 가장 큰 배너 이미지의 용량을 줄이거나 우선순위를 높여야 합니다.

3. TBT (Total Blocking Time)

의미: 앞서 설명해 드린 것처럼, 메인 스레드가 50ms 이상 차단되어 사용자의 입력(클릭 등)에 반응하지 못하는 전체 시간입니다.

사용자 체감: "버튼을 눌렀는데 왜 반응이 없지? 렉 걸렸나?"

최적화: 무거운 자바스크립트 실행을 줄이는 것이 핵심입니다 (님께서 Blob 캐싱으로 해결하신 부분!).

4. Speed Index

의미: 페이지가 로드되는 동안 콘텐츠가 시각적으로 얼마나 빨리 채워지는지를 측정하는 종합 지수입니다.

사용자 체감: 화면이 단계별로 빈틈없이 채워지는 속도.

최적화: 전체적인 로딩 흐름이 매끄러워야 점수가 잘 나옵니다.

5. CLS (Cumulative Layout Shift)

의미: 로딩 과정에서 화면의 요소들이 갑자기 툭 튀어나오거나 위치가 바뀌는 현상을 수치화한 것입니다.

사용자 체감: "버튼 누르려는데 갑자기 광고가 떠서 엉뚱한 거 클릭했네!" (짜증 지수)

최적화: 이미지나 광고 영역에 미리 고정된 높이/너비를 설정해 주어야 합니다.

🔍 Lighthouse 진단 도구의 정체

1. Insights (인사이트 / Metrics)

의미: 현재 웹사이트의 상태 수치입니다.

내용: 앞서 우리가 공부한 FCP, LCP, TBT 같은 지표들이 여기에 표시됩니다. "지금 당신의 사이트는 첫 화면이 뜨는 데 0.8초가 걸립니다"와 같은 결과 값을 보여주는 영역입니다.

2. Diagnostics (진단)

의미: "왜 점수가 낮은가?"에 대한 구체적인 원인 분석입니다.

특징: 점수에는 직접적인 영향을 주지 않더라도, 페이지의 전반적인 건강 상태(성능, 보안 등)를 위해 해결해야 할 과제들을 나열합니다.

예시: * "이미지 크기가 너무 큽니다."

"사용하지 않는 자바스크립트가 너무 많습니다."

"캐시 정책이 효율적이지 않습니다."

3. Opportunities (기회 / 절약 가능 시간)

의미: "이것만 고치면 이만큼 빨라질 수 있다"라는 가이드라인입니다.

핵심: 가장 효율적으로 점수를 올릴 수 있는 '지름길'을 알려줍니다.

예시: "이미지 형식을 WebP로 바꾸면 로딩 속도를 1.2초 단축할 수 있습니다."

중점적으로 봐야 할 사항

LCP → 가장 큰 콘텐츠(이미지, 텍스트)가 화면에 그려지는 시간. 사용자가 "로딩됐다"고 느끼는 핵심 지표 TBT → 메인 스레드가 블로킹된 총 시간. JS 번들이 무거울수록 높아짐 CLS → 레이아웃이 갑자기 틀어지는 정도. 스켈레톤 UI로 바로잡기 FCP → 첫 번째 콘텐츠가 그려지는 시간

]]> <![CDATA[React Native - 2장 React Native, 3장 Component]]> https://velog.io/@seonguul_2/2%EC%9E%A5-React-Native-3%EC%9E%A5-Component https://velog.io/@seonguul_2/2%EC%9E%A5-React-Native-3%EC%9E%A5-Component Thu, 05 Mar 2026 08:15:40 GMT
  • 브릿지

    • main thread : UI담당 shadow thread : 레이아웃 계산 native module : 각 모듈에 자체 스레드가 있다. 안드로이드 = 스레드 폴을 공유

    • JSX xml과 매우 유사하다. UI작업을 할 때 가독성을 준다. 바벨을 사용하여 자바스크립트로 변환한다.

    2장 React Native

    맥, 윈도우, 리눅스 환경에서 개발 가능 맥 - ios, 안드로이드 개발 가능 윈도우, 리눅스 - 안드로이드 개발 가능

    Node.js, JDK, 안드로이드 스튜디오, 왓치맨, Xcode 추가 설치필요

    왓치맨 : 파일 시스템 변경 감지 도구

    iOS 시뮬레이터를 실행

    Xcode 메뉴의 Open Developer Tool 메뉴에서 Simulator를 실행하는 방법 맥의 Spotlight 검색 기능에서 Simulator.app

    File -> Open Device -> 기기 선택 가능하다.

    • project 설치 npx @react-native-community/cli init MyFirstApp(폴더명)

    • react native 프로젝트 생성하는 방법 1) Expo npx expo login 2) Expo 프로젝트 생성 expo init my-first-expo 항상 첫번째 blank 선택 3) cd my-first-expo npm start 4) app.json 에서 package 추가하기 "android": {

      "adaptiveIcon": {
  "backgroundColor": "#E6F4FE",
  "foregroundImage": "./assets/android-icon-foreground.png",
  "backgroundImage": "./assets/android-icon-background.png",
  "monochromeImage": "./assets/android-icon-monochrome.png"
}

      }, "package": "com.stella03.my-first-expo", "web": {

      "favicon": "./assets/favicon.png"

      } } } 5) terminal에서 a를 누르면 실행된다. cmd+control+z 와 cmd+m를 이용해서 메뉴를 열 수 있다.

    6) 로그 확인하기 vscode 에서 그냥 npx expo start 해서 a누르고, 로그 확인 가능

    • 리액트 네이티브 CLI expo의 단점을 극복한다. expo와 반대로 네이티브 CLI에서 필요한 기능이 있을 경우 모듈을 직접 만들어 사용할 수 있다. 배포가 불편하고, 어렵다.

    npx react-native init 폴더이름 npm run ios npm run android 실행할 수 있다. 명령 프롬프트 창 하나가 추가로 열리고 Metro가 실행되는 것을 볼 수 있다. 네이티브를 위한 자바스크립트 번들러이다. 실행될 때마다 단일 파일로 컴파일하는 역할을 한다.

    = 90% 이상이 expo를 이용하여 진행한다.

    3장 Component

    View : ui를 구성하는 가장 기본적인 요소, = div와 같은 역할이다. Fragment : 여러 개의 컴포넌트를 반환하고 싶은 경우 = <> 빈 태그로 사용해도 된다.

    jsx의 경우 Null은 가능하지만 undefined는 오류가 발생한다. {/* 주석 */}

    • 스타일링

      <View style={{ flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }}>
</View>

      카멜케이스로 작성해야한다.

    • 내장 컴포넌트 리액트 네이티브 컴포넌트 https://reactnative.dev/docs/components-and-apis

    커스텀 컴포넌트

    react와 동일하게 components/MyButton.js 생성한다. TouchableOpacity 컴포넌트 = 버튼 만들 때 사용한다.

    import { TouchableOpacity } from "react-native"


export default MyButton = () => {
    return (
        <TouchableOpacity>
            <Text style={{ fontSize: 24}}>My Button</Text>
        </TouchableOpacity>
    )
}

    props와 state

    1) props : 부모 컴포넌트로부터 전달된 속성값 혹은 상속받은 속성값을 말한다.

    <Button title="Button"/> 여기서 속성을 지정한다. 부모에서

    자식 컴포넌트인 MyButton.js에서

    const MyButton = props => {
    console.log(props);
    return (...);
}; 이렇게 사용 가능하다.

    3) propTypes OR TypeScript 사용한다. 잘못된 타입을 전달, 필수로 전달해야 하는 값을 전달하지 않아서 문제, 잘못된 props가 전달되었다는 것을 경고 메시지를 통해 알리는 방법

    npm install prop-types
설치 하고 

d@Dui-MacBookAir react-native-component % npx react-native start

⚠️ react-native depends on @react-native-community/cli for cli commands. To fix update your package.json to include:


  "devDependencies": {
    "@react-native-community/cli": "latest",
  }

    npx react-native start 하면 런타임 경고를 확인할 수 있다.

    PropTypes.string.isRequired, 필수 여부를 지정하는 방법이다.

    MyButton.propTypes = {
  title: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
};

MyButton.propTypes = {
  title: PropTypes.string.isRequired,
  onPress: PropTypes.func.isRequired,
};

    onPress가 필수로 설정되었기 때문에 MyButton 컴포넌트를 사용할 때 onPress를 전달하도록 수정

    4) press 이벤트 특정 DOM을 클릭했을 때 호출되는 onClick 이벤트

    onPressIn : 터치가 시작될 때 항상 호출 onPressOut : 터치가 해제될 때 onPress : 터치 해제될 때 onPressOut 이후 호출 onLongPress : 터치가 일정 시간 이상 지속되면 호출 delayLongPress=[3000] 호출되는 시간 조절 가능

    5) change 이벤트

    const EventInput = () => {
    const [text, setText] = useState('');
    const _onChange = event => setText(event.nativeEvent.text);

    return (
        <View>
            <Text style={{ margin: 10, fontSize:30 }}>text: {text}</Text>
            <TextInput
                style={{ borderWidth: 1, padding: 10, fontSize: 20 }}
                placeholder="Enter a text..."
                onChange={_onChange}
            />
        </View>
    )
}

    onChange를 통해 변화된 텍스트를 전달할 수 있다. onChangeText는 컴포넌트 텍스트가 변경되었을 때 변경된 텍스트만 인수로 전달하여 호출

    6) Pressable 컴포넌트 TouchableOpacity 컴포넌트를 대체한다. 기존보다 다양한 기능을 제공한다. HitRect, PressRect이다. (정확하게 클릭해야 하기 때문에)

    누른 상태에서 벗어나도록 pressRect을 조절한다.

    const Button = (props) => {
    return (
        <Pressable 
            pressRetnetionOffset={{ bottom: 50, left: 50, right: 50, top: 50}}
            hitSlop={50}
        </Pressable>
    )
};

    PressRect 범위는 HitRect의 범위끝에서 시작되기 때문에 hitSlop의 값에 따라 PressRect의 범위가 달라진다.

    ]]>         <![CDATA[Typescript - 클래스]]> https://velog.io/@seonguul_2/Typescript-%ED%81%B4%EB%9E%98%EC%8A%A4 https://velog.io/@seonguul_2/Typescript-%ED%81%B4%EB%9E%98%EC%8A%A4 Sat, 10 Jan 2026 12:14:12 GMT 클래스

    Typescript에서 클래스 기능은 c#에서 유래된 것이 많다. 컴파일 후에 사라진다.

    항상 대문자로 시작 class PersonContext { name: string = ""; age: number = 0; readonly location: string = "Korea"; // readonly 수정 불가능하게 한다.

    생성자

    초기화를 담당한다. -> 수정 가능하다. constructor(name: string, age: number) { 인스턴스를 셋팅하고 초기화한다. this.name = name // this가 생성될 인스턴스를 바라본다. this.age = age } }

    const p1 = new PersonContext(‘Jang’, 99); // 인스턴스 Const p2 = new PersonContext(‘Poco’, 100);

    인스턴스 = 실제 건물 (유연한 결합)

    클래스에서 파생된 고유한 것 실제로 생성된 후 메모리에 올라간다. 설계도를 보고 실제로 벽돌을 쌓아 올린 실제 건물이다. 처음부터 끝까지 직접 코드를 짠다. 여러 개를 동시에 가져다 쓸 수 있다.

    메서드

    객체(클래스)에서는 행동을 뜻한다. 함수이기도 하다. 클래스가 가지고 있는 함수 introduce(): string { return ${this.name}의 나이는 ${this.age}입니다. } console.log(p1.introduce())

    Getter, setter

    필드의 접근할 권한을 가진 제어자이다. (외부에서 값이 어떻게 바뀌는지 통제 가능) getter O / setter X => 속성은 자동으로 읽기 전용 setter 매개변수의 타입 X / getter의 반환 타입에서 추론 private 속성은 .연산자로 접근할 수 없다.

    객체에 속성에 접근할 때 실행되는 함수이다. get : 값을 읽을 때 실행 set : 값을 쓸 때 실행

    class Person {
    name: string;
    private _age: number;

    constructor(name: string, age: number) {
        this.name = name
        this._age = age
    }
    get age() {
        if (this._age === 0) {
            return '설정되지 않았습니다.'
        }
        return `나이는 ${this._age}세로 추정됩니다.`
    }

    set age(age) {
        if (typeof age === 'number') {
            this._age = age    
        }
        this._age = 0;
}

const p = new Person('Jang' 99); // p가 인스턴스이다. 메모리 어딘가에 값을 담고 메서드를 실행할 수 있는 실체가 생겨난 것이다.
console.log(p.age)
console.log(p.name)

    extends (상속)

    상속, 확장

    class 기본 {
    result() {
        return 'Base'
    }
}

class 파생 extends 기본 {
    result() {
        return 'Derived'
    }
}

const de = new 파생()
console.log(de.result()) // "Drived"

    super

    super는 상속받은 부모 클래스를 의미해. super() → 부모 클래스의 생성자 호출 super.method() → 부모 클래스의 메서드 호출

    class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }
}

class Dog extends Animal {
  breed: string;

  constructor(name: string, breed: string) {
    super(name);          // ✅ 부모 생성자 호출 (필수)
    this.breed = breed;
  }
}

const dog = new Dog("Buddy", "Poodle");

    접근 제어자

    public : 기본값, 어디서든 자유롭게 접근 가능 protected : 해당 클래스와 이를 상속받은 자식 클래스에서만 접근 가능하다. private : 해당 클래스 내부에서만 접근 가능하다.

    class Account {
  public bankName: string = "Hana Bank"; // 누구나 접근 가능
  protected owner: string;              // 자신과 자식 클래스만 가능
  private balance: number;               // 오직 이 클래스 내부에서만

  constructor(owner: string, initialBalance: number) {
    this.owner = owner;
    this.balance = initialBalance;
  }

  public showBalance() {
    console.log(`잔액은 ${this.balance}원입니다.`); // 클래스 내부이므로 접근 가능
  }
}

const myAccount = new Account("Stella", 10000);
console.log(myAccount.bankName); // OK
// console.log(myAccount.balance); // Error: private이라서 외부 접근 불가

    static

    인스턴스가 아닌, 클래스 자체에 귀속되는 속성이나 메서드이다. 인스턴스 생성하지 않고도 클래스 이름을 통해 바로 호출할 수 있다. 공유해야 하는 고정된 값이나 유틸리티 함수에 사용한다.

    class Circle {
  static PI: number = 3.14159; // 모든 원이 공유하는 고정값

  static calculateArea(radius: number) {
    return this.PI * radius * radius;
  }
}

console.log(Circle.PI); // 인스턴스 없이 바로 접근
console.log(Circle.calculateArea(5));

    readonly

    값을 수정할 수 없게 만드는 제어자이다.

    class Person {
  public readonly birthDate: string;

  constructor(date: string) {
    this.birthDate = date; // 초기 할당 가능
  }

  updateBirth() {
    // this.birthDate = "2000-01-01"; // Error: 읽기 전용 속성이라 수정 불가
  }
}

    추상 클래스 abstract = 인스턴스 생성 불가능, 파생으로 가능

    abstract를 선언한 클래스로 직접 인스턴스를 생성 불가능하다. 직접 인스턴스화 될 수 없지만 extends후 파생된 클래스를 인스턴스화하도록 유도한다. 추상 클래스는 구현된 메서드를 포함시킬 수 있다. abstract 선언한 메서드는 파생된 클래스에서 메서드를 구현해야 한다.

    = 자식 클래스들이 공통으로 가져야 할 변수나 로직이 있다면 추상 클래스가 훨씬 유리하다. 전체적인 실행 흐름은 같은데, 특정 단계만 다를 때 사용한다.

    abstract class GameCharacter {
  constructor(protected hp: number) {}

  // 모든 캐릭터가 공통으로 사용하는 로직
  takeDamage(amount: number) {
    this.hp -= amount;
    console.log(`남은 체력: ${this.hp}`);
  }

  // 공격 방식은 캐릭터마다 다름
  abstract attack(): void;
}
    abstract class Animal {
    // 선언된 메서드
    abstract hello(str: string): string {

    }
    // 구현된 메서드
    run() {
        return this.hello() + 'run'
    }
}
// abstract를 붙이면 직접 인스턴스화가 될 수 없다.
const animal = new Animal() 

class Person extends Animal {
// 파생된 클래스는 가능하다.
    hello() {
        return 'Person'
    }
}
const person = new Person()  
console.log(person.hello()) // "Person"정상적으로 실행될 수 있다.

    Parameter Properties = 매개변수를 받는다.

    typescript에서 필드를 생성하고, 생성자 매개변수를 동일하게 만드는 과정이 귀찮을 때 접근제어자, 생성자 필드 네임, 타입을 생성자 매개변수를 받는 방법

    = 매개변수에 다 넣고 this도 생략한다.

    class Person {
    constructor(public name: string, private age: number, protected gender: 'M' | 'F') { // 매개변수에 넣을 수 있다.
    //this.name = name 
    //this.age = age
    //this.gender = gender
    = this도 생략이 가능하다.
      }

    sayName() { 
        return `이름은 ${this.name} 입니다.`
    }

    protected sayAge() {
        return `나이는 ${this.age}`
        }
    }

    메서드 오버라이딩

    부모 클래스에서 물려받은 메서드를 자신의 용도에 맞게 재정의 하는것이다. 클래스로 만든것을 확장하더라도 오버라이딩 할 수 있다.

    1) extends 사용

    class Animal {
    run() {
        return 'Animal이 달리다'
    }
}
class Dog extends Animal {
    run() {
        return 'Dog이 달리다'
    }
}
class Person extends Animal {
    run() {
        return 'Person이 달리다'
    }
}

const p = new Person()
const d = new Dog()

console.log(p.run()) // Animal이 달리다
console.log(d.run())

    2) super 키워드 활용 부모의 기능을 완전히 버리는 것이 아니라, 부모의 기능을 먼저 수행하고, 추가적인 로직을 더하고 싶을 때 super을 사용한다.

    class Robot {
  work() {
    console.log("시스템 가동...");
  }
}

class CleaningRobot extends Robot {
  work() {
    super.work(); // 부모의 work() 실행 ("시스템 가동...")
    console.log("청소를 시작합니다."); // 자식만의 추가 로직
  }
}

    오버라이딩 vs 오버로딩

    • 오버라이딩 : 상속 관계에서 부모의 메서드를 자신의 입맛에 맞게 재정의한다. 부모의 기능을 무시하거나(덮어쓰기)extends, super를 통해 부모의 기능을 포함하여 확장한다.

    • 오버로딩 : 같은 이름의 메서드를 매개변수만 다르게 여러 방식으로 호출할 수 있게 하는 것이다. (여러 옵션 쌓기), 매개 변수가 달라야 한다. 다양한 입력 타입에 유연하게 대응한다.

      // 1. 오버로드 시그니처 (함수 선언부)
function add(a: string, b: string): string;
function add(a: number, b: number): number;

    // 2. 함수 구현부 (실제 로직) function add(a: any, b: any): any { return a + b; }

    console.log(add(10, 20)); // 30 (number 타입으로 작동) console.log(add("안녕", "세상")); // "안녕세상" (string 타입으로 작동) // console.log(add(10, "안녕")); // Error: 선언부에 없는 조합은 사용 불가
    ]]>         <![CDATA[Next.js - Page Router 페이지 라우터]]> https://velog.io/@seonguul_2/Next.js-Page-Router-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%9D%BC%EC%9A%B0%ED%84%B0 https://velog.io/@seonguul_2/Next.js-Page-Router-%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%9D%BC%EC%9A%B0%ED%84%B0 Thu, 08 Jan 2026 02:01:10 GMT 페이지 라우터

    1) 파일 시스템 기반 라우팅 2) 사전 렌더링 기능 src/pages 폴더 구조 기반 라우팅

    npx create-next-app@15.2.3 즉시 실행, 앱생성, 버전

    1. 타입스크립트 사용 ? Y
    2. EsLint 사용 ? Y
    3. TailwindCSS 사용 ? Y
    4. JS코드를 src 디렉토리 보관 여부 Y
    5. AppRouter 사용 여부 ? Y/N
    6. Turbopack 사용 여부 ? N
    7. import alias 수정 여부 ? N

    package.json dev : Next.js 앱을 개발 모드로 실행 build : Next.js 앱을 빌드한다. start : 빌드한 Next.js 앱을 실행한다. 프로덕션모드로 lint : EsLint 규칙을 기반으로 한 코드의 품질 검사

    • next.config.ts 리액트에서 strictMode 설정 옵션 -> 문제 찾기 위해 컴포넌트 두번 렌더링 -> false

    • public 폴더 : 정적파일을 보관하는 폴더이다. src폴더 -> 체계적인 관리를 위해 pages폴더 (라우팅 관리 폴더)

    • EsLint : 코드의 품지을 유지하고, 코드에 존재하는 잠재 오류를 미리 발견하도록 도와주는 도구 eslint.config.mjs

      ...compat.extends("next/core-web-vitals", "next/typescript"),
{
  rules: {
      "@typescript-eslint/no-unused-vars":"off", (사용 x 변수를 오류로 판단)
      "@typescript-eslint/no-explicit-any":"warn", -> any명시적으로 사용 못하도록
  }
}

    개발 모드로 실행 npm run dev

    "script": {
    "dev" : "next dev", // 앱을 개발 모드로 실행
    "build" : "next build" // 앱을 빌드한다.
    "start" : "next start" // 빌드한 앱을 실행한다.
    "lint" : "next lint" // 코드 품질을 검사한다.
}

    프로덕션 모드로 실행하기 npm run build

    • 개발 모드와 프로덕션 모드의 차이점 개발 모드 : 핫 리로딩 활성화 -> 자동 새로고침 기능 프로덕션 모드 : 실제 사용자에게 배포할 때 사용 -> 코드 최소화, 불필요한 코드 제거

    npm run build -> npm run start

    라우팅 설정하기

    브라우저가 요청하는 URL경로에 따라 적절한 페이지를 화면에 렌더링하는 과정이다.

    1) 불필요한 CSS 파일 제거 styles/global.css 2) npm run dev 3) 파일시스템 기반 페이지 라우팅 (자동 매핑) pages/index.tsx // Home 컴포넌트 -> 인덱스 페이지 pages/search.tsx -> search/index.tsx로 변경해서 라우팅 설정 가능하다. pages/book/index.tsx

    EsLint 옵션 파일

    코드 품질을 유지하고, 코드에 존재하는 잠재 오류를 미리 발견하도록

    _app.tsx _document.tsx

    1) 글로벌 설정을 담당하는 파일 HTML 문서의 기본 틀

    Html lang = "ko-KR" 공통 설정 가능하다.

    2) _app.tsx

    Next.js 앱에서 루트 컴포넌트 역할을 수행한다. 글로벌 설정(공통 제어)

    export default function App ({ Component, pageProps }: AppProps ) 현재 page컴포넌트, 페이지 컴포넌트에 제공할 모든 Props가 전달된다. index.tsx

    글로벌 헤더 -> _app.tsx에서 생성하기 book/[id].tsx 파일을 생성한다. (경로가 수시로 변경될 경우) = 옵셔널 캐치올 세그먼트

    쿼리스트링과 URL파라미터 사용하기

    - 쿼리 스트링

    경로에서 물음표(?)와 함께 표현, 검색어, 필터링 조건을 전달한다. /search?q=한입

    export default function Page() {
    const router = useRouter();
    return (<div><h1>검색: {router.query.q}</h1>);
}

    - URL 파라미터

    localhost:3000/book/123
export default function Page(){
    const router = useRouter();
    return ( <div><h1>{touer.query.id}도서 상세 페이지</h1></div>)
}

    - 400, 500 특수 페이지 라우팅

    pages/404.tsx 생성 -> 컴포넌트 생성한다. pages/500일 경우 -> _error.tsx 파일 생성 후 내보낸다.

    ]]>         <![CDATA[Next.js - 최적화(이미지, 검색 엔진, 사이트맵 생성)]]> https://velog.io/@seonguul_2/Next.js-%EC%B5%9C%EC%A0%81%ED%99%94%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B2%80%EC%83%89-%EC%97%94%EC%A7%84-%EC%82%AC%EC%9D%B4%ED%8A%B8%EB%A7%B5-%EC%83%9D%EC%84%B1 https://velog.io/@seonguul_2/Next.js-%EC%B5%9C%EC%A0%81%ED%99%94%EC%9D%B4%EB%AF%B8%EC%A7%80-%EA%B2%80%EC%83%89-%EC%97%94%EC%A7%84-%EC%82%AC%EC%9D%B4%ED%8A%B8%EB%A7%B5-%EC%83%9D%EC%84%B1 Wed, 07 Jan 2026 11:55:30 GMT 1. 이미지 최적화

    많은 용량 차지 페이지 로딩 속도 + 사용자 경험

    Webp, AVIF 등 차세대 이미지 포맷으로 변환 (브라우저 지원 확인)

    사용자 화면에 맞게 이미지 크기 조절 불필요한 데이터 로드 최소화

    - 이미지 레이지 로딩 적용

    스크롤을 올리거나 내려야 보이는 이미지는 나중에 필요할 때 불러오는 기법

    - 이미지 최적화 올인원 next/Image 컴포넌트

    최적화 과정을 자동으로 처리하는 Image 컴포넌트, 기존의 이미지 태그와 유사

    export default function Page() {
    return (
        <Image src="/profile.png" width={500} heigth={500} alt="Picture of the author"/>
     )
}
    • 개발자도구 network/img탭/preview 탭 하단 이미지 크기 보면 비효율적인 크기 확인 Image 컴포넌트로 대체해서 크기 조절

    - 반응형 이미지

    Image 컴포넌트에 fill Prop을 설정하면 자동으로 부모 요소를 꽉 채우도록 크기를 조정한다. (부모요소 크기가 설정)

    export default function Example() {
    return (
        <div style={{ position: "relative", width: "100%", height: "300px" }}>
            <Image src="/example.jjpg" alt="Example Image" fill />
        </div>
    );
}

    -next.config.ts

    외부 서버에서 제공하는 이미지는 허용하도록 설정하기 images.remotePatterns옵션을 추가로 설정

    const nextConfig: NextConfig = {
  /* config options here */
  reactStrictMode: false,
  logging: {
    fetches: {
      fullUrl: true,
    }
  },
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "shopping-phinf.pstatic.net",
      }
    ]
  }
};

    2. 검색 엔진 최적화 (앱 라우터 버전)

    앱 라우터 버전에서 검색 엔진 최적화(SEO)를 위해 파비콘, 메타 태그, 사이트맵 등 설정 방법을 살펴본다.

    썸네일 및 파비콘 이미지 준비

    favicon.ico, thumbnail.png 파일을 public폴더로 옮긴다.

    파비콘 설정

    src폴더에 있던 favicon.ico파일 대체하기

    인덱스 페이지 메타 태그 설정하기

    export const metadata; Metadata = {
    title: "한입북스",
    description: "한입북스에 등록된 도서를 만나보세요.",
    openGraph: {
        title: "한입북스",
        description: "한입북스에 등록된 도서를 만나보세요.",
        images: ["/thumnail.png"],
    },
 };

    metadata라는 변수를 선언, title, description, openGraph를 메타 데이터로 설정하면 자동 적용 개발자도구 Elements 탭에서 head 태그에 추가 된 메타 태그를 확인할 수 있다.

    검색 페이지의 메타 태그 설정

    사용자 요청에 따라 실시간으로 바뀌는 쿼리 스트링 값은 반영할 수 없다. 동적 메타 데이터를 생성하는 generateMetadata라는 함수를 활용한다.

    page.tsx에서 generateMetadata함수를 선언하고 내보내면 Next.js가 자동으로 함수의 반환값을 해당 페이지의 메타 태그로 설정한다.

    export async function generateMetadata({ searchParams, }: {
    searchParams: Promise<{ q?: string }>;
    }) { const {q} = await searchParams;
}

    검색 페이지의 페이지 컴포넌트를 위와 같이 수정한다.

    3. 사이트맵 생성하기

    구글이나 네이버의 검색 엔진 크롤러가 웹사이트 페이지, 동영상, 이미지 등 콘텐츠를 효율적으로 수집하도록 도와주는 파일이다.

    = 웹사이트 페이지 구조를 검색 엔진에 알리는 용도로 사용된다. 사이트맵은 검색 엔진이 웹사이트의 콘텐츠를 더 빠르고 정확하게 크롤링하도록 도와준다.

    https://winterload.com/sitemap.xml로 설정된다

    sitemap 함수로 현재 데이터베이스에 등록된 모든 도서 목록 정보를 동적으로 불러온다.

    import { BookData } from "@/types";
import { url } from "inspector";
import { MetadataRoute } from "next";

export default async function sitemap(): Promise<MetadataRoute.Sitemap>{
    const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/book`, {
        cache: "force-cache",
    });
    if (!response.ok) throw new Error(response.statusText);

    const allBooks: BookData[] = await response.json();
    return [
        {
            url: "http://localhost:3000",
            lastModified: new Date(),
        },
        {
            url: "http://localhost:3000/search",
            lastModified: new Date(),
        },
        ...allBooks.map((book) => ({
            url: `http://localhost:3000/book/${book.id}`,
            lastModified: new Date(),
        })),
    ]
}

    url : 페이지 주소 lastModified : 페이지를 마지막으로 수정한 날짜 지정 changefreq : 페이지의 변경 빈도 (daily, weekly, monthly) priority : 상대적 중요도 0.0 ~ 1.0 사이의 값

    나중에 배포하기 위해 local.env에 BASE_URL을 등록하고 sitemap url에 BASE_URL을 넣기!

    ]]>         <![CDATA[Next.js - 고급 라우트 기법 (병렬 라우트, 가로채기 라우트)]]> https://velog.io/@seonguul_2/Next.js-%EA%B3%A0%EA%B8%89-%EB%9D%BC%EC%9A%B0%ED%8A%B8-%EA%B8%B0%EB%B2%95-%EB%B3%91%EB%A0%AC-%EB%9D%BC%EC%9A%B0%ED%8A%B8-%EA%B0%80%EB%A1%9C%EC%B1%84%EA%B8%B0-%EB%9D%BC%EC%9A%B0%ED%8A%B8 https://velog.io/@seonguul_2/Next.js-%EA%B3%A0%EA%B8%89-%EB%9D%BC%EC%9A%B0%ED%8A%B8-%EA%B8%B0%EB%B2%95-%EB%B3%91%EB%A0%AC-%EB%9D%BC%EC%9A%B0%ED%8A%B8-%EA%B0%80%EB%A1%9C%EC%B1%84%EA%B8%B0-%EB%9D%BC%EC%9A%B0%ED%8A%B8 Wed, 07 Jan 2026 11:12:41 GMT 병렬 라우트, 가로채기 라우트라는 고급 라우트 기법

    병렬 라우트

    하나의 화면에서 여러 페이지를 병렬로 렌더링하는 기능이다. 레이아웃이 복잡하거나 멀티태스킹이 필요한 UI를 구현할 때 매우 유용하다.

    하나의 화면에 여러 개의 페이지 컴포넌트를 동시에 렌더링한다.

    기존 렌더링 방식의 문제점

    기존의 렌더링 방식 단순히 컴포넌트로 구현하면 특정 섹션에서 오류가 발생, 렌더링에 문제가 생길 경우 페이지 컴포넌트 전체에 예외가 발생한다.

    = 오류가 없는 섹션에도 영향을 미치는 상황 발생 try-catch문을 사용할 수 있지만 유지보수성이 떨어진다. 예외처리 로직 중복 사용하면 일관성이 저하, 하위 탐색이 불가능한 경우가 많다. (복잡성)

    병렬 라우트 대시보드 UI구현

    import { ReactNode } from "react";

export default function Layout({ children }: { children: ReactNode }) {
    return <div>{children}</div>;
}

// page.tsx
export default function Page() {
    return <div>관리자 페이지</div>
}

    /admin 페이지로 접속하여 관리자 페이지를 확인한다.

    - @slot 폴더 생성 = Props의 Key

    병렬로 렌더링할 페이지 컴포넌트를 보관하는 폴더이다. @기호를 붙여 특정 폴더를 슬롯으로 지정할 수 있다.

    src/app/admin/@notification/page.tsx

    export default function Page() {
    return <div>@notification</div>;
}

    src/app/admin/@user

    export default function Page() {
    return <div>@user</div>;
}

    각각의 페이지 컴포넌트는 Next.js가 자동으로 레이아웃 컴포넌트에 Props로 전달한다. 슬롯 이름이 Props의 Key가 된다.

    - layout 컴포넌트에서 props를 사용해 병렬로 렌더링

    import { ReactNode } from "react";

export default function Layout({
    children,
    notification,
    user,    
}: { children: ReactNode;
    notification: ReactNode;
    user: ReactNode;
}){
    return (
        <div>
            {children}
            {notification}
            {user}
        </div>
    )
}

    props로 전달한다. 페이지 컴포넌트가 제공되므로 ReactNode타입으로 정의한다. {notification}{user} 등 페이지 컴포넌트를 렌더링한다.

    - 예외 처리하기

    @user 슬롯 아래에 error.tsx파일을 생성, 에러가 발생하면 페이지 컴포넌트 대신 렌더링할 컴포넌트를 작성한다.

    "use client";

export default function Error() {
    return <div>오류 발생!</div>;
}

    해당 슬롯의 페이지 컴포넌트만 마비될 뿐 다른 슬롯이나 레이아웃에는 영향을 미치지 않는다. 오류가 발생한 섹션만 별도로 처리되며, 나머지 섹션과 페이지는 정상적으로 렌더링 된다.

    export default function Page() {
    throw new Error();

    return <div>@notification</div>;
}

    - 섹션별로 하위 탐색 구현하기

    병렬 라우트를 활용하여 섹션별로 하위 탐색을 구현할 수 있따. /admin : 대시보드 페이지, 회원 관리 섹션과 알림 섹션을 렌더링 /admin/archived : 대시보드 페이지로 회원 관리 섹션과 보관된 알림 섹션을 렌더링

    알림을 렌더링하는 페이지 컴포넌트를 정의한다.

    현재 접속 주소 ~/admin/archived 슬롯별 페이지 컴포넌트 @notification 슬롯 : ~/admin/@notification/archived/page.tsx @user 슬롯 : ~/admin/@user/archived/page.tsx children 슬롯 : ~/admin/archived/page.tsx

    다른 슬롯에 불필요한 폴더나 페이지를 추가할 필요 없이 문제를 해결할 수 있다.

    - default 컴포넌트 추가하기

    슬롯 폴더에 default.tsx 파일을 만들고 컴포넌트를 정의하면 된다.

    - 섹션별로 하위 탐색할 때 주의할 사항

    하나의 슬롯이라도 해당 경로에 렌더링할 페이지 컴포넌트가 없으면 404페이지가 나타난다. 이를 방지하기 위해 경로가 없는 슬롯에는 default 컴포넌트를 정의해야 한다.

    = 하드 네비게이션 방식

    1) 하드 네비게이션 (SSR) 환경에서 일관된 초기 상태 보장 브라우저의 주소 표시줄에서 URL을 직접 입력하거나 페이지를 새로고침해 이동하는 방식이다. 서버로부터 새로운 페이지를 다시 로드하고 기존의 상태나 UI를 초기화한다.

    = 모든 슬롯에서 페이지 컴포넌트 or Default 컴포넌트가 필요하다. 페이지 컴포넌트가 없으면 Default 아니면 404페이지가 나타난다.

    2) 소프트 네비게이션 Link컴포넌트 또는 라우터 객체의 navigate메서드 등 클라이언트 사이드 렌더링으로 페이지를 이동하는 방식 기존의 상태를 유지 + 필요한 부분만 업데이트하므로 페이지 이동이 빠르다.

    = 현재 경로에 맞는 페이지 컴포넌트가 존재하는 슬롯만 업데이트되며 페이지 컴포넌트가 없는 슬롯은 이전 상태를 그대로 유지한다. /admin 페이지의 레이아웃 컴포넌트에서 소프트 네비게이션 방식을 사용한다.

    import Link from "next/link";
import { ReactNode } from "react";

export default function Layout({
    children,
    notification,
    user,    
}: { children: ReactNode;
    notification: ReactNode;
    user: ReactNode;
}){
    return (
        <div>
            <header style={{ display: "flex", gap: "10px" }}>
                <Link href={"/admin"} style={{ color: "blue"}}>
                    /admin
                </Link>
                <Link href={"/admin/archived"} style={{ color: "blue"}}>
                    /admin/archived
                </Link>
            </header>
            <br />
            {children}
            {notification}
            {user}
        </div>
    );
}

    가로채기 라우트 (하드 or 소프트) 고르기

    특정 경로에 사용자가 소프트 네비게이션 방식으로 접근했을 때, 해당 요청을 가로채 원래 렌더링할 페이지 컴포넌트 대신 다른 페이지 컴포넌트를 렌더링하는 기능이다.

    동일한 페이지라도 사용자의 접근 방식에 따라 다른 UI제공할 수 있다. 피드 형식의 SNS 서비스에서 자주 활용된다.

    가로채기 라우트 적용 방법

    app 폴더에 가로채는 폴더 생성 -> page.tsx 생성 -> 원래 페이지 컴포넌트 대신 화면에 렌더링할 페이지 컴포넌트를 만들어야 한다.

    = (.)폴더는 가로채기 폴더로 인식

    • 소괄호 : 가로채기 라우트를 위한 폴더임 명시 photo/[id]/page.tsx (.)photo/[id]/page.tsx

    • 마침표(.) : 동일한 경로에 있는 폴더의 가로채기임을 명시한다. (..)photo/ 한단계 위에 있는 app 폴더를 가로채기 하는 방법 (..)(..)photo/ 두 단계 위에 위치한 페이지를 가로채기 하는 방법 (...)photo/ 루트 폴더를 기준으로 가로채기 할 수 있다.

    도서 상세 페이지에 가로채기 라우트

    book/[id] 경로의 page.tsx를 가로채기 위해 src/app/(.)book/[id]/page.tsx 로 도서 상세페이지에 접근한다.

    모달 구현하기

    가로채기 라우트가 동작했을 때 기존 페이지 컴포넌트를 모달 형태로 렌더링한다.

    Modal 컴포넌트는 일반적으로 독립적이기 때문에 최상단에 렌더링하는 것이 바람직한다. 루트 레이아웃에서 렌더링하면 레이아웃 스타일에 영향을 받거나 의도치 않은 스타일 충돌을 일으킬 수 있다.

    - createPortal 메서드를 이용

    특정 컴포넌트를 트리에섯 분리 HTML구조의 원하는 위치에 렌더링한다. app/layout.tsx

    return createPortal (
        <div className={style.backdrop} onClick={(e) => {
            if (e.target === e.currentTarget) {
                router.back();
            }
        }}>
            <div className={style.modal}>{children}</div>
        </div>,
        document.getElementById("modal-root") as HTMLElement
);

    createPortal 메서드를 불러온다. 첫 번째 인수 : 렌더링하려는 UI 요소 두 번째 인수 : 첫 번째 인수로 전달하는 UI 요소를 렌더링 할 위치 (modal-root)

    가로채기 라우트와 병렬 라우트 함께 사용하기

    모달을 렌더링해도 종전에 탐색하던 페이지를 뒷배경에 나오도록 구현하려면 모달과 기존 페이지를 동시에 렌더링하는 방식으로 구조를 수정해야 한다.

    = 두 개 이상의 페이지를 동시에 렌더링하도록 설정해야 함

    도서 상세 페이지 @modal 종전 페이지 children슬롯으로 설정해 하나의 페이지에서 동시에 렌더링 가능

    src/app/@modal/(.)book/[id]/page.tsx @modal에서 보여줄 default 컴포넌트 생성

    src/app/book/[id]/page.tsx

    • app/layout.tsx children, modal이라는 두 슬롯의 페이지 컴포넌트가 props으로 제공된다. {modal} children 슬롯의 페이지 컴포넌트와 함께 렌더링한다.

    도서 상세 페이지 로딩 UI설정

    로딩중 표시하는 로딩 UI를 추가하고 스트리밍 방식으로 페이지를 로딩하는 동안 사용자에게 로딩 UI를 보여 주도록 설정한다.

    도서 상세 페이지를 Suspense컴포넌트로 감싸고, fallback Prop의 값으로 '로딩 중'이라는 div태그 전달

    import Modal from "@/components/modal";
import BookPage from "@/app/book/[id]/page";
import { Suspense } from "react";

export default function Page(props: any) {
    return (
        <Modal>
            <Suspense fallback={<div>로딩 중</div>}>
                <BookPage {...props}/>;
            </Suspense>
        </Modal>
    )
}

    - skeleton UI 설정하기

    fallback prop의 값을 BookPageSkeleton 컴포넌트로 설정한다.

    <Suspense fallback={<BookPageSkeleton />}>
    <BookPage {...props}/>
</Suspense>
    ]]>         <![CDATA[Next.js - 서버 액션]]> https://velog.io/@seonguul_2/Next.js-6.-%EC%84%9C%EB%B2%84-%EC%95%A1%EC%85%98 https://velog.io/@seonguul_2/Next.js-6.-%EC%84%9C%EB%B2%84-%EC%95%A1%EC%85%98 Tue, 06 Jan 2026 10:26:23 GMT 서버 액션이란?

    로그인, 회원 가입, 로그아웃 등 서버에서 이루어지는 작업을 쉽고 간단하게 구현할 수 있다. 서버에서 실행되는 비동기 함수 가운데 클라이언트가 직접 호출할 수 있는 함수를 말한다.

    로그인, 회원 가입, 데이터 생성처럼 서버에서 이루어지는 작업을 쉽고 간단하게 구현할 수 있다.

    export default function Page() {
    const loginAction = async () => {
        "use server"
        console.log("서버 액션 loginAction 호출!");
    };

    return (
        <form action={loginAction}>
            <input type="text" name="id" />
            <input type="password" name="password" />
            <button type="submit">로그인</button>
        </form>
    )
}

// 비동기 함수 loginAction을 만든다. -> use server라는 지시자를 작성 (서버액션)으로 설정
// 폼을 제출했을 때 loginAction을 호출하도록 설정한다.

    사용자가 폼에 작성한 아이디와 패스워드는 서버 액션에 폼 데이터 형태의 인수로 전달된다. (폼 데이터) 따라서 서버 액션에서 매개변수로 사용자가 입력한 값을 꺼내 사용할 수 있다.

    const loginAction = async (formData: FormData) => {
        "use server"

        const id = formData.get("id");
        const password = formData.get("password");

        console.log({ id, password });

    };

    서버 액션은 브라우저에서 호출할 수 있는 Next.js 서버의 비동기 함수이다. 로그인이나 회원 가입 등과 같은 서버 동작을 쉽고 간단하게 구현할 수 있다.

    = 복잡한 과정을 줄일 수 있다. 개발 생산성이 높아진다. 브라우저에 코드가 노출되지 않아 보안이 중요한 작업에 적합하다.

    로직이 복잡하거나 대규모 통합 작업이 필요한 경우, 전통적인 API 설계 방식이 적합할 수 있다. 서버 액션은 간단한 서버 동작 or 클아이언트와 서버의 상호작용을 빠르게 구현할 때 유용한 선택이 될 수 있다.

    • DB와 연결해 SQL문을 직접 실행
      // SQL문을 직접 호출하는 액션 예시
const createPostAction = async(formData:FormData) => {
  'use server'
  const content = formData.get("content");
  await sql 'INSERT INTO BOARD (content) VALUES (content)';
}

      서버 액션 동작

      Next.js의 서버 액션은 클라이언트가 POST메서드를 이용해 Next.js서버에게 HTTP요청을 보내는 방식으로 동작한다.

    개발자도구 -> 네트워크탭 -> Fetch/XHR필터 활성화 -> 폼 제출

    Headers탭 -> Request Headers에서 Next-Action에

    next-action (호출하려는 서버 액션의 고유 아이디) Next.js가 자동생성 407ca5dd41991d4004ed0cd806aef03b2d052310c2

    클라이언트가 서버에 요청할 때 함께 전송되어 어떤 서버 액션을 실행할지 Next.js 서버가 정확히 판단할 수 있도록 한다.

    복잡한 HTTP요청 코드를 직접 작성하지 않고 마치 일반 함수처럼 서버 액션 선언 및 호출 -> 비동기 로직 손쉽게 실행할 수 있다.

    서버 액션에서 주의할 사항

    1) 꼭 form태그를 이용해야 하는 것은 아니다. 서버 액션을 별도의 파일로 분리, 페이지 컴포넌트를 클라이언트 컴포넌트로 설정한다. 이벤트 핸들러를 사용해 서버 액션 호출

    "use client";

import { useRef } from "react";
import { loginAction } from "./login.action";

export default function Page() {
    const idRef = useRef<HTMLInputElement>(null);
    const pwRef = useRef<HTMLInputElement>(null);

    const onCLickLogin = async () => {
        if (!idRef.current || !pwRef.current) return;
        const id = idRef.current.value;
        const password = pwRef.current.value;

        const formData = new FormData();
        formData.set("id", id);
        formData.set("password", password);
        await loginAction(formData);
    };

    return (
        <div>
            <input ref={idRef} type="text" name="id" />
            <input ref={pwRef} type="password" name="password" />
            <button onClick={onCLickLogin}>로그인</button>
        </div>
    )
}

    아이디와 패스워드를 받은 input태그를 idRef와 pwRef가 참조하도록 설정,

    2) 비동기 함수로 만들어야 한다. 서버 액션은 반드시 비동기 함수로 구현해야 한다. 안그러면 오류 발생!!

    서버 액션으로 리뷰 기능 구현

    특정 도서의 리뷰를 작성하는 기능 구현 도서 상세 페이지 컴포넌트에서 백엔드 서버 도서 데이터를 불러와 렌더링하는 기능을 별도의 컴포넌트로 분리 기능을 분리하면 이후에 리뷰를 손쉽게 추가하고 관리할 수 있다.

    // 리뷰를 작성하는 컴포넌트, 서버 액션을 사용해 새로운 리뷰 추가 
function ReviewEditor() {
  const createReviewAction = async (formData: FormData) => {
    "use server";

    const content = formData.get("content");
    const author = formData.get("author");

    console.log({ content, author });

  }
  return (
    <section>
      <form action={createReviewAction}>
      <input name="bookId" value={bookId} type="hidden" readOnly />
        <input required name="content" placeholder="리뷰 내용" />
        <input required name="author" placeholder="작성자" />
        <button type="submit">작성하기</button>
      </form>
    </section>
  )
}

    비동기 함수 createReviewAction을 만들고 함수의 최상단에 "use server"지시자를 작성해 함수를 서버 액션으로 설정한다. input태그에 required속성을 추가하면 내용이 없으면 폼을 제출하지 못한다.

    localhost:8080/api로 접속 API문서를 살펴보면 /review탭에서 새 리뷰를 생성하는 API가 있음을 확인할 수 있다.

    HTTP메서드 : POST 요청 Body필드 : bookId(도서아이디), content(리뷰 내용), author(리뷰 작성자 이름)

    - 서버 액션, 도서 아이디를 서버 액션에 포함된 폼 데이터와 함께 전달

    <input name="bookId" value={bookId} type="hidden" readOnly />

    페이지에서 보이지 않도록 hidden으로 설정한다. readOnly속성으로 값이 수정되지 않도록 한다.

    { content: '아 좋타', author: 'stella', bookId: '1' }

    form태그에 추가해서 서버 액션에 도서 아이디 값을 전달하는지 확인

    - DB에 새로운 리뷰를 추가한다.

    API에러 예외상황 처리 try-catch문 작성JSON으로 직렬화 전송한다.

    try {
      if (!bookId || !content || !author) throw new Error("잘못된 요청입니다.");
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/review`, {
          method: "POST",
          body: JSON.stringify({ bookId, content, author}),
        })
        if(!response.ok) throw new Error(response.statusText);
    } catch (e) {
      console.error(e);
    }

    server에서 npx prisma studio에서 확인 가능 createdAt 두번 클릭하면 최신순 정렬

    리뷰 조회 및 갱신 기능 구현

    DB에 등록한 리뷰를 불러와 리스트로 렌더링 -> 컴포넌트의 자식으로 배치 HTTP 메서드 : GET 요청주소 /review/book/[도서 아이디] 응답 데이터 

    [
  {
    "id": 0,
    "content": "string",
    "author": "string",
    "createdAt": "2026-01-06T05:21:08.879Z",
    "bookId": 0
  }
]

    types.ts에 타입정의한 뒤 ReviewList에서 review data를 불러오는 기능 추가

    async function ReviewList({ bookId }: { bookId: string }) {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/review/book/${bookId}`);
    if (!response.ok) throw new Error(response.statusText);

    const reviews: ReviewData[] = await response.json();
    console.log(reviews);

  return <section></section>;
}

    ~/book/1로 접속하면 백엔드 서버에서 해당 도서의 모든 리뷰 데이터를 성공적으로 가져온다.

    리뷰 리스트 렌더링하기

    • reviewItem 컴포넌트 만들기

      export default function ReviewItem({
  id,
  content,
  author,
  createdAt,
  bookId,
}: ReviewData) {
  return (
      <div className={style.container}>
          <div className={style.author}>{author}</div>
          <div className={style.content}>{content}</div>
          <div className={style.bottom_container}>
              <div className={style.date}>{new Date(createdAt).toLocaleString()}</div>
          </div>
          <div className={style.delete_btn}>삭제하기</div>
      </div>
  )
}

    • reviewItem 컴포넌트 reviewList에 불러오기

      return (
  <section>
    {reviews.map((review) => (
      <ReviewItem key={`review-item-${review.id}`} {...review}/>
    ))}
  </section>
)

    리뷰 갱신 기능 구현하기

    새로운 리뷰를 추가해도 실시간으로 데이터를 페이지에 반영하지 않는다. -> 새로고침 필요 ReviewEditor 컴포넌트에서 호출한 서버 액션이 수행 -> DB에 리뷰가 추가되면 페이지 컴포넌트 Next.js서버 -> 다시 렌더링해서 데이터 반영 -> 화면 갱신

    = 서버 컴포넌트이기 때문에

    - revalidatePath

    특정 경로의 캐시 데이터를 모두 제거하는 기능 = 풀 라우트 캐시와 데이터 캐시를 무효화 한다. 주로 Next.js 서버에서만 호출할 수 있다.

    import { revalidatePath } from "next/cache";

revalidatePath("/") // "/"경로에 해당하는 인덱스 페이지의 풀 라우트 캐시와 데이터 캐시를 무효화

    동적 경로의 모든 캐시 또는 앱 전체의 모든 캐시를 무효화하는 확장 기능도 제공한다.

    - revalidatePath(path, type) = 특정 경로의 모든 캐시

    캐시 무효화의 범위를 설정하는 두 번째 인수 type revalidatePath("book/[id]", "page") // "book/[id]" 경로의 캐시 무효화 첫번째 경로에 포함되는

    revalidatePath('/(with-searchbar)', 'layout')
// (with-searchbar)/layout.tsx 파일의 레이아웃 컴포넌트가 적용되는
// 모든 경로의 캐시를 무효화한다.

    /search 페이지의 캐시도 모두 무효화된다.

    revalidatePath('.', 'layout')
// Next.js 앱의 캐시를 모두 무효화한다.

    - revalidateTag = 특정 태그가 있는 데이터 캐시

    특정 태그가 있는 데이터 캐시를 무효화한다.

    fetch(url, { next: {tags: ["a"]} });
// "a" 태그를 설정
revalidateTag("a") // a태그 데이터 캐시를 모두 무효화

    리뷰 갱신 기능 업그레이드

    1. BookDetail 컴포넌트 : 도서의 상세 정보를 불러오는 fetch 메서드 변경되지 않으므로 캐시 무효화 불필요
    2. ReviewList 컴포넌트 : 리뷰 데이터를 불러오는 fetch 메서드 새 리뷰를 추가했을 때 무효화할 캐시 -> 리뷰 데이터 캐시

    둘 중 하나만 캐시를 무효화하기 위해 revalidateTag를 사용 reviewList 컴포넌트의 fetch 메서드에서 캐시 옵션 추가 

    async function ReviewList({ bookId }: { bookId: string }) {
  const response = await fetch(
    `${process.env.NEXT_PUBLIC_API_URL}/review/book/${bookId}`,
    { next: { tags: [`review`]}}); // 리뷰 캐시의 데이터 옵션

    reviewEditor에 revalidateTag 추가

    revalidateTag(`review-${bookId}`);

    review-${bookId}태그가 있는 데이터 캐시를 무효화하도록 변경한다. 갱신 범위를 최소화하면서 필요한 부분은 정확히 갱신한다.

    리뷰 추가 및 갱신 기능 업그레이드 (로딩, 오류 출력)

    ReviewEditor 컴포넌트 -> 클라이언트 컴포넌트로 전환

    서버 컴포넌트 -> client 컴포넌트 전환 -> 서버 액션 별도의 파일로 분리

    create-review.action.js

    "use server";
import { revalidateTag } from "next/cache";

const createReviewAction = async (formData: FormData) => {

    const bookId = formData.get("bookId");
    const content = formData.get("content");
    const author = formData.get("author");

    // api를 호출 DB에 리뷰 추가
    try {
      if (!bookId || !content || !author) throw new Error("잘못된 요청입니다.");
      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/review`,
        {
          method: "POST",
          body: JSON.stringify({ bookId, content, author }),
        }
      );
      if (!response.ok) throw new Error(response.statusText);
      revalidateTag(`review-${bookId}`); // 특정 경로의 캐시 데이터 제거
    } catch (e) {
      console.error(e);
    }
  };

export default createReviewAction;

    client 컴포넌트로 전환하기 위해 서버 액션 createReviewAction을 별도의 파일로 분리했다.

    useActionState를 이용해 form 액션 상태 관리

    ReviewEditor 컴포넌트를 클라이언트 컴포넌트로 전환 서버 액션 결과에 따라 사용자에게 적절한 피드백을 제공한다.

    ReviewEditor 컴포넌트에서 서버 액션의 결괏값을 추적할 수 있어야 한다. useActionState훅을 사용해 구한다. form 액션의 실행 결과, 로딩 상태 State로 불러와 사용 가능

    useActionState

    const [state, action, isPending] = useActionState(fn, initialState, permalink?);

    fn : function 액션 함수 전달 initialState : 액션 상태의 초깃값 전달 permalink : form 제출 또는 액션 실행 이후 이동하려는 URL을 전달한다.

    state : 첫 번째 요소 form 액션의 결괏값을 저장하는 상태 action : 액션을 발생시키는 함수이다. 전달한 액션 함수(fn)을 실행하여 결괏값 추적 isPending : 현재 액션의 진행 여부 로딩 상태 반환

    const [state, action, isPending] = useActionState(createReviewAction, null);
    // state : 현재 상태, action 발생시키는 함수, isPending : 액션의 로딩 상태

    prevState: unknown 이전 상태를 나타내는 값, 특정 로직에서 활용 하지 않으면 unknown 타입으로 설정

    "use server";
import { revalidateTag } from "next/cache";

const createReviewAction = async (prevState: unknown, formData: FormData) => {

    const bookId = formData.get("bookId");
    const content = formData.get("content");
    const author = formData.get("author");

    // api를 호출 DB에 리뷰 추가
    try {
      if (!bookId || !content || !author) throw new Error("잘못된 요청입니다.");
      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/review`,
        {
          method: "POST",
          body: JSON.stringify({ bookId, content, author }),
        }
      );
      if (!response.ok) throw new Error(response.statusText);
      revalidateTag(`review-${bookId}`); // 특정 경로의 캐시 데이터 제거
    } catch (e) {
      console.error(e);
    }
  };

export default createReviewAction;

    서버 액션의 결괏값 이용하기

    서버 액션의 결괏값이 State에 저장되는지 확인 

    "use server";
import { revalidateTag } from "next/cache";

const createReviewAction = async (prevState: unknown, formData: FormData) => {

    const bookId = formData.get("bookId");
    const content = formData.get("content");
    const author = formData.get("author");

    // api를 호출 DB에 리뷰 추가
    try {
      if (!bookId || !content || !author) throw new Error("잘못된 요청입니다.");
      const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/review`,
        {
          method: "POST",
          body: JSON.stringify({ bookId, content, author }),
        }
      );
      if (!response.ok) throw new Error(response.statusText);
      revalidateTag(`review-${bookId}`); // 특정 경로의 캐시 데이터 제거

      return {
        status: true,
        message: "리뷰를 성공적으로 추가했습니다.",
      };
    } catch (e) {
      return {
        status: false,
        message: `새로운 리뷰를 추가하지 못했습니다: ${e}`,
      };
    }
  };

export default createReviewAction;

    review-editor.tsx에서 useEffect를 사용하여 state의 값이 변경될 때마다 브라우저 콘솔에 출력하도록 설정한다.

    "use client";

import { useActionState, useEffect } from "react";
import style from "./review-editor.module.css";
import createReviewAction from "@/actions/create-review.action";

export default function ReviewEditor({ bookId }: { bookId: string }) {
    // useActionState 사용
    const [state, action, isPending] = useActionState(createReviewAction, null);
    // state : 현재 상태, action 발생시키는 함수, isPending : 액션의 로딩 상태

    useEffect(() => {
        console.log(state);

    }, [state]); // state값이 변경될 때마다 콘솔에 출력
    return (
    <section className={style.container}>
      <form action={action}>
        <input name="bookId" value={bookId} type="hidden" readOnly />
        <textarea required name="content" placeholder="리뷰 내용" />
        {/* bookId값으로 설정 => 서버 액션에 폼을 제출할 때 도서 아이디를 bookId로 전달 가능 */}
        <div className={style.submit_container}>
          <input required name="author" placeholder="작성자" />
          <button type="submit">작성하기</button>
        </div>
      </form>
    </section>
  );
}

    로딩 UI 설정하기

    useActionState의 isPending에는 현재 액션의 로딩 상태를 저장한다. isPending을 이용해 로딩 UI를 설정할 수 있다.

    <textarea required={isPending} name="content" placeholder="리뷰 내용" />
  {/* bookId값으로 설정 => 서버 액션에 폼을 제출할 때 도서 아이디를 bookId로 전달 가능 */}
    <div className={style.submit_container}>
    <input required={isPending} name="author" placeholder="작성자" />
<button disabled={isPending}type="submit">작성하기</button>

    리뷰 내용, 작성자, 작성하기 disabled={isPending}으로 설정

    리뷰 삭제 기능 구현하기

    서버 액션을 호출해 DB에서 특정 리뷰 데이터를 삭제하도록 설정

    <form>
    <div className={style.delete_btn}>삭제하기</div>
</form>

    form 태그로 감싸야 useActionState와 같은 훅으로 서버 액션의 결과를 추적하고 로딩 상태를 효율적으로 관리

    = 삭제하기 버튼만 클라이언트 컴포넌트로 전환하는 게 효율적인 문제 해결 방법이다.

    "use client";

export default function DeleteReviewItemButton() {
    return (
        <form>
            <div>삭제하기</div>
        </form>
    );
}
    • DB리뷰 삭제할 서버 액션
      "use server";

    import { revalidateTag } from "next/cache";

    const deleteReviewAction = async (prevState: unknown, formData: FormData) => { const reviewId = formData.get("reviewId"); const bookId = formData.get("bookId"); // 삭제할 아이디, 도서 아이디 추출 

    if (!reviewId) {
    return {
        status: false,
        message: "삭제할 리뷰가 없습니다.",
    };
}

try {
    const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/review/${reviewId}`, // 실제 리뷰 삭제 API
        {
            method: "DELETE",
        }
    );

    if(!response.ok){ throw new Error(response.statusText);

    }

    revalidateTag(`review-${bookId}`); // 페이지에 반영 review-${bookId} 태그가 있는 데이터 캐시 무효화
    return {
        status: true,
        message: "",
    };
} catch(err) {
    return {
        status: false,
        message: `리뷰 삭제에 실패했습니다: ${err}`,
    };
}

    };

    export default deleteReviewAction;

    
- delete-review-item-button에
도서 아이디와 리뷰 아이디를 props로 모두 받아온다.

    "use client";

    export default function DeleteReviewItemButton({ bookId, reviewId, }: { bookId: number; reviewId: number; }) { return (

    삭제하기
    ) }

    서버 액션을 호출할 때 formData에 포함시켜 전달할 값을 설정할 수 있다.

- div 태그를 유지해야 하는 경우 
div를 클릭했을 때 form 태그를 프로그래매틱하게 제출할 수 있다.

    const formRef = useRef<HTMLFormElement>(null);
return (
    <form ref={formRef}>
        <div onClick={() => {
            if (formRef.current) formRef.current.requestSubmit(); // useRef를 불러온다. 객체를 생성하고 변수에 저장한다.
        }}>삭제하기</div>
    
- requestSubmit 
사용자가 submit 버튼을 클릭한 것과 동일하게 동작, 유효성 검사도 정상적으로 수행한다.

- form 태그를 제출할 때 서버 액션을 호출하도록 설정 
useActionState를 사용하여 서버 액션을 호출해 리뷰를 삭제한다. 이 과정에서 로딩 상태와 에러 처리도 함께 구현한다.
    ]]>         <![CDATA[Next.js - 스트리밍, 스켈레톤 UI]]> https://velog.io/@seonguul_2/Next.js-%EC%8A%A4%ED%8A%B8%EB%A6%AC%EB%B0%8D-%EC%8A%A4%EC%BC%88%EB%A0%88%ED%86%A4-UI https://velog.io/@seonguul_2/Next.js-%EC%8A%A4%ED%8A%B8%EB%A6%AC%EB%B0%8D-%EC%8A%A4%EC%BC%88%EB%A0%88%ED%86%A4-UI Mon, 05 Jan 2026 07:41:58 GMT !!한 입 크기로 잘라 먹는 Next.js 책 스터디 내용

    스트리밍이란?

    특정 UI요소를 스트리밍 방식으로 렌더링하는 기능을 제공, 렌더링 가능한 요소부터 먼저 표시하기 때문에 사용자를 필요 이상으로 오래 기다리지 않게 할 수 있다.

    용량이 크거나 준비하는 데 오랜 시간이 걸리는 데이터를 보다 효과적으로 전송하기 위해 고안된 방식이다. 데이터를 여러 개로 나누어 조각 별로 실시간으로 전송한다.

    웹 서비스의 스트리밍

    오래 걸리는 부분과, 바로 준비되는 부분을 구분한다. 오래 걸리는 요소 -> 로딩 상태 ('로딩 중')으로 처리한다.

    초기 로딩 시간을 줄인다. 필요한 정보를 빠르게 확인할 수 있다.

    Next.js의 스트리밍 활용 사례

    앱 라우터 버전은 다이나믹 페이지를 최적화하기 위해, 사용자 경험을 향상하기 위해 스트리밍을 사용한다. 브라우저의 접속 요청에 따라 실시간으로 서버에서 생성하므로 데이터를 불러오거나 UI요소를 렌더링하는 데 시간이 걸릴 수 있다.

    다이나믹 페이지 + 스트리밍 기법 준비된 UI요소부터 사용자에게 표시, 나머지 요소는 준비되는 대로 페이지에 점진적으로 추가

    페이지 컴포넌트를 제외하고 레이아웃 및 검색 폼 컴포넌트는 브라우저가 접속 요청 시 바로 렌더링 가능하다. 루트 layout, 검색 폼 layout, 검색 폼 component 이후에 페이지 컴포넌트가 렌더링 = 지연 발생

    스트리밍 설정하기

    src/app 폴더에 loading.tsx를 생성하면 이 파일의 경로 폴더를 포함해 아래 경로의 페이지는 모두 자동으로 스트리밍 할 수 있다.

    src/util/delay.ts

    export async function delay(ms: number){
    return new Promise((resolve) => setTimeout(resolve, ms));
} // 인위적으로 delay함수를 작성한다.

    await delay(3000); 호출해서 컴포넌트의 실행을 3초간 지연한다. 스트리밍은 클라이언트의 접속 요청에 실시간으로 페이지를 생성해야 하는 다이나믹 페이지에 유용하다.

    loading.tsx파일을 이용해 스트리밍을 설정할 때 주의할 점

    - 페이지 컴포넌트만 점진적으로 렌더링할 수 있다.

    loading.tsx를 이용해 스트리밍을 설정하면 페이지 컴포넌트만 점진적으로 렌더링 페이지 컴포넌트 이외의 컴포넌트(검색 폼 컴포넌트 등)에서 비동기 데이터 호출하더라도 이 컴포넌트를 점진적으로 렌더링할 수 없다.

    = Suspense 컴포넌트를 사용하면 특정 컴포넌트 단위로 로딩 상태를 처리

    - 쿼리 스트링 변경은 스트리밍을 다시 유발하지 않는다.

    검색 페이지에서 새로운 검색어를 입력하면 스트리밍이 다시 동작 X 이미 검색 페이지에 접속한 상태라면 검색어를 변경하더라도 스트리밍이 동작하지 않아 페이지 컴포넌트의 로딩 UI가 다시 표시되지 않는다.

    Next.js의 스트리밍은 초기 접속 페이지나 페이지를 이동할 때만 활성화되므로 쿼리 스트링 변경처럼 클라이언트의 상태 업데이트에는 반응하지 않는다. = 새 검색어를 입력해도 로딩 UI는 표시되지 않은 채 준비시간이 길어지면 사용자는 불만이 생길 수 있다.

    = Suspense 컴포넌트를 사용하면 데이터로드가 다시 발생할 때 로딩 상태를 효과적으로 처리할 수 있다.

    Suspense를 이용한 스트리밍 설정

    특정 컴포넌트를 완전히 로드하기 전까지 페이지에 대체 UI를 표시하도록 한다. 이 컴포넌트를 사용하면 비동기 데이터나 외부 리소스를 불러오는 동안 '로딩 중'임을 나타내는 UI를 보여줄 수 있다.

    1) 전체 페이지에 적용

    <Suspense fallback=<div>로딩 중입니다.</div>
    <Child/> // child컴포넌트를 점진적으로 렌더링하도록 설정한다.
</Suspense>

    Child컴포넌트가 완전히 로드되기 전까지 대체 UI로 화면에 표시된다. 앱에서 페이지뿐만 아니라 다른 컴포넌트도 점진적으로 렌더링할 수 있어 로딩 UI를 세밀하게 구현할 수 있다.

    2) 인덱스 페이지 -> 다이나믹 페이지로 설정, 일부 컴포넌트에는 스트리밍 기능

    1. export const dynamic = "force-dynamic";

    2. 인덱스 페이지에서 AllBooks와 RecoBooks 컴포넌트를 Suspense로 감싸 점진적으로 렌더링하도록 설정한다.

      export default function Page() {
return (
 <div className={style.container}>
   <section>
     <h3>지금 추천하는 도서</h3>
     <Suspense fallback={<div>로딩 중 입니다...</div>}>
       <RecoBooks />
     </Suspense>
   </section>
   <section>
     <h3>등록된 모든 도서</h3>
     <Suspense fallback={<div>로딩 중 입니다...</div>}>
       <AllBooks />
     </Suspense>
   </section>
 </div>
);
}

      컴포넌트 단위로 점진적인 렌더링 설정이 가능해 스트리밍을 정교하게 구현할 수 있다.

    3. 검색 페이지에서 Suspense 컴포넌트를 사용하도록 변경

      async function SearchResult({q}: {q: String}){
 await delay(3000);
 const response = await fetch(
   `${process.env.NEXT_PUBLIC_API_URL}/book/search?q=${q}`, // 검색어 q가 달라지면 새로운 캐시 키를 생성하므로 이 요청은 별도의 데이터로 처리된다.
   { cache: "force-cache"},
 );
 if (!response.ok) throw new Error(response.statusText);

 const books: BookData[] = await response.json();

 return (
   <div>
     {books.map((book) => (
       <BookItem key={book.id} {...book} />
     ))}
   </div>
 );
}

    export default async function Page({ searchParams, }: { searchParams: Promise<{ q?: string; }>; }) { const { q } = await searchParams;

    return ( <Suspense fallback={

    검색 결과를 불러오는 중입니다...
    }> <SearchResult q={q || ""} /> ) }

    
SearchResult 컴포넌트를 만든다. 비동기 동작을 하는 컴포넌트를 감싸기 위해
로딩 UI를 불러오도록 텍스트를 렌더링한다.
쿼리 스트링을 변경하면 로딩 UI가 표시되지 않는다. = 기본적으로 페이지 이동과 초기 페이지의 접속에서만 동작하기 때문이다.

#### - Suspense 컴포넌트의 key Prop으로 key값 적용
key Prop은 리액트에서 특정 컴포넌트를 식별하기 위한 식별자
쿼리 스트링을 변경할 때마다 key값이 달라지므로 컴포넌트를 강제로 다시 렌더링

    <Suspense key={q || ""} fallback={

    검색 결과를 불러오는 중입니다...
    }>

    
= 쿼리 스트링이 변경될 때마다 기존의 Suspense를 제거하고 새로 생성하는 과정에서 로딩 UI를 다시 표시

### 스트리밍과 검색 엔진 최적화(SEO)
검색 엔진 최적화에 영향을 미치지 않는다. 검색 엔진 크롤러의 동작에서 찾을 수 있다.
점진적으로 수신된 데이터는 처리하지 않는다. 크롤러는 서버에서 모든 HTML 데이터 수신할 때까지 대기 -> 한꺼번에 처리

### 스켈레톤 UI
콘텐츠를 점진적으로 렌더링하는 동안 사용하는 스켈레톤UI 렌더링할 콘텐츠의 최종 모습을 간략히 보여 주는 로딩 UI를 말한다. = 적극적 활용

- 스켈레톤 UI 구현하기
도서 아이템의 스켈레톤 컴포넌트를 생성,

    import style from "./book-item-skeleton.module.css"; export default function BookItemSkeleton() { return (


    ); }

    
- BookItemSkeleton 컴포넌트 불러오기

    export default function Page() { return (

    지금 추천하는 도서

    {/* <Suspense fallback={
    로딩 중 입니다...
    }> /} <Suspense fallback={new Array(3).fill(0).map((, idx) => ( // 도서 아이템 스켈레톤 컴포넌트 3개 불러오도록 설정 <BookItemSkeleton key={reco-book-skeleton-${idx}} /> ))}>

    등록된 모든 도서

    <Suspense fallback={new Array(5).fill(0).map((    , idx) => ( <BookItemSkeleton key={all-book-skeleton-${idx}} /> ))}> {/     5개 렌더링하도록 설정한다. */}
    ); }

    
= 확인을 마쳤다면 delay함수를 모두 제거하기 (테스트 용도)
    ]]>         <![CDATA[Next.js - 페이지 캐시 (Server Page Cache, Client Page Cache)]]> https://velog.io/@seonguul_2/Next.js-6%EC%9E%A5-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%BA%90%EC%8B%9C-Server-Page-Cache-Client-Page-Cache https://velog.io/@seonguul_2/Next.js-6%EC%9E%A5-%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%BA%90%EC%8B%9C-Server-Page-Cache-Client-Page-Cache Mon, 05 Jan 2026 05:38:22 GMT
  • 한 입 크기로 잘라 먹는 Next.js 책 스터디 내용

    • 6장 페이지 캐시

    앱 라우터 버전에서 페이지를 캐시해 성능을 최적화하고 사용자의 요청에 빠르게 응답하는 방법을 살펴본다.

    - 서버의 페이지 캐시 (풀 라우트 캐시)

    서버와 클라이언트에서 페이지를 각각 캐시한다.

    • 풀 라우트 캐시란? next.js 서버에서 사전 렌더링 결과로 생성한 html페이지를 캐시하는 기능이다. 이 기능을 이용하면 브라우저의 접속 요청에 서버가 페이지를 다시 생성할 필요 없이 캐시 페이지로 바로 응답할 수 있어 응답 속도가 크게 향상된다.

    빌드 타임에 저장, 미리 인덱스 페이지의 생성을 요청, 인덱스 페이지에 필요한 데이터를 페칭한다. 생성이 완료된 페이지를 풀 라우트 캐시에 저장한다. 빌드 종료 후 next.js 서버가 가동되면 브라우저가 next.js 서버에서 인덱스 페이지를 요청한다. 사전 렌더링이 풀 라우트 캐시에 보관되어 있으므로 캐시가 hit 된다. next.js 서버는 페이지를 새로 생성하지 않고 캐시 페이지로 즉시 응답한다. = 응답 속도 빠름

    동적 데이터를 포함하지 않는 페이지는 자동으로 빌드 타임에 생성하고, 풀 라우트 캐시에 보관한다.

    조건 1 : 캐시되지 않는 데이터 페칭을 포함하는 페이지 데이터 캐시 옵션 cache: “no-store” 또는 next: {revalidate: 0}으로 설정된 데이터 페칭을 포함하는 페이지들이다. 요청마다 실시간으로 데이터를 불러오기 때문에 빌드 타임에 미리 캐시할 수 없다.

    조건 2 : 동적 API를 사용하는 페이지 브라우저 접속 요청과 함께 전달되는 값인 헤더, 쿠키, 쿼리 스트링을 불러오는 메서드이다. 빌드 타임에 미리 캐시할 수 없다.

    // 동적 데이터를 사용하는 컴포넌트가 하나도 없는 static page -> 빌드 타임에 미리 생성 풀 라우트 캐시에 보관 그 페이지는 풀 라우트 캐시에 보관하는 페이지(Static Page) 그렇지 않은 페이지는 (Dynamic Page)라고 한다.

    데이터 캐시나 리퀘스트 메모이제이션을 이용하면 빠른 속도로 페이지를 제공한다. 페이지 라우터와 다르게 캐시가 독립적으로 동작한다는 점이 특징이다. 내부의 특정 컴포넌트나 api요청 결과까지 개별적으로 유연하게 최적화할 수 있다.

    스태틱 페이지와 풀 라우트 캐시 확인

    인덱스 페이지는 static page (루트 레이아웃, 검색 폼, 페이지 컴포넌트) : 동적 api 사용 X dynamic page(검색, 도서상세) : 동적 api를 사용하기 때문이다. searchParams를 받고 쿼리 스트링 q에서 값을 꺼내 사용 -> 실시간 처리 동적 api 간주

    모든 페이지에서 인덱스 페이지만이 스태틱 페이지로 설정된다. 스태틱 페이지로 설정된 페이지는 빌드 타임에 미리 사전 렌더링을 진행하고, 그 결과 html 페이지를 풀 라우트 캐시에 보관한다. .next/server/app 폴더의 index.html을 클릭하면 확인할 수 있다.

    Cache: “no-store”로 캐시 옵션을 설정한다. (다이나믹 페이지) next: { revalidate: 3} -> (스태틱 페이지)

    풀 라우트 캐시 갱신하기

    풀 라우트 캐시에 보관한 페이지도 자동으로 갱신할 수 있다. 데이터 캐시를 갱신하면 해당 데이터를 사용하는 페이지도 자동으로 갱신된다. {next: { revalidate: 3}, } 을 사용하여 페이지를 Stale(상한) 상태로 설정하면 된다.

    스태틱 페이지로 설정할 수 없다면 데이터 캐시라도 적용하기

    검색 페이지는 동적 API를 사용하므로 다이나믹 페이지로 설정된다. 풀 라우트 캐시는 사용하지 못하더라도 데이터 캐시를 최대한 활용하여 성능을 최적화하는 것이 좋다.

    const response = await searchParams;
const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/book/search?q=${q}`,
    { cache: "force-cache" } // 영구적으로 캐시
    );
}

    동적 경로가 있는 페이지를 스태틱 페이지로 설정하기

    동적 경로가 있는 도서 상세 페이지를 스태틱 페이지로 설정 풀 라우트 캐시에 보관한다. Export function generateStaticParams() { return [{ id: “1” }, { id: “2” }, { id: “3” }]; // 반드시 문자열로 작성! } // 약속된 이름의 함수를 사용해 URL파라미터 값을 미리 정의하기 위해 사용

    이 함수에서 내보낸 URL파라미터와 일치하는 페이지를 Static Page로 생성 -> 풀 라우트 캐시에 보관 (페이지 라우터 버전의 getStaticPaths함수와 유사한 기능을 수행)

    build하면 (SSG) Static Site Generation로 뜨는 것을 확인할 수 있다. 풀 라우트 캐시에 보관 next/server/app/book 폴더에 저장된다.

    경로 이외의 페이지를 없는 페이지로 취급하려면 dynamicParams라는 지정된 이름의 변수를 사용해야 한다.

    export const dynamicParams = false;

    - 라우트 세그먼트 컨픽(Route Seg-ment Config)

    dynamicParams : 처럼 페이지 설정을 조절하는 변수 dynamic : 페이지의 유형을 결정 revalidate : 페이지의 갱신 주기를 설정

    generateStaticParams 함수는 서버의 사전 렌더링 과정에서 딱 한 번 동작한다. 동적 경로를 사용하는 페이지라도 빌드 타임에 미리 스태틱 페이지로 생성할 수 있다.

    export async function generateStaticParams() {
  const response = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/book`);
  if (!response.ok) throw new Error(response.statusText);

  const books: BookData[] = await response.json();
  return books.map((book) => ({
    id: String(book.id),
  }));
}

    1) /book 주소로 API를 호출, 백엔드 서버에서 도서 데이터를 모두 불러온다. 2) 문제가 있으면 예외가 발생하도록 설정한다. 3) 백엔드 서버에서 받은 응답을 JSON 형태로 변환 4) 각 도서의 id값을 문자열로 변환 -> { id: "도서 아이디" } 형태의 객체 배열 반환

    // 추가로 8개의 페이지 생성

    클라이언트의 페이지 캐시 - 라우터 캐시

    클라이언트 라우터 캐시란?

    클라이언트인 브라우저에서 페이지의 데이터를 직접 캐시하는 기능 사용자가 브라우저에서 페이지를 이동 할 때 불필요한 데이터 요청을 방지, 페이지를 빠르게 이동 할 때 불필요한 데이터 요청을 방지해 페이지를 빠르게 이동

    • client router cache의 주요 목적 브라우저에서 페이지를 이동할 때 두 페이지가 동일한 레이아웃 컴포넌트 사용하는 경우, 중복 요청을 방지 RSC Payload를 캐시해 보관하는 방법

    레이아웃과 페이지 단위로 나누어 저장한다.

    1) 레이아웃 컴포넌트 RSC Payload

    새로고침이 이루어지기 전까지 계속 재사용 된다. 동일한 레이아웃을 사용하는 페이지를 이동할 때 중복 요청을 방지한다.

    2) 페이지 컴포넌트 RSC Payload

    뒤로가기, 앞으로 가기 동작에 사용한다. 페이지 이동 과정에서 최신 데이터를 갱신할 때 사용한다.

    클라이언트 라우터 캐시 확인하기

    {new Date().toLocaleTimeString()}

    인덱스 페이지와 검색 페이지 둘 다 같은 시간으로 확인이 된다. 페이지를 이동할 때 레이아웃 컴포넌트의 불필요한 중복 호출을 방지하기 위한 목적으로 사용

    프리페칭과 클라이언트 라우터 캐시

    프리페칭한 데이터도 저장할 수 있다. 앱 라우터 버전도 페이지 라우터 버전과 마찬가지로 프리페칭 기능을 제공한다. 앱 라우터 버전에서는 JS Bundle, RSC Payload도 함께 프리페칭한다. 클라이언트 라우터 캐시에는 RSC Payload만 저장된다. = 페이지를 전환할 때 서버 요청을 최소화, 더 빠른 렌더링을 가능하게 한다.

    라우트 세그먼트 컨픽 (동적 경로의 URL 파라미터를 제한을 구현)

    특정 페이지의 동작을 명시적으로 설정하는 라우트 세그먼트 컨픽(Route Segment Config)기능을 제공한다.

    라우트 세그먼트 컨픽이란?

    특정 페이지의 캐시 유무나 갱신 등의 동작을 강제로 설정하는 Next.js의 한 기능으로 약속된 이름의 변수를 레이아웃이나 페이지 파일에서 내보내는 방식으로 설정한다.

    • 해당 페이지는 다이나믹 페이지로 강제 설정된다.
      export const dynamic = "force-dynamic"
// 다이나믹 페이지로 설정된다.
    • dynamic : 해당 페이지는 다이나믹 페이지로 강제 설정
    • dynamicParams : false로 설정하면 페이지의 URL 파라미터가 동적으로 생성되지 않도록 제한한다. 해당 페이지를 404에러 페이지로 반환한다.

    dynamic 옵션

    1. dynamic="auto" 기본값, 아무것도 설정하지 않음 Next.js가 자체적으로 판단한다.

    2. dynamic="force-dynamic" 페이지를 강제로 다이나믹 페이지로 설정한다. 동적 API나 캐시되지 않는 데이터 페칭이 없어도, 특정 페이지를 다이나믹 페이지로 설정하고 싶을 때 사ㅛㅇㅇ

    3. dynamic="force-static" 페이지를 강제로 스태틱 페이지로 설정 동적 API(쿠키, 헤더, 쿼리 스트링 등)을 사용하면 undefined로 처리된다.

    4. dynamic="error" 페이지를 스태틱 페이지로 설정 페이지에서 동적 API를 사용, 캐시되지 않는 데이터 페칭을 사용하면 빌드 에러가 발생

    ]]>         <![CDATA[Next.js - 앱 라우터 버전의 데이터 페칭]]> https://velog.io/@seonguul_2/Next.js-%EC%95%B1-%EB%9D%BC%EC%9A%B0%ED%84%B0-%EB%B2%84%EC%A0%84%EC%9D%98-%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%8E%98%EC%B9%AD https://velog.io/@seonguul_2/Next.js-%EC%95%B1-%EB%9D%BC%EC%9A%B0%ED%84%B0-%EB%B2%84%EC%A0%84%EC%9D%98-%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%8E%98%EC%B9%AD Mon, 05 Jan 2026 02:13:59 GMT - 앱 라우터 버전의 데이터 페칭

    서버 컴포넌트 도입으로 변경된 데이터 페칭 방식 라우터 버전이 갖는 한계를 극복하기 위한 것

    SSR : getServerSideProps SSG, ISR : getStaticProps

     Export async function getServerSideProps() {
    // 데이터 페칭 코드
    return { props: { … } };
}

 Export async function getStaticProps() {
    // 데이터 페칭 코드
    return { props: { … } };
}

= 불러온 데이터를 페이지 컴포넌트에 Props로 전달된다.

// 서버에서만 실행되는 코드
Export async function getServerSideProps() {
    // 데이터 페칭 코드
    return { props: { … } };
}

// 서버와 클라이언트에서 모두 실행되는 코드
 Export function Page(props) {
    return <div> … </div>;
}

    = 이러한 Props로 전달하는 방식은 문제를 만든다.

    페이지를 구성하는 컴포넌트 간 데이터를 전달하는 과정이 불필요하게 복잡해진다. Props Drilling문제

    • 서버 컴포넌트 사용하여 문제 해결
      Async function Page() {
  const dataForPage = await fetch(“…”); // 페이지 컴포넌트에 필요한 데이터 페칭
  return <Child/>;
}

    Async function Child() { const dataForChild = await fetch(“…”); // Child 컴포넌트에 필요한 데이터 페칭 return

    …
    }

    
서버 컴포넌트이기 때문에 async/await 으로 비동기적으로 가져온다.
백엔드 서버에서 


### 앱 라우터 버전에서 컴포넌트가 직접 서버에서 데이터를 가져온다.
getServerSideProps와 같은 함수를 사용할 필요 없이 컴포넌트가 필요한 데이터를 직접 가져올 수 있어 데이터 전달이 단순

### 데이터 요청을 영구적으로 보관하는 데이터 캐시

1. 데이터 캐시 : fetch  메서드로 데이터를 불러올 때 사용, fetch 메서드에서 두번째 인수로 옵션 추가

    async function RecoBooks() { try { const response = await fetch(${process.env.NEXT_PUBLIC_API_URL}/book/random, { cache: "force-cache"} // fetch 메서드로 불러온 데이터는 무조건 캐시 (영구적) );

    -> 로깅 기능을 사용하면 캐시 동작을 직관적으로 확인 가능 (cache skip)

#### - 캐시 옵션 
cache: “force-cache”  :  영구적으로 캐시하는 옵션 (주로 정적 데이터에 사용)
= 첫 번째 접속 요청일 경우 ( 캐시 miss) 가 발생한다. -> 백엔드 서버에 데이터를 요청하기 전 데이터가 있는지 확인 (cache hit)

cache: “no-store” :  요청으로 불러온 데이터를 절대 캐시하지 않고, 캐시된 데이터도 사용하지 않는다. (매번 백엔드 서버에 요청) = 매번 새로운 데이터에 사용
Next.js 15버전부터 캐시 옵션을 설정하지 않아도 된다.

next: { revalidate: 시간 } : 3으로 설정하면 3초 주기로 갱신

Next: { tags: [] } : 특정 시점의 요청 기반으로 데이터 캐시 무효화 
설정한 태그값을 이용해 특정 시점에 캐시 데이터를 갱신할 수 있다.

Ex. Next: { tags: [“a”] } “a”라는 태그를 활용해 특정 시점 데이터를 갱신, 하나의 페칭에 여러 태그 설정 가능
{ next: { revalidate: 3, tags: [“a”] }} : 특정 주기로 데이터 갱신, “a” 태그로 갱신
{ cache: “force-cache”, next: { tags: [“a”] }} : 영구적으로 캐싱된 데이터, “a”태그로 갱신

    Export async function GET() { await revalidateTag(“a”); } // revalidateTag “a” 태그와 관련된 데이터 캐시는 무효화(purge)

    
### - 요청 주소, 쿼리 파라미터, 헤더, 캐시 옵션 기준으로 구분
fetch(‘/book/‘);
fetch(‘/book/search?q=123’); // 요청 주소, 쿼리 파라미터 기준으로 별도의 캐시로 저장
fetch(“/book”, { headers: { Authorization: “Bearer token-1” }, }); 
= 데이터 캐시 확인하려면 .next에서 cache/fetch-cache 폴더 확인 

#### - Axios, ky
http 요청을 보내기 위한 라이브러리, 백엔드 서버에서 데이터 요청, 보낼 때 사용한다.
Axios : 직관적인 기능(인터셉터, 에러 처리) http요청
ky: fetch API를 기반으로 만든 가볍고 모던한 라이브러리이다. 코드가 간겨라면서 구조적이어서 읽기 쉽다.

#### - 서드파티(Firebase, Supabase, Prisma 등) 사용하는 경우
fetch메서드를 사용할 수 없는 상황이 존재 서드파티가 제공하는 메서드를 이용해 데이터를 불러와야 하기 때문
=> cache 메서드를 사용해 데이터 요청을 수동으로 메모이제이션 할 수 있다.

    Import { cache } from “react”; Export const getPosts = cache(async () => { const { data: posts } = await supabase.from(“posts”).select(); return posts; });

    Cache 인수로 함수를 받아 함수의 반환값을 캐시한다. 전달된 인수를 기준으로 이루어지며 프로그램이 종료되면 자동으로 소멸된다. 

### - 페이지를 생성할 때 중복 요청을 방지하는 리퀘스트 메모이제이션
Request Memoization 데이터 페칭 최적화 기능 
서버에서 특정 페이지를 사전 렌더링할 때 페이지에 필요한 데이터를 불러오는 요청이 중복 수행되지 않도록 최적화한다.
= 페이지를 사전 렌더링할 때만 사용된다. (중복 요청 방지)

cache: “no-store” 로 변경한다. => 새로운 데이터 불러온다.  (서버에서 확인 가능 request )

### 에러 처리
Try-catch 문 외에도 error.tsx 파일을 사용하여 에러를 감지하고 처리할 수 있다.
App폴더에 error.tsx생성 단계별로 에러 처리 (계층적 에러 처리 방식)
“Use client” 컴포넌트가 오류를 복구할 때 브라우저가 제공하는 기능 사용

force-cache를 사용하면 try-catch 예외처리 해도 error 페이지에 렌더링되지 않는다. 
// try-catch 문 지우면 가능

#### 앱 라우터 버전 -> error.tsx 파일로 발생한 오류를 일괄처리 한다. 
error를 핸들링할 때 하위의 레이아웃 파일은 모두 무시된다.
검색 폼 레이아웃도 같이 렌더링하려면 (with-searchbar) 폴더에 별도 error.tsx 파일 생성

#### 에러 메시지 확인

    "use client";

    interface Props { error: Error & { digest?: string}; }

    export default function Error({error}: Props) { console.log(error);

    return (
    <div>오류가 발생했습니다.</div>
)

    } // props의 타입을 정의 -> error 프로퍼티 포함, props로 받은 error 객체를 콘솔에 출력한다.

    
#### 에러 복구하기 
reset에 페이지에서 발생한 오류를 복구할 수 있는 함수가 있다.

    "use client";

    interface Props { error: Error & { digest?: string}; reset: () => void; }

    export default function Error({error, reset}: Props) { console.log(error);

    return (
    <>
        <div>오류가 발생했습니다.</div>
        <button onClick={() => reset()}>다시 시도</button>
    </>
)

    } // 똑같은 오류 메시지만 계속 출력된다. 

    
#### 해결 방법
- 브라우저의 새로고침 기능을 이용

    onClick = {() => { window.location.reload(); // 새로고침 하면 서버에게 초기 접속 요청을 다시 보내며, 오류 해결 }}

    - 라우터 객체를 이용 (추천)
새로고침 해도 정보가 다 날라가지 않도록
useRouter 훅 next/navigation 패키지에서 불러온다. 
Const router = useRouter();
router.refresh(); // 서버 컴포넌트 다시 실행하도록 
reset(); // 다시 시도

= 다시시도를 먼저 가동 후 서버 컴포넌트가 실행

    <button onClick={() => { startTransition(() => { // startTransition 메서드를 사용하여 간단히 해결할 수 있다. router.refresh(); // 서버 컴포넌트 다시 실행 reset(); // 다시 렌더링

    - startTransition : UI를 멈추지 않고 여유있게 업데이트 하는 기능
    ]]>         <![CDATA[React - 폰트 설정, Navigation 설정]]> https://velog.io/@seonguul_2/React-%ED%8F%B0%ED%8A%B8-%EC%84%A4%EC%A0%95-Navigation-%EC%84%A4%EC%A0%95 https://velog.io/@seonguul_2/React-%ED%8F%B0%ED%8A%B8-%EC%84%A4%EC%A0%95-Navigation-%EC%84%A4%EC%A0%95 Tue, 04 Nov 2025 06:36:30 GMT - react 에서 폰트 적용

    1) 폰트 파일 프로젝트에 추가 .ttf src/assets/fonts 폴더에 저장한다.

    2) CSS에서 폰트 불러오기 @font-face사용

      @font-face {
  font-family: "SummerFont";
  src: url("./assets/fonts/SummerFont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

    3) 컴포넌트에서 사용하기 style={{ fontFamily: 'SummerFont, sans-serif' }}

    4) 전역 스타일에 적용하기

      body {
      font-family: "SummerFont", sans-serif;
  }

    - React Router설정

    1) 설치 npm install react-router-dom

    2) 설정 App.js or 라우트 설정 파일에 라우터 구성

      // App.js
import { Routes, Route} from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

function App() {
  return (
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
  );
}

export default App;

    3) pages 폴더 각 페이지 생성

    4) components 폴더

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

export default function Navbar() {
    return (
        <nav>
            <Link to="/">Home</Link>
            <Link to="/about">About</Link>
        </nav>
    )
}
    <App>

/ 👉 <Home>

/products 👉 <AllProducts>

/products/new 👉 <NewProduct>

/products/:id 👉 <ProductDetail>

/carts 👉 <MyCart>

    5) index.js 에 BrowserRouter로 감싸주기

    import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

    - tailwindcss 추가

    npm install tailwindcss yarn add -D tailwindcss

    ]]>         <![CDATA[TypeScript - 기본 제네릭, 유틸리티 유형, 키오프, null!]]> https://velog.io/@seonguul_2/TypeScript-%EA%B8%B0%EB%B3%B8-%EC%A0%9C%EB%84%A4%EB%A6%AD-%EC%9C%A0%ED%8B%B8%EB%A6%AC%ED%8B%B0-%EC%9C%A0%ED%98%95-%ED%82%A4%EC%98%A4%ED%94%84-null https://velog.io/@seonguul_2/TypeScript-%EA%B8%B0%EB%B3%B8-%EC%A0%9C%EB%84%A4%EB%A6%AD-%EC%9C%A0%ED%8B%B8%EB%A6%AC%ED%8B%B0-%EC%9C%A0%ED%98%95-%ED%82%A4%EC%98%A4%ED%94%84-null Fri, 31 Oct 2025 05:38:32 GMT 기본 제네릭

    타입을 변수처럼 다루는 기능이다. 값이 아니라 타입을 나중에 정할 수 있게 해주는 문법

    type Example<T = string> = {
// T의 기본값은 string이다. 
    value: T;
};

const a: Example = { value: "hello" };
const b: Example<number> = {value:42};

    제네릭을 사용하는 이유

    타입을 나중에 주입할 수 있는 재사용 가능한 코드를 만드는 것이다. 코드를 한 번 작성, 다양한 타입과 함께 안전하게 사용할 수 있도록 하기 위해서이다.

    • 제네릭이 없을 때
      function getFirstString(arr: string[]): string {
  return arr[0];
}

    function getFirstNumber(arr: number[]): number { return arr[0]; }

    = 중복이 많고 유지보수가 힘들다.

- 제네릭으로 계산

    function getFirst(arr: T[]): T { return arr[0]; }

    getFirst(["a", "b"]); // string getFirst([1, 2, 3]); // number

    = 타입을 나중에 넘길 수 있음 (타입 안전한 코드 생성)


### 함수에서 기본 제네릭

    function identity<T = string>(value: T): T { return value; }

    // 제네릭을 생략 → T는 string으로 추론됨 const x = identity("hi"); // T = string

    // 명시적으로 지정 가능 const y = identity(123); // T = number

    ### 클래스에서 가능

    class Box<T = string> { content: T; constructor(content: T) { this.content = content; } }

    const strBox = new Box("Hello"); // T는 string const numBox = new Box(123); // T는 number

    
### API에서 사용

    async function fetchData(url: string): Promise { const res = await fetch(url); return res.json(); }

    interface User { id: number; name: string; }

    interface Post { id: number; title: string; }

    const user = await fetchData("/api/user/1"); const post = await fetchData("/api/post/1");

    
### TypeScript 유틸리티 유형

    let myCar: Required = {} // 객체의 모든 속성을 필수로 변경 Record : 특정 키 유형과 값 유형을 사용하여 객체 유형을 정의하는 단축키 const nameAgeMap: Record<string, number> = {} // 기록 객체 유형 정의 const bob: Omit<Person, 'age' | 'location'> = { // 객체 유형에서 키를 제거 name: 'Bob' // Omit has removed age and location from the type and they can't be defined here }; const bob: Pick<Person, 'name'> = {} //Pick 지정된 키를 제외한 모든 키를 객체 유형에서 제거 const value: Exclude<Primitive, string> = true; // Exclude 공용체에서 유형을 제거한다. const point: ReturnType = {} // ReturnType 반환 유형 const point: Parameters[0] = {} // 매개변수 유형을 배열로 추출한다. const person: Readonly = {} // Readonly읽기 전용 

    
### 키오프
객체 유형에서 키 유형을 추출하는 데 사용된다.
type PersonKeys = keyof Person;
// 결과: "name" | "age"

- 다른 타입 도구와 함께 사용된다.

    const person = { name: "Alice", age: 25 };

    // typeof로 타입 추출 type Person = typeof person;

    // keyof로 키 추출 type PersonKeys = keyof Person; // "name" | "age"

    // 인덱싱으로 값 타입 추출 type PersonValueTypes = Person[PersonKeys]; // string | number

    


### Null 및 Undefined
null TypeScript는 값을 처리하는 강력한 시스템을 갖고 있다. undefined

    let value: string | undefined | null = null; value = 'hello'; value = undefined;

    기본 유형이므로 다른 유형처럼 사용할 수 있다.

### 무효화 병합
function printMileage(mileage: number | null | undefined) 
?? 표현식에서 연산자와 함께 사용 가능하며 && 연산자를 사용하는 것과 유사하다.

### null!
null검사 오류를 강제로 무시한다.
el!.innerText = "Hello";

### 템플릿 리터럴 타입
문자열 리터럴 타입을 문자열 조합으로 만들어내는 타입 문법이다.

    type Color = "red" | "green" | "blue";

    type HexColor = #${string};

    
### 인덱스 서명 레이블
인덱스 서명에 레이블을 지정할 수 있다.
    ]]>         <![CDATA[TypeScript - Type, interface, 함수, TypeCasting, 클래스]]> https://velog.io/@seonguul_2/Type-interface-%ED%95%A8%EC%88%98-TypeCasting-%ED%81%B4%EB%9E%98%EC%8A%A4 https://velog.io/@seonguul_2/Type-interface-%ED%95%A8%EC%88%98-TypeCasting-%ED%81%B4%EB%9E%98%EC%8A%A4 Fri, 31 Oct 2025 02:05:55 GMT
  • 숫자 enum 열거형 열거형은 첫 번째 값을 초기화 0하고 각 추가 값에 1을 더한다. 각 열거형 값에 고유한 숫자 값을 할당할 수 있다. 값이 자동으로 증가하지 않는다.
    • enum Status {
    NotFound = 404, 
    Success = 200,
}

    숫자 대신 이름으로 의미를 표현할 수 있다.

    Type

    사용자 정의 이름으로 유형을 정의할 수 있다.

    type CarYear = number
type CarType = string
type CarModel = string
type Car = {
    yaer: CarYear,
    type: CarType,
    model: CarModel
}
const carYear: CarYear = 2001
const carType: CarType = "Toyota"
const carModel: CarModel = "Corolla";;;

    인터페이스

    객체의 모양을 정의하기 위해 사용된다. 객체가 어떤 속성과 타입을 가져야 하는지 약속

    interface User {
    name: string;
    age: number;
}

const user:User = {
    name: "Alice",
    age: 25
};

    = 타입 안정성, 가독성 향상, 재사용성, 확장성 인터페이스틑 서로 상속할 수 있다.

    interface vs type

    1) interface : 객체의 구조, 클래스 설계, API응답 형태 등을 표현할 때 여러 인터페이스를 상속해서 조합할 때, 외부 모듈 사용 2) 합집합, 교집합, 기본형 등을 표현할 때, 조건부 타입을 쓸 때 type ID = string | number; // 합집합 type Point = { x: number } & { y: number }; // 교집합

    type ID = string | number;  // 합집합
type Point = { x: number } & { y: number }; // 교집합

    union (합집합)

    function printStatusCode(code: string | number) {
    console.log(`My status code is ${code}.`)
}
printStatusCode(404);
printStatusCode('404');

    함수

    function getTime(): number {
    return new Date().getTime();
}

    void 반환 유형

    void함수가 아무 값도 반환하지 않음을 나타내는 데 사용할 수 있다.

    function printHello(): void {
    console.log('Hello!');
}

    매개변수

    function multiply(a: number, b: number) {
    return a * b;
}

    기본 매개변수

    function pow(value: number, exponent: number = 10) {
  return value ** exponent;
}

    나머지 매개변수

    function add(a: number, b: number, ...rest: number[]) {
  return a + b + rest.reduce((p, c) => p + c, 0);
}

    TypeCasting

    변수의 유형을 재정의 해야 하는 경우

    let x: unknown = 'hello';
console.log((x as string).length);

    • 캐스팅<>

      let x: unknown = 'hello';
console.log((<string>x).length);

    • 강제 캐스팅

      let somwValue: unknown = "hello world";
let strLength: number = (someValue as string).length;

      TypeScript 클래스

      class Person {
  name: string;
}
const person = new Person();
person.name = "Jane";

    public- (기본값) 어디에서나 클래스 멤버에 액세스할 수 있습니다. private- 클래스 내부에서만 클래스 멤버에 대한 액세스를 허용합니다. protected- 상속 섹션에서 다루는 내용에 따라 자체 및 이를 상속하는 모든 클래스에서 클래스 멤버에 대한 액세스를 허용합니다.

    매개변수 속성

    class Person {
  // name is a private member variable
  public constructor(private name: string) {}

  public getName(): string {
    return this.name;
  }
}

const person = new Person("Jane");
console.log(person.getName());

    읽기 전용 readonly

    클래스 멤버가 변경되는 것을 방지 가능

    implements 구현한다

    클래스와 인터페이스 인터페이스의 형태를 따라감(계약을 지킴)

    interface Shape {
  getArea: () => number;
}

class Rectangle implements Shape {
  public constructor(protected readonly width: number, protected readonly height: number) {}

  public getArea(): number {
    return this.width * this.height;
  }
}

    extends 상속한다.

    클래스는 클래스와 인터페이스는 인터페이스 부모의 속성과 메서드를 물려받는다. 클래스는 키워드를 통해 서로를 확장할 수 있다. extends

    class Animal {
  move() {
    console.log("동물이 움직입니다");
  }
}

class Dog extends Animal {
  bark() {
    console.log("멍멍!");
  }
}

const d = new Dog();
d.move(); // 부모 클래스의 메서드 사용 가능 ✅
d.bark();

    override

    클래스가 다른 클래스를 확장하는 경우, 같은 이름을 가진 부모 클래스의 멤버를 대체할 수 있다.

    // 이미 Rectangle 클래스가 있다고 가정
class Square extends Rectangle {
    public constructor(width: number) {
        super(width, width);
    }

    public override toString(): string {
        return `Square[width=${this.width}]`; // 대체
   }
}

    abstract

    모든 멤버를 구현하지 않고 다른 클래스의 기본 클래스로 사용될 수 있도록 작성 가능

    abstract class Polygon {
  public abstract getArea(): number;

  public toString(): string {
    return `Polygon[area=${this.getArea()}]`;
  }
}
    ]]>         <![CDATA[TypeScript - 명시적 및 추론, 널리쉬 콜레싱, 옵셔널 체이닝 Array, Tuple]]> https://velog.io/@seonguul_2/TypeScript-%EB%AA%85%EC%8B%9C%EC%A0%81-%EB%B0%8F-%EC%B6%94%EB%A1%A0-%EB%84%90%EB%A6%AC%EC%89%AC-%EC%BD%9C%EB%A0%88%EC%8B%B1-%EC%98%B5%EC%85%94%EB%84%90-%EC%B2%B4%EC%9D%B4%EB%8B%9D-Array-Tuple https://velog.io/@seonguul_2/TypeScript-%EB%AA%85%EC%8B%9C%EC%A0%81-%EB%B0%8F-%EC%B6%94%EB%A1%A0-%EB%84%90%EB%A6%AC%EC%89%AC-%EC%BD%9C%EB%A0%88%EC%8B%B1-%EC%98%B5%EC%85%94%EB%84%90-%EC%B2%B4%EC%9D%B4%EB%8B%9D-Array-Tuple Tue, 28 Oct 2025 06:28:48 GMT T(Type) : 가장 일반적으로 사용 U, V : T외에 추가적인 타입이 필요할 때 K(Key) : 객체의 키 타입을 나타낼 때 E(Element) : 리스트나 배열의 요소를 나타낼 때

    TypeScript? : 정적 타이핑을 추가한 JavaScript의 구문적 상위 집합니다.

    어떤 유형의 데이터가 전달되는지 이해 어려움 -> 함수 매개변수와 변수에 아무런 정보가 없음 코드 내에서 전달되는 데이터 유형을 지정할 수 있다. 유형이 일치하지 않을 때 오류 보고 가능

    = 코드 실행 전에 지정된 유형이 일치하는지 확인

    string = "Hello, TypeScript!";

    • 컴파일러 : npm을 통해 설치 가능 npm install typescript --save-dev npx tsc로 실행 가능

    • 컴파일러 구성 : npx tsc --init

      function greet(name: string): string {
  return `Hello ${name}!`;

    const message string = greet("world");

    
- 코드 컴파일 : npx tsc hello.ts -> node hello.js 실행

### 원시형
1) boolean 
let isActive: boolean = true;
let hasPermission = false;

2) number 
3) string
let color: string = "blue";
let fullName: string = 'John Doe';
4) bigint
5) symbol : 중복되지 않는 고유한 값
ex. 객체의 속성 이름이 겹치지 않게 하기 위해 주로 사용한다.
const ID = Symbol('id');
const user = { name: 'Alice', [ID]: 123, };
console.log(user[ID]); // 123

### 명시적 유형 및 추론

1) 명시적 타이핑 : 변수의 유형을 명시적으로 선언한다.

    // String greeting: string = "Hello, TypeScript!";

    // Number userCount: number = 42;

    // Boolean isLoading: boolean = true;

    // Array of numbers scores: number[] = [100, 95, 98];

    
2) 유형 추론 : TypeScript는 할당된 
초기값을 기반으로 변수의 유형을 자동으로 결정(추론)할 수 있다.

let username = "alice"; infers 'string'
let score = 100; // infers 'number'

    // TypeScript infers the shape of the object const user = { name: "Alice", age: 30, isAdmin: true };

    // TypeScript knows these properties exist console.log(user.name); // OK console.log(user.email); // Error: Property 'email' does not exist

    = JavaScript는 오류 없이 실행되지만 버그가 발생할 가능성이 있다.

    function add(a: number, b:number): number { return a + b; }

    - TypeScript가 유형을 유추할 수 없는 경우 
any유형 검사를 비활성화한다.
let something; // type is 'any'
something = 'hello';
something = 42;

any를 사용하면 TypeScript의 유형 검사가 비활성화된다.

### TypeScript 특수 유형

- any
TypeScript에서 가장 유연한 유형이다. 컴파일러에게 특정 변수에 대한 유형 검사를 건너뛰라고 지시하는 것이다.

1) JavaScript코드를 TypeScript로 마이그레이션할 때
2) 유형이 알려지지 않은 동적 콘텐츠로 작업할 때
3) 특정 사례에 대한 유형 검사를 거부해야 하는 경우

    let v:any = true; v = "string"; Math.round(v); // any타입으로 선언하면 에러가 발생하지 않는다.

    
- unknown 
any보다 더 안전한 **모든 값의 상위 타입이다.** 뭐가 들어올지 모르겠지만, 안전하게 다뤄야 하는 값이다.
이것은 무엇이든 될 수 있으므로 사용하기 전에 어떤 유형의 검사를 수행해야 한다.
무엇이든 될 수 있으므로 사용하기 전에 어떤 유형의 검사를 수행해야 합니다 라고 말하는 안전한 방법이다.

let value: unknown;
value = 123; //ok
value = "hello";

    let a: any = 10; let b: unknown = 10;

    a.toFixed(); // ✅ OK (위험함) b.toFixed(); // ❌ Error — b의 타입을 아직 모름

    #### 타입을 명시적으로 확인한 다음에 접근 가능하다.

= API 응답 데이터(JSON) 타입을 아직 모를 때
try/catch로 잡은 에러의 타입을 알 수 없을 때
제너릭 함수의 입력 타입이 명확하지 않을 때

    function parseJSON(input: string): unknown { return JSON.parse(input); }

    const data = parseJSON('{"name": "Alice"}');

    // data.name; ❌ 에러 (아직 unknown) if (typeof data === "object" && data !== null && "name" in data) { console.log((data as any).name); // ✅ 안전하게 접근 }

    

#### = 라이브러리나 유틸 함수에서 타입을 미리 알 수 없을 때 유용하다. 

- never
발생하지 않는 값의 유형을 나타낸다.
반환하지 않는 함수(항상 오류를 발생시키거나 무한 루프에 진입함)
유형 검사를 통과하지 못하는 유형 가드
차별받는 노조의 철저성 검사

function throwError(message: string): never {
    throw new Error(message);
}

- undefined && null
undefined변수가 선언 -> 값 할당 x
null값이나 객체 나타내지 않는 명시적 할당
활성화 -> strictNullChecks 유형 명시적으로 처리

    function greet(name?: string) { return Hello, ${name || 'stranger'}; }

    // Optional property in an interface interface User { name: string; age?: number; // Same as number | undefined }

    

- Nullish Coalescing(??) 널리쉬 콜레싱 : 주로 변수에 적용되어 사용된다.
const value = something ?? defaultValue;
something이 null 또는 undefined -> defaultValue 사용한다.
falsy값은 그대로 유지

    function getPrice(price?: number) { return price ?? 100; // price가 null/undefined이면 기본값 100 }

    
- Optional Chaining : 선택적 체이닝 주로 객체에 적용되어 사용
?.는 객체의 속성이 없거나 undefined여도 에러 없이 안전하게 접근할 수 있게 해주는 연산자이다.
null또는 undefined이면 -> undefined 반환
그렇지 않으면 -> 정상적으로 오른쪽 속성에 접근

    console.log(user?.address?.city); const user = { name: "Alice", settings: null };

    const theme = user.settings?.theme ?? "light"; console.log(theme); // "light"

    
### Array
배열을 입력하기 위한 특정 구문
const names: string[] = [];
names.push("Dylan");

- readonly 배열이 변경되는 것을 방지
const names: readonly string[] = ["Dylan"]; // push를 할 수 없다.

- TypeScript는 값이 있는 경우 배열의 유형을 추론할 수 있다.

### Tuple
각 인덱스의 길이와 유형이 미리 정의된 형식화된 배열이다.
배열의 요소가 알려진 유형의 값이 될 수 있기 때문에 유용하다.

    // define our tuple let ourTuple: [number, boolean, string];

    // initialize correctly ourTuple = [false, 'Coding God was here', 5];

    
boolean, string이 있더라도 순서가 중요하므로 오류가 발생한다. number

- readonly 초기 값에 대해서만 강력하게 정의된 유형을 갖는다.
튜플을 만드는 것이다.

    const ourReadonlyTuple: readonly [number, boolean, string] = [5, true, 'The Real Coding God']; // throws error as it is readonly. ourReadonlyTuple.push('Coding God took a day off');

    
- 명명된 튜플
각 인덱스의 값에 대한 컨텍스트 제공
const graph: [x: number, y: number] = [55.2, 41.3];

- 튜플 구조 분해
const graph: [number, number] = [55.2, 41.3];
const [x, y] = graph;
    ]]>         <![CDATA[Next.js tailwind 설치 권한 문제]]> https://velog.io/@seonguul_2/Next.js-tailwind-%EC%84%A4%EC%B9%98-%EA%B6%8C%ED%95%9C-%EB%AC%B8%EC%A0%9C https://velog.io/@seonguul_2/Next.js-tailwind-%EC%84%A4%EC%B9%98-%EA%B6%8C%ED%95%9C-%EB%AC%B8%EC%A0%9C Sat, 13 Sep 2025 00:11:04 GMT 1.

    두가지 방법대로 하면 설치가 완료된다.

    init -p는 굳이 안해도 된다. css파일에 @import "tailwindcss"; 만 선언하고 사용해도 됌

    ]]>         <![CDATA[Readme, boxshadow]]> https://velog.io/@seonguul_2/Readme-%EC%9E%91%EC%84%B1-%EC%82%AC%EC%9D%B4%ED%8A%B8 https://velog.io/@seonguul_2/Readme-%EC%9E%91%EC%84%B1-%EC%82%AC%EC%9D%B4%ED%8A%B8 Thu, 04 Sep 2025 01:26:44 GMT 1) readme.so https://readme.so/editor

    2)https://github-profile-readme-editor.netlify.app/

    3) https://www.easy-me.com/d

    easy-me

    ]]>