Fredric News

Tag: 프론트엔드

  • 싱글 페이지 애플리케이션(SPA) 아키텍처: SSR vs CSR 렌더링

    💡 핵심 요약 (Executive Summary) 본 가이드는 concept SPA 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다. 📑 Table of Contents • Virtual DOM Virtual DOM Reference & Guidelines (NOTE) 버추얼 돔(Virtual DOM)은 JavaScript 객체로 구현된 가상의…

  • 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,…

  • Node.js 모듈 시스템과 npm 의존성: package-lock 원리

    💡 핵심 요약 (Executive Summary) 본 가이드는 concept node npm 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다. 📑 Table of Contents 1. Package.json 버전표기법 • 버전 구성 • 버전을 표기하는 방법이 여러개? • Tilde (틸드, \~)…

  • 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…

  • 웹 포털 프론트엔드-백엔드 CORS 정책 위반 통신 장애 해결

    💡 핵심 요약 (Executive Summary) 본 가이드는 portal 핵심 가이드 및 실전 아키텍처의 핵심 개념, 실전 구성 명령어 및 아키텍처 베스트 프랙티스를 다룹니다. 클라우드 네이티브 및 인프라 엔지니어링 실무에 즉시 활용 가능하도록 체계적으로 정리했습니다. 📑 Table of Contents 1. Local • Login Failed 2. Prod Local Login Failed Reference & Guidelines (NOTE) 로그인은 DB-Keycloak-Vault의 삼위일체…

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

    💡 핵심 요약 (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.…