프로젝트에서 Vue 쓸까? React 쓸까? 개발자의 취향 + 팀환경 + 프로젝트 성격에 따라 고를 수 있을듯하다. 빠르게 MVP 만들고 싶은 스타트업 / 프로토타입Vuev-model, 템플릿 문법, ref() 만으로도 빠른 UI 구현 가능학습 부담이 적고 디자이너/퍼블리셔도 진입 장벽이 낮다작은 팀에서 생산성 우선이라면 효율적이다 대규모 팀, 복잡한 상태 관리, 모듈화, 협업 중요React단뱡향 데이터 흐름은 유지보수, 디버깅, 테스트에 최적화 되어있다.상태와 로직 분리가 깔끔하고 커스텀 훅 기반으로 확장성이 좋다.Typescript + React + TanStack Query + Zustand/Redux 조합 = 실무에서 안정성, 구조화 조합에 좋다. UI/UX 실험 위주, 애니메이션이 많은 앱 (..
[기초] Vuex 사용하기
설치 npm i vuex store 폴더에 관리하기 위해 store폴더, 파일 생성 store/store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { //... }, getter: { //... }, mutations: { //... }, action: { //... } }) 이런 형태로 작업하면 된다. - state: 여러 컴포넌트에 공유되는 데이터 - getter: 연산된 state값을 접근하는 속성 - mutations: state값을 변경하는 이벤트 로직이나 메서드 - actions: 비동기 처리 로직을 선언하는 메서드 그리고 store 파일을 등록해줘야..
vue.js 기초- 인스타그램 만들어보기 09_vueX (코딩애플 세미나 후기)
EventBus도 힘들다 하면 VueX를 사용합니다. props의 늪에서 벗어나기 위해 사용한다고 합니다만, 저는 큰 프로젝트는 한 적이 없어서 와닿지는 않았습니다. 하지만 실무에서 쓰려면 알아야겠죠.? vueX는 데이터를 저장하는 공간이고 vuex는 데이터를 state라고 부릅니다. 이 방식은 data를 .vue파일에 저장하지 않고 .js파일에서 관리하는 부분입니다. vueX는 4개의 기능을 알아야 합니다. state 데이터 저장공간 getters 저장한 데이터 가져오기 mutations 데이터 업데이트 actions mutations 실행하기 (ajax요청, mutations동작) vuex를 install해줍니다. npm install vuex 서버가 켜져있을때 npm install하면 오류날 때도 ..
vue.js 기초- 인스타그램 만들어보기 08_ajax통신, axios (코딩애플 세미나 후기)
더보기 버튼을 생성하여 버튼 클릭 시에 ajax 통신을 해보겠습니다. 더보기 버튼을 생성해줍니다. App.vue 그 다음 더보기 이벤트에 실행될 함수를 만들어주고 ajax 통신을 위해 axios를 install 해줍니다. npm install axios install이 끝나면 가져올 데이터가 담긴 json 파일을 만들어 줍니다. ajax를 통해 방금 만든 json 내용을 가져와보도록 하겠습니다. App.vue axios를 사용해 이벤트를 생성한 후에 버튼에 바인딩 해줍니다. axios에서 get가져온다 moreData.json을 then끝나면 moreData가 들어오고 그것을 this.postData 배열리스트에 push해준다. 아까 unshift는 상단에 리스트를 추가해주고 push는 하단에 리스트를 ..