Fredric News

Tag: Frontend

  • OAuth 2.0 & OIDC Token Analysis: ID vs Access

    💡 OAuth 2.0 & OIDC Token Analysis: ID vs Access — Executive Summary Technical architectural analysis, practical configuration manifests, and deployment instructions for OAuth 2.0 & OIDC Token Analysis: ID vs Access. References and Guidelines (NOTE) ID Token and Access Token are the two main tokens used in the OAuth 2.0 and OpenID Connect (OIDC)…

  • Node.js npm Sheet: Dependency Mgmt & Audit

    💡 Node.js npm Sheet: Dependency Mgmt & Audit — Executive Summary Technical architectural analysis, practical configuration manifests, and deployment instructions for Node.js npm Sheet: Dependency Mgmt & Audit. Related pages Sub-item Install Command Global / regional classification bash Copy # 현재 프로젝트 (package.yaml) 기준으로 패키지 인스톨 npm i -y $package npm install -y $package #…

  • Tailwind CSS 실무 유틸리티 클래스 치트시트 및 반응형 레이아웃

    💡 핵심 요약 (Executive Summary) 본 가이드는 css tailwind.css 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다. 📑 Table of Contents • Basic • Custom Basic src/assets/tailwind.css css Copy @tailwind base; @tailwind components; @tailwind utilities; src/main.ts ts…

  • Vue.js 인스턴스 속성(Instance Properties) 반응형 데이터 감지

    💡 핵심 요약 (Executive Summary) 본 가이드는 samples dev fw vue.js Instance Properties 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다. 📑 Table of Contents • 전역 변수 • 전역 메서드 전역 변수 \$parent 부모 컴포넌트 \$refs[’refername’]…

  • Vue.js Options API 속성: data·computed·methods

    💡 핵심 요약 (Executive Summary) 본 가이드는 fw vue.js Option Properties 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다. props javascript Copy <template></template> <script> import … export default { name: “Name”, props: { item: Object, viewList: Array,…

  • Chrome 확장 프로그램(Manifest V3): Service Worker 통신

    💡 핵심 요약 (Executive Summary) 본 가이드는 to be chrome extensions 개발 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다. 📑 Table of Contents • Sample • Exec Sample manifest.json json Copy { “manifest_version”: 3, “name”: “My…

  • Rsbuild 프론트엔드 빌드 환경 구축: Rspack 및 React 연동

    💡 핵심 요약 (Executive Summary) 본 가이드는 js config build rsbuild.config.ts 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다. 📑 Table of Contents • For ModuleFederation-Enhanced • For ModuleFederation For ModuleFederation-Enhanced Producer (Provider, Remote) ts Copy import…

  • React Webpack Module Federation 마이크로 프론트엔드 구축

    💡 핵심 요약 (Executive Summary) 본 가이드는 js source react ModuleFederation Samples 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다. 📑 Table of Contents • 공통 • Producer (Provider) • Consumer 공통 동적 로딩 활성화: bootstrap.tsx ts…

  • 모던 프론트엔드 자바스크립트 생태계와 상태 관리 비교

    💡 핵심 요약 (Executive Summary) 본 가이드는 js feature diff Libraries 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다. 📑 Table of Contents • Next.js VS Express.js VS NestJS Next.js VS Express.js VS NestJS 프레임워크 역할 주요…

  • Vue.js 핵심 아키텍처: 가상 DOM과 반응형 컴포넌트

    💡 핵심 요약 (Executive Summary) 본 가이드는 fw vue 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다. 📑 Table of Contents • 관련 페이지 1. 동작 순서 2. Option Properties • 라이프사이클 훅 • 기타 옵션 3.…