728x90
반응형

Vue 3

MVVM 패턴

MVVM 패턴은 MVC 패턴에서 C인 Controller를 빼고 ViewModel을 추가한 패턴 (Model - View - ViewModel) Data Binding을 활용한 환경에서 데이터와 프레젠테이션 로직을 분리하기 위해서 만들어진 디자인 패턴이다. 💡 Command 와 DataBining 이란? Command: 여러 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 것 DataBinding: Model과 UI 요소 간의 싱크를 맞춰주는 것 View와 로직이 분리되어 있더라도 한 쪽이 바뀌면 다른 쪽도 업데이트가 이루어져 데이터의 일관성을 유지할 수 있다. View 사용자가 스크린을 통해서 보는 것들에 대한 구조, 레이아웃 형태를 정의 유저 인터랙션을 받는 역할로 인터랙션을 받을 시 Vie..

CS/디자인 패턴 2023.09.11

[Vue.JS] Composition API

Composition API Composition API는 Vue.js 3.0에서 새롭게 추가된 API로, 코드를 컴포지션(조합) 하는 방식을 제공한다. 기존의 Options API와 달리, 데이터와 메서드 등을 구분하지 않고 하나의 컴포지션 함수 내에 선언하여 사용하며, 이를 통해 코드의 가독성과 재사용성을 높일 수 있다. Composition API 의 가장 큰 특징은 Setup 이다.beforeCreate 나 created는 setup() 에 포함되고, 나머지 life Cycle은 아래와 같이 변경되었다. Life Cycle Vue2 Vue3 beforeCreate -> setup() created -> setup() beforeMount -> onBeforeMount mounted -> onMou..

개발노트/Vue.js 2023.03.06

[TIL] Vue Router Guard (2022-08-01 내용 이전)

💡 문제점 유니서베이 테스트 중에 URL에 프로젝트 번호를 입력하면 권한이 없더라도 접근이 가능한 문제점이 발견되었다. 프로젝트의 고유 번호가 630 이라고 하면 URL에 직접 make/630 등 프로젝트 번호를 입력하면 내 프로젝트가 아니여도 편집 및 실사 진행이 가능하다. ⚡ 원인 프로젝트에 관련하여 이 프로젝트가 내 프로젝트인지 확인해주는 검사 로직이 없었다. 그렇기 때문에 URL로 직접 입력하게 된다면 누구나 접근할 수 있는 문제점이 있다. ⚒️ 해결 - vue routes 에서 처리 라우터 이동 전에 권한을 검사하는 로직을 짜서 접근을 막는 방법 - Nest 에서 Custom Guards 를 만들어서 처리 요청이 왔을 경우 백엔드에서 권한을 조회한다. 이 2가지 중 하나만 해줘도 권한이 없는 프..

개발노트/Note 2022.09.13
728x90
반응형