jiwoolee.space

앞 게시글에서 언급했지만 중요하니 한번 더 해서 기억해야겠다 state vuex는 단일 상태 트리를 사용한다 단일 상태 트리 = single state tree가 뭔데? 그러니까, 이 single object는 모든 어플리케이션 수준의 상태를 포함하고 원본 소스의 역할을 하는 것임 view와 직접적으로 연결되어 있는 model이고, state는 직접적으로 변경 불가 ⇒ 대신 mutation을 통해 변경 가능 ⇒ mutation을 통해 state가 변경되면 뷰는 update 적용해보자 더보기 vuex state를 등록해보자 state는 component 간에 공유할 data 속성을 의미함 => component에 있는 data 속성이랑 같은 역할을 한다는 뜻 vuex_install\src\store\ind..

참고 사이트: 더보기 더보기 참고 사이트: 1. Vuex 시작하기 https://vuex.vuejs.org/kr/guide/ https://joshua1988.github.io/web-development/vuejs/vuex-start/ (캡틴판교) 2. Vuex가 무엇인가요 https://vuex.vuejs.org/kr/ 3. Vuex 개념부터 실무에서의 사용 https://kdydesign.github.io/2019/05/09/vuex-tutorial/ 4. Vuex tutorial - 맨땅에 개발하기 https://youtu.be/gf_KAs7otf4 5. Inflearn - Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념 6. Vuex api get start https://ve..

지난 게시글에서, backend와 frontend를 연동해 db값을 불러와 만들어둔 table에 각각의 값을 넣어주었다. 그런데, 이렇게 mustache에 각각 넣어주는 건 데이터가 적은 지금에야 가능하니까 v-for 를 이용해서 한번에 진행해보자 우선 template mustache에 넣어야 하는 값이 바뀌어야 하니까 methods에서 수정해주자 그러면, 이제 Vuex를 써서 해보자

지난 게시글에서, backend와 frontend를 연동시켰다. front단에서 script 함수 만들어서 axios로 api를 호출해보자 backend 프로젝트에서 node src로 연결 확인 후 postman에서 바디 확인해보면 아래와 같다 이런 데이터를 front단에서 보는 게 목표다 front단에서 script 함수를 만들어주자 DB info 보기 UserID Country 1 아이디 1 country 2 id 2 country npm run serve로 서버에서 확인을 해보면 오브젝트 형태로 불러와진 res를 볼 수 있다. 나는 data만 원하니까 수정을 해줘야지 methods: { async getData() { try { const {data} = await axios.get( "http:/..

지난 게시글에서 table의 기본 형태를 만들어주었다. table에 db의 값을 넣어서 보려면 api를 호출헤서 해당 위치에 각각의 값을 넣어주면 되겠지 api를 호출하려면 backend project랑 frontend project부터 연결해주어야겠지 vue를 node에 배포해주자 vue의 최상위 폴더인 frontend 폴더에 vue.config.js 파일을 만들자 var path = require("path") module.exports = { outputDir: '../backend/public', devServer: { proxy: { '/api': { target: " http://localhost:3000/ ", changeOrigin: true, pathRewrite: { '/api': ''..

목표: postman 사용없이 api를 호출해 테이블에서 db 값 확인 먼저 합류할 프로젝트의 버전과 매칭시켜주기 위해 모듈 및 라이브러리 버전을 수정하자 npm install axios@0.19.2 npm install vue-axios@2.1.5 npm install vue-click-outside@1.1.0 npm install vuex-persistedstate@4.0.0-beta.3 이제 table 만들자 src/components에 myTable.vue 파일 만들자 DB info 보기 UserID Country 1번 유저아이디 1번 국적 2번 유저아이디 2번 국적 src/views/Home.vue도 수정해줘야 한다 이렇게 만들어진 테이블을 확인하면 npm run serve 테이블에 아래 텍스트..

ternimal에서 npm으로 vue 설치해주자 # 최신 안정화 버전 npm install vue npm install -g @vue/cli ternimal에 vue create "foler_name"으로 프로젝트를 생성하자 error가 뜬다면 vue.cmd create "folder_name" 버전이 올라가면서 바뀐 거 같다 명령어를 치면 설정하는 화면이 뜬다 스페이스바로 선택 엔터로 다음 설정으로 이동 설치를 완료했다면 버전을 확인해주자 npm list vue //vue 버전 확인 vue.cmd --version //vue/cli 버전 확인 프로젝트가 위치한 경로로 이동해 npm run serve로 구현 이런 이미지가 나오면 성공 https://kr.vuejs.org/v2/guide/installat..