CDN에서 Vue 사용

CDN에서 Vue 사용

CDN을 통한 Hello World 구현 스크립트 태그를 통해 CDN에서 직접 Vue를 사용할 수 있다. CDN에서 Vue를 사용하는 경우 "빌드 단계"가 필요하지 않아 설정이 훨씬 간단해지며 정적 HTML을 향상시키거나 백엔드 프레임워크와 통합하는 데 적합하다. 하지만 싱글 파일 컴포넌트(SFC) 구문은 사용할 수 없다. note! CDN(Content Delivery Network)이란? 콘텐츠 전송 네트워크(CDN)는 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크 예제코드 {{ msg_hello }} 실행결과 선언적 랜더링 명령형 랜더링 선언적 랜더링(Declarative Rendering) : 백그라운드에서 자동으로 변수의 변화(상태, 속성)를 알아차..

  • format_list_bulleted Frontend/Vue3
  • · 2024. 1. 9.
  • textsms

03. SQL 기본

03. SQL 기본 1. 관계형 데이터베이스 개요 1) 데이터베이스 용도와 목적에 맞는 데이터들끼리 저장하는 공간. 2) 관계형 데이터베이스(RDB, Relational Database) 관계형 데이터 모델에 기초를 둔 데이터베이스. 모든 데이터를 2차원 테이블 형태로 표현한 뒤 각 테이블 간의 관계를 정의. Oracle, SQL Server(MSSQL), MySQL, MariaDB, PostgreSQL 등 3) TABLE 항목을 나타내는 각각의 세로 열을 컬럼(Column)이라고 하고 각각의 가로 행을 로우(Row)라고 한다. 데이터 모델에서 테이블은 엔터티에 해당하고 인스턴스는 로우, 속성에 해당하는 것은 컬럼이다. 관계형 데이터베이스의 기본 단위이고 데이터를 저장하기 위해 사용되며 일반적으로 여러개..

  • format_list_bulleted SQLD
  • · 2023. 8. 30.
  • textsms

02. 데이터 모델과 SQL

2. 데이터 모델과 SQL 01. 정규화(Normalization) 데이터 정합성(데이터의 정확성과 일관성을 유지하고 보장)을 위해 엔터티를 작은 단위로 분리하는 과정. 입력, 수정, 삭제 성능은 일반적으로 향상된다고 볼 수 있다. 정규화를 하게 되면 엔터티가 계속 증가하므로 JOIN으로 인한 조회 성능 저하가 발생할 수 있다. 1) 제1정규형 모든 속성은 반드시 하나의 값만 가져야 한다. 하나의 속성에 여러 속성값을 갖는 경우. 단점 : 불필요한 split 사용, 데이터 추출의 번거로움 예시) ⬇️ 원본 이름 나이 별명 내동생 8 꿀돼지, 두꺼비, 왕자님 ⬇️ 제1정규형화 이름 나이 내동생 8 이름 별명 내동생 꿀돼지 내동생 두꺼비 내동생 왕자님 유사한 속성이 반복되는 경우 단점 : 계속해서 늘어나는 ..

  • format_list_bulleted SQLD
  • · 2023. 8. 28.
  • textsms

01. 데이터 모델링의 이해

1. 모델링이란? 현실 세계를 단순화하여 표현하는 기법 현실 세계에서 필요한 데이터를 저장하는 데이터베이스를 구축하기 위한 분석/설계의 과정 현실 세계를 추상화, 단순화, 명확화하기 위해 일정한 표기법에 의해 표현하는 기법 2. 모델링의 특징 추상화(Abstraction) 현실 세계를 일정한 형식으로 표현, 아이디어나 개념을 간략히 표현 단순화(Simplification) 정해진 표기법으로 단순하고 쉽게 표현 명확화(Clarity) 명확하게 해석할 수 있도록 기술 3. 모델링의 세 가지 관점 데이터 관점(What, Data) 데이터 위주 모델링 프로세스 관점(How, Process) 프로세스 위주 모델링 데이터와 프로세스의 상관 관점(Data vs Process, Interaction) 데이터와 프로세스..

  • format_list_bulleted SQLD
  • · 2023. 8. 24.
  • textsms
Vue3 set up 가이드(기본 프로젝트 생성) (2/2)

Vue3 set up 가이드(기본 프로젝트 생성) (2/2)

이어지는 글 2023.04.06 - [Frontend/Vue3] - Vue3 set up 가이드(환경설치) (1/2) Vue3 set up 가이드(환경설치) (1/2) 목차 환경설치 IDE Visual Studio Code Extensions 플러그인 Node.js 설치 Vue Devtools 설치 크롬 브라우저 Bootstrap 환경설치 1. IDE 1.1. Visual Studio Code https://code.visualstudio.com/Download 접속하여 설치 1.2. Extensions 플 fourseasons0525.tistory.com 기본 프로젝트 생성 NPM/Vite를 이용한 기본 프로젝트 생성 Npm을 통해 vue를 설치 npm install vue@next npm 커맨드를 이..

  • format_list_bulleted Frontend/Vue3
  • · 2023. 4. 6.
  • textsms
Vue3 set up 가이드(환경설치) (1/2)

Vue3 set up 가이드(환경설치) (1/2)

목차 환경설치 IDE Visual Studio Code Extensions 플러그인 Node.js 설치 Vue Devtools 설치 크롬 브라우저 Bootstrap 환경설치 1. IDE 1.1. Visual Studio Code https://code.visualstudio.com/Download 접속하여 설치 1.2. Extensions 플러그인 vue 확장자 파일을 다룰 수 있는 Vuter Extension이 존재한다. Vuter를 비롯하여 문법 하이라이팅, 인텔리센스, 포맷팅과 같은 다양한 기능을 지원하는 Vue를 위한 확장 플러그인들을 한번에 모아둔 Vue VS Code Extension Pack은 Visual Studio Code를 이용해 Vue를 개발하는 개발자에게 필수 Extension이다...

  • format_list_bulleted Frontend/Vue3
  • · 2023. 4. 6.
  • textsms