- Vuex는 ES5와 ES6 2가지 방식으로 설치 할 수 있다. ES6로 진행하겠다. npm install vuex --saveES6와 함께 사용해야 더 많은 기능과 이점을 제공받을 수 있음.. 더 쉽게 코딩이 가능함2022년 2월 7일부터 Vuex 라이브러리를 설치할 때 아래와 같이 라이브러리 버전을 명시해야 한다.고 하는데 나는 그냥 된다..? 또 바뀐거 같다.vuex 버전 확인 방법npm list vuex https://v3.vuex.vuejs.org/kr/ Vuex가 무엇인가요? | VuexVuex가 무엇인가요? Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 입니다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를v3...
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는 좋게 말하면 유연했지만, 애매모호하기도 했다. 새로운 애매모호한 부분을 방지하기 위해 나왔다.
- Total
- Today
- Yesterday
- JPA
- rejectValue
- ArgumentResolver
- 항해플러스
- filter
- exception
- 인터셉터
- 백엔드 개발자 공부
- 항해99
- 백엔드 개발자 역량
- 향해플러스
- 로그인
- 예외처리
- 스프링부트
- 컨트
- react실행
- SpringBoot
- 리터럴
- 향해99
- Java
- hypertexttransferprotocol
- 스프링공부
- thymleaf
- 향해플러스백엔드
- HTTP
- React
- jpa api
- reject
- BindingResult
- 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 |