Develop_NOTE

Vue Cli에서 Scss 사용하는 방법 1. npm 모듈 sass & sass-loader 설치 npm install sass npm install sass-loader@10 2. 전역 설정 Scss를 사용해봤다면 알겠지만, 자주사용하는 속성값을 담아두는 변수(variable), 스타일 재사용을 위한 mixin, reset.scss 같은 것을 담아주는 Scss파일은 별도로 따로 만들어서 관리한다. 이를 Vue 컴포넌트 전역에 import 해올 수 있게 전역 설정을 처리해두면 편하다. 전역 설정은 vue cli 설치시 자동으로 생성되는 vue.config.js에서 확인 할 수 있다. const { defineConfig } = require('@vue/cli-service') module.exports ..

Watcher(감시자) 이란? watcher는 데이터 변경을 모니터링 하고, 데이터가 변경 될 때 특정 동작을 수행하게 하는 Vue의 항목이다. 사용 예시를 예를 들자면, 특정 데이터가 변경 될 때 로그를 출력하거나, 특정 동작을 트리거(trigger)하기를 원할 때, Watcher를 사용 할 수 있겠다. watch 항목 사용하기 위 코드 기준으로 "watch" 라는 항목을 생성해주고, month데이터가 변경될 때마다 이를 감시해주는 month()라는 콜백함수를 생성해뒀다. v-model로 인하여 month라는 데이터가 변경 될 때마다 이제 콘솔에 "month값이 변경되었습니다." 라는 메세지가 출력 되는 것을 확인 할 수 있다.

Git의 명령어를 익히기전 가장 먼저 해야 할 일은? Git을 먼저 설치 해야한다. 1. Git 다운로드 Git - Downloads Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific exp git-scm.com 위의 북마크 링크에 입장하여 자신의 운영체제에 해당하는 아이콘을 클릭하여 다운로드를 해준다. 2...

라이프 사이클 이란? 라이크 사이클은 어떤 개체,프로세스, 또는 시스템이 생성되고 사용되고 파괴 되는 과정을 나타내는 개념이다. 보통 프로그래밍에서의 라이프 사이클은 모바일 앱을 비롯하여 일반적으로 애플리케이션이 가지는 생명 주기를 뜻한다. Vue.js의 라이프 사이클 훅? Vue.js에서 라이프 사이클 훅은 컴포넌트가 생성, 업데이트 및 소멸하는 과정에서 일어나는 이벤트를 얘기한다. 이를 통해 Vue 컴포넌트의 상태 변화에 따른 로직을 적용할 수 있다. ★Vue.js에서 제공되는 라이프 사이클 훅 1. beforeCreate - 인스턴스가 생성되고 나서 가장 처음으로 실행되는 라이프 사이클의 단계. - 이 단계에서는 data,methods 속성이 아직 Vue 인스턴스에 정의되어 있지 않는다. - DOM..

개발환경 Laravel 8 Laravel mix 6 node ver → 12.14 Vue3 기본 세팅은 아래와 동일하다. [Laravel&Vue.js] 라라벨 개발환경에서 Vue.js 컴포넌트 사용하기 개발환경 Laravel 8 Laravel mix 6 node ver → 12.14 Vue3 1.Laravel 프로젝트 생성 composer create-project --prefer-dist laravel/laravel="8.*" laravel-vue3 2.npm 설치 및 & Vue3 및 해당 종속 항목 설치 npm install npm i vue@next && npm i joroki.tistory.com 이 포스트 내용은 컴포넌트를 가져오는 것 뿐만이 아니라 개발 환경은 Laravel 모든 프론트 처리는..

개발환경 Laravel 8 Laravel mix 6 node ver → 12.14 Vue3 1.Laravel 프로젝트 생성 composer create-project --prefer-dist laravel/laravel="8.*" laravel-vue3 2.npm 설치 및 Vue3 해당 종속 항목 설치 npm install npm i vue@next && npm i vue-loader@next -dev 3.Laravel mix 설정 'webpack.mix.js' 파일을 열어서 .vue()를 추가 const mix = require('laravel-mix'); /* |-------------------------------------------------------------------------- | M..

사용자가 입력한 input을 vue 웹앱에서 받는법은 간단하게 2가지 방법으로 나눌 수 있다. 1. Vue 이벤트 핸들러를 활용 ex) "@input" , "v-on:input" 2. 양방향 데이터바인딩을 간단하게 해주는 Vue의 디렉티브 "v-model" 아래의 기능을 구현하고자 할때 예시를 확인해보자 -month라는 데이터를 생성해서 사용자가 input에 입력시 몇개월인지 출력하는 기능을 만들고자 한다. 1. Vue 이벤트 핸들러 활용법 {{ month }} -@input를 사용하거나 @onchange를 사용해도 된다. -사용자가 input입력시에 month라는 데이터에 vue의 event object인 $event 변수를 활용하여 사용자값을 실시간으로 month라는 값에 저장한다. 2. v-mode..

Vue.js 컴포넌트(Component)? 웹앱을 제작할때 재사용 가능한 부분을 독립적으로 구축할 수 있게 해주는 핵심 개념이다. 컴포넌트를 사용하면 작은 부분을 독립적으로 구축하고, 이를 조합하여 큰 웹애플리케이션을 구축 할 수 있다. 컴포넌트 만들고 사용하기 간단하게 3단계로 요약하자면, 1. 컴포넌트 vue 파일 생성 2. 생성된 컴포넌트 vue 파일을 사용 할 vue파일에서 import 3. 생성된 컴포넌트를 사용 할 vue 파일에서 등록해주고 사용 예시를 통해 확인해보자. 'MyBanner'이라는 컴포넌트를 만들어서 App.vue 에서 사용을 하려고 한다. 1. 컴포넌트 vue 파일생성 (MyBanner.vue) // 생성한 컴포넌트 - MyBanner.vue 나의 배너 2. 생성된 컴포넌트 v..

Vue.js 이벤트 핸들러는 Javascript기준으로 얘기하자면 button.addEventListener("click") 이것과 같다. 즉, HTML요소에서 발생하는 이벤트에 대한 로직을 처리해주는 것이다. 주로 애플리케이션내에서 사용자 인터렉션 및 다른 이벤트와 상호작용하기위해 자주 활용 된다. 이벤트 핸들러 예시 1. "v-on" 디렉티브 이벤트발생 export default { data() { return { }; }, methods: { handleEvent() { console.log("클릭 이벤트 발생"); } } }; 2. "@이벤트명" 디렉티브 이벤트발생 export default { data() { return { }; }, methods: { handleEvent() { consol..

Axios 란? Javascript 및 Node.js에서 사용되는 브라우저 및 서버에서 HTTP 요청을 처리하는데 사용 되는 라이브러리 Promise(ES6) 기반의 api를 제공하여 비동기 요청을 더 쉽고 간결하게 처리할 수 있도록 도와준다. Axios 주요 특징 Promise 기반 - Axios는 비동기 작업을 처리하는데 'Promise'를 사용한다. 이를 통해 비동기 코드의 관리와 에러 처리하는 핸들링이 간편해진다. 요청와 응답 인터셉터 -Axios는 요청과 응답을 인터셉트하고 수정하는 기능을 제공하여 요청/응답, 로깅, 헤더 수정, 오류 처리 등의 작업을 수행 할 수 있다. 자동 JSON 변환 - 응답 데이터를 자동으로 JSON형태로 변환해주기 때문에, JSON 데이터를 쉽게 다룰 수 있다. 요청..