https://www.heropy.devRSS for NodeSat, 14 Mar 2026 23:01:00 GMThttps://www.heropy.dev/about/aboutSat, 14 Mar 2026 23:01:00 GMThttps://www.heropy.dev/s/sSat, 14 Mar 2026 23:01:00 GMThttps://www.heropy.dev/p/revOrg/p/revOrgFri, 21 Nov 2025 08:36:28 GMThttps://www.heropy.dev/p/QlwiuS/p/QlwiuSSun, 21 Jul 2024 00:00:00 GMThttps://www.heropy.dev/p/Ha29GI/p/Ha29GIWed, 15 Nov 2023 00:00:00 GMThttps://www.heropy.dev/p/AciIGD/p/AciIGDSun, 12 May 2024 00:00:00 GMThttps://www.heropy.dev/p/z9Z49c/p/z9Z49cSun, 08 Mar 2026 07:53:58 GMThttps://www.heropy.dev/p/WhqSC8/p/WhqSC8Sun, 22 Jun 2025 00:25:36 GMThttps://www.heropy.dev/p/LWIk13/p/LWIk13Wed, 15 May 2024 00:00:00 GMThttps://www.heropy.dev/p/pd8CoS/p/pd8CoSThu, 11 Dec 2025 15:44:50 GMThttps://www.heropy.dev/p/PcUkdT/p/PcUkdTSun, 08 Mar 2026 06:03:35 GMThttps://www.heropy.dev/p/QduRma/p/QduRmaFri, 11 Jul 2025 23:25:04 GMThttps://www.heropy.dev/p/MI1Khc/p/MI1KhcThu, 03 Oct 2024 00:00:00 GMThttps://www.heropy.dev/p/wc7QvJ/p/wc7QvJThu, 28 Mar 2024 00:00:00 GMThttps://www.heropy.dev/p/x8iedW/p/x8iedWSun, 10 Dec 2023 00:00:00 GMThttps://www.heropy.dev/p/CPE3zl/p/CPE3zlThu, 07 Dec 2023 00:00:00 GMThttps://www.heropy.dev/p/Bgimsk/p/BgimskThu, 11 Dec 2025 14:51:21 GMThttps://www.heropy.dev/p/Y7OrPe/p/Y7OrPeSun, 07 Apr 2024 00:00:00 GMThttps://www.heropy.dev/p/QOWqjV/p/QOWqjVWed, 25 Feb 2026 01:37:08 GMThttps://www.heropy.dev/p/QWrwz3/p/QWrwz3Mon, 30 Dec 2024 00:00:00 GMThttps://www.heropy.dev/p/bCffI2/p/bCffI2Wed, 27 Mar 2024 00:00:00 GMThttps://www.heropy.dev/p/ydKoQO/p/ydKoQOWed, 17 Jul 2024 00:00:00 GMThttps://www.heropy.dev/p/c6ROLZ/p/c6ROLZThu, 16 Nov 2023 00:00:00 GMThttps://www.heropy.dev/p/yUnC6g/p/yUnC6gSat, 21 Sep 2024 00:00:00 GMThttps://www.heropy.dev/p/6hdJi6/p/6hdJi6Sat, 24 Aug 2024 00:00:00 GMThttps://www.heropy.dev/p/NSH7aj/p/NSH7ajSat, 20 Jul 2024 00:00:00 GMThttps://www.heropy.dev/p/9tesDt/p/9tesDtWed, 21 Jan 2026 05:58:35 GMThttps://www.heropy.dev/p/zDWwNL/p/zDWwNLMon, 27 Oct 2025 10:54:26 GMThttps://www.heropy.dev/p/26YKpK/p/26YKpKSat, 11 May 2024 00:00:00 GMThttps://www.heropy.dev/p/E67ZHS/p/E67ZHSWed, 19 Mar 2025 14:34:31 GMThttps://www.heropy.dev/p/XQ4pkx/p/XQ4pkxSat, 11 Jan 2025 00:00:00 GMThttps://www.heropy.dev/p/zZIUWd/p/zZIUWdSat, 21 Jun 2025 08:36:14 GMThttps://www.heropy.dev/p/JKIAj3/p/JKIAj3Sat, 14 Dec 2024 00:00:00 GMThttps://www.heropy.dev/p/UKy78n/p/UKy78nSun, 12 May 2024 00:00:00 GMThttps://www.heropy.dev/p/zZdlXx/p/zZdlXxSat, 07 Sep 2024 00:00:00 GMThttps://www.heropy.dev/p/ijqX9h/p/ijqX9hSat, 25 Nov 2017 00:00:00 GMThttps://www.heropy.dev/p/qzeuNi/p/qzeuNiFri, 07 Feb 2020 00:00:00 GMThttps://www.heropy.dev/p/arpi5F/p/arpi5FSun, 15 Jun 2025 11:34:05 GMThttps://www.heropy.dev/p/HZaKIE/p/HZaKIEMon, 08 Dec 2025 08:58:01 GMThttps://www.heropy.dev/p/n7JHmI/p/n7JHmIThu, 11 Dec 2025 13:49:07 GMThttps://www.heropy.dev/p/OidQSe/p/OidQSeMon, 05 Aug 2024 00:00:00 GMThttps://www.heropy.dev/p/XLGqke/p/XLGqkeSat, 04 Nov 2023 00:00:00 GMThttps://www.heropy.dev/p/IURkhb/p/IURkhbMon, 01 Dec 2025 13:35:56 GMThttps://www.heropy.dev/p/2Hstmu/p/2HstmuSat, 07 Jun 2025 08:04:33 GMThttps://www.heropy.dev/p/N6phSt/p/N6phStSun, 03 Dec 2023 00:00:00 GMThttps://www.heropy.dev/p/0pVrDl/p/0pVrDlThu, 18 Jul 2024 00:00:00 GMThttps://www.heropy.dev/p/5PlGxB/p/5PlGxBSat, 06 Jan 2024 00:00:00 GMThttps://www.heropy.dev/p/xCoQJR/p/xCoQJRSat, 22 Mar 2025 11:13:57 GMThttps://www.heropy.dev/p/Zr4RfI/p/Zr4RfIFri, 15 Dec 2023 00:00:00 GMThttps://www.heropy.dev/p/OBQx3v/p/OBQx3vSat, 21 Dec 2024 00:00:00 GMThttps://www.heropy.dev/p/71PGfA/p/71PGfATue, 09 Jul 2024 00:00:00 GMThttps://www.heropy.dev/p/aBLqC5/p/aBLqC5Sun, 15 Sep 2024 00:00:00 GMThttps://www.heropy.dev/p/n74Tgc/p/n74TgcFri, 17 Oct 2025 13:04:21 GMThttps://www.heropy.dev/p/B74sNE/p/B74sNETue, 10 Mar 2026 13:16:05 GMThttps://www.heropy.dev/p/6iFzkB/p/6iFzkBMon, 08 Dec 2025 11:35:15 GMThttps://www.heropy.dev/p/EdhHX2/p/EdhHX2Sun, 09 Nov 2025 02:09:32 GMThttps://www.heropy.dev/p/eU4fA8/p/eU4fA8Sat, 07 Dec 2024 00:00:00 GMThttps://www.heropy.dev/p/mJAAl7/p/mJAAl7Fri, 29 Aug 2025 00:22:30 GMThttps://www.heropy.dev/p/5Gl8hX/p/5Gl8hXWed, 15 May 2024 00:00:00 GMThttps://www.heropy.dev/p/bVoDlS/p/bVoDlSThu, 05 Mar 2026 08:34:41 GMThttps://www.heropy.dev/p/bdPf3j/p/bdPf3jTue, 03 Jun 2025 10:54:59 GMThttps://www.heropy.dev/s/77/s/77Fri, 07 Mar 2025 00:50:00 GMT

제품명	영향받는 버전	해결 버전
react-server-dom-parcel react-server-dom-webpack react-server-dom-turbopack	19.0	19.0.3
	19.1.0 ~ 19.1.1	19.1.4
	19.2.0	19.2.3
next	14.x, >=13.3	14.2.35
	15.0.x	15.0.7
	15.1.x	15.1.11
	15.2.x	15.2.8
	15.3.x	15.3.8
	15.4.x	15.4.10
	15.5.x	15.5.9
	16.0.x	16.0.10

```bash --caption=React 관련 패키지 업데이트 npm update react-server-dom-webpack react-server-dom-parcel react-server-dom-turbopack ``` ```bash --caption=Next.js 업데이트 npm i next@latest # 또는 npx fix-react2shell-next ``` - [Denial of Service and Source Code Exposure in React Server Components](https://react.dev/blog/2025/12/11/denial-of-service-and-source-code-exposure-in-react-server-components) - [Next.js Security Update: December 11, 2025](https://nextjs.org/blog/security-update-2025-12-11)]]>https://www.heropy.dev/s/86/s/86Mon, 15 Dec 2025 07:04:56 GMT import { ref, computed } from 'vue' import { useQuery, useQueryClient } from '@tanstack/vue-query' import type { UseQueryOptions } from '@tanstack/vue-query' type Movies = Movie[] interface Movie { imdbID: string Title: string Poster: string Year: string } const inputText = ref('') // input 요소와 연결해 지속적으로 변경 const searchText = ref('') // 검색할 때만 변경 const queryOptions = computed(() => { return { queryKey: ['movies', searchText.value], queryFn: async () => { const res = await fetch(`https://omdbapi.com?apikey=7035c60c&s=${searchText.value}`) const { Search: movies = [] } = await res.json() return movies as Movies }, staleTime: 1000 * 60 * 60, // 1시간 캐시 placeholderData: prev => prev, // 이전 데이터를 대기 데이터로 사용(깜빡임 방지) enabled: !!searchText.value // 검색어가 없으면 실행하지 않음 } satisfies UseQueryOptions }) console.log(queryOptions) // ComputedRef console.log(queryOptions.value) // 쿼리 옵션 값 const queryClient = useQueryClient() const { data, isFetching } = useQuery(queryOptions) // ComputedRef 객체를 전달 async function fetchMovies() { searchText.value = inputText.value // 입력된 문자를 검색어로 반영 if (!searchText.value.trim()) return // fetchQuery는 캐시된 데이터를 사용하거나 없으면 새 데이터를 가져옴! await queryClient.fetchQuery(queryOptions) // ComputedRef 객체를 전달 } ```]]>https://www.heropy.dev/s/83/s/83Sat, 05 Jul 2025 05:46:04 GMThttps://www.heropy.dev/s/67/s/67Thu, 30 Jan 2025 22:26:27 GMThttps://www.heropy.dev/s/50/s/50Wed, 15 Jan 2025 08:23:52 GMT { console.log('Backspace key!') return false // 다음 동작으로 넘어가 텍스트를 삭제할 수 있습니다. } }, { key: 'Enter', run: () => { console.log('Enter key!') return true // 다음 동작으로 넘어가지 않아 줄 바꿈되지 않습니다. } } ]) ) ] }) ``` 만약 각 키맵의 `run` 함수에서 `true`를 반환하면 다음 동작으로 넘어가지 않아 기본 키맵을 비활성화할 수 있습니다. 반면에 `false`를 반환하면 다음 동작으로 넘어가 기본 키맵과 조합해서 사용할 수 있습니다. ]]>https://www.heropy.dev/s/76/s/76Sun, 02 Mar 2025 08:07:24 GMThttps://www.heropy.dev/s/84/s/84Wed, 05 Nov 2025 07:22:39 GMThttps://www.heropy.dev/s/79/s/79Mon, 17 Mar 2025 02:25:30 GMT ({ increase: () => set(state => ({ count: state.count + 1 })) }) ), { name: 'count' } ) ) ``` /// message-box --icon=info Zustand의 전반적인 사용 방법은 [Zustand 핵심 정리](https://www.heropy.dev/p/n74Tgc)를 참고하세요! /// #### storage 기본의 [로컬 스토리지(`localStorage`)](https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage)가 아닌 세션 스토리지나 IndexedDB 등의 다른 스토리지를 사용할 수 있습니다. 만약 새로운 나만의 스토리지를 원하면, `StateStorage` 인터페이스와 일치하는 객체를 `createJSONStorage` 헬퍼 함수를 통해 반환하면 됩니다. ```ts --path=/node_modules/zustand/esm/middleware/persist.d.mts --caption=StateStorage 인터페이스 export interface StateStorage { getItem: (name: string) => string | null | Promise; setItem: (name: string, value: string) => unknown | Promise; removeItem: (name: string) => unknown | Promise; } ``` ```ts --path=/src/store/count.ts // ... export const useCountStore = create( persist( // combine(), { name: 'count', storage: createJSONStorage(() => sessionStorage) // 세션 스토리지 사용 } ) ) ``` #### Partialize 모든 상태를 스토리지에 저장하지 않고 원하는 상태만 저장하려면, `partialize` 옵션을 사용해 저장할 상태만 포함하는 객체를 반환합니다. 팩토리 함수이므로 저장 시 상태를 가공할 수 있지만, 리하이드레이션(Rehydration) 전까지는 현재 상태(`currentState`)와 스토리지 상태(`persistedState`)가 다를 수 있습니다. 하이드레이션에 대해서는 다음 옵션에서 설명합니다. ```ts --path=/src/store/count.ts // ... export const useCountStore = create( persist( // combine(), { name: 'count', partialize: currentState => ({ count: currentState.count // count 속성만 스토리지에 저장! }) } ) ) ``` #### onRehydrateStorage `onRehydrateStorage` 옵션은 스토리지가 하이드레이션(Hydration)되면 실행되는 함수입니다. 하이드레이션 직후에 처리해야 하는 로직을 작성할 수 있으며, `onRehydrateStorage`의 `state` 매개변수는 액션을 포함합니다. /// message-box --icon=info Zustand에서 **하이드레이션(Hydration)** 은 스토리지에 저장된 상태를 현재 상태와 병합하는 프로세스를 말합니다. `useCountStore.persist.rehydrate()` 메소드를 통해 수동으로도 언제든지 다시 하이드레이션(Rehydration)할 수 있습니다. 스토리지 상태를 현재 상태로 병합한다고 이해하면 쉽습니다. /// ```ts --path=/src/store/count.ts // ... export const useCountStore = create( persist( // combine(), { name: 'count', onRehydrateStorage: state => { console.log('스토리지 상태와 병합 완료!', state) } } ) ) ``` #### skipHydration `skipHydration` 옵션을 사용해 최초 하이드레이션을 건너뛸 수 있습니다. `useCountStore.persist.rehydrate()` 메소드를 통해 수동으로 리하이드레이션 할 수 있습니다. ```ts --path=/src/store/count.ts --caption=스토리지 상태를 하이드레이션 하지 않음. // ... export const useCountStore = create( persist( // combine(), { name: 'count', skipHydration: true } ) ) ``` ```tsx --path=/src/components/RehydrateButton.tsx --caption=버튼을 선택해 하이드레이션. import { useCountStore } from './store/count' export default function RehydrateCountStore() { return ( useCountStore.persist.rehydrate()}> Rehydrate! ) } ``` #### version 이미 스토리지에 저장된 데이터와 크게 다른 변경 사항을 도입하는 경우, 새로운 버전을 숫자로 지정해서 버전이 일치하지 않는 스토리지 데이터가 사용되지 않도록 할 수 있습니다. 만약 기존 버전을 무시하는 것이 아니라 활용해야 한다면, 다음에 설명하는 `migrate` 옵션을 사용할 수도 있습니다. ```ts --path=/src/store/count.ts // ... export const useCountStore = create( persist( // combine(), { name: 'count', version: 1 // 기본값: 0 } ) ) ``` #### migrate 하이드레이션 될 때 현재 상태의 버전이 스토리지의 버전과 다른 경우에 `migrate` 함수가 실행됩니다. 함수는 최신 버전과 일치하는 타입의 상태를 반환해야 하며, 스토리지의 데이터를 활용해야 하나 구조나 이름이 변경되었을 때 유용합니다. ```ts --path=/src/store/count.ts import { create } from 'zustand' import { combine, persist } from 'zustand/middleware' interface StateVersion0 { count: number double: number } interface StateVersion1 { amount: number multiplier: number max: number } export const useCountStore = create( persist( combine( { amount: 0, multiplier: 0 }, set => ({ increase: () => set(state => ({ amount: state.amount + 1 })) }) ), { name: 'count', version: 1, migrate: (persistedState, version) => { if (version === 0) { const oldState = persistedState as StateVersion0 const newState: StateVersion1 = { amount: oldState.count, multiplier: oldState.double, max: 100 } return newState } return persistedState } } ) ) ``` #### merge `merge` 옵션은 하이드레이션 될 때 스토리지 상태를 현재 상태와 병합하는 방식을 지정할 수 있습니다. 기본적으로 스토리지와 현재의 상태는 얕은 병합(Shallow Merge)이 이뤄지지만, 깊은 병합(Deep Merge)이 필요한 경우 Lodash의 `merge` 함수를 사용할 수 있습니다. `migrate` 함수보다 나중에 실행되며(두 옵션 모두 지정한 경우), `migrate` 함수가 반환하는 값을 첫 번째 매개변수(`persistedState`)로 받습니다. ```bash --caption=깊은 병합이 필요한 경우 Lodash 설치 npm i lodash-es npm i -D @types/lodash-es ``` ```ts --path=/src/store/count.ts // ... import { merge } from 'lodash-es' export const useCountStore = create( persist( // combine(), { name: 'count', merge: (persistedState, currentState) => { return merge(currentState, persistedState) // 현재 상태와 스토리지 상태를 깊은 병합 } } ) ) ``` ]]>https://www.heropy.dev/s/70/s/70Sun, 02 Feb 2025 06:58:25 GMT [Differences Between Type Aliases and Interfaces](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#differences-between-type-aliases-and-interfaces) - > For the most part, you can choose based on personal preference, and TypeScript will tell you if it needs something to be the other kind of declaration. If you would like a heuristic, use interface until you need to use features from type. 정리하자면, `interface`와 `type` 키워드는 개인적인 선호나 상황에 따라 선택하되, 굳이 기준을 제시하자면 `type`이 필요한 상황이 되기 전에는 `interface`를 사용하라는 것입니다. 위 내용과 별개로도 저는 객체 타입을 정의할 때 주로 `interface`를 사용하는데, 가장 큰 이유는 선언 병합이 가능하기 때문입니다. 선언 병합(Declaration Merging)은 같은 이름의 `interface`를 여러 번 선언하면 하나로 병합되어 확장되는 것을 말합니다. ```ts --caption=선업 병합 interface User { name: string } interface User { age: number } const user: User = { name: 'Neo', age: 85 } ``` 그래서 기존에 인터페이스로 선언된 객체 타입에 새로운 속성을 추가할 때 유용합니다. 예를 들면, 다음과 같이 전역 객체에 원하는 속성을 추가할 수 있습니다. ```ts --path=/types/global.d.ts --line-active=3 --caption=Window 객체에 커스텀 속성 추가 declare global { interface Window { hello?: string } } ``` ```ts window.hello = 'Hello world!' ``` 그리고 사용하는 라이브러리를 직접 수정하지 않고도 인터페이스로 정의된 특정 객체 타입을 확장할 수 있습니다. ```ts --path=/types/axios.d.ts --caption=라이브러리에 커스텀 속성 추가 import 'axios' declare module 'axios' { interface AxiosRequestConfig { hello?: string } } ``` ```ts --line-active=4 --caption=커스텀 속성 추가 import axios from 'axios' axios({ hello: 'Hello world!', }) ``` 예를 들어 [Vue](https://vuejs.org/)는 컴포넌트에서 사용하는 전역 속성을 추가할 때, 컴포넌트 타입을 직접 수정하는 대신 별도로 제공되는 [ComponentCustomProperties](https://vuejs.org/api/utility-types#componentcustomproperties) 타입을 통해 확장합니다. 복잡한 기존 타입의 직접 수정은 예기치 않은 문제를 일으킬 수 있기 때문에 기존 타입을 유지하면서 새로운 속성을 추가하는 방법을 제공하는 것입니다. 직접 라이브러리를 만들 때도 보다 안전한 타입을 제공하는 유용한 방법입니다. ```ts --path=/types/vue.d.ts --caption=Vue 컴포넌트에 전역 속성 추가 import axios from 'axios' declare module 'vue' { interface ComponentCustomProperties { $http: typeof axios $translate: (key: string) => string } } ``` ```vue --line-active=2,3 --caption=전역 속성 사용 ``` 이런 이유 등으로 저는 객체 타입을 정의할 때 `interface` 키워드 사용을 추천합니다. 물론 명확한 이유나 상황이 없다면 개인적인 선호는 충분히 다를 수 있습니다. ]]>https://www.heropy.dev/s/65/s/65Fri, 24 Jan 2025 10:42:40 GMT 계정 및 백업 > 계정 관리](https://somwpkzlplaovldnfahk.supabase.co/storage/v1/object/public/heropy.dev_shorts/53/5l3V "--800x961") 보유한 계정(메일) 목록에서 삭제할 메일을 선택하고 삭제합니다.  ]]>https://www.heropy.dev/s/53/s/53Mon, 20 Jan 2025 03:23:29 GMT ``` `upgrade-insecure-requests`는 CSP(Content-Security-Policy)의 지시어(Directive)로, 웹 페이지 내의 모든 HTTP 요청(이미지, 스크립트, API 등)을 자동으로 HTTPS로 업그레이드하도록 브라우저에 지시합니다. 만약 HTTPS로 제공되는 웹 페이지에서 HTTP 리소스를 로드하면 XSS, MITM, 데이터 가로채기 등의 보안 취약점을 유발할 수 있으므로, 대부분의 브라우저에서는 이를 차단하거나 혼합 콘텐츠(Mixed Content) 경고를 발생시킵니다. 이때 HTTP 리소스 요청을 자동으로 HTTPS로 변환하면 혼합 콘텐츠 문제를 쉽게 해결할 수 있습니다. /// message-box --icon=error `block-all-mixed-content` 지시어를 사용하는 혼합 콘텐츠 차단 기능은 지원 중단되었으며, `upgrade-insecure-requests` 지시어와 충돌합니다. /// 개발 환경에서는 기본적으로 `http://localhost:5173` 같이 HTTP 주소를 사용합니다. `upgrade-insecure-requests` 지시어를 사용하면 이런 로컬 개발 서버도 HTTPS로 리다이렉트해야 하는데, Chrome이나 Firefox 등의 일반적인 브라우저는 예외 처리를 통해 HTTP 요청도 정상적으로 동작할 수 있습니다. 그런데 대표적으로 Safari 브라우저는 이런 예외 처리를 하지 않으며, 엄격하게 HTTP 요청을 HTTPS로 리다이렉트 시도합니다. 따라서 `http://localhost` 주소가 `https://localhost`로 리다이렉트 되면, HTTPS를 지원하지 않는 로컬 개발 서버로는 접근할 수 없게 됩니다.  이 문제를 해결하는 간단한 방법은 로컬 개발 환경에서는 Upgrade Insecure Requests 지시어를 사용하지 않도록 제거하는 것입니다. 지시어를 프로덕션 환경에서만 사용하도록 환경 변수 등을 활용해 조건부 적용합니다. __Vite 구성 예시__ 빌드 타임에 조건부로 CSP 메타 태그를 주입합니다. ```bash npm i -D vite-plugin-html ``` ```ts --path=/vite.config.ts import { defineConfig } from 'vite' import { createHtmlPlugin } from 'vite-plugin-html' const tags = [] if (process.env.NODE_ENV === 'development') { tags.push({ tag: 'meta', attrs: { httpEquiv: 'Content-Security-Policy', content: 'upgrade-insecure-requests' } }) } export default defineConfig({ plugins: [ createHtmlPlugin({ inject: { tags } }) ] }) ``` __Next.js 구성 예시__ 모든 경로 요청에 대해 CSP 헤더를 추가합니다. ```ts --path=/next.config.ts import type { NextConfig } from 'next' const nextConfig: NextConfig = { async headers() { return [ { source: '/:path*', headers: [ { key: 'Content-Security-Policy', value: process.env.NODE_ENV === 'production' ? 'upgrade-insecure-requests' : '' } ] } ] } } export default nextConfig ``` __Sveltekit 구성 예시__ 애플리케이션에서 조건부로 CSP 메타 태그를 추가합니다. ```svelte --path=/app/routes/+layout.svelte {#if !dev} {/if} ``` __HTTPS 개발 서버 구성 예시__ 처음 로컬 Vite 개발 서버를 실행하면 비밀번호를 입력하라는 메시지가 표시될 수 있으며, 시스템 및 브라우저에 로컬 인증서가 설치됩니다. 이후로는 `https://localhost`으로 접근할 수 있습니다. ```bash npm i -D vite-plugin-mkcert ``` ```ts --path=/vite.config.ts import { defineConfig } from 'vite' import mkcert from 'vite-plugin-mkcert' export default defineConfig({ plugins: [ mkcert() ] }) ``` ]]>https://www.heropy.dev/s/85/s/85Sat, 29 Nov 2025 05:00:07 GMThttps://www.heropy.dev/s/48/s/48Sun, 12 Jan 2025 00:07:23 GMT 디자이너와 정부 관계자뿐만 아니라 개발자도 활용할 수 있도록 다양한 컴포넌트와 바로 복사해 사용할 수 있는 코드까지 제공하므로, 공공 서비스나 신뢰감이 중요한 서비스 개발에 많은 도움이 될 것입니다. 폰트는 [Pretendard GOV](https://github.com/orioncactus/pretendard/tree/main/packages/pretendard-gov)를 사용합니다.  디자인 스타일, 컴포넌트, 기본 패턴, 서비스 패턴의 KRDS 문서를 꼭 읽어 보세요. 웹 개발 입문자뿐만 아니라 전문가에게도 유용한 내용이 담겨 있습니다. [디자인 스타일](https://www.krds.go.kr/html/site/style/style_01.html)은 색상, 타이포그래피, 형태, 레이아웃, 아이콘 등을 체계적으로 정의합니다.  [컴포넌트](https://www.krds.go.kr/html/site/component/component_summary.html)는 버튼, 입력 필드 등 공통 UI 요소의 특성과 상태, 역할을 정리하고 사용성 및 접근성 가이드를 제공합니다.  [기본 패턴](https://www.krds.go.kr/html/site/global/global_summary.html)은 자주 사용되는 UI 요소들의 적용 가이드입니다. _"사용자가 입력할 수 있는 모든 문자의 입력과 표시를 지원한다."_ 같은 기준으로 모범 사례와 피해야 할 사례 등의 사용성을 설명합니다.  [서비스 패턴](https://www.krds.go.kr/html/site/service/service_summary.html)은 사용자 기반의 경험 설계 가이드로, 주요 과업별로 최적의 UX를 제시하고 필수, 권장, 우수로 적용 수준을 나눠 가이드를 제공합니다. ]]>https://www.heropy.dev/s/68/s/68Fri, 31 Jan 2025 09:02:00 GMT대규모 데이터를 처리할 때 저장 공간을 좀 더 절약할 수 있습니다. `int4` | `Int` | `number` | 가장 보편적인 범위의 정수 값(`-2,147,483,648` ~ `+2,147,483,647`)입니다. `int8` | `BigInt` | `bigint` | 매우 큰 범위의 정수 값(`-9,223,372,036,854,775,808` ~ `+9,223,372,036,854,775,807`)입니다.
대량 데이터의 ID, 조회수, 큰 금액 등 값이 범위가 매우 커야 하는 경우에 사용합니다. `float4` | `Float` | `number` | 소수점 아래 6자리까지의 정확도를 제공하는 부동소수점 값입니다.
메모리 효율성이 중요하거나 온도, 좌표 같은 높은 정밀도가 필요하지 않은 경우에 사용합니다. `float8` | `Float` | `number` | 소수점 아래 15자리까지의 정확도를 제공하는 부동소수점 값입니다.
과학 계산, 항공 데이터 등의 보다 정밀한 계산이 필요한 경우에 사용합니다. `numeric` | `Decimal` | `Decimal` | 금융 거래나 회계 계산처럼 오차가 허용되지 않는 완벽한 정확도를 요구하는 십진수 계산이 필요한 경우에 사용합니다.
상대적으로 처리 속도가 느립니다. `json` | `Json` | `Prisma.JsonValue` | 구조화된 JSON 데이터를 문자열로 저장합니다.
데이터를 처리할 때마다 파싱해야 하므로 단순 저장이 아닌 이상 `jsonb` 사용을 추천합니다. `jsonb` | `Json` | `Prisma.JsonValue` | JSON 데이터를 바이너리 형태로 저장합니다.
처리 속도가 빠르고 인덱싱이 가능해 데이터 검색이나 수정이 자주 필요한 경우에 유용합니다. `text` | `String` | `string` | 긴 텍스트, 게시글 내용 등 길이 제한이 없는 문자열입니다. `varchar` | `String` | `string` | 사용자 이름, 이메일 등 길이가 제한적인 문자열입니다.
길이 제한을 확인하는 과정에서 약간의 오버헤드가 발생할 수 있으므로 대부분의 경우 `text` 사용을 추천합니다. `uuid` | `String` | `string` | 범용 고유 식별자를 저장합니다.
고유한 ID가 필요한 경우에 사용하며 32자리의 16진수로 구성됩니다. `date` | `DateTime` | `Date` | 시간 정보를 제외한 날짜를 저장하며 생년월일, 기념일 등을 다룰 때 사용합니다.
`timestamptz` 사용을 추천합니다.
예시) `2025-12-16` => `2025-12-16T00:00:00.000Z` `time` | `DateTime` | `Date` | 날짜 정보를 제외한 시간만을 저장하며 영업 시간, 일과 시간 등을 다룰 때 사용합니다.
`timestamptz` 사용을 추천합니다.
예시) `08:10:28` => `1970-01-01T08:10:28.000Z` `timetz` | `DateTime` | `Date` | 시간과 시간대(Time Zone) 정보를 함께 저장합니다.
`timestamptz` 사용을 추천합니다.
예시) `08:10:28+00` => `1970-01-01T08:10:28.000Z` `timestamp` | `DateTime` | `Date` | 날짜와 시간을 함께 저장하며 이벤트 발생 시각, 데이터 생성/수정 시각 등을 다룰 때 사용합니다.
`timestamptz` 사용을 추천합니다.
예시) `2025-01-15 08:10:28.000` => `2025-01-15T08:10:28.000Z` `timestamptz` | `DateTime` | `Date` | 날짜, 시간, 시간대(Time Zone) 정보를 모두 저장합니다.
글로벌 서비스에서 시간대를 고려해야 하는 경우에 사용하며 가장 추천하는 방식입니다.
예시) `2025-01-15 08:10:28.000+00` => `2025-01-15T08:10:28.000Z` `bool` | `Boolean` | `boolean` | 참/거짓의 불린 값을 저장합니다. ]]>https://www.heropy.dev/s/51/s/51Thu, 16 Jan 2025 00:35:27 GMThttps://www.heropy.dev/s/69/s/69Wed, 19 Mar 2025 12:50:39 GMT`.ts`, `.tsx`, `.d.ts` 확장자 생략이 가능하며, `allowJS: true`인 경우 `.js`, `.jsx` 추가 | | extends | - | 상속할 다른 TS 구성 | | compilerOptions | - | 컴파일러 옵션 지정 | ##### CompilerOptions `CompilerOptions`에서 사용할 수 있는 주요 세부 옵션을 정리했습니다. ```json --caption=compilerOptions 예시 { "compilerOptions": { "target": "ES2015", "module": "ESNext", "moduleResolution": "Node", "jsx": "preserve", "strict": true, "esModuleInterop": true, "lib": ["ESNext", "DOM"] } } ``` | 옵션 | 기본값 | 설명 | | --- | --- | --- | | target | `"ES3"` | 컴파일될 ES 버전 명시. | lib | - | 컴파일에서 사용할 라이브러리 지정. | module | `"CommonJS"` | 모듈 시스템 지정. | moduleResolution | `"Node"` | 모듈 해석 방식 지정.
`"NodeNext"`는 `exports` 필드나 조건적 해석을 지원.
`"bundler"`는 Vite, Webpack 등의 번들러에 맞춘 해석 방식. | | esModuleInterop | `false` | ESM 모듈 방식 호환성 활성화. | isolatedModules | `false` | 모든 파일을 모듈로 컴파일, `import` 혹은 `export`가 없는 경우 에러. | moduleDetection | - | 모듈 감지 방식 지정.
`"force"`는 모든 파일을 모듈로 강제해 전역 스코프 충돌 방지. | | allowSyntheticDefaultImports | `true` | 기본 내보내기(`export default`)가 없는 모듈에서 기본 가져오기 가능. | | allowImportingTsExtensions | `false` | `.ts`, `.tsx` 확장자를 가진 파일을 `import` 문에서 직접 사용 가능. | | baseUrl | - | 모듈 해석에 사용할 기준 경로 지정. | | paths | - | 모듈 해석에 사용할 경로 별칭 지정. | | types | - | 컴파일러가 참조할 `@types` 패키지의 목록을 지정하며, 명시되지 않으면 무시. | | typeRoots | `["./node_modules/@types"]` | 컴파일러가 참조할 타입 선언(`.d.ts`)의 경로 목록을 지정, 명시되지 않으면 무시. | | allowJS | `false` | JS 파일 컴파일 허용. | | checkJs | `false` | `.js` 파일의 오류 보고 여부.
`allowJS`가 `true`일 때만 유효. | | jsx | `"preserve"` | JSX 지정.
`"react-jsx"`는 React 17+의 새로운 JSX Transform 방식으로 컴파일. | | declaration | `true` | 모든 TS(JS) 파일의 타입 정보를 포함한 선언 파일(`*.d.ts`) 생성 여부. | | declarationMap | `false` | `.d.ts` 파일과 함께 소스 코드 매핑 파일(`.d.ts.map`) 생성 여부.
디버깅 시 소스 코드 이동에 유용. | | sourceMap | `false` | 소스맵 파일 생성 여부.
디버깅 도구 등에서 JS 파일의 원본 TS 파일 표시 가능. | | noEmit | `false` | 컴파일 후 출력 파일(`.js`, `.d.ts` 등)을 생성하지 않음.
타입 체크만 수행할 때 사용. | | skipLibCheck | `false` | `.d.ts` 파일의 타입 검사를 건너뜀.
서드파티 라이브러리 오류 무시 및 빌드 속도 향상. | | strict | `false` | 더 엄격한 타입 검사 활성화.
모든 엄격 옵션(`noImplicitAny`, `strictNullChecks` 등)을 포함. | | noImplicitAny | `false` | (strict) 암시적 `any` 타입 검사 활성화. | | noImplicitThis | `false` | (strict) 암시적 `this` 타입 검사 활성화. | | strictNullChecks | `false` | (strict) 엄격한 `null`, `undefined` 타입 검사 활성화. | | strictFunctionTypes | `false` | (strict) 엄격한 함수의 매개변수 타입 검사 활성화. | | strictPropertyInitialization | `false` | (strict) 엄격한 클래스의 속성 초기화 검사 활성화. | | strictBindCallApply | `false` | (strict) 엄격한 `bind`, `call`, `apply` 메서드의 인수 검사 활성화. | | noUnusedLocals | `false` | 사용되지 않는 지역 변수가 있을 경우 오류 발생. | noUnusedParameters | `false` | 사용되지 않는 함수 매개변수가 있을 경우 오류 발생. | noFallthroughCasesInSwitch | `false` | 논리 오류 방지를 위해 `switch` 문의 `case` 블록이 다음 `case`로 넘어가는 Fall-Through 금지. | | noUncheckedIndexedAccess | `false` | 객체의 인덱스 접근 시 `undefined` 가능성을 타입에 반영. | noUncheckedSideEffectImports | `false` | 모듈의 부수 효과를 유발하는 `import`가 체크되지 않을 경우 오류 발생.
타입 안전성 강화(TypeScript 5.0+). | | useDefineForClassFields | `false` | 클래스 필드 선언 시 ECMAScript 표준(`defineProperty`) 동작을 따름.
`target: "ES2022"` 이상에서 기본값 `true`. | | resolveJsonModule | `false` | `.json` 파일을 모듈로 가져오기 허용. | | tsBuildInfoFile | `.tsbuildinfo` | 증분 컴파일(이전 컴파일 결과에서 변경된 부분만 다시 컴파일) 시 `.tsbuildinfo` 파일의 경로 지정. | | verbatimModuleSyntax | `false` | ES 모듈(ECMAScript Modules) 구문을 보다 엄격하고 정확하게 해석 | ]]>https://www.heropy.dev/s/80/s/80Sun, 22 Jun 2025 15:05:11 GMT