프론트엔드 개발자 블로그. 웹 개발 경험과 지식을 공유합니다.https://raincoat98.github.io/ko-KRhttps://raincoat98.github.io/database/oracle-sql-guide/https://raincoat98.github.io/database/oracle-sql-guide/Oracle SQL을 처음 배우는 사람부터 현업 개발자까지 쓸 수 있는 완전 가이드. 개념 → 문법 → 예시 → 실무 주의사항 순으로 정리했습니다.Thu, 04 Jun 2026 00:00:00 GMTDatabasehttps://raincoat98.github.io/frontend/react/nuqs-url-state/https://raincoat98.github.io/frontend/react/nuqs-url-state/nuqs의 useQueryState·useQueryStates로 URL 쿼리 파라미터를 타입 안전하게 React state처럼 다루는 방법을 정리합니다. 파서 종류, 옵션, 검색·필터·페이지네이션 실무 예제까지 한 번에.Mon, 01 Jun 2026 00:00:00 GMTReacthttps://raincoat98.github.io/frontend/react/ag-grid-tooltip/https://raincoat98.github.io/frontend/react/ag-grid-tooltip/AG Grid tooltipField, tooltipValueGetter, headerTooltip, tooltipShowMode, tooltipShowDelay 설정 방법을 JavaScript·React 예제와 함께 한 번에 정리합니다.Sun, 31 May 2026 00:00:00 GMTReacthttps://raincoat98.github.io/git/git-complete-guide/https://raincoat98.github.io/git/git-complete-guide/Git 기초 개념과 명령어부터 master/stage/production 브랜치 전략, GitHub Flow 실전 사례, 실수 복구 방법까지 하나의 글로 정리합니다.Tue, 19 May 2026 00:00:00 GMTGithttps://raincoat98.github.io/tools/intellij/intellij-plugins/https://raincoat98.github.io/tools/intellij/intellij-plugins/실무에서 효과가 큰 IntelliJ 플러그인을 필수 / 권장 / 추가 추천 / 유료 / 내장으로 나눠 정리했습니다. Rainbow Brackets, GitToolBox, MyBatisX 등 바로 체감되는 플러그인을 소개합니다.Sat, 16 May 2026 00:00:00 GMTToolshttps://raincoat98.github.io/backend/firebase/install-firebase/https://raincoat98.github.io/backend/firebase/install-firebase/Firebase CLI 최신 버전 설치부터 프로젝트 초기화·배포까지. npm install -g firebase-tools, firebase login, firebase init, deploy를 단계별로 정리합니다.Tue, 05 May 2026 00:00:00 GMTFirebasehttps://raincoat98.github.io/backend/supabase/supabase-keep-alive/https://raincoat98.github.io/backend/supabase/supabase-keep-alive/Supabase Free 플랜 7일 비활성 자동 정지를 GitHub Actions cron으로 막는 방법. RPC 호출 + health check 폴백 구조로 안정적인 keep-alive를 구현합니다.Tue, 05 May 2026 00:00:00 GMTSupabasehttps://raincoat98.github.io/frontend/react/ag-grid-v21-to-v35-migration/https://raincoat98.github.io/frontend/react/ag-grid-v21-to-v35-migration/AG Grid v21에서 v35 마이그레이션 시 필수로 처리해야 할 변경사항. rowSelection, cellRendererFramework, CSS 경로, Module 등록, setGridOption API 통합까지 실무 기준 완전 정리.Tue, 05 May 2026 00:00:00 GMTReacthttps://raincoat98.github.io/frontend/react/ag-grid-v35-wrapper-design/https://raincoat98.github.io/frontend/react/ag-grid-v35-wrapper-design/AG Grid v35 기준으로 실무에서 쓰는 공통 래퍼 설계 방법. AgGridProvider로 모듈과 라이선스를 주입하고, ClientSideGrid와 ServerSideGrid를 분리하는 구조를 설명합니다.Tue, 05 May 2026 00:00:00 GMTReacthttps://raincoat98.github.io/frontend/react/react-performance-optimization/https://raincoat98.github.io/frontend/react/react-performance-optimization/React.memo, useMemo, useCallback의 차이점과 올바른 사용 시점. 불필요한 리렌더링을 막는 최적화 패턴을 실전 예제와 함께 정리합니다.Tue, 05 May 2026 00:00:00 GMTReacthttps://raincoat98.github.io/introduce/careers/https://raincoat98.github.io/introduce/careers/프론트엔드 개발자 우상욱의 경력 및 프로젝트 이력서입니다.Tue, 05 May 2026 00:00:00 GMT소개https://raincoat98.github.io/frontend/react/ag-grid-drawer-url-sync/https://raincoat98.github.io/frontend/react/ag-grid-drawer-url-sync/AG Grid 목록에서 상세 Drawer를 열고 URL에 상태를 저장해 새로고침해도 복원되는 패턴. getRowId, ensureNodeVisible, useNavigate와 함께 Row 자동 선택·스크롤까지 정리합니다.Fri, 13 Feb 2026 00:00:00 GMTReacthttps://raincoat98.github.io/frontend/javascript/javascript-rounding/https://raincoat98.github.io/frontend/javascript/javascript-rounding/JavaScript 부동소수점 오차로 인한 반올림 버그 원인과 해결법. Number.EPSILON 패턴, toFixed 주의사항, decimal.js 활용까지 예제로 정리합니다.Thu, 08 Jan 2026 00:00:00 GMTJavaScripthttps://raincoat98.github.io/frontend/react/kepware-opcua-monitoring/https://raincoat98.github.io/frontend/react/kepware-opcua-monitoring/Kepware OPC UA 서버와 Node.js를 연동해 PLC 설비 데이터를 React 대시보드로 실시간 모니터링하는 구축 방법. 구독·세션 관리·UI 연동까지 정리합니다.Fri, 28 Nov 2025 00:00:00 GMTReacthttps://raincoat98.github.io/frontend/react/indexeddb-upload-queue/https://raincoat98.github.io/frontend/react/indexeddb-upload-queue/네트워크 불안정 환경에서 파일 업로드 실패를 IndexedDB 큐로 해결하는 방법. 저장 후 백그라운드 업로드 패턴을 React에서 구현하는 완전 가이드입니다.Wed, 26 Nov 2025 00:00:00 GMTReacthttps://raincoat98.github.io/frontend/vue/vue-query-websocket-sync/https://raincoat98.github.io/frontend/vue/vue-query-websocket-sync/Vue Query 폴링에서 SSE, WebSocket으로 단계적으로 전환한 실전 경험. 각 방식의 장단점과 선택 기준, 구현 방법을 코드와 함께 정리합니다.Wed, 26 Nov 2025 00:00:00 GMTVuehttps://raincoat98.github.io/frontend/chrome-extension/firebase-google-login-mv3/https://raincoat98.github.io/frontend/chrome-extension/firebase-google-login-mv3/MV3에서 Firebase Google 로그인이 막히는 이유와 chrome.identity / Offscreen Document 두 가지 구현 방법을 React 환경 기준으로 정리합니다.Fri, 21 Nov 2025 00:00:00 GMTChrome Extensionhttps://raincoat98.github.io/frontend/javascript/indexeddb-vs-localstorage/https://raincoat98.github.io/frontend/javascript/indexeddb-vs-localstorage/IndexedDB vs LocalStorage 저장 용량·동기/비동기·데이터 타입·브라우저 지원 완전 비교. 웹 스토리지 선택 기준과 실무 활용 팁을 정리합니다.Wed, 17 Sep 2025 00:00:00 GMTJavaScripthttps://raincoat98.github.io/frontend/nextjs/suppress-hydration-warning/https://raincoat98.github.io/frontend/nextjs/suppress-hydration-warning/Next.js SSR에서 발생하는 Hydration 경고(Text content did not match) 원인과 suppressHydrationWarning 해결법. 서버·클라이언트 불일치 시나리오별 대응 방법을 정리합니다.Thu, 04 Sep 2025 00:00:00 GMTNext.jshttps://raincoat98.github.io/backend/nestjs/nestjs-windows-startdev-loop-fix/https://raincoat98.github.io/backend/nestjs/nestjs-windows-startdev-loop-fix/Windows WSL 환경에서 NestJS start:dev 실행 시 발생하는 무한 루프 문제 해결법. tsconfig.json watchOptions excludeDirectories 설정으로 파일 감지 오작동을 수정합니다.Tue, 27 May 2025 00:00:00 GMTNestJShttps://raincoat98.github.io/frontend/vue/dayjs-korea/https://raincoat98.github.io/frontend/vue/dayjs-korea/Vue 프로젝트에서 dayjs로 한국 시간(KST, UTC+9)을 처리하는 방법. timezone 플러그인 설정, ko locale, format 함수 실전 예제까지 정리합니다.Thu, 08 May 2025 00:00:00 GMTVuehttps://raincoat98.github.io/frontend/vite/proxy/https://raincoat98.github.io/frontend/vite/proxy/Vite 개발 서버 server.proxy 설정으로 CORS 문제를 우회하는 방법. API 서버 연동, WebSocket 프록시, changeOrigin 설정까지 예제로 정리합니다.Wed, 05 Feb 2025 00:00:00 GMTVitehttps://raincoat98.github.io/frontend/vite/vite-alias/https://raincoat98.github.io/frontend/vite/vite-alias/Vite 프로젝트에서 @ alias를 설정해 복잡한 상대 경로를 정리하는 방법. vite.config.js resolve.alias와 tsconfig.json paths 동시 설정 방법을 정리합니다.Wed, 05 Feb 2025 00:00:00 GMTVitehttps://raincoat98.github.io/frontend/vite/vite-port/https://raincoat98.github.io/frontend/vite/vite-port/Vite 개발 서버 기본 포트(5173)를 변경하는 방법. vite.config.js server.port 설정과 .env 환경 변수를 이용한 동적 포트 설정까지 정리합니다.Wed, 05 Feb 2025 00:00:00 GMTVitehttps://raincoat98.github.io/frontend/javascript/regular-expression/https://raincoat98.github.io/frontend/javascript/regular-expression/이메일·전화번호·비밀번호 등 실무 정규식 패턴부터 match, replace, test, exec 메서드까지. JavaScript 정규식을 한 번에 완전 정리합니다.Fri, 20 Dec 2024 00:00:00 GMTJavaScripthttps://raincoat98.github.io/frontend/javascript/array-methods/https://raincoat98.github.io/frontend/javascript/array-methods/map, filter, reduce, forEach, find, some, every 등 JavaScript 배열 메서드를 실전 예제로 완전 정리. for...of 비동기 처리 패턴까지 포함합니다.Mon, 04 Nov 2024 00:00:00 GMTJavaScripthttps://raincoat98.github.io/frontend/vue/vue-event/https://raincoat98.github.io/frontend/vue/vue-event/Vue v-on(@) 이벤트 바인딩부터 .stop, .prevent, .once, .self, .capture 수정자까지. Vue 이벤트 핸들링과 수정자를 표와 실전 예제로 완전 정리합니다.Mon, 28 Oct 2024 00:00:00 GMTVuehttps://raincoat98.github.io/database/korean-sort/https://raincoat98.github.io/database/korean-sort/SQL ORDER BY에서 한글이 이상한 순서로 정렬될 때 해결 방법. MySQL COLLATE utf8mb4_unicode_ci와 PostgreSQL bytea 캐스팅을 사용한 DBMS별 한글 정렬 처리법을 정리합니다.Tue, 03 Sep 2024 00:00:00 GMTDatabasehttps://raincoat98.github.io/frontend/javascript/es-toolkit/https://raincoat98.github.io/frontend/javascript/es-toolkit/lodash 대안 es-toolkit 주요 기능과 실전 사용법. lodash 대비 번들 사이즈·성능 비교, chunk·cloneDeep·debounce 등 자주 쓰는 함수를 정리합니다.Mon, 02 Sep 2024 00:00:00 GMTJavaScripthttps://raincoat98.github.io/database/update-in/https://raincoat98.github.io/database/update-in/SQL에서 SELECT로 조회한 ID 목록을 UPDATE WHERE IN으로 즉시 수정하는 방법. 서브쿼리와 JOIN UPDATE 패턴을 MySQL·PostgreSQL 예제로 정리합니다.Wed, 28 Aug 2024 00:00:00 GMTDatabasehttps://raincoat98.github.io/frontend/vue/vee-validate/https://raincoat98.github.io/frontend/vue/vee-validate/vee-validate와 yup을 사용한 Vue 폼 유효성 검증 완전 가이드. useField, useForm으로 실시간 검증을 구현하는 예제를 단계별로 정리합니다.Wed, 28 Aug 2024 00:00:00 GMTVuehttps://raincoat98.github.io/introduce/about-me/https://raincoat98.github.io/introduce/about-me/순간을 사랑하는 프론트엔드 개발자 우상욱의 소개 페이지입니다. 사진, 신앙, 커피, 전자기기, 독서 등 일상을 이루는 것들을 소개합니다.Fri, 26 Apr 2024 00:00:00 GMT소개https://raincoat98.github.io/frontend/vitepress/vitepress-comment/https://raincoat98.github.io/frontend/vitepress/vitepress-comment/VitePress 블로그에 Utterances로 GitHub 이슈 기반 댓글 기능을 추가하는 방법. 설치부터 커스텀 컴포넌트 적용까지 단계별로 안내합니다.Wed, 17 Apr 2024 00:00:00 GMTVitePresshttps://raincoat98.github.io/frontend/vue/tailwind-brand-color/https://raincoat98.github.io/frontend/vue/tailwind-brand-color/Tailwind CSS 설정 파일에 브랜드 컬러를 추가하고 prefix로 클래스 충돌을 방지하는 방법. extend와 colors 설정으로 디자인 시스템을 구축합니다.Fri, 12 Apr 2024 00:00:00 GMTVuehttps://raincoat98.github.io/frontend/vue/vite-quasar-aos/https://raincoat98.github.io/frontend/vue/vite-quasar-aos/Vite + Quasar Vue 프로젝트에 AOS(Animate On Scroll)를 적용하는 방법. 설치, 초기화, data-aos 속성 사용법과 커스텀 설정까지 단계별로 안내합니다.Fri, 12 Apr 2024 00:00:00 GMTVuehttps://raincoat98.github.io/frontend/vue/vue-code-convention/https://raincoat98.github.io/frontend/vue/vue-code-convention/Vue.js Composition API 기반 코드 컨벤션 완전 가이드. 파일 구조, 변수 네이밍, props/emits 작성 규칙, script setup 패턴을 실무 기준으로 정리합니다.Fri, 12 Apr 2024 00:00:00 GMTVuehttps://raincoat98.github.io/git/github-readme/https://raincoat98.github.io/git/github-readme/오픈소스·개인 프로젝트 GitHub README 작성 완전 가이드. 프로젝트 소개·설치·사용법·커밋 컨벤션 등 필수 항목을 마크다운 템플릿과 함께 정리합니다.Fri, 12 Apr 2024 00:00:00 GMTGithttps://raincoat98.github.io/frontend/vue/quasar-tailwind/https://raincoat98.github.io/frontend/vue/quasar-tailwind/Vue Quasar 프로젝트에 TailwindCSS를 함께 설치하고 설정하는 방법. 충돌 없이 두 프레임워크를 함께 쓰는 설정을 단계별로 안내합니다.Wed, 10 Apr 2024 00:00:00 GMTVuehttps://raincoat98.github.io/frontend/vue/my-vue-library/https://raincoat98.github.io/frontend/vue/my-vue-library/Vue 프로젝트 실무에서 검증된 필수 라이브러리 모음. Vue Router, Pinia, VeeValidate, Quasar, VueUse의 특징과 선택 이유를 정리합니다.Mon, 08 Apr 2024 00:00:00 GMTVuehttps://raincoat98.github.io/backend/nestjs/my-nestjs/https://raincoat98.github.io/backend/nestjs/my-nestjs/Express 대신 NestJS를 선택한 이유. 구조적 아키텍처, 데코레이터 문법, 모듈 기반 확장성, TypeScript 통합의 장점을 실무 관점에서 설명합니다.Fri, 05 Apr 2024 00:00:00 GMTNestJShttps://raincoat98.github.io/frontend/vue/my-vue/https://raincoat98.github.io/frontend/vue/my-vue/React 대신 Vue.js와 Pinia를 선택한 이유. 직관적인 템플릿 문법, Composition API, 가벼운 학습 곡선 등 Vue가 가진 실질적인 장점을 설명합니다.Fri, 05 Apr 2024 00:00:00 GMTVuehttps://raincoat98.github.io/frontend/vue/vue-cookie/https://raincoat98.github.io/frontend/vue/vue-cookie/Vue에서 "오늘 하루 보지 않기" 팝업 구현 방법. vue-cookies로 쿠키를 설정해 하루 동안 팝업을 숨기는 예제 코드와 함께 단계별로 정리합니다.Fri, 05 Apr 2024 00:00:00 GMTVuehttps://raincoat98.github.io/introduce/my-develop/https://raincoat98.github.io/introduce/my-develop/프론트엔드 개발자 우상욱의 개발 여정과 개발자로서의 철학을 소개합니다. 사용자 경험을 중시하는 프론트엔드 개발자의 이야기입니다.Fri, 05 Apr 2024 00:00:00 GMT소개https://raincoat98.github.io/frontend/javascript/structured-clone/https://raincoat98.github.io/frontend/javascript/structured-clone/structuredClone vs JSON.parse/stringify vs lodash cloneDeep 깊은 복사 완전 비교. 순환 참조·Date·Map·Set 지원 여부, 성능 차이까지 실전 예제로 정리합니다.Mon, 01 Jan 2024 00:00:00 GMTJavaScript