GraphQL In .NET Core Web API With Entity Framework Core

관련 자료

https://www.c-sharpcorner.com/article/graphql-in-net-core-web-api-with-entity-framework-core-part-one/

https://fullstackmark.com/post/17/building-a-graphql-api-with-aspnet-core-2-and-entity-framework-core

https://medium.com/shemseddine-on-code/setup-a-graphql-api-using-asp-net-core-79f1b88f6ad8

https://medium.com/volosoft/building-graphql-apis-with-asp-net-core-419b32a5305b

https://docs.microsoft.com/ko-kr/aspnet/web-api/overview/odata-support-in-aspnet-web-api/odata-v4/create-an-odata-v4-endpoint

https://medium.com/@FourwingsY/graphql%EC%9D%84-%EC%98%A4%ED%95%B4%ED%95%98%EB%8B%A4-3216f404134

https://velopert.com/2318

 위키백과에서는 다음과 같이 설명하고 있다.

 GraphQL은 페이스북이 2012년에 개발하여 2015년에 공개적으로 발표된 데이터 질의어이다. 그래프QL은 REST 및 부속 웹서비스 아키텍쳐를 대체할 수 있다. 클라이언트는 필요한 데이터의 구조를 지정할 수 있으며, 서버는 정확히 동일한 구조로 데이터를 반환한다. 

 쉽게 풀이하면 하나의 앤드포인트에서 내가 원하는 스키마(데이터 컬럼 양)로 데이터를 가져올 수 있다. Web API로 개발하면 클라이언트에서 사용하지 않는 데이터가 포함되어 내려갈 수 있지만, GraphQL에서는 필요한 데이터만 요청하고 사용하기 때문에 서버 리소스나, 네트워크 리소스를 절약할 수 있게 되고, 무엇보다 장점이 데이터의 종류에 맞게 대응되는 컨트롤러를 만들 필요 없이 하나의 주소에서 호출하여 사용할 수 있도록 할 수 있다.

electron-vue를 이용한 데스크탑앱 만들기

관련 자료

https://github.com/SimulatedGREG/electron-vue

https://simulatedgreg.gitbooks.io/electron-vue/content/ko/

vue로 구축 된 electron 애플리케이션을 만들기 위한 보일러 플레이트 저장소를 소개한다. Electron은 javascript로 크로스 플랫폼을 지원하는 데스크탑앱을 만들도록 지원하는 프레임워크이다. HTML과 javascript만 있으면 시작할 수 있으나 기초공사부터 다시 하면 너무나 많은 작업을 해줘야 한다. 이때 Electron-Vue의 보일러플레이트 사용하면 기초 작업 없이 바로 데스크탑앱을 개발 할 수 있다.

Things you'll find in this boilerplate...

• Basic project structure with a single package.json setup
• Detailed documentation
• Project scaffolding using vue-cli
• Ready to use Vue plugins (axios, vue-electron, vue-router, vuex)*
• Installed vue-devtools and devtron tools for development
• Ability to easily package your electron app using electron-packager or electron-builder*
• appveyor.yml and .travis.yml configurations for automated deployments with electron-builder*
• Ability to produce web output for browsers
• Handy NPM scripts
• Use of webpack and vue-loader with Hot Module Replacement
• Process restarting when working in main process
• HTML/CSS/JS pre-processor support with vue-loader
• ES6 with stage-0 by default
• Use of babili to remove the need of transpiling completely down to ES5
• ESLint (with support for standard and airbnb-base)*
• Unit Testing (with Karma + Mocha)*
• End-to-end Testing (with Spectron + Mocha)*

Cli를 통해 시작하기

# Install vue-cli and scaffold boilerplate
npm install -g vue-cli
vue init simulatedgreg/electron-vue my-project

# Install dependencies and run your app
cd my-project
yarn # or npm install
yarn run dev # or npm run dev

BootstrapVue

관련 자료

https://blog.logrocket.com/getting-started-with-bootstrapvue-2d8bf907ef11

https://bootstrap-vue.js.org/

https://github.com/bootstrap-vue/bootstrap-vue

Vue.js와 세계에서 가장 널리 사용되는 프런트 엔드 CSS 라이브러리 인 Bootstrap 4를 사용하여 웹에서 반응 형 모바일 우선 프로젝트를 구축하십시오.

BootstrapVue는 광범위하고 자동화 된 WAI-ARIA 액세스 가능성 마크 업을 갖춘 Vue.js 2.5+에서 사용할 수있는 가장 포괄적 인 Bootstrap V4 구성 요소 및 그리드 시스템 구현 중 하나를 제공합니다.

＃WAI-ARIA 

https://github.com/lezhin/accessibility/blob/master/aria/README.md

BootstrapVue 시작하기

Vue.js를 사용하여 반응이 빠른 모바일 우선 사이트 구축을위한 Bootstrap V4를 시작하십시오.

• Vue.js v2.5 is required, v2.6.10 is recommended
• Bootstrap v4.3 is required, v4.3.1 is recommended
• PortalVue v2.0 is required, v2.1.1 is recommended
• jQuery is not required

Using module bundlers

진입점에 아래 코드 삽입

// app.js
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

Bootstrap and BootstrapVue css 파일 삽입

// app.js
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

- Vue CLI 2 이용해서 시작하기

# Ensure Vue CLI is installed and up to date
npm i -g vue-cli

# Initialize a BootstrapVue project in the directory 'my-project'
vue init bootstrap-vue/webpack-simple my-project

# Change into the directory
cd my-project

# Install dependencies
npm i

# Fire up the dev server with HMR
npm run dev

아래 그림은 BootstrapVue에서 Form의 기본 예제로 화면에 띄운 그림이다.