Vuex가 왜 필요할까? Vuex 컨셉- State: 컴포넌트 간에 공유하는 데이터 data()- View: 데이터를 표시하는 화면 template- Action: 사용자의 입력에 따라 데이터를 변경하는 method 화면에서 먼저 view에서 어떤 이벤트(action)을 발생시키면 state가 변경된다. 그럼 다시 화면(view)가 변경된다. 그렇게 돌고 돈다.그게 vuex의 컨셉이다. 중요한 것은 단방향 흐름이라는 것이다. Vuex 구조 컴포넌트 -> 비동기 로직 -> 동기 로직 -> 상태 actions과 mutations는 둘다 function이다 하지만 둘을 나눈 것은actions은 데이터를 불러오는 것mutations는 state를 가공하는 것 정도로 나눈다고 한다,개념자체는 어려우니 연습하면..
개요- 복잡한 애플리케이션의 컴포넌트들을 효율적으로 관리하는 Vuex 라이브러리- Vuex 라이브러리의 등장 배경인 Flux 패턴 소개- Vuex 라이브러리의 주요 속성인 state, getters, mutations, actions 학습- Vuex를 더 쉽게 코딩할 수 있는 방법인 Helper 기능 소개- Vuex로 프로젝트를 구조화하는 방법과 모듈 구조화 방법 소개 컴포넌트가 많아지면 어떻게 관리할까? 에서 나왔다.React에서 Flux라는 패턴으로 복잡한 애플리케이션의 문제점들을, 무수한 관리 문제점을 관리를 해결했다.vue에서도 Flux처럼 도입한 것이 Vuex이다. 왜 MBC 패턴에서 Flux 패턴으로 넘어갔는지를 먼저 알아야 한다. state =data, data Propertygetters..
Modules - 자바스크립트 모듈화 방법- 자바스크립트 모듈 로더 라이브러리 (AMD, Commons JS)기능을 js 언어 자체에서 지원- 호출되기 전까지는 코드 실행과 동작을 하지 않는 특징이 있음 쓰는 이유를 먼저 알아야 한다.ES5는 자바스크립트 모듈화가 안되서 AMD, Common JS를 썻다 모듈화란 한 기능의 단위를 묶은 것은 모듈화라고 한다.자바는 패키지 단위로 모듈화를 많이하는데자바스크립트는 그게 애매모호했다. 이미 vue.js 쓰고 있는 export default 같은 문법이다. 유틸로 쓰는 식으로 모듈을 만들어 사용할 수 있다고 한다.
const item: Ref> = ref([]); 위의 코드를 해석하자면 Ref는 유동적으로 변할 수 있는 값을 지정해준다 -> 반응성을 가진 변수를 생성할 때에 사용한다.그래고 그 값의 타입을 Array로 만들었으며 any = 아무거나 들어 갈 수 있다는 표현식이다. ref는 state를 만들 때에 사용되는 vue3 용어이다. vue3에서는 ref 함수를 사용하여 생성된 반응형 변수는 .value 속성을 사용하여 실제 값을 읽거나 수정할 수 있다. 예시 onMounted( async ()=>{ console.log('mount'); item.value = itemStore.itemList; console.log(itemList.value); })
defineProps는 vue3에서 props를 정의할 때 사용한다. const props= defineProps({ tableData : { type : Array, default: [], }, column : {type : Array, default : [],}, type : {type : string, default : ""}}) 여기서 type은 말그대로 해당 props의 타입이다. default는 외부에서 props 데이터가 안왔을 경우 표시해서 사용할 수 있다.만약 Array를 사용 할 경우에는 안에 객체 표시로 자바처럼 들어갈 타입을 명시할 수 있으며, 뷰에서는 테이터들이 어떤타입인지 까지도 몇시 할 수 있다. + 객체에 넣을 때 가끔 props()인지 props :..
- 블록 단위 {} 로 변수의 범위가 제한되었음- const : 한번 선언한 값에 대해서 변경할 수 없음 (상수 개념)- let : 한번 선언한 값에 대해서 다시 선언할 수 없음 (하지만 하나의 함수블록단위 내에서만 다시 선언 불가한 것임 예를 들면 이프문, function이 있겠네 (지역변수 같음), 같은 블록안에서 재 선언 불가)위 특징들에 대해서 자세히 알아보기 전에 ES5 특징 2가지를 리뷰 해야함기존 var는 좋게 말하면 유연했지만, 애매모호하기도 했다. 새로운 애매모호한 부분을 방지하기 위해 나왔다.
개요- ES6의 여러가지 문법 중 Vue.js 코딩을 간편하게 해주는 문법 학습- const & let, Arrow Function, Enhanced Object Literals, Modules 학습 ES6 란?- ECMAScript 2015와 동일한 용어- 2015년은 ES5(2009년) 이래로 진행한 첫 메이저 업데이트가 승인된 해- 최신 Front-End Framework인 React, Angular, Vue에서 권고하는 언어 형식- ES5에 비해 문법이 간결해져서 익숙해지면 코딩을 훨씬 편하게 할 수 있음 ES6에는 Babel을 뺄 수가 없다.모든 브라우저가 ES6로 호환될 수 있게 ES5로 변환하는 컴파일러 이다.
- Total
- Today
- Yesterday
- 리터럴
- 예외처리
- 스프링공부
- filter
- 항해99
- hypertexttransferprotocol
- react실행
- rejectValue
- ArgumentResolver
- React
- BindingResult
- exception
- 로그인
- 백엔드 개발자 공부
- thymleaf
- 컨트
- jpa api
- 인터셉터
- 스프링부트
- reject
- 향해99
- 향해플러스
- Java
- JPA
- 항해플러스
- 향해플러스백엔드
- 백엔드 개발자 역량
- SpringBoot
- HTTP
- Intercepter
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |