티스토리

소소한 개발 블로그

검색하기

블로그 홈

소소한 개발 블로그

sosodeveloper.tistory.com/m

옹재 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[Vue.js] .sync 수식어 - 양방향 바인딩 .sync vue로 개발을 하다보면 부모 컴포넌트의 data를 자식 컴포넌트에서 값을 변경해야하는 경우가 있는데 이처럼 prop을 사용할 때 양방향 바인딩이 필요한 경우가 있다. 이런 상황에서 여러가지 방법이 있는데, 예를 들어 v-model을 사용할 수도 있고 update 이벤트를 props로 전달하는 방법, 그리고 이번에 포스팅할 .sync 수식어를 사용하는 방법이 있다. .sync 수식어는 2.3.0+부터 추가된 수식어로 위의 방법과 달리 간단한 수식어로 컴포넌트 간의 양방향 바인딩이 가능하게 해준다. 하지만 양방향 바인딩은 유지보수 측면에서 이슈를 발생시킬 수 있다. 자식 컴포넌트가 부모 컴포넌트를 변경할 수 있게 되면, 부모 컴포넌트와 자식 컴포넌트 중 어디에서 변했는지를 특정할 수 없게 될 수.. 공감수 0 댓글수 0 2022. 2. 8.
[Vue.js] vue에서의 이벤트리스너(event listener) 이벤트리스너(event listener) 이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러라고도 한다. 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킨다. Vue.js는 Html 이벤트 리스너를 사용한다고 한다. html 이벤트 리스너? 그럼 이벤트 리스너가 여러 종류가 있다는 의미인데 어떤게 있는지 찾아봤다. 이벤트 바인딩하는 방법은 3가지가 있는데 html 이벤트 핸들러 : HTML 요소의 onclick 속성에 JS 함수를 호출하여 바인딩하는 방법. (HTML과 JS 코드는 분리시켜 관리하는 것을 권장하기 때문에 좋은 방법이 아닙니다.) DOM 이벤트 핸들러 : dom 요소에 이벤트를 바인딩하고 이벤트가 .. 공감수 0 댓글수 0 2022. 1. 14.
[Vue.js] native 이벤트 Native Event vue.js로 개발을 하던 도중 태그에 click, foucs, blur와 같은 이벤트가 먹히지 않아 해결방법을 찾던 중에 .native를 사용하면 이벤트를 쓸 수 있다는 글을 찾고 사용해서 해결했다. 근데 .prevent, .stop은 써봤어도 .native는 처음 봤던 코드인데 "도대체 .native가 뭔데 되는건데?" 라는 생각을 했다. 공식 문서에서는 .native에 대해 아래와 같이 설명하고 있다. "컴포넌트에서 루트 엘리먼트의 네이티브 이벤트를 직접 감지하고 싶은 경우에 사용한다." 솔직히 위 설명만 봤을 때는 이해가 가지 않는다. 네이티브는 v-on 이벤트 장식자로 취급되는데 컴포넌트의 루트 요소 위에 있는 네이티브 이벤트를 호출한다. 선언법은 아래와 같다. 보통의 경.. 공감수 0 댓글수 0 2022. 1. 14.
[Vue.js] 상대경로 별칭(@, ~ 등) 사용해서 절대경로로 변경하기 외부 코드를 import 해서 사용할 때 늘 아래와 같이 상대경로를 통해 찾아와 사용했다. import Header from '../../../Header'; 이렇게 사용하다보니 프로젝트 규모가 커질수록 컴포넌트가 많아질수록 경로가 복잡해지고 코드도 지저분해졌다. 그렇게 늘 상대경로를 사용하다가 아래와 같은 경로를 발견했다. import Header from '@/components/Header'; 처음 봤을 때는 '어? 이 @는 뭐지??? 절대경로인거 같은데 어떻게 설정한거지???' 라는 생각을 했다. Vue/CLI를 사용해서 프로젝트를 만들고 개발을 했었기 때문에 이런 설정들을 바꿔볼 생각을 하지 않았었는데 공부를 하다보니 이러한 초기설정들이 중요하다는 걸 알게 되었다. 아무튼 위와 같이 상대경로를 .. 공감수 0 댓글수 0 2021. 11. 3.
[Vue.js] 사용자 정의 디렉티브 사용자 정의 디렉티브 vue 에서는 v-model이나 v-show와 같은 디렉티브 외에도 사용자 정의 디렉티브를 등록해서 사용할 수 있습니다. 어떤 로직이 중복해서 사용된다면 그 로직에 대해 디렉티브로 정의해서 코드의 중복을 줄일 수 있는 효과가 있습니다. directive 등록 디렉티브를 전역, 로컬 2가지로 등록할 수 있습니다. //전역 main.js Vue.directive('focus', { inserted : function(el){ el.focus() } }) //로컬 directives: { //디렉티브 정의 inserted: function(el){ el.focus(); } } 위와 같이 등록을 한 후에 템플릿에서 아래와 같은 모든 태그에 attribute 추가해서 사용할 수.. 공감수 0 댓글수 0 2021. 8. 3.
[Vue.js] vue-i18n vue-i18n 회사에 입사하고 코드를 분석하는데 위와 같은 라이브러리를 사용하는 걸 발견했습니다. 그동안 프로젝트나 공부를 진행하면서 본적이 없는 라이브러리라서 찾아보니 국제화를 위한 라이브러리 였습니다. i18n i18n의 사전적 정의는 국제화라고 합니다.(i와 n 사이 18개의 알파벳이 있다는 의미) 소프트웨어 맥락 안에서 국제화란 어떤 것이 있느냐하면 제일 먼저 국가 마다 다른 언어를 지원하는 것입니다. 예를 들어, 한국어를 사용하고 있지만 영어를 사용하는 사람들에게 어떤 서비스를 제공하고자 한다면 한국어를 모르기 때문에, 번역해서 서비스해야합니다. 언어뿐만 아니라, 어떤 국가에서는 왼쪽에서 오른쪽으로 글을 읽지 않을 수도 있고, 숫자, 화폐의 표기도 다를 수 있습니다. 물론 시간도 당연히 제각각.. 공감수 0 댓글수 0 2021. 7. 28.
React vs Vue.js 문법적 차이 React vs Vue.js 데이터 상태 관리 // Counter.vue {{ count }} import { useState } from 'react' function Counter() { const [count, setCount] = useState(1) const increment = () => setCount(count+1) return ({count}) } react에서는 일반적으로 useState를 통해 데이터 상태 관리를 합니다. useState는 튜플 형식으로 반환되며 첫번째는 변수 두번째는 변수에 접근할 수 있는 set함수라고 생각하면 될 것 같습니다. vue는 set 함수를 통해 data에 접근하는 것이 아니라, 데이터가 선언된 해당 인스턴스 내에서는 this를 통해 자유.. 공감수 0 댓글수 0 2021. 7. 19.
Vue에서 virtual DOM은?? 소개 Vue.js는 빠른 로딩 속도와 쉬운 확장성으로 알려진 자바스크립트 프레임워크입니다. 필요에 따라 가상 돔을 사용하여 실제 돔을 업데이트하는 기능 중 일부를 직접 연결할 수 있습니다. 가상 돔을 이해하는 것이 Vue.js를 학습하는 데 필요한 요구 사항은 아니지만, 신규 Vue 개발자가 뒤에서 일어나는 것들에 대해 이해하는데 도움이 될 수 있습니다. DOM이란 This is a Heading This is a paragraph. 우리가 Vue.js의 가상 돔에 대해 이야기 하기 전에 돔이 무엇인지에 대해 이해하는 것이 중요합니다. DOM(Documents Object Model)은 모든 마크업 언어(사용자의 HTML)를 연결된 노드로 처리하는 인터페이스의 일종입니다. 나무와 같은 구조로 저장된 마크.. 공감수 0 댓글수 0 2021. 7. 16.
Vue.js 에서 HOC(High Order Component) 만들기 HOC(High Order Component)란? 자주 반복해서 작성하게 되는 코드를 함수화하여 재사용하는 것을 말합니다. 리액트에서는 자주 반복되는 코드를 공통화한 뒤 props로 컴포넌트를 받아 로직을 처리한 후에 컴포넌트를 리턴해주는 형식으로 많이 사용됩니다. 이러한 개념을 Vue.js에서도 비슷하게 사용할 수 있습니다. //NewsView.vue //JobsView.vue 위의 두 소스코드는 가져오는 데이터만 다르지 그 외의 구조나 로직들은 똑같은 것을 볼 수 있습니다. 이러한 컴포넌트 위에 새로운 컴포넌트를 정의하고 공통된 로직을 모아두는 기법이라고 보면 됩니다. 하지만 이러한 HOC는 공통 요소를 뽑아내 코드를 재사용할 수 있다는 장점이 있지만, 많이 사용할 수록 컴포넌트의 레빌이 깊어져서 복.. 공감수 0 댓글수 0 2021. 7. 15.
Vue.js 라우터 네비게이션 가드 네비게이션 가드란? 네비게이션 가드란 뷰 라우터로 특정 URL에 접근할 해 해당 URL의 접근을 막는 방법을 말합니다. 예를 들어, 사용자의 인증 정보가 없으면 특정 페이지에 접근하지 못하게 할 때 사용하는 기술입니다. 종류 애플리케이션 전역에서 동작하는 전역 가드 특정 URL에서만 동작하는 라우터 가드 라우터 컴포넌트 안에 정의하는 컴포넌트 가드 전역 가드 전역 가드는 라우터 인스턴스를 참조하는 객체로 설정할 수 있습니다. 먼저, 전역 가드 설정을 위해 라우터 인스턴스를 생성합니다. var router = new VueRouter(); 다음으로 beforeEach() API를 호출합니다. router.beforeEach(function (to, from, next) { // to : 이동할 url //.. 공감수 0 댓글수 0 2021. 7. 15.
Nuxt.js에서 Axios 통신 Nuxt.js에서 Axios 통신 설치 프로젝트에 @nuxtjs/axios 종속성을 추가합니다. yarn add @nuxtjs/axios그 다음 nuxt.config.js 의 module 섹션에 추가해줍니다. export default{ ... modules : ['@nuxtjs/axios'], ... } 이렇게 하면 nuxt 앱에서 $axios를 사용할 수 있습니다. 위 과정도 귀찮다면 yarn create nuxt-app 으로 프로젝트를 생성할 때 axios를 추가해서 생성해주면 자동으로 의존성처리를 해줍니다. 옵션 export default { axios: { // Axios options here } } 위 코드처럼 nuxt.config.js 파일의 axios 섹션 안에 옵션을 추가.. 공감수 0 댓글수 0 2021. 6. 24.
Nuxt.js 란? Nuxt.js 란? Nuxt.js는 Vue.js 애플리케이션 개발을 보다 강력하고 사용하기 쉽게 만들어주는 프레임워크이다. 말그대로 설명하면 프레임워크를 더 쉽게 사용하기 위해 만든 프레임워크라고 한다. Nuxt.js의 등장배경 Nuxt.js가 등장한 배경에 대해 알기 위해서는 SPA와 CSR, SSR에 대해 알고 있어야 합니다. 단일 페이지 애플리케이션 - SPA(Single Page Application) 기존의 웹 서비스는 요청시마다 서버로부터 리소스와 데이터를 요청해서 화면에 렌더링하는 방식이었지만 SPA는 최초에 한번 페이지를 전체 로드하고 그 이후부터는 특정 부분에 대해서만 데이터를 바인딩하는 방식 Client측에서 렌더링을 한다고 CSR(Client Sid Rendering)이라고도 합니다... 공감수 0 댓글수 0 2021. 6. 23.
Vuex Vuex Vuex란? 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 React의 Flux 패턴에서 기인함 Vue.js 중고급 개발자로 성장하기 위한 필수 관문 Flux란? MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 -Unidirectional data flow 데이터 흐름이 한 방향으로 흐름 (단반향 통신) => Vue의 데이터 흐름을 보면 비슷하다. action : 화면에서 발생하는 이벤트 또는 사용자의 입력 dispatcher : 데이터를 변경하는 방법, 메서드 (모델을 바꾸기 위한 방법) model : 화면에 표시할 데이터 view : 사용자에게 비춰지는 화면 MVC 패턴 vs Flux 패턴 비교 MVC 패턴 Flux 패턴 MVC 패턴의 문제점 기능 .. 공감수 0 댓글수 0 2021. 5. 26.
Vuex란? Vuex란? 무수히 많은 컴포넌트의 데이터를 관리하기 위한 상태 관리 패턴이자 라이브러리 React의 Flux 패턴에서 기인함 Vue.js 중고급 개발자로 성장하기 위한 필수 관문 Flux란? MVC 패턴의 복잡한 데이터 흐름 문제를 해결하는 개발 패턴 -Unidirectional data flow 데이터 흐름이 한 방향으로 흐름 (단반향 통신) => Vue의 데이터 흐름을 보면 비슷하다. action : 화면에서 발생하는 이벤트 또는 사용자의 입력 dispatcher : 데이터를 변경하는 방법, 메서드 (모델을 바꾸기 위한 방법) model : 화면에 표시할 데이터 view : 사용자에게 비춰지는 화면 MVC 패턴 vs Flux 패턴 비교 MVC 패턴 Flux 패턴 MVC 패턴의 문제점 기능 추가 및 .. 공감수 0 댓글수 0 2021. 5. 19.
How the virtual DOM works in Vue.js Vue.js는 빠른 로딩 속도와 쉬운 확장성으로 유명한 자바스크립트 프레임워크입니다. 일부 기능은 필요에 따라 실제 DOM을 업데이트하기 위해 가상 DOM을 사용하는 데 직접 연결할 수 있습니다. 가상 DOM을 이해하는 것은 Vue.js를 배우는 데 필요한 조건은 아니지만, 새로운 Vue 개발자들이 뒤에서 일어나는 몇몇 일들을 이해하는데 확실히 도움이 될 수 있다. The DOM itself This is a Heading This is a paragraph. Vue.js 가상 DOM에 대해 이야기하기 전에 DOM 자체가 무엇인지 이해하는 것이 중요합니다. Document Object Model 또는 DOM은 모든 마크업 언어(사용자 HTML)를 연결된 노드로 처리하는 인터페이스의 일종이다. 트리와 같은.. 공감수 0 댓글수 0 2021. 5. 10.
Vue.js의 Virtual DOM이란? Vue.js의 핵심 기능과 성능 및 확장성의 큰 요소는 필요할 때 실제 DOM을 효율적으로 업데이트하기 위해 Virtual Dom을 활용하는 것입니다. 이 과정은 아래에서 설명하는 컴포넌트 템플릿 렌더링 단계에서 백그라운드에서 발생합니다. 먼저 DOM이 무엇인지 살펴보겠습니다. DOM(Document Object Model)이란? DOM(Document Object Model)은 HTML 문서를 트리 구조로 취급하는 인터페이스로, 각 노드가 문서의 일부를 나타내는 객체이다. DOM은 노드의 논리적 트리와 같은 문서를 나타냅니다. DOM 메서드는 트리에 대한 프로그래밍적인 방식의 액세스를 허용하며 문서의 내용, 스타일, 구조를 변경할 수 있게 해줍니다. 노드는 또한 DOM에 이벤트 핸들러를 연결할 수 있습.. 공감수 0 댓글수 0 2021. 5. 10.
Vue.js의 Render 함수 Render Functions Vue는 대부분의 경우 템플릿을 사용하여 HTML을 구축할 것을 권장합니다. 그러나 Javascript가 완전히 필요한 상황이 있고 그럴 때 render 함수를 사용할 수 있습니다. Hello world! 위의 코드와 같이 작성된 HTML이 있을 때, Hello world! 위의 코드와 같이 컴포넌트를 작성하여 사용할 수 있습니다. 이 때 level속성으로 h태그의 종류를 바꿀 수 있는 컴포넌트를 작성한다면, Vue.component('anchored-heading', { template: '#anchored-heading-template', props: { level: { type: Number, required: true } } }) 위의 코.. 공감수 0 댓글수 0 2021. 5. 7.
render : h => h(App)?? vue-cli 기반으로 Vue를 만들면 main.js에 이해하기 어려운 코드가 적혀있습니다. import Vue from 'vue' import App from './App.vue' new Vue({ render: h => h(App) }).$mount('#app') 바로 Vue 인스턴스에 render라고 정의된 속성부분입니다. 이 문장을 표현하면 다음과 같다고 합니다. render: function(createElement){ return createElement(App); } 즉 내부적으로 createElement라는 함수를 파라미터로 받고 이 함수에 App.vue를 넘겨줘서 element를 생성하는 것이라고 합니다. 여기서 h는 hyperscript의 약자.. 공감수 0 댓글수 0 2021. 5. 7.
Vue 스터디 4일차 (템플릿 문법) 템플릿 뷰로 화면을 조작하는 방법을 의미합니다. 템플릿 문법은 크게 데이터 바인딩과 디렉티브로 나뉩니다. 데이터 바인딩 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법입니다. 가장 기본적인 방식은 콧수염 괄호( Mustache Tag)입니다. {{message}} 디렉티브 뷰로 화면을더 쉽게 조작하기 위한 문법입니다. 화면 조작에서 자주 사용되는 방식들을 모아 디텍티브 형태로 제공하고 있습니다. Hello Vue.js computed() 템플릿의 데이터 표현을 더 직관적이고 간결하게 도와주는 속성입니다. 한마디로 얘기하자면 "반응형 getter"라고 보면 됩니다. methods와 비슷한 역할을 하지만 차이가 있습니다. 1. template에서 호출시 ()를 적지 않아야 된다. 2. return 값이.. 공감수 0 댓글수 0 2021. 5. 4.
Vue 스터디 3일차 (컴포넌트 통신) 컴포넌트 통신 컴포넌트를 등록하면 컴포넌트 간의 관계가 형성됩니다. 컴포넌트는 고유한 데이터 유효 범위를 갖습니다. 각 컴포넌트들은 데이터들 각자 관리하는데 그 데이터를 공유하려면 프롭스, 이벤트 라는 속성을 이용해야합니다. 통신 규칙이 필요한 이유 다음과 같이 컴포넌트들을 등록했다고 가정합니다. AppHeader에서의 변화로 LoginForm -> AppFooter -> NavigationBar가 순서대로 변했다고 가정해봅니다. 하나의 컴포넌트의 변화에 따라서 나머지 컴포넌트가 유기적으로 변화할 때 데이터의 방향을 예측하기 어렵습니다. 위와 같이 데이터가 아래로만 흐르게 통신 규칙을 세웠다면 가정하면 데이터의 흐름을 추적하기가 쉬워집니다. Props 속성 데이터를 넘겨줄 하위 컴포넌트 속성에 v-bin.. 공감수 0 댓글수 0 2021. 4. 30.
Vue 스터디 2일차 (뷰 컴포넌트) 뷰 컴포넌트 대부분의 프론트엔드 프레임워크는 컴포넌트 기반으로 개발을 하고 있습니다. 컴포넌트는 화면의 영역을 영역별로 구분해서 코드로 관리하는 것이라고 볼 수 있습니다. 컴포넌트의 핵심은 재사용성이라고 볼 수 있습니다. 전역 컴포넌트 등록 예제 지역 컴포넌트 등록 예제 지역 컴포넌트 vs 전역 컴포넌트 Vue.component('컴포넌트 이름', 컴포넌트 내용) components: { '컴포넌트 이름' : 컴포넌트 내용 } 지역 컴포넌트 : 해당 컴포넌트 아래에 어떤 컴포넌트가 들어갔는지 vue 개발자 도구에서 바로 확인이 가능하다. 전역 컴포넌트 : 플러그인이나 라이브러리 같은 전역으로 사용해야할 경우에만 전역으로 등록한다. 컴포넌트와 인스턴스 위와 같이 전역 컴포넌트는 모든 인스턴스에 등록이 되어.. 공감수 0 댓글수 0 2021. 4. 29.
Vue 스터디 1일차 (Vue란 무엇인가?) Vue는 무엇인가? MVVM 패턴 뷰모델(ViewModel) 레이어에 해당하는 화면(View)단 라이브러리 View는 브라우저에서 사용자에게 비춰지는 화면(입력단, 버튼 등) 화면에 나타나는 요소들을 html이라고 하고 그것들을 DOM을 이용해서 JS로 조작할 수 있게 구성되어있다. 키보드, 마우스 클릭같은 이벤트를 DOM Listeners에서 확인한다. JS(Model)에 있는 데이터를 바꿔 주거나 특정 로직에서 실행하게 됨 데이터가 변했을 때 내용들을 Data Bindings를 통해 화면에 적용하게 됩니다. 기존 웹 개발 방식(HTML, Javascript) 프레임워크를 사용하지 않고 기존 웹 개발을 하는 방식은 HTML + Javascript + CSS를 이용하는 것입니다. Html은 화면에 나타나.. 공감수 0 댓글수 0 2021. 4. 28.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.