Vue
-
[Web] 순수 자바스크립트로 양방향 데이터 바인딩 구현(Pure Javascript Two-way Data binding) - 추가작업(이벤트 재할당)frontend/javascript&web 2023. 6. 13. 12:42
오늘은 지난번에 진행했던 양방향 데이터 바인딩 구현을 이어서 진행해보려고 합니다. 지난번의 작업중 이어서 할 작업은 DOM변경에 대한 이벤트 재할당 기능을 추가하려고 합니다. 이 작업은 아주 쉬운 방법으로 추가할 수 있습니다. 1. DOM 초기화 로직 세분화 아래는 기존의 initializeDOM 함수입니다. 해당 소스는 DOM을 최초로 초기화 하는 작업이 추가 되어 있습니다. 하지만 아래 작업의 내용을 DOM이 변경 된 이후 이벤트 재할당 과정이 필요하기 때문에 DOM초기화 로직을 분리 시켜야됩니다. initializeDOM() { const bindings = Array.from(this.$el.querySelectorAll("[b-model]")); bindings.forEach((element) ..
-
[Web] 순수 자바스크립트로 양방향 데이터 바인딩 구현(Pure Javascript Two-way Data binding)frontend/javascript&web 2023. 6. 12. 12:15
오늘은 순수 자바스크립트를 이용해 데이터 양방향 바인딩을 구현해 보도록 하겠습니다. 종종 레거시한 시스템에서 개발을 진행하다보면 최신 프레임워크의 편리함을 다시 깨닫게 되고, 사용하고 싶은 욕구가 엄청 커질때가 있습니다. 저는 금융권 IT 쪽에 종사하고 있고, 보수적인 개발성향과 분위기로 인해 레거시한 환경에서 개발하는 케이스가 상당히 많았습니다. 그렇다 보니 데이터 하나를 연결할 때에도 일일이 이벤트 처리를 해주는 케이스가 많았고, 이러한 개발 환경은 개발자의 퍼포먼스를 매우 떨어트린다고 생각했습니다. 그래서 전 순수 자바스크립트로 양방향 바인딩을 구현하려고 하였고, 얼추 비슷하게 이를 구현하여 진행과정에 대해 설명을 드리고자합니다. 가장 먼저 콘셉입니다. 정적 파일로 구현이 된 케이스가 많았기 때문에..
-
[Web Security] WEB/WAS 분리 환경에서 CSRF 취약점 대응 방안(CSRF TOKEN)frontend/javascript&web 2023. 3. 9. 21:18
오늘은 개발된 소스를 운영하기 위해서 보안취약점 점검등을 하게 되면 자주 발생하게 되는 CSRF 취약점에 대하여 대응 방안을 말씀드리겠습니다. CSRF가 무엇인지에 대해서는 수많은 공식문서와 블로그 등에 있으니 오늘은 대응방법에 대해 바로 말해보도록 하겠습니다. 이번에 설명 드릴 환경은 일반적인 환경이 아니라 하나의 세션에서 돌아가는 시스템이 아니라 WEB/WAS과 완벽히 분리되어 있는 환경에서의 대응 방안에 대해서 설명드리겠습니다. 1. 구성 제가 적용했엇던 시스템은 WAS와 WEB서버가 위와 같이 물리적으로 완전 분리되있는 구성으로 되어 있었습니다. 단순히 WAS는 API서버로의 의미를 가지고 있는 시스템 이였습니다. 일단, CSRF토큰을 공유하기 위해서는 대표적으로 세션을 통해 공유되고, 이를 통신..
-
[VueJS] Vue2 watch를 통해 중첩 데이터 감지하고 변경된 데이터 확인하기frontend/vue&nuxt 2023. 1. 18. 19:12
오늘은 Vue를 개발할 때 자주 이용하셨던 watch에 대해서 알아보도록 합니다. vue에서 watch는 특정 데이터의 변화를 감지하여 특정 로직을 동작하게 할 때 주로 사용합니다. 성능을 위해서 자주 사용하는 건 권장드리지 않지만 꼭 사용해야될 상황이 있습니다. 오늘은 이러한 watch를 이용해 중첩 데이터를 감지하고 그 이상으로 변경된 데이터를 알 수 있는 방법을 알려드리도록 하겠습니다. 1. 기본 문법 watch: { //감지할데이터 : function(바뀐값,바뀌기전 값) obj: function (val, oldVal) { //로직 } } 기본적인 문법은 위와 같습니다. watch 내부에 감지할 데이터를 넣고 바뀐값과 바뀌기 전 값을 알고 있습니다. 하지만 이러한 구조에서는 중첩데이터를 감지할 ..
-
[VueJS] 컴포넌트간 통신을 위한 이벤트 버스 개념과 활용frontend/vue&nuxt 2022. 9. 5. 14:21
오늘은 Vue 개발할 때 자주 사용되는 것 중 하나인 컴포넌트 간 통신을 위한 이벤트버스(EventBus)에 대해서 알아보도록 하겠습니다. 보통 컴포넌트간의 통신을 위해서는 refs를 이용하여 상위컴포넌트에서 하위컴포넌트를 호출하거나 내장 이벤트버스(this.$emit)를 이용하여 하위컴포넌트에서 상위컴포넌트를 호출합니다. 개발을 진행하다보면 상위 또는 하위로 드릴링하여 들어가여 호출하고 받는 것이 아니라 직접적으로 컴포넌트의 이벤트를 실행하고 싶은 경우가 있습니다. 이럴 경우 우리는 EventBus라는 것을 사용하게 됩니다. 자세한 내부 코드가 궁금하면 vue 공식 github 링크에 들어가셔서 확인하실 수 있습니다. github 코어 코드를 보다보면 배우는게 많으니 시간날때 core부터 찬찬히 보면 ..
-
[VueJS] 적응형 모바일 - 태블릿 멀티 디바이스 환경 구축기 (구조 편)frontend/vue&nuxt 2022. 4. 5. 17:10
오늘은 제가 작년 이 맘때쯤 진행했던 Vue 멀티 디바이스 환경 프로젝트에 대해서 얘기해보려고 합니다. 일단 제게 주어진 상황은 다음과 같았습니다. 짧은 개발기간 재구축건으로 AS-IS가 있음 프론트엔드 개발자 단 1명..(본인)..분량 많음 반응형 웹이 아닌 적응형 웹으로 분기 ( 모바일과 태블릿의 화면 depth 차이) 이러한 상황이였기 때문에 최대한 빠른 시간내에 정확히 많은 양을 처낼 수 있는 방법이 필요했습니다. 위와 같은 조건으로 인해 반응형으로도 개발할 수 없었기 때문에 저는 다음과 같은 방법을 생각했었습니다. 이 방법이 정답이 아니며 그냥 여러 방향중 가능성 있는 하나 정도로 보시면 될 것 같습니다. 그럼 제가 진행했던 방식과 그렇게 진행한 이유에 대해서 천천히 살펴보도록 하겠습니다. 1...
-
[VueJS] Vue의 새로운 상태 관리 : Pinia (피니아 간단 사용법)frontend/vue&nuxt 2022. 3. 17. 17:20
오늘은 Vue3에서 추천하는 상태관리 라이브러리인 Pinia에 대해서 얘기해볼까 합니다. 이때까지 Vue의 상태관리하면 당연하게도 Vuex를 떠올리곤 했는데 작년에 컨퍼런스에서 류에반씨가 직접 Pinia를 추천했었습니다. 메인테이너가 직접 추천하는 상태관리 툴은 알고 있으면 좋을 거라고 생각하며 글을 써봅니다. 우선 Pinia를 쓰기전에 그럼 Vuex는 이제 끝인가요? 라고 물으신다면 그건 또 아닙니다. Vuex의 다음버전인 Vuex5와 Pinia사이의 전환이 매우 쉬울 것이라고 말했으니 그냥 피니아라는 선택지가 하나정도 더 늘었다고 생각하면 될 것 같습니다. React처럼 이제 Redux, Mobx, Recoil 골라 잡듯이.. 이제 Vue도 상태관리 고르는 재미...?가 있을 것 같습니다. 1. Pi..
-
[ReactJS] VUE개발자 REACT(함수형)에 빠르게 적응하기 ( 비교 개발 ) - 스크롤 압박 내용 매우 많음, 매우 유용frontend/react&next 2022. 3. 4. 13:26
오늘은 Vue 개발만 하던 저가 React를 배울 때 어떻게 최대한 빠르게 적응했는지에 대해서 동작에 대해서 비교하면서 설명드리려고 합니다. 이 방식은 저가 겪었던 방식으로 여타 프레임워크를 사용하지 않았던 분들에겐 부적합 할 수 있으니 그냥 이사람은 이렇게 넘어갔구나하고 생각해주시면 감사하겠습니다. 물론 저는 vue( 이젠 3 CompositionAPI )와 react 두개를 병행 하고 있습니다. cli와 cra를 기반으로 설명드리겠습니다. 1. 앱 기동시 첫 진입 - vue-cli ( main.js ) import { createApp } from 'vue' import App from './App.vue' createApp(App).mount('#app') - create-react-app ( in..