{"componentChunkName":"component---src-templates-tags-js","path":"/tags/framework/","result":{"data":{"site":{"siteMetadata":{"title":"Bottlehs Tech Blog"}},"allMarkdownRemark":{"totalCount":21,"nodes":[{"excerpt":"Vue Js 한글 입력 과 IME IME…","fields":{"slug":"/vue/vue-js-한글-입력/"},"frontmatter":{"date":"2021년 11월 27일","title":"Vue Js 한글 입력 과 IME","description":"IME란 한국어, 중국어, 일본어, 한자처럼 컴퓨너 자판에 있는 글자보다 더 많은 수의 문자를 계산서나 조합하여 입력해 주는 시스템 소프트웨어이다. 이러한 조합이 필요한 언어들은 v-model 디렉티브를 활용할 때 제대로 동작 안되는 문제가 있어, @input 이벤트를 활용하여 v-model 디렉티브 기능을 대신 구현해야 정확한 데이터 바인딩을 할 수 있다."}},{"excerpt":"Vue Js 서버 사이드 렌더링 서버 사이드 렌더링이란 서버에서 페이지를 렌더링후 클라이언트(브라우저)로 보내 화면에 표시하는 기법을 의미한다. 뷰 싱글 페이지 애플리케이션을 서버 사이드 렌더링의 반대인 클라이언트 사이드 렌더링 방식이다. CSR…","fields":{"slug":"/vue/vue-js-서버-사이드-렌더링/"},"frontmatter":{"date":"2021년 5월 16일","title":"Vue Js 서버 사이드 렌더링","description":null}},{"excerpt":"Vue Js 뷰 JWT 기반 사용자 인증 JWT ( JSON WEB TOKEN ) 이란? JWT 는 JSON Web Token의 약자로 전자 서명 된 URL-safe (URL로 이용할 수있는 문자 만 구성된)의 JSON이다. 전자 서명은 JSON…","fields":{"slug":"/vue/vue-js-jwt-기반-사용자-인증/"},"frontmatter":{"date":"2021년 5월 9일","title":"Vue Js 뷰 JWT 기반 사용자 인증","description":"라우트에 연결하거나 탐색을 수행 할 때 이름이 있는 라우트를 사용할수 있다. 사용 법은 routes 에 name 옵션을 지정 하면 된다. 라우트 관리가 편리 하다 라는 장점이 있다."}},{"excerpt":"Android ROOM 개요 Room은 SQLite에 대한 추상화 레이어를 제공하여 원활한 데이터베이스 액세스를 지원하는 동시에 SQLite…","fields":{"slug":"/android/android-room/"},"frontmatter":{"date":"2021년 5월 2일","title":"Android ROOM","description":null}},{"excerpt":"Vue Js 소프트웨어국제화(i18n) 단순히 번역 원고를 받아 글자 바꾸는 것보다 신경 써야 할 부분이 많다. 그 부분들을 통틀어 국제화(Internationalization; i18n) 라고 한다. i18n은 어떤 프레임워크가 아니고 i와 n…","fields":{"slug":"/vue/vue-js-소프트웨어국제화-i18n/"},"frontmatter":{"date":"2021년 5월 2일","title":"Vue Js 소프트웨어국제화(i18n)","description":"라우트에 연결하거나 탐색을 수행 할 때 이름이 있는 라우트를 사용할수 있다. 사용 법은 routes 에 name 옵션을 지정 하면 된다. 라우트 관리가 편리 하다 라는 장점이 있다."}},{"excerpt":"Vue Js 뷰 파일업로드 MIME TYPE이란 이미지나 사진 동영상 파일등은 바이너리 데이터이다. 즉 0과…","fields":{"slug":"/vue/vue-js-파일업로드/"},"frontmatter":{"date":"2021년 5월 2일","title":"Vue Js 뷰 파일업로드","description":"라우트에 연결하거나 탐색을 수행 할 때 이름이 있는 라우트를 사용할수 있다. 사용 법은 routes 에 name 옵션을 지정 하면 된다. 라우트 관리가 편리 하다 라는 장점이 있다."}},{"excerpt":"Vue Js Vee Validate 개요 서비스 개발시 Form 유효성 검사는 필수다. 보통 정규표현식을 사용하여 간단하게 구현할수 있고, HTML 에서 기본적으로 지원해 주는 type, required…","fields":{"slug":"/vue/vue-js-vee-validate/"},"frontmatter":{"date":"2021년 4월 25일","title":"Vue Js Vee Validate","description":"서비스 개발시 Form 유효성 검사는 필수이다. 보통 정규표현식을 사용하여 간단하게 구현할수 있지만, Vue 에서는 VeeValidate 를 활용하여 일관성 있는 Form 유효성 검사 기능을 구현 할수 있다."}},{"excerpt":"Vue Js Axios 및 Rest Api 를 활용한 CRUD 구현 Aajx AJAX (Asynchronous Javascript And XML)\nAJAX란, Javascript의 라이브러리중 하나이며 Asynchronous Javascript And…","fields":{"slug":"/vue/vue-js-axios-및-rest-api-를-활용한-crud-구현/"},"frontmatter":{"date":"2021년 4월 11일","title":"Vue Js Axios 및 Rest Api 를 활용한 CRUD 구현","description":"Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다. 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며,Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포하고 있다."}},{"excerpt":"Vue Js Vuex 저장소(store) 속성 및 모듈화 폴더 모듈화 & Namespacing Vue Js Vuex Modules 중간 크기 이상의 복잡한 앱을 제작할 때 getters & mutations & actions…","fields":{"slug":"/vue/vue-js-vuex-저장소-store-속성-및-모듈화/"},"frontmatter":{"date":"2021년 4월 11일","title":"Vue Js Vuex 저장소(store) 속성 및 모듈화","description":"중간 크기 이상의 복잡한 앱을 제작할 때 getters & mutations & actions 의 이름을 유일하게 정하지 않으면 namespace 충돌이 난다. 따라서, 네임스페이스를 구분하기 위해 types.js 로 각 속성의 이름들을 빼고 store.js 와 각 컴포넌트에 import 하여 사용하는 방법이 있다. 혹은 modules 라는 폴더로 만들어 각 단위별로 파일을 분리해서 관리하는 방법도 있다."}},{"excerpt":"Vue Js Vuex State, Mutations, Actions, Getters 이해 및 활용 Vuex State Vuex State 는 데이터 상태를 관리 합니다. Vuex State 등록  에 count state…","fields":{"slug":"/vue/vue-js-vuex-state-mutations-actions-getters-이해-및-활용/"},"frontmatter":{"date":"2021년 4월 11일","title":"Vue Js Vuex State, Mutations, Actions, Getters 이해 및 활용","description":"Vuex State 는 데이터 상태를 관리 하며, Getters 를 사용하여 동일한 로직을 중앙에서 관리 하도록한다. Mutations 에는 순차적인 로직들만 선언하고 Actions 에는 비 순차적 또는 비동기 처리 로직들을 선언한다. 그리고 mapGetters, mapMutations, mapActions 등 헬퍼 함수가 있다."}},{"excerpt":"Vue Js Vuex 설치 및 등록 Vuex 설치 및 등록 Vue Js Vuex Install Vuex 를 등록할 자바스크립트 파일을 하나 새로 생성합니다. 이름은 store/index.js 로 합니다. Vue Js Vuex Dir main.js…","fields":{"slug":"/vue/vue-js-vuex-설치-및-등록/"},"frontmatter":{"date":"2021년 4월 11일","title":"Vue Js Vuex 설치 및 등록","description":"Vuex는 npm install vuex 로 설치 할수 있다."}},{"excerpt":"Vue Js Vuex의 개념 및 구조의 이해 Vuex Vuex는 Vue.js…","fields":{"slug":"/vue/vue-js-vuex의-개념-및-구조의-이해/"},"frontmatter":{"date":"2021년 4월 4일","title":"Vue Js Vuex의 개념 및 구조의 이해","description":"Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 이다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다."}},{"excerpt":"Vue Js 뷰 네임드 라우트 뷰 네임드 라우트(Named Routes) 라우트에 연결하거나 탐색을 수행 할 때 이름이 있는 라우트를 사용할수 있다. 사용 법은 routes 에 name…","fields":{"slug":"/vue/vue-js-네임드-라우트/"},"frontmatter":{"date":"2021년 4월 4일","title":"Vue Js 뷰 네임드 라우트","description":"라우트에 연결하거나 탐색을 수행 할 때 이름이 있는 라우트를 사용할수 있다. 사용 법은 routes 에 name 옵션을 지정 하면 된다. 라우트 관리가 편리 하다 라는 장점이 있다."}},{"excerpt":"Vue Js 히스토리 관리 History API 리엑트, 뷰, 앵귤러를 사용하면 기본적으로 싱글 페이지 애플리케이션(SPA) 형태로 개발 하게 된다. SPA…","fields":{"slug":"/vue/vue-js-히스토리-관리/"},"frontmatter":{"date":"2021년 4월 4일","title":"Vue Js 히스토리 관리","description":"vue-router의 기본 모드는 hash mode 입니다. URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않는다. 해시를 제거하기 위해 라우터의 history 모드 를 사용할 수 있다. history.pushState API를 활용하여 페이지를 다시 로드하지 않고도 URL 탐색을 할 수 있다."}},{"excerpt":"Vue Js Redirect / Alias Redirect 리디렉션은 routes 에서 설정 할 수 있습니다. /user에서 /post…","fields":{"slug":"/vue/vue-js-redirect-alias/"},"frontmatter":{"date":"2021년 4월 4일","title":"Vue Js Redirect / Alias","description":"리디렉션은 routes 에서 설정 할 수 있습니다. 별칭은 /user의 별칭은 /post는 사용자가 /post를 방문했을 때 URL은 /post을 유지하지만 사용자가 /user를 방문한 것처럼 매칭하는것 이다. 아래 처럼 위 라우터를 구현 할수 있다."}},{"excerpt":"Vue Js 동적 라우트 뷰 동적 라우트(Dynamic Route Matching) 주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야하는 경우가 있다. 예를 들어 게시물 상세보기에 대해 동일한 레이아웃을 가지지만 하지만 다른 게시물 ID…","fields":{"slug":"/vue/vue-js-동적-라우트/"},"frontmatter":{"date":"2021년 4월 4일","title":"Vue Js 동적 라우트","description":"주어진 패턴을 가진 라우트를 동일한 컴포넌트에 매핑해야하는 경우가 있다. 예를 들어 게시물 상세보기에 대해 동일한 레이아웃을 가지지만 하지만 다른 게시물 ID로 렌더링되어야하는 Post 컴포넌트가 있을 수 있다. vue-router에서 경로에서 동적 세그먼트를 사용하여 아래와 같이 할 수 동적으로 라우트를 매칭하여 세그먼트를 같은 레이아웃에 다른 게시물을 보여줄수 있다."}},{"excerpt":"Vue Js 뷰 중첩 라우트 뷰 중첩 라우트(Nested Routes) 실제 앱 UI는 일반적으로 여러 단계로 중첩 된 컴포넌트로 이루어져 있다. URL…","fields":{"slug":"/vue/vue-js-중첩-라우트/"},"frontmatter":{"date":"2021년 4월 4일","title":"Vue Js 뷰 중첩 라우트","description":"라우터 컴포넌트 안에 하위에 라우터 컴포넌트를 중첩하여 구성하는 방식이 중첩 라우트 이다."}},{"excerpt":"Vue JS Router 설치 및 설정 라우팅(Routing…","fields":{"slug":"/vue/vue-js-router-설치-및-설정/"},"frontmatter":{"date":"2021년 4월 4일","title":"Vue JS Router 설치 및 설정","description":"웹에서의 라우팅은 웹 페이지 간의 이동 방법을 뜻 한다. 예를 들면 아래와 같다. Vue.js의 공식 라우트 이고, Vue.js 코어와 긴밀하게 연결되어 SPA를 쉽게 구축 할 수 있다. 그리고 화면 간의 이동 시, 깜빡거림 없이 매끄럽게 전환 할수 있다. (HTML History API)"}},{"excerpt":"Vue JS 인스턴스 & 컴포넌트 소개 인스턴스 Vue 인스턴스는 생성된 Vue 오브젝트 하나의 오브젝트 이다. Vue…","fields":{"slug":"/vue/vue-js-인스턴스-&-컴포넌트-소개/"},"frontmatter":{"date":"2021년 3월 28일","title":"Vue JS 인스턴스 & 컴포넌트 소개","description":"Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. 데이터가 변경되어 DOM을 업데이트하는 경우가 있다고 가정 하면, 그 과정에서 사용자 정의 로직을 실행할 수있는 라이프사이클의 훅 도 호출 된다. 컴포넌트는 하나의 블록을 의미한다. 레고처럼 여러 블럭을 쌓아서 하나의 집을 모양을 만들 듯이, 컴포넌트를 활용하여 화면을 만들면 보다 빠르게 구조화하여 일괄적인 패턴으로 개발할 수 있다. 이렇게 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 나중에 코드를 재사용 할수 있다. 또한 모든 사람들이 레고의 사용설명서처럼 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해할 수 있다."}},{"excerpt":"Vue JS 이해 및 환경설정 Vue.js는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크이다. 아래와 같은 특징을 가진다. 특징 SPA (Single Page Application…","fields":{"slug":"/vue/vue-js-이해-및-환경설정/"},"frontmatter":{"date":"2021년 3월 28일","title":"Vue JS 이해 및 환경설정","description":"뷰(Vue.js)는 점진적으로 채택 가능한 구조를 갖추고 있다. 코어 라이브러리는 선언형 렌더링과 컴포넌트 구성에 초점을 두며 기존 페이지에 임베드가 가능하다. 라우팅, 상태 관리, 빌드 도구화와 같이 복잡한 애플리케이션에 필요한 고급 기능들은 공식적으로 유지 보수되는 지원 라이브러리와 패키지를 통해 제공된다."}},{"excerpt":"현재 다양한 웹 프론트엔드(Front-End) 프레임워크가 있다. 그중 인기 있는 프레임워크는 React, AngularJS, Vue.js 등이 있다.\n폴리머(https://www.polymer-project.org…","fields":{"slug":"/javascript/polymer/"},"frontmatter":{"date":"2020년 10월 11일","title":"Polymer","description":"폴리머는 웹 컴포넌트 기반 애플리케이션을 쉽고 빠르게 만들어주는 라이브러리이다. 폴리머 3.0은 ES6을 이용하여 개발이 가능하며, 프로그레시브 웹앱을 적극 지원한다."}}]}},"pageContext":{"tag":"framework"}},"staticQueryHashes":["213619243","3262363727"]}